feat(auth): add 2FA setup UI and login challenge step
This commit is contained in:
cesnimda
@@ -0,0 +1,278 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControlLabel,
|
||||
Paper,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
|
||||
import { api, getApiErrorMessage } from "../api";
|
||||
import { useToast } from "../toast";
|
||||
import { useI18n } from "../i18n/I18nProvider";
|
||||
|
||||
type Status = { enabled: boolean; enabledAtUtc: string | null };
|
||||
type SetupResponse = { manualEntryKey: string; qrCodeDataUrl: string };
|
||||
type RecoveryCodesResponse = { recoveryCodes: string[] };
|
||||
|
||||
type Flow =
|
||||
| "closed"
|
||||
| "enable-password"
|
||||
| "enable-qr"
|
||||
| "enable-recovery"
|
||||
| "disable-password"
|
||||
| "regenerate-password"
|
||||
| "regenerate-recovery";
|
||||
|
||||
function apiErrorMessage(e: any, t: (k: any) => string) {
|
||||
if (e?.response?.status === 429) return t("twoFactorRateLimited");
|
||||
return getApiErrorMessage(e, t("twoFactorGenericError"));
|
||||
}
|
||||
|
||||
export default function TwoFactorSettingsCard() {
|
||||
const { toast } = useToast();
|
||||
const { t } = useI18n();
|
||||
const [status, setStatus] = useState<Status | null>(null);
|
||||
const [flow, setFlow] = useState<Flow>("closed");
|
||||
const [password, setPassword] = useState("");
|
||||
const [code, setCode] = useState("");
|
||||
const [setup, setSetup] = useState<SetupResponse | null>(null);
|
||||
const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
|
||||
const [savedConfirmed, setSavedConfirmed] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadStatus = () => {
|
||||
api.get<Status>("/auth/2fa/status").then((r) => setStatus(r.data)).catch(() => setStatus(null));
|
||||
};
|
||||
|
||||
useEffect(() => { loadStatus(); }, []);
|
||||
|
||||
function closeFlow() {
|
||||
setFlow("closed");
|
||||
setPassword("");
|
||||
setCode("");
|
||||
setSetup(null);
|
||||
setRecoveryCodes([]);
|
||||
setSavedConfirmed(false);
|
||||
setError(null);
|
||||
}
|
||||
|
||||
async function submitPassword() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (flow === "enable-password") {
|
||||
const res = await api.post<SetupResponse>("/auth/2fa/setup", { currentPassword: password });
|
||||
setSetup(res.data);
|
||||
setPassword("");
|
||||
setFlow("enable-qr");
|
||||
} else if (flow === "disable-password") {
|
||||
await api.post("/auth/2fa/disable", { currentPassword: password });
|
||||
toast(t("twoFactorDisabledSuccess"), "success");
|
||||
closeFlow();
|
||||
loadStatus();
|
||||
} else if (flow === "regenerate-password") {
|
||||
const res = await api.post<RecoveryCodesResponse>("/auth/2fa/recovery-codes/regenerate", { currentPassword: password });
|
||||
setRecoveryCodes(res.data.recoveryCodes);
|
||||
setPassword("");
|
||||
setFlow("regenerate-recovery");
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e?.response?.status === 400 || e?.response?.status === 401 ? t("twoFactorWrongPassword") : apiErrorMessage(e, t));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCode() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await api.post<RecoveryCodesResponse>("/auth/2fa/verify-setup", { code });
|
||||
setRecoveryCodes(res.data.recoveryCodes);
|
||||
setCode("");
|
||||
setFlow("enable-recovery");
|
||||
} catch (e: any) {
|
||||
setError(e?.response?.status === 401 ? t("twoFactorInvalidCode") : apiErrorMessage(e, t));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function finishRecovery() {
|
||||
toast(flow === "enable-recovery" ? t("twoFactorEnabledSuccess") : t("twoFactorRegenerateSuccess"), "success");
|
||||
closeFlow();
|
||||
loadStatus();
|
||||
}
|
||||
|
||||
function copyRecoveryCodes() {
|
||||
void navigator.clipboard.writeText(recoveryCodes.join("\n"));
|
||||
toast(t("twoFactorCodesCopied"), "info");
|
||||
}
|
||||
|
||||
function downloadRecoveryCodes() {
|
||||
const blob = new Blob([recoveryCodes.join("\n") + "\n"], { type: "text/plain" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "jobbjakt-recovery-codes.txt";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
const isPasswordStep = flow === "enable-password" || flow === "disable-password" || flow === "regenerate-password";
|
||||
const isRecoveryStep = flow === "enable-recovery" || flow === "regenerate-recovery";
|
||||
|
||||
return (
|
||||
<Paper sx={{ mt: 2, p: 2 }}>
|
||||
<Typography variant="h6" sx={{ mb: 1 }}>
|
||||
{t("twoFactorSectionTitle")}
|
||||
</Typography>
|
||||
|
||||
{status ? (
|
||||
<Typography sx={{ color: "text.secondary", mb: 1.5 }}>
|
||||
{status.enabled
|
||||
? t("twoFactorStatusEnabled", { date: status.enabledAtUtc ? new Date(status.enabledAtUtc).toLocaleDateString() : "" })
|
||||
: t("twoFactorStatusDisabled")}
|
||||
</Typography>
|
||||
) : null}
|
||||
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
||||
{!status?.enabled ? (
|
||||
<Button variant="contained" onClick={() => setFlow("enable-password")}>
|
||||
{t("twoFactorEnableButton")}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="outlined" color="warning" onClick={() => setFlow("disable-password")}>
|
||||
{t("twoFactorDisableButton")}
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => setFlow("regenerate-password")}>
|
||||
{t("twoFactorRegenerateButton")}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Dialog open={flow !== "closed"} onClose={isRecoveryStep ? undefined : closeFlow} maxWidth="sm" fullWidth>
|
||||
{isPasswordStep && (
|
||||
<Box component="form" onSubmit={(e) => { e.preventDefault(); void submitPassword(); }}>
|
||||
<DialogTitle>{t("twoFactorPasswordPrompt")}</DialogTitle>
|
||||
<DialogContent>
|
||||
{flow === "disable-password" ? <Alert severity="warning" sx={{ mb: 2 }}>{t("twoFactorDisableWarning")}</Alert> : null}
|
||||
{flow === "regenerate-password" ? <Alert severity="warning" sx={{ mb: 2 }}>{t("twoFactorRegenerateWarning")}</Alert> : null}
|
||||
{error ? <Alert severity="error" role="alert" sx={{ mb: 2 }}>{error}</Alert> : null}
|
||||
<TextField
|
||||
label={t("twoFactorPasswordLabel")}
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
autoFocus
|
||||
fullWidth
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button type="button" onClick={closeFlow} disabled={loading}>{t("cancel")}</Button>
|
||||
<Button type="submit" variant="contained" disabled={loading || !password}>
|
||||
{t("twoFactorContinue")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{flow === "enable-qr" && setup && (
|
||||
<Box component="form" onSubmit={(e) => { e.preventDefault(); void submitCode(); }}>
|
||||
<DialogTitle>{t("twoFactorSetupTitle")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
|
||||
{t("twoFactorSetupHint")}
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", justifyContent: "center", mb: 2 }}>
|
||||
<img src={setup.qrCodeDataUrl} alt={t("twoFactorSetupTitle")} width={200} height={200} />
|
||||
</Box>
|
||||
<TextField
|
||||
label={t("twoFactorManualKeyLabel")}
|
||||
value={setup.manualEntryKey}
|
||||
fullWidth
|
||||
sx={{ mb: 1 }}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
endAdornment: (
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(setup.manualEntryKey);
|
||||
toast(t("twoFactorKeyCopied"), "info");
|
||||
}}
|
||||
>
|
||||
{t("twoFactorCopyKey")}
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mt: 2, mb: 1 }}>
|
||||
{t("twoFactorConfirmCodeHint")}
|
||||
</Typography>
|
||||
{error ? <Alert severity="error" role="alert" sx={{ mb: 2 }}>{error}</Alert> : null}
|
||||
<TextField
|
||||
label={t("twoFactorConfirmCodeLabel")}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
autoComplete="one-time-code"
|
||||
fullWidth
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button type="button" onClick={closeFlow} disabled={loading}>{t("cancel")}</Button>
|
||||
<Button type="submit" variant="contained" disabled={loading || !code.trim()}>
|
||||
{t("twoFactorConfirmButton")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isRecoveryStep && (
|
||||
<>
|
||||
<DialogTitle role="alert">{t("twoFactorRecoveryTitle")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Alert severity="warning" sx={{ mb: 2 }}>{t("twoFactorRecoveryHint")}</Alert>
|
||||
<Box
|
||||
component="ul"
|
||||
sx={{ fontFamily: "monospace", fontSize: 16, p: 1.5, borderRadius: 2, backgroundColor: "background.default", border: "1px solid", borderColor: "divider", listStyle: "none", m: 0, mb: 2 }}
|
||||
>
|
||||
{recoveryCodes.map((rc) => (
|
||||
<li key={rc}>{rc}</li>
|
||||
))}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mb: 2 }}>
|
||||
<Button variant="outlined" onClick={copyRecoveryCodes}>{t("twoFactorCopyAll")}</Button>
|
||||
<Button variant="outlined" onClick={downloadRecoveryCodes}>{t("twoFactorDownload")}</Button>
|
||||
</Box>
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={savedConfirmed} onChange={(e) => setSavedConfirmed(e.target.checked)} />}
|
||||
label={t("twoFactorSavedConfirm")}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="contained" disabled={!savedConfirmed} onClick={finishRecovery}>
|
||||
{t("twoFactorDone")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)}
|
||||
</Dialog>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user