style consistency changes to add security key form

messages/en-US.json

@@ -1143,8 +1143,7 @@
     "securityKeyNameRequired": "Name is required",
     "securityKeyRemove": "Remove",
     "securityKeyLastUsed": "Last used: {date}",
-    "securityKeyNameLabel": "Name",
+    "securityKeyNameLabel": "Security Key Name",
-    "securityKeyNamePlaceholder": "Enter a name for this security key",
     "securityKeyRegisterSuccess": "Security key registered successfully",
     "securityKeyRegisterError": "Failed to register security key",
     "securityKeyRemoveSuccess": "Security key removed successfully",
@@ -1152,7 +1151,7 @@
     "securityKeyLoadError": "Failed to load security keys",
     "securityKeyLogin": "Sign in with security key",
     "securityKeyAuthError": "Failed to authenticate with security key",
-    "securityKeyRecommendation": "Tip: Register a backup security key on another device to ensure you always have access to your account.",
+    "securityKeyRecommendation": "Register a backup security key on another device to ensure you always have access to your account.",
     "registering": "Registering...",
     "securityKeyPrompt": "Please verify your identity using your security key. Make sure your security key is connected and ready.",
     "securityKeyBrowserNotSupported": "Your browser doesn't support security keys. Please use a modern browser like Chrome, Firefox, or Safari.",
@@ -1163,5 +1162,16 @@
     "twoFactorRequired": "Two-factor authentication is required to register a security key.",
     "twoFactor": "Two-Factor Authentication",
     "adminEnabled2FaOnYourAccount": "Your administrator has enabled two-factor authentication for {email}. Please complete the setup process to continue.",
-    "continueToApplication": "Continue to Application"
+    "continueToApplication": "Continue to Application",
+    "securityKeyAdd": "Add Security Key",
+    "securityKeyRegisterTitle": "Register New Security Key",
+    "securityKeyRegisterDescription": "Connect your security key and enter a name to identify it",
+    "securityKeyTwoFactorRequired": "Two-Factor Authentication Required",
+    "securityKeyTwoFactorDescription": "Please enter your two-factor authentication code to register the security key",
+    "securityKeyTwoFactorRemoveDescription": "Please enter your two-factor authentication code to remove the security key",
+    "securityKeyTwoFactorCode": "Two-Factor Code",
+    "securityKeyRemoveTitle": "Remove Security Key",
+    "securityKeyRemoveDescription": "Enter your password to remove the security key \"{name}\"",
+    "securityKeyNoKeysRegistered": "No security keys registered",
+    "securityKeyNoKeysDescription": "Add a security key to enhance your account security"
 }

package-lock.json

@@ -33,9 +33,9 @@
                 "@radix-ui/react-toast": "1.2.14",
                 "@react-email/components": "0.3.1",
                 "@react-email/render": "^1.1.2",
+                "@react-email/tailwind": "1.2.1",
                 "@simplewebauthn/browser": "^13.1.0",
                 "@simplewebauthn/server": "^9.0.3",
-                "@react-email/tailwind": "1.2.1",
                 "@tailwindcss/forms": "^0.5.10",
                 "@tanstack/react-table": "8.21.3",
                 "arctic": "^3.7.0",

server/routers/auth/securityKey.ts

