Auth
Anmelden, Registrieren, Code bestätigen und Passwort zurücksetzen: vier Blöcke mit zod-Validierung, Passwort-Manager-Attributen und fokussierter Fehlerübersicht. Die Demo zeigt das Split-Layout und alle Formulare; die Zugangsdaten stehen im Anmeldeabschnitt.
Anmelden
Split-Layout mit Navy-Band, Anbieter-Buttons und Passkey. Demo-Zugang: lena@beispiel.de · Passwort: dienstplan. Ein falsches Passwort zeigt Ursache und Abhilfe in der fokussierten Fehlerübersicht.
Registrieren
Die Passwort-Stärke erscheint als Text und Balken. „Stark · 4 von 4 Kriterien“ bleibt auch ohne Farbe verständlich und wird per Live-Region angekündigt.
Konto erstellen
Ein Konto für Dienstplan, Team und Übergaben.
Schon ein Konto? Anmelden
Code bestätigen
Sechs Ziffernfelder mit autocomplete=one-time-code. Der Resend-Button bleibt während des Countdowns deaktiviert und nennt die Restzeit; Demo-Code: 123456.
Code bestätigen
Wir haben einen 6-stelligen Code an lena@beispiel.de gesendet.
Erneut senden in 30 s
Passwort zurücksetzen
Zwei Schritte aus demselben Block: erst den Link anfordern, dann das neue Passwort setzen. Beide Passwortfelder tragen autocomplete=new-password; eine Abweichung landet als Feldfehler in der Übersicht.
Passwort vergessen
Wir senden dir einen Link zum Zurücksetzen an deine E-Mail-Adresse.
Neues Passwort
Wähle ein neues Passwort mit mindestens acht Zeichen.
Verwendung
Die Blöcke kapseln Formular, Validierung und Fehlerführung. Inhalte und Aktionen kommen von außen; es gibt kein Routing und keinen Datenzugriff im Block.
import { AuthShell, SignInForm } from '@lukasfend/ui/blocks/auth';
<AuthShell>
<SignInForm
onSubmit={signIn}
providers={[{ id: 'sso', label: 'Beispiel GmbH SSO' }]}
forgotHref="/passwort-vergessen"
signUpHref="/registrieren"
/>
</AuthShell>Gerätebreiten
Dasselbe Beispiel im Umschalter der Toolbar: Desktop, Tablet und Mobil. Unterhalb von 1024 px zeigt der Auth-Block nur das Formular, das Navy-Band bleibt ausgeblendet.