Fwd: Login website mockup

[tickbot]

Mail Metadata

From: "Alexander Sept | byqurity.dev GmbH" alexander.sept@byqurity.dev To: as@temp.byqurity.dev Date: 2025-10-20T15:32:14.000Z
Message-ID: 53382808-7086-4905-B95A-CF64A5154B1C@byqurity.dev

Mobile Login: Umsetzung basierend auf Mockup

Kurz: Implementiere die mobile Login-Seite gemäß beigefügtem Mockup. Alle visuellen Details (Abstände, Farben, Icons) aus dem Bild übernehmen. Dieses Issue fasst umsetzbare Tasks und akkurate Akzeptanzkriterien zusammen.

Aufgaben

• UI: Mobile-Layout (responsive) gemäß Mockup umsetzen
• Felder: E-Mail/Username, Passwort, Passwort ein-/ausblenden (eye-icon)
• Aktionen: „Einloggen“-Button, „Passwort vergessen“-Link
• Option: „Angemeldet bleiben“ / Remember-Me (wenn im Mockup vorhanden)
• Social-Login-Buttons (Google / Apple / Facebook) — nur wenn im Mockup gezeigt
• Zustände: Disabled/Enabled, Loading (Spinner), Fehlerzustand
• Validierung: Clientseitige Validierung & Anzeige von Inline-Fehlermeldungen
• Accessibility: aria-labels, fokusbare Elemente, Tastatur-Handling
• Tests: Unit/Integration / End-to-End Test(s) für kritische Flows
• Assets: Icons, Logo, Farben, Schriftarten aus Mockup einbinden

Akzeptanzkriterien (prüfbar)

• Sichtbar: Layout entspricht Mockup (Logo, Felder, Buttons, Links und Social-Buttons falls vorhanden)
• Felder:
  • E-Mail/Username- und Passwort-Feld existieren und sind per Tastatur erreichbar
  • Passwort kann per Icon ein-/ausgeblendet werden
• Validierung & Verhalten:
  • „Einloggen“-Button ist deaktiviert solange Pflichtfelder ungültig/leer sind
  • Bei ungültiger E-Mail wird Inline-Fehlermeldung angezeigt
  • Bei Klick auf „Einloggen“ zeigt die App Loading-Indikator bis Antwort
  • Bei Auth-Fehler wird eine verständliche Fehlermeldung angezeigt (z. B. „Ungültige Zugangsdaten“)
  • Bei Erfolg Weiterleitung zur Zielseite (z. B. /dashboard) erfolgt
• Accessibility:
  • Alle interaktiven Elemente haben passende aria-labels/roles
  • Kontrastverhältnisse erfüllen WCAG AA für Text/Buttons
• Responsiveness:
  • Seite ist auf gängigen Mobile-Breiten (min. 360–428px) ohne Layoutbruch nutzbar
• Tests:
  • E2E-Test deckt erfolgreich Login-Happy-Path und ein Fehler-Szenario ab

Benötigte Infos / Assets

• Original-Mockup (angehängtes Bild) — falls nicht vorhanden: bitte nachreichen
• Farbwerte (Hex), Schriftart/-gewicht, Icon-Sets (SVG/PNG)
• Social-Login-Konfigurationen (Client IDs) falls Social-Buttons implementiert werden sollen
• Gewünschte Redirect-URL nach Login

Hinweis: Falls das Mockup unklare Komponenten enthält, bitte konkretisieren (z. B. „Remember Me“ vorhanden? Social-Logins?).

Anhänge:

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