@@ -107,7 +107,8 @@ async function clearChallenge(sessionId: string) {
 
 export const registerSecurityKeyBody = z.object({
     name: z.string().min(1),
-    password: z.string().min(1)
+    password: z.string().min(1),
+    code: z.string().optional()
 }).strict();
 
 export const verifyRegistrationBody = z.object({
@@ -143,7 +144,7 @@ export async function startRegistration(
         );
     }
 
-    const { name, password } = parsedBody.data;
+    const { name, password, code } = parsedBody.data;
     const user = req.user as User;
 
     // Only allow internal users to use security keys
@@ -163,6 +164,39 @@ export async function startRegistration(
             return next(unauthorized());
         }
 
+        // If user has 2FA enabled, require and verify the code
+        if (user.twoFactorEnabled) {
+            if (!code) {
+                return response<{ codeRequested: boolean }>(res, {
+                    data: { codeRequested: true },
+                    success: true,
+                    error: false,
+                    message: "Two-factor authentication required",
+                    status: HttpCode.ACCEPTED
+                });
+            }
+
+            const validOTP = await verifyTotpCode(
+                code,
+                user.twoFactorSecret!,
+                user.userId
+            );
+
+            if (!validOTP) {
+                if (config.getRawConfig().app.log_failed_attempts) {
+                    logger.info(
+                        `Two-factor code incorrect. Email: ${user.email}. IP: ${req.ip}.`
+                    );
+                }
+                return next(
+                    createHttpError(
+                        HttpCode.UNAUTHORIZED,
+                        "The two-factor code you entered is incorrect"
+                    )
+                );
+            }
+        }
+
         // Get existing security keys for user
         const existingSecurityKeys = await db
             .select()

src/components/SecurityKeyForm.tsx

@@ -15,23 +15,25 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
 import { Alert, AlertDescription } from "@app/components/ui/alert";
 import {
-    Dialog,
+    Credenza,
-    DialogContent,
+    CredenzaBody,
-    DialogDescription,
+    CredenzaClose,
-    DialogFooter,
+    CredenzaContent,
-    DialogHeader,
+    CredenzaDescription,
-    DialogTitle,
+    CredenzaFooter,
-} from "@app/components/ui/dialog";
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
 import { startRegistration } from "@simplewebauthn/browser";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Card, CardContent } from "@app/components/ui/card";
 import { Badge } from "@app/components/ui/badge";
-import { Loader2, KeyRound, Trash2, Plus, Shield } from "lucide-react";
+import { Loader2, KeyRound, Trash2, Plus, Shield, Info } from "lucide-react";
 import { cn } from "@app/lib/cn";
 
 type SecurityKeyFormProps = {
@@ -53,6 +55,7 @@ type DeleteSecurityKeyData = {
 type RegisterFormValues = {
     name: string;
     password: string;
+    code?: string;
 };
 
 type DeleteFormValues = {
@@ -70,30 +73,47 @@ type FieldProps = {
     };
 };
 
-export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps) {
+export default function SecurityKeyForm({
+    open,
+    setOpen
+}: SecurityKeyFormProps) {
     const t = useTranslations();
     const { env } = useEnvContext();
     const api = createApiClient({ env });
     const [securityKeys, setSecurityKeys] = useState<SecurityKey[]>([]);
     const [isRegistering, setIsRegistering] = useState(false);
-    const [showRegisterDialog, setShowRegisterDialog] = useState(false);
+    const [dialogState, setDialogState] = useState<
-    const [selectedSecurityKey, setSelectedSecurityKey] = useState<DeleteSecurityKeyData | null>(null);
+        "list" | "register" | "register2fa" | "delete" | "delete2fa"
-    const [show2FADialog, setShow2FADialog] = useState(false);
+    >("list");
+    const [selectedSecurityKey, setSelectedSecurityKey] =
+        useState<DeleteSecurityKeyData | null>(null);
     const [deleteInProgress, setDeleteInProgress] = useState(false);
-    const [pendingDeleteCredentialId, setPendingDeleteCredentialId] = useState<string | null>(null);
+    const [pendingDeleteCredentialId, setPendingDeleteCredentialId] = useState<
-    const [pendingDeletePassword, setPendingDeletePassword] = useState<string | null>(null);
+        string | null
+    >(null);
+    const [pendingDeletePassword, setPendingDeletePassword] = useState<
+        string | null
+    >(null);
+    const [pendingRegisterData, setPendingRegisterData] = useState<{
+        name: string;
+        password: string;
+    } | null>(null);
+    const [register2FAForm, setRegister2FAForm] = useState<{ code: string }>({
+        code: ""
+    });
 
     useEffect(() => {
         loadSecurityKeys();
     }, []);
 
     const registerSchema = z.object({
-        name: z.string().min(1, { message: t('securityKeyNameRequired') }),
+        name: z.string().min(1, { message: t("securityKeyNameRequired") }),
-        password: z.string().min(1, { message: t('passwordRequired') }),
+        password: z.string().min(1, { message: t("passwordRequired") }),
+        code: z.string().optional()
     });
 
     const deleteSchema = z.object({
-        password: z.string().min(1, { message: t('passwordRequired') }),
+        password: z.string().min(1, { message: t("passwordRequired") }),
         code: z.string().optional()
     });
 
@@ -102,7 +122,8 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
         defaultValues: {
             name: "",
             password: "",
-        },
+            code: ""
+        }
     });
 
     const deleteForm = useForm<DeleteFormValues>({
@@ -110,7 +131,7 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
         defaultValues: {
             password: "",
             code: ""
-        },
+        }
     });
 
     const loadSecurityKeys = async () => {
@@ -120,7 +141,7 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
         } catch (error) {
             toast({
                 variant: "destructive",
-                description: formatAxiosError(error, t('securityKeyLoadError')),
+                description: formatAxiosError(error, t("securityKeyLoadError"))
             });
         }
     };
