Skip to content

Fwd: Login website mockup #30

@tickbot

Description

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

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