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:43:02.000Z
Message-ID: 4A9E1865-89CE-460C-938E-C2469013D6A0@byqurity.dev

Mobile Login: Implementierung anhand Mockup

Kurz: Bitte die mobile Login-Seite basierend auf dem angehängten Mockup umsetzen. Alle visuellen Details (Abstände, Farben, Texte, Icons) dem Bild entnehmen.

Aufgabe

• Umsetzung einer mobil-optimierten Login-Seite/Komponente (React/Angular/Vue — Projektkonvention beachten).
• Komponenten-Vorschlag:
  • LoginPage / pages/Login
  • LoginForm / components/LoginForm
  • Input / components/FormInput
  • PasswordInput (mit Show/Hide)
  • Optional: SocialLoginButtons (falls im Mockup vorhanden)
• Assets: Verwendung der im Mockup gezeigten Icons/Logos (ordner: assets/ui/login/).

Akzeptanzkriterien (checklist)

• Layout entspricht Mockup (Mobilansicht, Portrait, Breite ~360px). Abstände und Typographie visuell übereinstimmend.
• Folgende UI-Elemente vorhanden und funktional:
  • Logo/Header
  • E-Mail/Benutzername-Feld (richtige mobile Keyboard-Einstellung)
  • Passwort-Feld mit Show/Hide
  • „Remember me“ (Checkbox/Switch) falls angezeigt
  • „Passwort vergessen“-Link
  • Primärer Login-Button (disabled bei leerem Formular)
  • Optional: Social-Login-Buttons (falls im Mockup)
• Validierung:
  • Client-seitige Validierung (leere Felder, E-Mail-Format)
  • Fehlerzustände im UI sichtbar (rote Hinweise wie im Mockup)
• Accessibility:
  • ARIA-Labels für Form-Felder und Buttons
  • Touch-Ziele >= 44px, ausreichende Farbkontraste
• Integration:
  • Submit führt zu bestehender Auth-API (oder mocked endpoint), Fehler-/Erfolgshandling implementiert
• Tests / QA:
  • Unit-Test(s) für Form-Validation
  • E2E-Szenario: erfolgreicher Login, fehlerhafte Anmeldedaten
  • Screenshot/visual regression: Referenz-Screenshot der mobilen Ansicht ins Repo (tests/visual/login.png)

Hinweise / Offen

• Mockup ist angehängt — alle fehlenden Details dem Bild entnehmen. Falls etwas unklar ist (z. B. exakte Farben oder Texte), kurz Rückfrage an Designer/Dieter Boris.
• Bitte Implementierungs-PR mit:
  • kurzen Description
  • Verweis auf dieses Issue
  • Screenshots der mobilen Implementierung

Priorität: hoch (Mobile-Login). Estimated: 2–3 PT (je nach Framework-Konvention).

Anhänge:

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