@@ -131,26 +152,32 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
             if (!window.PublicKeyCredential) {
                 toast({
                     variant: "destructive",
-                    description: t('securityKeyBrowserNotSupported', {
+                    description: t("securityKeyBrowserNotSupported", {
-                        defaultValue: "Your browser doesn't support security keys. Please use a modern browser like Chrome, Firefox, or Safari."
+                        defaultValue:
+                            "Your browser doesn't support security keys. Please use a modern browser like Chrome, Firefox, or Safari."
                     })
                 });
                 return;
             }
 
             setIsRegistering(true);
-            const startRes = await api.post("/auth/security-key/register/start", {
+            const startRes = await api.post(
+                "/auth/security-key/register/start",
+                {
                     name: values.name,
                     password: values.password,
-            });
+                    code: values.code
+                }
+            );
 
-            if (startRes.status === 202) {
+            // If 2FA is required
-                toast({
+            if (startRes.status === 202 && startRes.data.data?.codeRequested) {
-                    variant: "destructive",
+                setPendingRegisterData({
-                    description: t('twoFactorRequired', {
+                    name: values.name,
-                        defaultValue: "Two-factor authentication is required to register a security key."
+                    password: values.password
-                    })
                 });
+                setDialogState("register2fa");
+                setIsRegistering(false);
                 return;
             }
 
@@ -160,59 +187,66 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
                 const credential = await startRegistration(options);
 
                 await api.post("/auth/security-key/register/verify", {
-                    credential,
+                    credential
                 });
 
                 toast({
-                    description: t('securityKeyRegisterSuccess', {
+                    description: t("securityKeyRegisterSuccess", {
                         defaultValue: "Security key registered successfully"
                     })
                 });
 
                 registerForm.reset();
-                setShowRegisterDialog(false);
+                setDialogState("list");
                 await loadSecurityKeys();
             } catch (error: any) {
-                if (error.name === 'NotAllowedError') {
+                if (error.name === "NotAllowedError") {
-                    if (error.message.includes('denied permission')) {
+                    if (error.message.includes("denied permission")) {
                         toast({
                             variant: "destructive",
-                            description: t('securityKeyPermissionDenied', {
+                            description: t("securityKeyPermissionDenied", {
-                                defaultValue: "Please allow access to your security key to continue registration."
+                                defaultValue:
+                                    "Please allow access to your security key to continue registration."
                             })
                         });
                     } else {
                         toast({
                             variant: "destructive",
-                            description: t('securityKeyRemovedTooQuickly', {
+                            description: t("securityKeyRemovedTooQuickly", {
-                                defaultValue: "Please keep your security key connected until the registration process completes."
+                                defaultValue:
+                                    "Please keep your security key connected until the registration process completes."
                             })
                         });
                     }
-                } else if (error.name === 'NotSupportedError') {
+                } else if (error.name === "NotSupportedError") {
                     toast({
                         variant: "destructive",
-                        description: t('securityKeyNotSupported', {
+                        description: t("securityKeyNotSupported", {
-                            defaultValue: "Your security key may not be compatible. Please try a different security key."
+                            defaultValue:
+                                "Your security key may not be compatible. Please try a different security key."
                         })
                     });
                 } else {
                     toast({
                         variant: "destructive",
-                        description: t('securityKeyUnknownError', {
+                        description: t("securityKeyUnknownError", {
-                            defaultValue: "There was a problem registering your security key. Please try again."
+                            defaultValue:
+                                "There was a problem registering your security key. Please try again."
                         })
                     });
                 }
                 throw error; // Re-throw to be caught by outer catch
             }
         } catch (error) {
-            console.error('Security key registration error:', error);
+            console.error("Security key registration error:", error);
             toast({
                 variant: "destructive",
-                description: formatAxiosError(error, t('securityKeyRegisterError', {
+                description: formatAxiosError(
+                    error,
+                    t("securityKeyRegisterError", {
                         defaultValue: "Failed to register security key"
-                }))
+                    })
+                )
             });
         } finally {
             setIsRegistering(false);
@@ -224,33 +258,42 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
 
         try {
             setDeleteInProgress(true);
-            const encodedCredentialId = encodeURIComponent(selectedSecurityKey.credentialId);
+            const encodedCredentialId = encodeURIComponent(
-            const response = await api.delete(`/auth/security-key/${encodedCredentialId}`, {
+                selectedSecurityKey.credentialId
+            );
+            const response = await api.delete(
+                `/auth/security-key/${encodedCredentialId}`,
+                {
                     data: {
                         password: values.password,
                         code: values.code
                     }
-            });
+                }
+            );
 
             // If 2FA is required
             if (response.status === 202 && response.data.data.codeRequested) {
                 setPendingDeleteCredentialId(encodedCredentialId);
                 setPendingDeletePassword(values.password);
-                setShow2FADialog(true);
+                setDialogState("delete2fa");
                 return;
             }
 
             toast({
-                description: t('securityKeyRemoveSuccess')
+                description: t("securityKeyRemoveSuccess")
             });
 
             deleteForm.reset();
             setSelectedSecurityKey(null);
+            setDialogState("list");
             await loadSecurityKeys();
         } catch (error) {
             toast({
                 variant: "destructive",
-                description: formatAxiosError(error, t('securityKeyRemoveError')),
+                description: formatAxiosError(
+                    error,
+                    t("securityKeyRemoveError")
+                )
             });
         } finally {
             setDeleteInProgress(false);
@@ -262,33 +305,128 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
 
         try {
             setDeleteInProgress(true);
-            await api.delete(`/auth/security-key/${pendingDeleteCredentialId}`, {
+            await api.delete(
+                `/auth/security-key/${pendingDeleteCredentialId}`,
+                {
                     data: {
                         password: pendingDeletePassword,
                         code: values.code
                     }
-            });
+                }
+            );
 
             toast({
-                description: t('securityKeyRemoveSuccess')
+                description: t("securityKeyRemoveSuccess")
             });
 
             deleteForm.reset();
             setSelectedSecurityKey(null);
-            setShow2FADialog(false);
+            setDialogState("list");
             setPendingDeleteCredentialId(null);
             setPendingDeletePassword(null);
             await loadSecurityKeys();
         } catch (error) {
             toast({
                 variant: "destructive",
-                description: formatAxiosError(error, t('securityKeyRemoveError')),
+                description: formatAxiosError(
+                    error,
+                    t("securityKeyRemoveError")
+                )
             });
         } finally {
             setDeleteInProgress(false);
         }
     };
 
+    const handleRegister2FASubmit = async (values: { code: string }) => {
+        if (!pendingRegisterData) return;
+
+        try {
+            setIsRegistering(true);
+            const startRes = await api.post(
+                "/auth/security-key/register/start",
+                {
+                    name: pendingRegisterData.name,
+                    password: pendingRegisterData.password,
+                    code: values.code
+                }
+            );
+
+            const options = startRes.data.data;
+
+            try {
+                const credential = await startRegistration(options);
+
+                await api.post("/auth/security-key/register/verify", {
+                    credential
+                });
+
+                toast({
+                    description: t("securityKeyRegisterSuccess", {
+                        defaultValue: "Security key registered successfully"
+                    })
+                });
+
+                registerForm.reset();
+                setDialogState("list");
+                setPendingRegisterData(null);
+                setRegister2FAForm({ code: "" });
+                await loadSecurityKeys();
+            } catch (error: any) {
+                if (error.name === "NotAllowedError") {
+                    if (error.message.includes("denied permission")) {
+                        toast({
+                            variant: "destructive",
+                            description: t("securityKeyPermissionDenied", {
+                                defaultValue:
+                                    "Please allow access to your security key to continue registration."
+                            })
+                        });
+                    } else {
+                        toast({
+                            variant: "destructive",
+                            description: t("securityKeyRemovedTooQuickly", {
+                                defaultValue:
+                                    "Please keep your security key connected until the registration process completes."
+                            })
+                        });
+                    }
+                } else if (error.name === "NotSupportedError") {
+                    toast({
+                        variant: "destructive",
+                        description: t("securityKeyNotSupported", {
+                            defaultValue:
+                                "Your security key may not be compatible. Please try a different security key."
+                        })
+                    });
+                } else {
+                    toast({
+                        variant: "destructive",
+                        description: t("securityKeyUnknownError", {
+                            defaultValue:
+                                "There was a problem registering your security key. Please try again."
+                        })
+                    });
+                }
+                throw error; // Re-throw to be caught by outer catch
+            }
+        } catch (error) {
+            console.error("Security key registration error:", error);
+            toast({
+                variant: "destructive",
+                description: formatAxiosError(
+                    error,
+                    t("securityKeyRegisterError", {
+                        defaultValue: "Failed to register security key"
+                    })
+                )
+            });
+            setRegister2FAForm({ code: "" });
+        } finally {
+            setIsRegistering(false);
+        }
+    };
+
     const onOpenChange = (open: boolean) => {
         if (open) {
             loadSecurityKeys();
@@ -296,60 +434,89 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
             registerForm.reset();
             deleteForm.reset();
             setSelectedSecurityKey(null);
-            setShowRegisterDialog(false);
+            setDialogState("list");
+            setPendingRegisterData(null);
+            setRegister2FAForm({ code: "" });
         }
         setOpen(open);
     };
 
     return (
         <>
-            <Dialog open={open} onOpenChange={onOpenChange}>
+            <Credenza open={open} onOpenChange={onOpenChange}>
-                <DialogContent className="sm:max-w-[500px]">
+                <CredenzaContent>
-                    <DialogHeader>
+                    {dialogState === "list" && (
-                        <DialogTitle className="flex items-center gap-2">
+                        <>
-                            <Shield className="h-5 w-5" />
+                            <CredenzaHeader>
-                            {t('securityKeyManage')}
+                                <CredenzaTitle className="flex items-center gap-2">
-                        </DialogTitle>
+                                    {t("securityKeyManage")}
-                        <DialogDescription>
+                                </CredenzaTitle>
-                            {t('securityKeyDescription')}
+                                <CredenzaDescription>
-                        </DialogDescription>
+                                    {t("securityKeyDescription")}
-                    </DialogHeader>
+                                </CredenzaDescription>
-
+                            </CredenzaHeader>
+                            <CredenzaBody>
                                 <div className="space-y-4">
                                     <div className="flex items-center justify-between">
-                            <h3 className="text-sm font-medium text-muted-foreground">{t('securityKeyList')}</h3>
+                                        <h3 className="text-sm font-medium text-muted-foreground">
+                                            {t("securityKeyList")}
+                                        </h3>
                                         <Button
-                                className="h-8 w-8 p-0"
+                                            onClick={() =>
-                                onClick={() => setShowRegisterDialog(true)}
+                                                setDialogState("register")
+                                            }
+                                            className="gap-2"
                                         >
                                             <Plus className="h-4 w-4" />
+                                            {t("securityKeyAdd")}
                                         </Button>
                                     </div>
 
                                     {securityKeys.length > 0 ? (
                                         <div className="space-y-2">
                                             {securityKeys.map((securityKey) => (
-                                    <Card key={securityKey.credentialId}>
+                                                <Card
+                                                    key={
+                                                        securityKey.credentialId
+                                                    }
+                                                >
                                                     <CardContent className="flex items-center justify-between p-4">
                                                         <div className="flex items-center gap-3">
                                                             <div className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary">
                                                                 <KeyRound className="h-4 w-4 text-secondary-foreground" />
                                                             </div>
                                                             <div>
-                                                    <p className="font-medium">{securityKey.name}</p>
+                                                                <p className="font-medium">
+                                                                    {
+                                                                        securityKey.name
+                                                                    }
+                                                                </p>
                                                                 <p className="text-xs text-muted-foreground">
-                                                        {t('securityKeyLastUsed', {
+                                                                    {t(
-                                                            date: new Date(securityKey.lastUsed).toLocaleDateString()
+                                                                        "securityKeyLastUsed",
-                                                        })}
+                                                                        {
+                                                                            date: new Date(
+                                                                                securityKey.lastUsed
+                                                                            ).toLocaleDateString()
+                                                                        }
+                                                                    )}
                                                                 </p>
                                                             </div>
                                                         </div>
                                                         <Button
                                                             className="h-8 w-8 p-0 text-white hover:text-white/80"
-                                                onClick={() => setSelectedSecurityKey({
+                                                            onClick={() => {
-                                                    credentialId: securityKey.credentialId,
+                                                                setSelectedSecurityKey(
+                                                                    {
+                                                                        credentialId:
+                                                                            securityKey.credentialId,
                                                                         name: securityKey.name
-                                                })}
+                                                                    }
+                                                                );
+                                                                setDialogState(
+                                                                    "delete"
+                                                                );
+                                                            }}
                                                         >
                                                             <Trash2 className="h-4 w-4" />
                                                         </Button>
@@ -360,42 +527,66 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
                                     ) : (
                                         <div className="flex flex-col items-center justify-center py-8 text-center">
                                             <Shield className="mb-2 h-12 w-12 text-muted-foreground" />
-                                <p className="text-sm text-muted-foreground">No security keys registered</p>
+                                            <p className="text-sm text-muted-foreground">
-                                <p className="text-xs text-muted-foreground">Add a security key to enhance your account security</p>
+                                                {t("securityKeyNoKeysRegistered")}
+                                            </p>
+                                            <p className="text-xs text-muted-foreground">
+                                                {t("securityKeyNoKeysDescription")}
+                                            </p>
                                         </div>
                                     )}
 
                                     {securityKeys.length === 1 && (
                                         <Alert variant="default">
-                                <AlertDescription>{t('securityKeyRecommendation')}</AlertDescription>
+                                            <Info className="h-4 w-4" />
+                                            <AlertDescription>
+                                                {t("securityKeyRecommendation")}
+                                            </AlertDescription>
                                         </Alert>
                                     )}
                                 </div>
-                </DialogContent>
+                            </CredenzaBody>
-            </Dialog>
+                        </>
-
+                    )}
-            <Dialog open={showRegisterDialog} onOpenChange={setShowRegisterDialog}>
-                <DialogContent className="sm:max-w-[400px]">
-                    <DialogHeader>
-                        <DialogTitle>Register New Security Key</DialogTitle>
-                        <DialogDescription>
-                            Connect your security key and enter a name to identify it
-                        </DialogDescription>
-                    </DialogHeader>
 
+                    {dialogState === "register" && (
+                        <>
+                            <CredenzaHeader>
+                                <CredenzaTitle>
+                                    {t("securityKeyRegisterTitle")}
+                                </CredenzaTitle>
+                                <CredenzaDescription>
+                                    {t("securityKeyRegisterDescription")}
+                                </CredenzaDescription>
+                            </CredenzaHeader>
+                            <CredenzaBody>
                                 <Form {...registerForm}>
-                        <form onSubmit={registerForm.handleSubmit(handleRegisterSecurityKey)} className="space-y-4">
+                                    <form
+                                        onSubmit={registerForm.handleSubmit(
+                                            handleRegisterSecurityKey
+                                        )}
+                                        className="space-y-4"
+                                        id="form"
+                                    >
                                         <FormField
                                             control={registerForm.control}
                                             name="name"
                                             render={({ field }: FieldProps) => (
                                                 <FormItem>
-                                        <FormLabel>{t('securityKeyNameLabel')}</FormLabel>
+                                                    <FormLabel>
+                                                        {t(
+                                                            "securityKeyNameLabel"
+                                                        )}
+                                                    </FormLabel>
                                                     <FormControl>
                                                         <Input
                                                             {...field}
-                                                placeholder={t('securityKeyNamePlaceholder')}
+                                                            placeholder={t(
-                                                disabled={isRegistering}
+                                                                "securityKeyNamePlaceholder"
+                                                            )}
+                                                            disabled={
+                                                                isRegistering
+                                                            }
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
@@ -407,181 +598,262 @@ export default function SecurityKeyForm({ open, setOpen }: SecurityKeyFormProps)
                                             name="password"
                                             render={({ field }: FieldProps) => (
                                                 <FormItem>
-                                        <FormLabel>{t('password')}</FormLabel>
+                                                    <FormLabel>
+                                                        {t("password")}
+                                                    </FormLabel>
                                                     <FormControl>
                                                         <Input
                                                             {...field}
                                                             type="password"
-                                                disabled={isRegistering}
+                                                            disabled={
+                                                                isRegistering
+                                                            }
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
                                                 </FormItem>
                                             )}
                                         />
-
+                                    </form>
-                            <DialogFooter>
+                                </Form>
+                            </CredenzaBody>
+                            <CredenzaFooter>
+                                <CredenzaClose asChild>
                                     <Button
-                                    type="button"
+                                        variant="outline"
-                                    className="border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
                                         onClick={() => {
                                             registerForm.reset();
-                                        setShowRegisterDialog(false);
+                                            setDialogState("list");
                                         }}
                                         disabled={isRegistering}
                                     >
-                                    {t('cancel')}
+                                        {t("cancel")}
                                     </Button>
+                                </CredenzaClose>
                                 <Button
                                     type="submit"
+                                    form="form"
                                     disabled={isRegistering}
                                     className={cn(
                                         "min-w-[100px]",
-                                        isRegistering && "cursor-not-allowed opacity-50"
+                                        isRegistering &&
+                                            "cursor-not-allowed opacity-50"
                                     )}
+                                    loading={isRegistering}
                                 >
-                                    {isRegistering ? (
+                                    {t("securityKeyRegister")}
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            {t('registering')}
-                                        </>
-                                    ) : (
-                                        t('securityKeyRegister')
-                                    )}
                                 </Button>
-                            </DialogFooter>
+                            </CredenzaFooter>
-                        </form>
+                        </>
-                    </Form>
+                    )}
-                </DialogContent>
-            </Dialog>
 
-            <Dialog open={!!selectedSecurityKey} onOpenChange={(open) => !open && setSelectedSecurityKey(null)}>
+                    {dialogState === "register2fa" && (
-                <DialogContent className="sm:max-w-[400px]">
+                        <>
-                    <DialogHeader>
+                            <CredenzaHeader>
-                        <DialogTitle className="flex items-center gap-2 text-destructive">
+                                <CredenzaTitle>
-                            <Trash2 className="h-4 w-4" />
+                                    {t("securityKeyTwoFactorRequired")}
-                            Remove Security Key
+                                </CredenzaTitle>
-                        </DialogTitle>
+                                <CredenzaDescription>
-                        <DialogDescription>
+                                    {t("securityKeyTwoFactorDescription")}
-                            Enter your password to remove the security key "{selectedSecurityKey?.name}"
+                                </CredenzaDescription>
-                        </DialogDescription>
+                            </CredenzaHeader>
-                    </DialogHeader>
+                            <CredenzaBody>
+                                <div className="space-y-4">
+                                    <div>
+                                        <label className="text-sm font-medium">
+                                            {t("securityKeyTwoFactorCode")}
+                                        </label>
+                                        <Input
+                                            type="text"
+                                            value={register2FAForm.code}
+                                            onChange={(e) =>
+                                                setRegister2FAForm({
+                                                    code: e.target.value
+                                                })
+                                            }
+                                            maxLength={6}
+                                            disabled={isRegistering}
+                                        />
+                                    </div>
+                                </div>
+                            </CredenzaBody>
+                            <CredenzaFooter>
+                                <CredenzaClose asChild>
+                                    <Button
+                                        variant="outline"
+                                        onClick={() => {
+                                            setRegister2FAForm({ code: "" });
+                                            setDialogState("list");
+                                            setPendingRegisterData(null);
+                                        }}
+                                        disabled={isRegistering}
+                                    >
+                                        {t("cancel")}
+                                    </Button>
+                                </CredenzaClose>
+                                <Button
+                                    type="button"
+                                    className="min-w-[100px]"
+                                    disabled={
+                                        isRegistering ||
+                                        register2FAForm.code.length !== 6
+                                    }
+                                    loading={isRegistering}
+                                    onClick={() =>
+                                        handleRegister2FASubmit({
+                                            code: register2FAForm.code
+                                        })
+                                    }
+                                >
+                                    {t("securityKeyRegister")}
+                                </Button>
+                            </CredenzaFooter>
+                        </>
+                    )}
 
+                    {dialogState === "delete" && (
+                        <>
+                            <CredenzaHeader>
+                                <CredenzaTitle className="flex items-center gap-2">
+                                    {t("securityKeyRemoveTitle")}
+                                </CredenzaTitle>
+                                <CredenzaDescription>
+                                    {t("securityKeyRemoveDescription", { name: selectedSecurityKey!.name! })}
+                                </CredenzaDescription>
+                            </CredenzaHeader>
+                            <CredenzaBody>
                                 <Form {...deleteForm}>
-                        <form onSubmit={deleteForm.handleSubmit(handleDeleteSecurityKey)} className="space-y-4">
+                                    <form
+                                        onSubmit={deleteForm.handleSubmit(
+                                            handleDeleteSecurityKey
+                                        )}
+                                        className="space-y-4"
+                                        id="delete-form"
+                                    >
                                         <FormField
                                             control={deleteForm.control}
                                             name="password"
                                             render={({ field }) => (
                                                 <FormItem>
-                                        <FormLabel>{t('password')}</FormLabel>
+                                                    <FormLabel>
+                                                        {t("password")}
+                                                    </FormLabel>
                                                     <FormControl>
                                                         <Input
                                                             {...field}
                                                             type="password"
-                                                disabled={deleteInProgress}
+                                                            disabled={
+                                                                deleteInProgress
+                                                            }
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
                                                 </FormItem>
                                             )}
                                         />
-
+                                    </form>
-                            <DialogFooter>
+                                </Form>
+                            </CredenzaBody>
+                            <CredenzaFooter>
+                                <CredenzaClose asChild>
                                     <Button
-                                    type="button"
+                                        variant="outline"
-                                    className="border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
                                         onClick={() => {
                                             deleteForm.reset();
                                             setSelectedSecurityKey(null);
+                                            setDialogState("list");
                                         }}
                                         disabled={deleteInProgress}
                                     >
-                                    {t('cancel')}
+                                        {t("cancel")}
                                     </Button>
+                                </CredenzaClose>
                                 <Button
                                     type="submit"
+                                    form="delete-form"
                                     className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                     disabled={deleteInProgress}
+                                    loading={deleteInProgress}
                                 >
-                                    {deleteInProgress ? (
+                                    {t("securityKeyRemove")}
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            {t('securityKeyRemoving')}
-                                        </>
-                                    ) : (
-                                        t('securityKeyRemove')
-                                    )}
                                 </Button>
-                            </DialogFooter>
+                            </CredenzaFooter>
-                        </form>
+                        </>
-                    </Form>
+                    )}
-                </DialogContent>
-            </Dialog>
-
-            <Dialog open={show2FADialog} onOpenChange={(open) => !open && setShow2FADialog(false)}>
-                <DialogContent className="sm:max-w-[400px]">
-                    <DialogHeader>
-                        <DialogTitle>Two-Factor Authentication Required</DialogTitle>
-                        <DialogDescription>
-                            Please enter your two-factor authentication code to remove the security key
-                        </DialogDescription>
-                    </DialogHeader>
 
+                    {dialogState === "delete2fa" && (
+                        <>
+                            <CredenzaHeader>
+                                <CredenzaTitle>
+                                    {t("securityKeyTwoFactorRequired")}
+                                </CredenzaTitle>
+                                <CredenzaDescription>
+                                    {t("securityKeyTwoFactorRemoveDescription")}
+                                </CredenzaDescription>
+                            </CredenzaHeader>
+                            <CredenzaBody>
                                 <Form {...deleteForm}>
-                        <form onSubmit={deleteForm.handleSubmit(handle2FASubmit)} className="space-y-4">
+                                    <form
+                                        onSubmit={deleteForm.handleSubmit(
+                                            handle2FASubmit
+                                        )}
+                                        className="space-y-4"
+                                        id="delete2fa-form"
+                                    >
                                         <FormField
                                             control={deleteForm.control}
                                             name="code"
                                             render={({ field }) => (
                                                 <FormItem>
-                                        <FormLabel>Two-Factor Code</FormLabel>
+                                                    <FormLabel>
+                                                        {t("securityKeyTwoFactorCode")}
+                                                    </FormLabel>
                                                     <FormControl>
                                                         <Input
                                                             {...field}
                                                             type="text"
-                                                placeholder="Enter your 6-digit code"
+                                                            maxLength={6}
-                                                disabled={deleteInProgress}
+                                                            disabled={
+                                                                deleteInProgress
+                                                            }
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
                                                 </FormItem>
                                             )}
                                         />
-
+                                    </form>
-                            <DialogFooter>
+                                </Form>
+                            </CredenzaBody>
+                            <CredenzaFooter>
+                                <CredenzaClose asChild>
                                     <Button
-                                    type="button"
+                                        variant="outline"
-                                    className="border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
                                         onClick={() => {
                                             deleteForm.reset();
-                                        setShow2FADialog(false);
+                                            setDialogState("list");
                                             setPendingDeleteCredentialId(null);
                                             setPendingDeletePassword(null);
                                         }}
                                         disabled={deleteInProgress}
                                     >
-                                    {t('cancel')}
+                                        {t("cancel")}
                                     </Button>
+                                </CredenzaClose>
                                 <Button
                                     type="submit"
+                                    form="delete2fa-form"
                                     className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                     disabled={deleteInProgress}
+                                    loading={deleteInProgress}
                                 >
-                                    {deleteInProgress ? (
+                                    {t("securityKeyRemove")}
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            {t('securityKeyRemoving')}
-                                        </>
-                                    ) : (
-                                        t('securityKeyRemove')
-                                    )}
                                 </Button>
-                            </DialogFooter>
+                            </CredenzaFooter>
-                        </form>
+                        </>
-                    </Form>
+                    )}
-                </DialogContent>
+                </CredenzaContent>
-            </Dialog>
+            </Credenza>
         </>
     );
 }