shinkan-jinkendo/frontend/src/components/TotpSetupCard.jsx

import { useState } from 'react'
import api from '../utils/api'

/**
 * TOTP einrichten: Geheimnis anzeigen, Code bestätigen, Wiederherstellungscodes einmal zeigen.
 */
export default function TotpSetupCard({ onEnabled }) {
  const [secret, setSecret] = useState('')
  const [otpauthUri, setOtpauthUri] = useState('')
  const [code, setCode] = useState('')
  const [recoveryCodes, setRecoveryCodes] = useState([])
  const [error, setError] = useState('')
  const [busy, setBusy] = useState(false)

  const start = async () => {
    setError('')
    setBusy(true)
    try {
      const data = await api.setupTotp()
      setSecret(data.secret || '')
      setOtpauthUri(data.otpauth_uri || '')
      setRecoveryCodes([])
    } catch (err) {
      setError(err.message || 'Einrichtung fehlgeschlagen')
    } finally {
      setBusy(false)
    }
  }

  const confirm = async (e) => {
    e.preventDefault()
    setError('')
    setBusy(true)
    try {
      const data = await api.confirmTotp(code.trim())
      if (data?.token) localStorage.setItem('authToken', data.token)
      setRecoveryCodes(Array.isArray(data?.recovery_codes) ? data.recovery_codes : [])
      setSecret('')
      setCode('')
    } catch (err) {
      setError(err.message || 'Code nicht akzeptiert')
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="card" style={{ marginBottom: '1rem' }}>
      <h2 style={{ margin: '0 0 0.75rem', fontSize: '1.1rem' }}>Zwei-Faktor-Anmeldung</h2>
      <p style={{ color: 'var(--text2)', fontSize: '0.875rem', lineHeight: 1.5 }}>
        Authenticator-App (zum Beispiel Aegis, 1Password oder Microsoft Authenticator) öffnen und das
        Geheimnis manuell eintragen. Den otpauth-Link nicht an Dritte geben.
      </p>
      {error ? (
        <p style={{ color: 'var(--danger)', fontSize: '0.875rem' }}>{error}</p>
      ) : null}
      {!secret && recoveryCodes.length === 0 ? (
        <button type="button" className="btn btn-primary" onClick={start} disabled={busy}>
          {busy ? 'Wird erzeugt…' : 'Geheimnis erzeugen'}
        </button>
      ) : null}
      {secret ? (
        <form onSubmit={confirm}>
          <p style={{ fontFamily: 'ui-monospace, monospace', letterSpacing: '0.04em' }}>{secret}</p>
          {otpauthUri ? (
            <p style={{ fontSize: '0.75rem', wordBreak: 'break-all', color: 'var(--text3)' }}>{otpauthUri}</p>
          ) : null}
          <label className="form-label" htmlFor="totp-confirm-code">
            Code aus der App
          </label>
          <input
            id="totp-confirm-code"
            className="form-input"
            inputMode="numeric"
            autoComplete="one-time-code"
            value={code}
            onChange={(e) => setCode(e.target.value)}
          />
          <button type="submit" className="btn btn-primary" disabled={busy} style={{ marginTop: '0.75rem' }}>
            {busy ? 'Prüft…' : 'Aktivieren'}
          </button>
        </form>
      ) : null}
      {recoveryCodes.length > 0 ? (
        <div>
          <p style={{ fontSize: '0.875rem' }}>
            Diese acht Codes jetzt sichern. Die Seite bleibt stehen, bis du unten bestätigst.
            Ein Neuladen löscht die Anzeige. Neue Codes kannst du danach in den Einstellungen erzeugen.
          </p>
          <textarea
            readOnly
            rows={8}
            className="form-input"
            value={recoveryCodes.join('\n')}
            style={{ fontFamily: 'ui-monospace, monospace', marginBottom: '0.75rem' }}
          />
          <button
            type="button"
            className="btn btn-secondary"
            style={{ marginRight: '0.5rem' }}
            onClick={() => navigator.clipboard?.writeText(recoveryCodes.join('\n'))}
          >
            Kopieren
          </button>
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => {
              if (onEnabled) onEnabled()
            }}
          >
            Ich habe die Codes gespeichert
          </button>
        </div>
      ) : null}
    </div>
  )
}