102 lines
3.4 KiB
React
102 lines
3.4 KiB
React
|
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('')
|
||
|
|
if (onEnabled) await onEnabled(data)
|
||
|
|
} 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 Wiederherstellungscodes jetzt sichern. Sie werden nur dieses eine Mal angezeigt.
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
{recoveryCodes.map((item) => (
|
||
|
|
<li key={item} style={{ fontFamily: 'ui-monospace, monospace' }}>
|
||
|
|
{item}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|