S4 — Přihlášení
Účel obrazovky
Přihlášení s biometrií jako primární volbou (když už uživatel na zařízení dříve přihlášen byl), dále OAuth a fallback na email/heslo. Obrazovka může být standalone (např. z P9 — Účet) nebo late login ze sloučeného checkoutu (P5 — Objednávka & Platba). Relace platí 30 dní dle PRD-02 — toggle „Zapamatovat si mě" se nepoužívá; alternativou k dlouhé relaci je biometrické odemčení.
Content Priority
- Biometrie (primární) — velké tlačítko typu „Přihlásit se pomocí Face ID" / „…Touch ID" / „…otiskem" (Android) — zobrazí se jen pokud uživatel na daném zařízení už dříve úspěšně přihlášen byl a biometrie je dostupná. Pod ním OAuth v pořadí dle platformy (viz níže), full-width tlačítka s ikonou + text.
- iOS: po biometrii (pokud je) Apple → Google → Facebook, poté oddělovač a email.
- Android: po biometrii (pokud je) Google → Facebook → Email — bez Apple Sign In.
- Separator — „Nebo se přihlaste emailem" (zobrazí se nad emailovým blokem; na Androidu bez Apple OAuth může text odpovídat kontextu) Divider
- Email pole — text input s email keyboard Text Input
- Heslo pole — password input (skrytý text) Password Input
- „Zapomenuté heslo" — text link Ghost/Text Button
- CTA „Přihlásit se" — primary button (email + heslo) Primary Button
- „Nemáte účet? Registrovat se" — secondary CTA, odkaz na S5 — Registrace Ghost/Text Button
- Close / Back — pro late login modal, zavření bez přihlášení Back Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap biometrické tlačítko | LocalAuthentication / BiometricPrompt | Úspěch → obnovení relace / token, zavření modalu, návrat do kontextu |
| Tap na OAuth tlačítko | Otevření provider auth (in-app browser / Safari / Custom Tabs) | Po úspěchu: redirect back, profil, zavření modalu |
| Tap „Přihlásit se" (email) | Validace email + heslo, API login | Úspěch → zavření, návrat do checkout / profil |
| Tap „Zapomenuté heslo" | Odeslání reset linku na email | Toast „Odkaz odeslán na váš email" |
| Tap „Registrovat se" | Navigace na registraci | S5 — Registrace |
| OAuth zrušeno uživatelem | Zavření auth okna | Návrat na S4, žádná změna |
| Back / Close | Zavření bez přihlášení | Návrat na P5 — Objednávka & Platba (late login) nebo P9 — Účet |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Default (první zařízení) | Uživatel ještě nemá uloženou relaci pro biometrii | OAuth + email blok podle platformy; bez velkého biometrického CTA |
| Default (opakované) | Dříve přihlášen, biometrie povolena | Velké biometrické tlačítko nahoře, pod ním OAuth a email |
| OAuth loading | Čeká na redirect od providera | Spinner overlay nebo loading na OAuth tlačítku |
| Login error | Špatné heslo / neplatný email | Inline error „Nesprávné přihlašovací údaje" |
| Account locked | Příliš mnoho pokusů | Error „Účet byl dočasně uzamčen, zkuste za 15 minut" |
| Forgot password sent | Reset link odeslán | Success toast, možnost znovu zkusit přihlášení |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| OAuth zrušeno uživatelem | Tiše návrat na S4, žádný error (běžné chování) |
| Email není v systému | „Účet s tímto emailem neexistuje — zaregistrujte se" + link na S5 |
| Příliš mnoho pokusů | Cooldown 15 min, zobrazení zbývajícího času |
| Biometrie selže / není nastavena | Skrýt nebo disabled biometrické CTA; uživatel použije OAuth nebo email |
| Offline během OAuth | „Pro přihlášení je třeba připojení k internetu" |
Mobilní patterny a odlišení od webu
Co přebíráme
- OAuth + email/heslo jako fallback
- Zapomenuté heslo flow
- Odkaz na registraci
Co děláme jinak
- Biometrie jako první volba na známém zařízení — jedno výrazné tlačítko (ne až jako post-login prompt)
- Pořadí providerů podle OS — Apple Sign In jen na iOS; na Androidu Google před Facebookem
- Žádný „Zapamatovat si mě" — délku relace řídí PRD-02 (30 dní); biometrie řeší rychlý návrat
- Native OAuth flow — ASWebAuthenticationSession (iOS) / Chrome Custom Tabs (Android)
- Keyboard type — email klávesnice pro email pole
Aplikované patterny
- iOS:
LAContext/ Face ID / Touch ID,ASAuthorizationAppleIDButton,ASWebAuthenticationSessionpro OAuth - Android:
BiometricPrompt,Credential Managerpro OAuth, Custom Tabs pro redirect
API Data
POST/account/loginPOST/account/login-by-providerPOST/account/forgotten-password-preparePOST/account/forgotten-password-finish| Operace | Endpoint | Trigger | Poznámka |
|---|---|---|---|
| Email + heslo login | POST /account/login | Tap „Přihlásit se" | Vrací JWT token |
| OAuth login | POST /account/login-by-provider | Tap OAuth tlačítko | Podporuje Apple, Google, Facebook |
| Zapomenuté heslo (příprava) | POST /account/forgotten-password-prepare | Tap „Zapomenuté heslo" | Odešle reset email |
| Zapomenuté heslo (dokončení) | POST /account/forgotten-password-finish | Deep link z emailu | Nastavení nového hesla |
CoreAPI poznatek
Autentizace je JWT per session (POST /token/create pro anonymní session, POST /account/login pro přihlášení). OAuth provider se předává jako parametr v login-by-provider. Po přihlášení se JWT token používá ve všech dalších API voláních.
Reference — Aktuální web
SCR-WEB-34OAuth — Google, Facebook, Seznam, email/heslo formReference — CineStar benchmark
SCR-CS-13OAuth tlačítka, email/heslo, CineStar Club, tab barInspirace z CineStar
CineStar má OAuth prominently nahoře a CineStar Club (věrnostní program) jako součást přihlášení. Colosseum F1 přidá věrnostní program — podobný pattern.