feat(totp): frontend
This commit is contained in:
Nicolas Meienberger
parent
52ed37481b
commit
c397908441
4 changed files with 591 additions and 5 deletions
|
|
@ -8,6 +8,8 @@ import { AuthLayout } from "~/client/components/auth-layout";
|
|||
import { Button } from "~/client/components/ui/button";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "~/client/components/ui/input-otp";
|
||||
import { Label } from "~/client/components/ui/label";
|
||||
import { authMiddleware } from "~/middleware/auth";
|
||||
import type { Route } from "./+types/login";
|
||||
import { ResetPasswordDialog } from "../components/reset-password-dialog";
|
||||
|
|
@ -36,6 +38,10 @@ export default function LoginPage() {
|
|||
const navigate = useNavigate();
|
||||
const [showResetDialog, setShowResetDialog] = useState(false);
|
||||
const [isLoggingIn, setIsLoggingIn] = useState(false);
|
||||
const [requires2FA, setRequires2FA] = useState(false);
|
||||
const [totpCode, setTotpCode] = useState("");
|
||||
const [isVerifying2FA, setIsVerifying2FA] = useState(false);
|
||||
const [trustDevice, setTrustDevice] = useState(false);
|
||||
|
||||
const form = useForm<LoginFormValues>({
|
||||
resolver: arktypeResolver(loginSchema),
|
||||
|
|
@ -65,6 +71,11 @@ export default function LoginPage() {
|
|||
return;
|
||||
}
|
||||
|
||||
if ("twoFactorRedirect" in data && data.twoFactorRedirect) {
|
||||
setRequires2FA(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const d = await authClient.getSession();
|
||||
if (data.user && !d.data?.user.hasDownloadedResticPassword) {
|
||||
void navigate("/download-recovery-key");
|
||||
|
|
@ -73,6 +84,113 @@ export default function LoginPage() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleVerify2FA = async () => {
|
||||
if (totpCode.length !== 6) {
|
||||
toast.error("Please enter a 6-digit code");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsVerifying2FA(true);
|
||||
|
||||
const { data, error } = await authClient.twoFactor.verifyTotp({
|
||||
code: totpCode,
|
||||
trustDevice,
|
||||
});
|
||||
|
||||
setIsVerifying2FA(false);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
toast.error("Verification failed", { description: error.message });
|
||||
setTotpCode("");
|
||||
return;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
toast.success("Login successful");
|
||||
const session = await authClient.getSession();
|
||||
if (session.data?.user && !session.data.user.hasDownloadedResticPassword) {
|
||||
void navigate("/download-recovery-key");
|
||||
} else {
|
||||
void navigate("/volumes");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackToLogin = () => {
|
||||
setRequires2FA(false);
|
||||
setTotpCode("");
|
||||
setTrustDevice(false);
|
||||
form.reset();
|
||||
};
|
||||
|
||||
if (requires2FA) {
|
||||
return (
|
||||
<AuthLayout title="Two-Factor Authentication" description="Enter the 6-digit code from your authenticator app">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4 flex flex-col items-center">
|
||||
<Label htmlFor="totp-code text-center">Authentication code</Label>
|
||||
<div>
|
||||
<InputOTP
|
||||
maxLength={6}
|
||||
value={totpCode}
|
||||
onChange={setTotpCode}
|
||||
onComplete={handleVerify2FA}
|
||||
disabled={isVerifying2FA}
|
||||
>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="trust-device"
|
||||
checked={trustDevice}
|
||||
onChange={(e) => setTrustDevice(e.target.checked)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="trust-device" className="text-sm text-muted-foreground cursor-pointer">
|
||||
Trust this device for 30 days
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full"
|
||||
loading={isVerifying2FA}
|
||||
onClick={handleVerify2FA}
|
||||
disabled={totpCode.length !== 6}
|
||||
>
|
||||
Verify
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={handleBackToLogin}
|
||||
disabled={isVerifying2FA}
|
||||
>
|
||||
Back to Login
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout title="Login to your account" description="Enter your credentials below to login to your account">
|
||||
<Form {...form}>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Download, KeyRound, User, X } from "lucide-react";
|
||||
import { Download, KeyRound, User, X, Shield, Copy, RefreshCw } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { QRCodeCanvas } from "qrcode.react";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardTitle } from "~/client/components/ui/card";
|
||||
import {
|
||||
|
|
@ -15,6 +16,7 @@ import {
|
|||
DialogTrigger,
|
||||
} from "~/client/components/ui/dialog";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "~/client/components/ui/input-otp";
|
||||
import { Label } from "~/client/components/ui/label";
|
||||
import { appContext } from "~/context";
|
||||
import type { Route } from "./+types/settings";
|
||||
|
|
@ -47,6 +49,23 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
|
|||
const [downloadDialogOpen, setDownloadDialogOpen] = useState(false);
|
||||
const [downloadPassword, setDownloadPassword] = useState("");
|
||||
const [isChangingPassword, setIsChangingPassword] = useState(false);
|
||||
|
||||
// 2FA states
|
||||
const [setup2FADialogOpen, setSetup2FADialogOpen] = useState(false);
|
||||
const [disable2FADialogOpen, setDisable2FADialogOpen] = useState(false);
|
||||
const [backupCodesDialogOpen, setBackupCodesDialogOpen] = useState(false);
|
||||
const [setup2FAPassword, setSetup2FAPassword] = useState("");
|
||||
const [disable2FAPassword, setDisable2FAPassword] = useState("");
|
||||
const [totpUri, setTotpUri] = useState<string | null>(null);
|
||||
const [verificationCode, setVerificationCode] = useState("");
|
||||
const [backupCodes, setBackupCodes] = useState<string[]>([]);
|
||||
const [setupStep, setSetupStep] = useState<"password" | "qr" | "verify">("password");
|
||||
const [isEnabling2FA, setIsEnabling2FA] = useState(false);
|
||||
const [isVerifying2FA, setIsVerifying2FA] = useState(false);
|
||||
const [isDisabling2FA, setIsDisabling2FA] = useState(false);
|
||||
const [isGeneratingBackupCodes, setIsGeneratingBackupCodes] = useState(false);
|
||||
const [backupCodesPassword, setBackupCodesPassword] = useState("");
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = async () => {
|
||||
|
|
@ -137,6 +156,151 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
|
|||
});
|
||||
};
|
||||
|
||||
// 2FA handlers
|
||||
const handleEnable2FA = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!setup2FAPassword) {
|
||||
toast.error("Password is required");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsEnabling2FA(true);
|
||||
|
||||
const { data, error } = await authClient.twoFactor.enable({
|
||||
password: setup2FAPassword,
|
||||
issuer: "Zerobyte",
|
||||
});
|
||||
|
||||
setIsEnabling2FA(false);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
toast.error("Failed to enable 2FA", { description: error.message });
|
||||
return;
|
||||
}
|
||||
|
||||
if (data?.totpURI && data?.backupCodes) {
|
||||
setTotpUri(data.totpURI);
|
||||
setBackupCodes(data.backupCodes);
|
||||
setSetupStep("qr");
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerify2FA = async () => {
|
||||
if (verificationCode.length !== 6) {
|
||||
toast.error("Please enter a 6-digit code");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsVerifying2FA(true);
|
||||
|
||||
const { data, error } = await authClient.twoFactor.verifyTotp({
|
||||
code: verificationCode,
|
||||
});
|
||||
|
||||
setIsVerifying2FA(false);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
toast.error("Verification failed", { description: error.message });
|
||||
setVerificationCode("");
|
||||
return;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
toast.success("Two-factor authentication enabled successfully");
|
||||
// Refresh the session to get updated user data
|
||||
await authClient.getSession();
|
||||
// Reset and close dialog
|
||||
handleClose2FASetup();
|
||||
// Reload the page to update the UI
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisable2FA = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!disable2FAPassword) {
|
||||
toast.error("Password is required");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDisabling2FA(true);
|
||||
|
||||
const { data, error } = await authClient.twoFactor.disable({
|
||||
password: disable2FAPassword,
|
||||
});
|
||||
|
||||
setIsDisabling2FA(false);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
toast.error("Failed to disable 2FA", { description: error.message });
|
||||
return;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
toast.success("Two-factor authentication disabled successfully");
|
||||
setDisable2FADialogOpen(false);
|
||||
setDisable2FAPassword("");
|
||||
// Refresh the session to get updated user data
|
||||
await authClient.getSession();
|
||||
// Reload the page to update the UI
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateBackupCodes = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!backupCodesPassword) {
|
||||
toast.error("Password is required");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsGeneratingBackupCodes(true);
|
||||
|
||||
const { data, error } = await authClient.twoFactor.generateBackupCodes({
|
||||
password: backupCodesPassword,
|
||||
});
|
||||
|
||||
setIsGeneratingBackupCodes(false);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
toast.error("Failed to generate backup codes", { description: error.message });
|
||||
return;
|
||||
}
|
||||
|
||||
if (data?.backupCodes) {
|
||||
setBackupCodes(data.backupCodes);
|
||||
setBackupCodesPassword("");
|
||||
toast.success("New backup codes generated successfully");
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose2FASetup = () => {
|
||||
setSetup2FADialogOpen(false);
|
||||
setSetup2FAPassword("");
|
||||
setTotpUri(null);
|
||||
setVerificationCode("");
|
||||
setBackupCodes([]);
|
||||
setSetupStep("password");
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
toast.success("Copied to clipboard");
|
||||
};
|
||||
|
||||
const copyAllBackupCodes = () => {
|
||||
const text = backupCodes.join("\n");
|
||||
navigator.clipboard.writeText(text);
|
||||
toast.success("All backup codes copied to clipboard");
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-0 gap-0">
|
||||
<div className="border-b border-border/50 bg-card-header p-6">
|
||||
|
|
@ -268,6 +432,309 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
|
||||
<div className="border-t border-border/50 bg-card-header p-6">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Shield className="size-5" />
|
||||
Two-Factor Authentication
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-1.5">Add an extra layer of security to your account</CardDescription>
|
||||
</div>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
Status:
|
||||
{loaderData.user?.twoFactorEnabled ? (
|
||||
<span className="text-green-600 dark:text-green-400">Enabled</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Disabled</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground max-w-xl">
|
||||
Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app
|
||||
in addition to your password.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{!loaderData.user?.twoFactorEnabled ? (
|
||||
<Button onClick={() => setSetup2FADialogOpen(true)}>Enable 2FA</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setBackupCodesDialogOpen(true)}>
|
||||
Backup Codes
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => setDisable2FADialogOpen(true)}>
|
||||
Disable 2FA
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={setup2FADialogOpen} onOpenChange={handleClose2FASetup}>
|
||||
<DialogContent className="max-w-md">
|
||||
{setupStep === "password" && (
|
||||
<form onSubmit={handleEnable2FA}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Enable Two-Factor Authentication</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enter your password to generate a QR code for your authenticator app
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="setup-password">Your Password</Label>
|
||||
<Input
|
||||
id="setup-password"
|
||||
type="password"
|
||||
value={setup2FAPassword}
|
||||
onChange={(e) => setSetup2FAPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={handleClose2FASetup}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" loading={isEnabling2FA}>
|
||||
Continue
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{setupStep === "qr" && totpUri && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Scan QR Code</DialogTitle>
|
||||
<DialogDescription>
|
||||
Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="flex justify-center p-4 bg-white rounded-lg">
|
||||
<QRCodeCanvas value={totpUri} size={200} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">Manual Entry Code</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
value={totpUri.split("secret=")[1]?.split("&")[0] || ""}
|
||||
readOnly
|
||||
className="text-xs font-mono"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => copyToClipboard(totpUri.split("secret=")[1]?.split("&")[0] || "")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{backupCodes.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">Backup Codes (Save these securely)</Label>
|
||||
<div className="p-3 bg-muted rounded-md space-y-1 max-h-32 overflow-y-auto">
|
||||
{backupCodes.map((code) => (
|
||||
<div key={code} className="text-xs font-mono flex items-center justify-between">
|
||||
<span>{code}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => copyToClipboard(code)}
|
||||
className="h-6 w-6 p-0"
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button type="button" variant="outline" size="sm" onClick={copyAllBackupCodes} className="w-full">
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Copy All Codes
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" onClick={() => setSetupStep("verify")}>
|
||||
I've Scanned It
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
|
||||
{setupStep === "verify" && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Verify Setup</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enter the 6-digit code from your authenticator app to complete setup
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Verification Code</Label>
|
||||
<div className="flex justify-center">
|
||||
<InputOTP
|
||||
maxLength={6}
|
||||
value={verificationCode}
|
||||
onChange={setVerificationCode}
|
||||
onComplete={handleVerify2FA}
|
||||
disabled={isVerifying2FA}
|
||||
>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => setSetupStep("qr")}>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleVerify2FA}
|
||||
loading={isVerifying2FA}
|
||||
disabled={verificationCode.length !== 6}
|
||||
>
|
||||
Verify & enable
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={disable2FADialogOpen} onOpenChange={setDisable2FADialogOpen}>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleDisable2FA}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Disable Two-Factor Authentication</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to disable 2FA? Your account will be less secure. Enter your password to
|
||||
confirm.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="disable-password">Your Password</Label>
|
||||
<Input
|
||||
id="disable-password"
|
||||
type="password"
|
||||
value={disable2FAPassword}
|
||||
onChange={(e) => setDisable2FAPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setDisable2FADialogOpen(false);
|
||||
setDisable2FAPassword("");
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="destructive" loading={isDisabling2FA}>
|
||||
Disable 2FA
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={backupCodesDialogOpen} onOpenChange={setBackupCodesDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Backup Codes</DialogTitle>
|
||||
<DialogDescription>
|
||||
Use these codes to access your account if you lose access to your authenticator app. Each code can only
|
||||
be used once.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
{backupCodes.length > 0 ? (
|
||||
<>
|
||||
<div className="p-3 bg-muted rounded-md space-y-1 max-h-48 overflow-y-auto">
|
||||
{backupCodes.map((code) => (
|
||||
<div key={code} className="text-sm font-mono flex items-center justify-between">
|
||||
<span>{code}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => copyToClipboard(code)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button type="button" variant="outline" onClick={copyAllBackupCodes} className="w-full">
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Copy All Codes
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<form onSubmit={handleGenerateBackupCodes} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="backup-codes-password">Your Password</Label>
|
||||
<Input
|
||||
id="backup-codes-password"
|
||||
type="password"
|
||||
value={backupCodesPassword}
|
||||
onChange={(e) => setBackupCodesPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" loading={isGeneratingBackupCodes} className="w-full">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Generate New Backup Codes
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setBackupCodesDialogOpen(false);
|
||||
setBackupCodes([]);
|
||||
setBackupCodesPassword("");
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ type User = {
|
|||
email: string;
|
||||
username: string;
|
||||
hasDownloadedResticPassword: boolean;
|
||||
twoFactorEnabled?: boolean | null;
|
||||
};
|
||||
|
||||
type AppContext = {
|
||||
|
|
|
|||
|
|
@ -114,12 +114,12 @@ export const verification = sqliteTable(
|
|||
id: text("id").primaryKey(),
|
||||
identifier: text("identifier").notNull(),
|
||||
value: text("value").notNull(),
|
||||
expiresAt: integer("expires_at", { mode: "number" }).notNull(),
|
||||
createdAt: integer("created_at", { mode: "number" })
|
||||
expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
|
||||
createdAt: integer("created_at", { mode: "timestamp_ms" })
|
||||
.notNull()
|
||||
.default(sql`(unixepoch() * 1000)`),
|
||||
updatedAt: integer("updated_at", { mode: "number" })
|
||||
.$onUpdate(() => Date.now())
|
||||
updatedAt: integer("updated_at", { mode: "timestamp_ms" })
|
||||
.$onUpdate(() => new Date())
|
||||
.notNull()
|
||||
.default(sql`(unixepoch() * 1000)`),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue