Feature: Passwort vergessen (Anfrage)
Diese Funktion ermöglicht es Nutzern, die ihr Passwort vergessen haben, einen sicheren Wiederherstellungs-Link per E-Mail anzufordern.
🛠 Technische Umsetzung
- Komponente:
ForgotPasswordModal.vue - Typ: Wiederverwendbare Modal-Komponente, die über ein
v-modelgesteuert wird. - Logik: - Die Komponente kann mit einer
initialEmail(vorausgefüllt aus dem Login-Feld) initialisiert werden.- Beim Absenden wird eine
POST-Anfrage an/api/auth/forgot-passwordgesendet.
- Beim Absenden wird eine
- Event-Kommunikation: Die Modal-Komponente nutzt
emits(success,error,warn), um die übergeordnete Seite (z.B. Login) über den Status zu informieren, damit dort die globale SnackBar eingeblendet werden kann.
🛡️ Schwachstellen & Vorbeugung
| Schwachstelle | Vorbeugung |
|---|---|
| XSS (Cross-Site Scripting) | Bevor die E-Mail-Adresse an die API gesendet wird, erfolgt eine Bereinigung durch DOMPurify. Wenn manipulierte Zeichen erkannt werden, wird die Anfrage blockiert. |
| User Enumeration | (Backend-Empfehlung) Die Anwendung sollte idealerweise immer eine Erfolgsmeldung anzeigen, unabhängig davon, ob die E-Mail existiert, um das Ausspähen von Nutzerkonten zu verhindern. |
| Spam / Mail-Flooding | Durch den isLoading Status wird der Button während der Anfrage deaktiviert, um Mehrfachabsendungen zu verhindern. |
🔒 Datenschutz
- Datenminimierung: Es wird ausschließlich die E-Mail-Adresse abgefragt.
- Transparenz: Der Nutzer wird darüber informiert, dass er einen Link erhält, falls das Konto existiert.
- Sichere Übertragung: Die Kommunikation zwischen Frontend und Backend erfolgt über HTTPS, um das Abfangen der E-Mail-Adresse im Netzwerk zu verhindern.
💡 UX & UI Details
- Backdrop-Blur: Die Verwendung von
backdrop-blur-smauf dem Hintergrund-Overlay lenkt den Fokus des Nutzers voll auf die Modal-Interaktion. - Transitions: Eine sanfte
fade-Transition sorgt für ein modernes und flüssiges Interface-Gefühl beim Öffnen und Schließen.