← SitemapWF-29 · Log inPopdance wireframes · low-fidelity · numbered markers match the notes at the bottom
URL/login
AudienceEveryone (customers, teachers, admin staff)
TemplateStatic form, modal variant on gated actions
PriorityLaunch (P1)
UK 🇬🇧 ▾Log inSign up

Welcome back 1

Log in to manage your bookings, messages and teacher dashboard.

Continue with Google

Continue with Apple

Continue with Facebook 3

or log in with email

you@example.co.uk

Error: "Enter a valid email address."

******** Show

Error: "Email or password is not right. Try again or reset your password."

Keep me logged in on this device
Log in 4

or

Email me a magic link instead 5

We will send a one-time link to your email. No password needed. It works for 15 minutes.


New to Popdance? Create an account

Are you a dance teacher? Find out about teaching on Popdance 6

Magic link sent (state) 7

Check your inbox. We sent a log in link to sam@example.co.uk. It expires in 15 minutes. Resend (available in 30 seconds) · Use a different email

Routing after log in 8

RoleLands on
Customer, no return URL24-customer-bookings-list.html
Teacher44-teacher-dashboard.html
Teacher mid-onboarding42-teacher-signup-wizard.html (resume)
Admin60-admin-dashboard.html
Any role with a return URLThe page they came from, e.g. 20-booking-request.html

Notes

  1. Heading. One login for all roles; the role is read from the account, so there is no customer or teacher toggle here. noindex, canonical to /login. Analytics: login_viewed with referrer and return URL.
  2. Context banner. Shown only when a gated action sent the user here (send request, save teacher, message, checkout). Copy adapts to the action. The return URL and any draft are preserved through log in.
  3. Social sign in. Google, Apple and Facebook via OAuth. If the social email matches an existing account, link after confirming by email. Apple is required for iOS apps later. If the provider returns no email, ask for one before continuing.
  4. Email and password. Email format validated on blur. Password has a show/hide toggle. Generic error on failure so we do not reveal whether the email exists. Rate limit: 5 failed attempts per 15 minutes per email and IP, then a CAPTCHA and a temporary lock message "Too many attempts. Try again in 15 minutes or reset your password." Remember-me extends the session from 24 hours to 30 days. Submit button label "Log in", shows spinner while loading.
  5. Magic link. Sends a single-use signed link, valid 15 minutes, to the email entered. Same response whether or not the account exists. Resend limited to once per 30 seconds. Opening the link on another device asks for confirmation.
  6. Sign up and teacher links. Links to 30-register.html and the teacher landing page 40-teacher-landing.html. Analytics: signup_link_clicked.
  7. Magic link sent state. Replaces the form after submit. Includes the masked email, expiry, resend timer and "Use a different email".
  8. Role routing. After success redirect by role, honouring a safe same-site return URL first. Suspended or unverified accounts see specific messages: "Your account is paused, contact support" or "Please confirm your email first" with a resend button. Admin accounts require two-step verification before the dashboard.

Mobile

Card goes full width with 16px side gutters. Social buttons stack first. Inputs use the correct keyboard types (email) and autofill attributes. Support for password managers and Face ID passkeys later (P3).

States

Default, field errors, wrong password, locked, loading, magic link sent, expired link ("This link has expired. Send a new one"), already logged in (redirect to the role home), social error ("We could not sign you in with Google. Try again or use your email"). Modal variant: the same form appears in a dialog over the page for gated actions such as saving a teacher. Password reset is on 31-forgot-password.html.