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-10T16:35:23.000Z
Message-ID: 9BED8E8F-6F78-457D-B613-1AEF069F025A@byqurity.dev

Implementierung: Mobile Login-Seite — Mockup umsetzen

Kurze Zusammenfassung

• Ziel: Mobile-Login-Seite gemäß beigefügtem Mockup (siehe Anhang) erstellen und in bestehendes Projekt integrieren.
• Mockup: login-mobile-mockup.png (Bitte das originale Bild an das Issue hängen, falls noch nicht vorhanden.)

Akzeptanzkriterien (must-have)

• Visuelles Layout entspricht Mockup bei 320–768px (Abstände, Farben, Schriftgrößen, Logo, Hintergrund).
• Enthaltene UI-Komponenten sind implementiert:
  • Logo / Header
  • E-Mail / Benutzername Input
  • Passwort Input mit "Passwort anzeigen/ausblenden"
  • "Angemeldet bleiben" Checkbox (falls im Mockup)
  • "Passwort vergessen?" Link
  • Primärer Login-Button (disabled, wenn Formular ungültig)
  • Eventuelle sekundäre Aktionen (z. B. Registrieren) wie im Mockup
• Form-Validierung (Client-seitig):
  • E-Mail-Format validieren
  • Passwort-Required (und Minimum, falls im Mockup angegeben)
  • Fehlerzustände visuell darstellen (Fehlermeldung + roter Input-Rahmen)
• Barrierefreiheit:
  • Semantische HTML-Elemente und Labels / aria-Attribute
  • Tastatur-Navigation und Fokuszustände
  • Farbkontrast >= AA
• Responsives Verhalten: Darstellung prüfbar bei typischen mobilen Viewports (iPhone SE, iPhone 12/13, Android)
• Code-Qualität:
  • Komponenten modular (z. B. LoginForm, InputField, Button)
  • Unit- oder E2E-Tests für Kern-Workflows (erfolgreiches Login, Validierungsfehler)
  • Storybook-Story oder Design-Preview (falls im Projekt genutzt)
• Design-Assets / Tokens:
  • Farben, Abstände und Schriftgrößen aus Designtokens bzw. CSS-Variablen nutzen
  • Assets (Logo, Icons) aus /assets/mockups/ oder PR anhängen

Aufgaben / Umsetzungsschritte

• Mockup-Anhang prüfen / hochladen (login-mobile-mockup.png)
• UI-Komponenten entwickeln (reaktiv / framework-konform)
• Form-Validation und Interaktionen implementieren
• Accessibility-Checks & responsives Testing
• Tests schreiben (Unit / E2E)
• PR erstellen + Screenshots / Storybook-Link anhängen

Zusätzliche Hinweise

• Falls Farben/Abstände nicht eindeutig sind: bitte Shortlist mit 2 Varianten an Design zur Abstimmung stellen.
• Falls Social-Login-Buttons im Mockup enthalten sind, spezifizieren, welche Provider (z. B. Google, Apple).

Anhänge

• Bitte das originale Mockup-Bild an dieses Issue anhängen (oder Link zum Figma/Zeplin/Sketch).

Anhänge:

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