Skip to content

Fwd: Login website mockup #33

@tickbot

Description

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

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