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:29:29.000Z
Message-ID: 2DDE1745-0040-47F6-A9DE-0DA2D3CB4F19@byqurity.dev

Titel: Implementiere mobile Login-Seite (Mockup angehängt)

Kurzbeschreibung

• Bitte die mobile Login-Seite gemäß dem angehängten Mockup umsetzen. Alle relevanten UI-Komponenten sind im Bild dargestellt — bitte dort genaue Abstände, Texte und Reihenfolge entnehmen.

Scope / zu implementierende Komponenten

• Logo/Branding
• E-Mail / Benutzername Feld
• Passwort-Feld mit Sichtbarkeit umschalten
• "Angemeldet bleiben" / Remember-Me Checkbox (falls im Mockup)
• Login-Button (primär)
• "Passwort vergessen?" Link
• Eventuell Social-Login-Buttons (sofern im Mockup)
• Fehlermeldungen / Validierungszustände
• Responsives Layout für mobile Viewports (Primär 360–480px)
• Accessibility (Labels, aria-*), i18n-ready Texte

Aufgaben (ToDo)

• Komponente/Seite anlegen (z. B. src/components/LoginMobile oder pages/login)
• Markup & Styling exakt nach Mockup (mobile breakpoint)
• Client-seitige Validierung (required, korrektes E-Mail-Format)
• Sichtbarkeitstoggle für Passwort implementieren
• Fehler- und Success-Zustände visualisieren
• Accessibility: Form-Labels, aria-live für Fehler, Tastaturfokus
• Unit-Tests für Form-Logik
• E2E-Test: erfolgreicher Login und fehlgeschlagener Login
• Assets/Texte aus Mockup übernehmen; i18n-Keys anlegen

Akzeptanzkriterien

• UI entspricht dem Mockup bei mobilen Viewports (360–480px) — Layout, Abstände und Texte stimmen überein
• E-Mail- und Passwort-Felder vorhanden und korrekt gelabelt (screenreader-lesbar)
• Passwort-Toggle funktioniert und ändert nur die Sichtbarkeit
• Validierungsfehler werden inline angezeigt und von screenreadern angekündigt (aria-live)
• "Passwort vergessen?" Link vorhanden und navigiert zur vorgesehenen Route
• Login-Button löst Login-Request aus; bei 200-OK Weiterleitung zur Zielseite (E2E-Test)
• Bei Fehler (z. B. 401) wird entsprechende Fehlermeldung angezeigt
• Unit- und E2E-Tests laufen grün in CI

Anmerkungen

• Mockup ist der Referenzpunkt — bitte Texte, Abstände und Icon-Platzierung genau aus dem Bild übernehmen.
• Bei Unklarheiten (fehlende Komponenten/Icons/Texte) kurz hier im Issue klären bevor implementiert wird.

Anhänge:

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