Benutzeranleitung / Hilfe – 2FA TOTP

1. Übersicht der Benutzeroberfläche

Die Webapp besteht aus zwei Hauptbereichen:

• Sidebar (links): Enthält eine Liste von Links
• Hauptinhalt (rechts): Hier befindet sich das TOTP-Tool mit allen Funktionen sowie der Theme-Switcher.

Theme-Switcher

Oben rechts im Hauptinhalt können Sie das visuelle Theme der Anwendung ändern:

• System-Modus: Passt sich automatisch an die Systemeinstellungen an (Hell/Dunkel).
• Light-Modus: Helles Theme mit weißen Hintergründen.
• Dark-Modus: Dunkles Theme für bessere Lesbarkeit bei schlechten Lichtverhältnissen.
• Wine-Modus: Rötliches Theme mit Wein-inspirierten Farben.
• Green-Modus: Grünliches Theme für eine frische Optik.

Bedienung: Klicken Sie auf einen farbigen Kreis, um das Theme zu wechseln. Ihre Auswahl wird gespeichert und beim nächsten Laden wiederhergestellt.

2. TOTP-Tool Funktionen

Das TOTP-Tool ist das Herzstück der Anwendung und ermöglicht die Verwaltung von Benutzern sowie die Generierung von TOTP-Codes. Hier sind die Funktionen und Schaltflächen im Detail:

2.1 Benutzerverwaltung

• Dropdown-Menü: Wählen Sie einen bestehenden Benutzer aus oder lassen Sie es leer, um einen neuen Benutzer zu erstellen.
• + Neu: Erstellt einen neuen Benutzer mit einer eindeutigen ID und füllt die Felder mit Standardwerten (z. B. „Neuer Benutzer“).
• 🗑 Löschen: Löscht den aktuell ausgewählten Benutzer nach Bestätigung. Achtung: Diese Aktion ist unwiderruflich!
• ⬇ Export: Speichert die gesamte Benutzerdatenbank als JSON-Datei (z. B. totp_users_2025-03-12.json).
• ⬆ Import: Importiert Benutzer aus einer JSON-Datei. Neue Benutzer werden hinzugefügt, bestehende bleiben erhalten.

2.2 Secret Key Verwaltung

• Feld Secret Key: Zeigt den geheimen Schlüssel des aktuellen Benutzers an (Base32-kodiert). Dieser ist zunächst schreibgeschützt.
• 🔑 Key generieren: Erstellt einen neuen, sicheren Secret Key für den aktuellen Benutzer. Dieser wird automatisch im Feld angezeigt.
• ✏️ Bearbeiten: Schaltet das Secret-Key-Feld in den Bearbeitungsmodus, sodass Sie den Schlüssel manuell ändern können.
• ✓ Bestätigen: Bestätigt eine manuelle Änderung des Secret Keys. Ungültige Formate (außer Großbuchstaben A-Z, 2-7 und optional „=“) werden abgelehnt.

2.3 Benutzerdetails

• Benutzername: Name des Benutzers (z. B. „Max Mustermann“).
• Herausgeber: Name des Diensts, für den der TOTP-Code gilt (z. B. „Google“).
• Gruppe: Optionale Gruppenzuordnung (z. B. „Arbeit“).
• Notiz: Freies Textfeld für zusätzliche Informationen.

Hinweis: Änderungen in diesen Feldern werden automatisch gespeichert, sobald Sie den Fokus verlassen.

2.4 TOTP-Code Generierung

• ▶ Starten: Startet die Anzeige der TOTP-Codes (letzte 10, aktueller und nächste 10). Die Codes aktualisieren sich jede Sekunde, solange ein Secret Key vorhanden ist.
• ■ Stoppen: Stoppt die automatische Aktualisierung und leert die Anzeige.
• Zeitstempel-Feld: Ermöglicht die Eingabe eines benutzerdefinierten Zeitpunkts (Format: YYYY-MM-DDThh:mm:ss), um TOTP-Codes für vergangene oder zukünftige Zeiten zu generieren.
• TOTP-Liste: Zeigt eine Liste mit:
  • Vergangene Codes (grau): Letzte 10 Codes (jeweils 30 Sekunden zurück).
  • Aktueller Code (fett): Der aktuelle TOTP-Code.
  • Zukünftige Codes (blau): Nächste 10 Codes (jeweils 30 Sekunden vorwärts).

2.5 QR-Code Generierung

• QR-Code generieren: Erstellt einen QR-Code basierend auf dem Secret Key, Herausgeber und Benutzernamen. Dieser kann mit einer Authentifizierungs-App (z. B. Google Authenticator) gescannt werden.
• Anforderungen: Secret Key, Herausgeber und Benutzername müssen ausgefüllt sein, sonst erscheint eine Fehlermeldung.

3. Schritt-für-Schritt-Anleitung

Neuen Benutzer erstellen

1. Wählen Sie im Dropdown „Neuen Benutzer erstellen“ oder klicken Sie auf + Neu.
2. Geben Sie einen Benutzernamen, Herausgeber und optional Gruppe und Notiz ein.
3. Klicken Sie auf 🔑 Key generieren, um einen Secret Key zu erstellen.
4. (Optional) Bearbeiten Sie den Secret Key mit ✏️ Bearbeiten und bestätigen Sie mit ✓ Bestätigen.

TOTP-Codes anzeigen

1. Wählen Sie einen Benutzer mit einem Secret Key aus.
2. Klicken Sie auf ▶ Starten, um die TOTP-Codes anzuzeigen.
3. (Optional) Geben Sie einen benutzerdefinierten Zeitstempel ein, um Codes für einen bestimmten Zeitpunkt zu sehen.
4. Klicken Sie auf ■ Stoppen, um die Anzeige zu beenden.

QR-Code für Authentifizierungs-App

1. Füllen Sie Secret Key, Herausgeber und Benutzername aus.
2. Klicken Sie auf QR-Code generieren.
3. Scannen Sie den angezeigten QR-Code mit Ihrer Authentifizierungs-App.

Daten sichern und wiederherstellen

1. Klicken Sie auf ⬇ Export, um die Benutzerdatenbank zu speichern.
2. Klicken Sie auf ⬆ Import und wählen Sie eine JSON-Datei aus, um Benutzer zu importieren.

Benutzer löschen

1. Wählen Sie den Benutzer im Dropdown aus.
2. Klicken Sie auf 🗑 Löschen und bestätigen Sie die Aktion.

4. Hinweise

• Offline-Nutzung: Die App funktioniert komplett im Browser und speichert Daten lokal (localStorage).
• Sicherheit: Bewahren Sie exportierte JSON-Dateien sicher auf, da sie sensible Secret Keys enthalten.
• Fehlerbehandlung: Bei ungültigen Eingaben oder fehlenden Daten erscheinen Warnmeldungen.

Wenn es weiter Fragen gibt, schreiben sie eine E-Mail. Viel Spaß beim Ausprobieren!