Skip to content

Fwd: Login website mockup #32

@tickbot

Description

@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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions