1. Übersicht der Benutzeroberfläche

Die Anwendung ist in zwei Hauptbereiche unterteilt:

• Sidebar (links): Enthält Links zu verschiedenen Seiten
• Hauptinhalt (rechts): Hier befindet sich das 2FAttOPT TOTP/HOTP-Tool von ttrade mit allen Eingabefeldern, Schaltflächen und Anzeigen.

Oben rechts im Hauptinhalt finden Sie den Theme-Switcher mit fünf farbigen Kreisen zur Auswahl des Farbschemas:

• System: Passt sich an die Systemeinstellungen (Hell/Dunkel) an.
• Hell: Helles Design.
• Dunkel: Dunkles Design.
• Wein: Weinrotes Design.
• Grün: Grünes Design.
• Dunkel Grün: Jäger Design.
• Mond Licht: Mondlicht Design.
• Nacht Licht: Nachtlicht Design.

Klicken Sie auf einen Kreis, um das Theme zu ändern. Die Auswahl wird gespeichert.

2. Benutzerverwaltung

Im oberen Bereich des TOTP/HOTP-Tools können Sie Benutzer verwalten.

Eingabefelder und Schaltflächen

• Dropdown-Menü "userSelect": Wählen Sie einen bestehenden Benutzer aus oder lassen Sie es leer, um einen neuen zu erstellen.
• + Neu: Erstellt einen neuen Benutzer mit Standardwerten (z. B. leerer Secret Key, Modus TOTP, 6 Ziffern).
• 🗑 Löschen: Löscht den aktuell ausgewählten Benutzer nach Bestätigung.
• ⬇ Export: Exportiert die Benutzerdatenbank als JSON-Datei (z. B. "totp_hotp_users_YYYY-MM-DD.json").
• ⬆ Import: Öffnet einen Datei-Dialog zum Hochladen einer JSON-Datei, um Benutzer zu importieren. Bestehende Benutzer mit gleichen IDs werden übersprungen.

3. Secret Key Verwaltung

Eingabefelder und Schaltflächen

• Secret Key: Anzeige des aktuellen Secret Keys (Base32 für Standard, Hex für MOTP). Nur lesbar, außer im Bearbeitungsmodus.
• 🔑 Key generieren: Generiert einen neuen Secret Key. Für MOTP wird ein 16-stelliger Hex-Schlüssel erstellt, sonst ein Base32-Schlüssel.
• ✏️ Bearbeiten: Aktiviert den Bearbeitungsmodus des Secret Keys. Das Feld wird editierbar.
• ✓ Bestätigen: Bestätigt die manuelle Eingabe des Secret Keys (nur sichtbar im Bearbeitungsmodus). Prüft das Format (z. B. Base32 für Standard, Hex für MOTP, 26/42 Zeichen für Yandex).

4. Benutzerdetails

Eingabefelder

• Benutzername: Name des Benutzers (frei wählbar).
• Herausgeber: Name des Diensteanbieters (z. B. "Google").
• Gruppe: Optional zur Kategorisierung (z. B. "Arbeit").
• Notiz: Freitextfeld für zusätzliche Informationen.
• PIN: Erforderlich für MOTP/Yandex-Dienste (sichtbar nur bei Auswahl dieser Dienste).

Änderungen werden automatisch gespeichert, wenn Sie das Feld verlassen.

5. Einstellungen für OTP-Generierung

Eingabefelder und Dropdowns

• Hash-Algorithmus: Wählen Sie den Algorithmus (z. B. SHA1, SHA256, SHAKE128). Für Steam=Yandex wird dies festgelegt (SHA1 bzw. SHA256).
• Dienst: Wählen Sie den 2FA-Dienst:
  • Standard: Flexibles TOTP/HOTP.
  • MOTP: Mobile OTP (Hex-Schlüssel, MD5, 6 Ziffern, 10s).
  • MOTP-Freestyle: Flexibles MOTP mit anpassbaren Parametern.
  • Steam: Steam-spezifisches Format (5 Zeichen, SHA1).
  • Steam-Freestyle: Flexibles Steam-Format.
  • Yandex: Yandex-spezifisches Format (8 Zeichen, SHA256).
• Modus: TOTP (zeitbasiert) oder HOTP (zählerbasiert). Bei MOTP/Yandex/Steam fest auf TOTP.
• Zeitraum (Sekunden): Intervall für TOTP-Codes (Standard: 30s, MOTP: 10s, Yandex: 30s).
• Anzahl der Ziffern: Länge des Codes (5-20, fest für MOTP=6, Steam=5, Yandex=8).
• Counter: Zähler für HOTP (Standard: 0). Nur bei HOTP sichtbar.

6. OTP-Generierung und Anzeige

Schaltflächen und Anzeigen

• ▶ Starten: Startet die OTP-Generierung. Bei TOTP aktualisiert sich die Anzeige jede Sekunde.
• ■ Stoppen: Stoppt die Aktualisierung und leert die Anzeige.
• Zeitstempel für TOTP-Codes: Wählen Sie ein Datum/Uhrzeit, um Codes für einen bestimmten Zeitpunkt zu generieren (nur TOTP).
• Code-Anzeige: Zeigt Codes an:
  • TOTP: Letzte 10, aktueller und nächste 10 Codes.
  • HOTP: Aktueller und nächste 10 Codes.
  • Klassen: "past" (grau), "current" (fett), "future" (blau).

7. Hash- und HMAC-Funktionen

Eingabefelder und Schaltflächen

• Hash des Secret Keys: Zeigt den Hash des Secret Keys mit dem gewählten Algorithmus.
• 🔍 Hash anzeigen: Berechnet und zeigt den Hash.
• HMAC-Eingabe: Zeigt die Eingabe für die HMAC-Berechnung (Secret + Counter/Timestamp).
• 🔍 Eingabe anzeigen: Zeigt die HMAC-Eingabe in Hex-Format.
• ✏️ Eingabe editieren: Ermöglicht das Bearbeiten der HMAC-Eingabe.
• ✓ Bestätigen: Bestätigt die bearbeitete HMAC-Eingabe (nur Hex erlaubt).

8. QR-Code Generierung

Schaltflächen und Anzeigen

• QR-Code generieren: Erstellt einen QR-Code basierend auf den Einstellungen (Secret, Issuer, Username, Modus, etc.).
• QR-Code Anzeige: Zeigt den generierten QR-Code zum Scannen mit einer Authentifizierungs-App.

Hinweis: Für MOTP/Yandex wird die PIN separat in der App eingegeben.

9. Tipps und Hinweise

• Alle Änderungen an Benutzerdaten werden automatisch im Browser (localStorage) gespeichert.
• Überprüfen Sie das Secret Key-Format bei Diensten wie MOTP (16-stelliger Hex) oder Yandex (26/42 Zeichen Base32).
• Die Anwendung unterstützt erweiterte Hash-Algorithmen wie SHA3 und SHAKE, die nicht in allen Apps verfügbar sind.
• Bei Problemen sehen Sie in der Browser-Konsole nach Fehlermeldungen.