Fwd: Login website mockup

[tickbot]

Mail Metadata

From: "Alexander Sept | byqurity.dev GmbH" alexander.sept@byqurity.dev To: as@temp.byqurity.dev Date: 2025-11-11T13:36:18.000Z
Message-ID: 45126D91-0DF4-415D-87D8-CB2D9EE13EF3@byqurity.dev

Mobile Login: Implementierung gemäß Mockup (siehe Anhang)

Kurz: Umsetzung der mobilen Login-Seite basierend auf dem beigefügten Mockup (von Dieter Boris). Ziel: Pixelnahes UI, funktionale Form, Accessibility und Tests im bestehenden Frontend-Repo.

Aufgaben

• Mockup in Repo ablegen (assets/mockups/login-mobile.png)
• Neue/aktualisierte Route/Komponente für mobile Login erstellen (Branch: feat/login-mobile-mockup)
• UI implementieren (nutze bestehendes Design-System / Komponenten)
  • Logo/Branding, Begrüßungstext
  • Eingabefelder: E-Mail/Benutzername, Passwort (Show/Hide)
  • "Angemeldet bleiben" Checkbox
  • "Passwort vergessen?" Link
  • Primärer Login-Button (Ladezustand) und sekundärer Link (Registrieren)
  • Fehlermeldungen / Validierungszustände
• Form-Validierung (client-seitig)
  • Pflichtfelder
  • E-Mail-Formatprüfung
  • Passwort-Minimum (z. B. >= 8 Zeichen) — falls backend-Anforderung abweicht, anpassen
• Fehler/State-Handling
  • Ungültige Zugangsdaten → sichtbare Fehlermeldung
  • Netzwerkfehler → generische Fehlermeldung
• Accessibility
  • Labels for inputs, aria-Attribute, sichtbare Fokus-Stile, Kontrast ≥ 4.5:1
• Tests
  • Komponententests (Snapshot / Verhalten)
  • E2E-Tests: Happy Path + Invalid Credentials + Netzwerkfehler
• PR erstellen mit:
  • Screenshots (vorher/nachher / mobile viewport 360px)
  • Link zum Mockup
  • Kurzbeschreibung der Änderungen

Akzeptanzkriterien

• UI entspricht dem Mockup auf Mobile (prüfbar via Screenshot-Vergleich bei 360px Breite)
• Alle interaktiven Elemente funktionieren:
  • Eingaben annehmbar und validiert
  • Passwort ein-/ausblenden funktioniert
  • "Passwort vergessen?" navigiert zur vorgesehenen Route
  • Login-Button sendet korrekte Payload an API, zeigt Ladezustand und verarbeitet Antwort
• Fehlerfälle angezeigt:
  • Ungültige Daten → spezifische Fehlermeldung
  • Netzwerkfehler → generische Fehlermeldung
• Accessibility-Checks bestanden:
  • Inputs haben Labels, Fokus ist sichtbar, Screenreader-Order sinnvoll
• CI grünt: alle neuen Tests laufen erfolgreich
• PR enthält:
  • Branch feat/login-mobile-mockup
  • Screenshots + Link zum Mockup
  • Kurze Anweisung zum Testen (z. B. Test-User-Credentials)

Hinweis: Alle visuellen Details entnehmt bitte dem angehängten Mockup-Bild. Bei Unklarheiten kurz Rückfrage stellen.

Anhänge:

Bild: Screenshot 2025-10-14 at 12.24.17.png (image/png)