@wealthx/shadcn 1.5.28 → 1.5.30

package/src/components/ui/two-fa-setup-form.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useState } from "react";
 import { Smartphone } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -6,19 +5,20 @@ import { Field, FieldError } from "@/components/ui/field";
 import { InputGroup, InputGroupInput } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 export type TwoFAApp = {
   name: string;
-  icon?: React.ReactNode;
-  qrNode?: React.ReactNode;
+  icon?: ReactNode;
+  qrNode?: ReactNode;
 };
 
 export type TwoFASetupFormProps = {
   title?: string;
   apps?: TwoFAApp[];
-  qrCodeNode?: React.ReactNode;
+  qrCodeNode?: ReactNode;
   onVerify: (token: string) => Promise<void>;
   onSetupLater?: () => void;
   required?: boolean;
@@ -30,6 +30,17 @@ const DEFAULT_APPS: TwoFAApp[] = [
   { name: "Microsoft Authenticator" },
 ];
 
+const STEP_META = {
+  1: {
+    subtitle: "We recommend Google Authenticator or Microsoft Authenticator",
+    defaultTitle: "2FA Setup",
+  },
+  2: {
+    title: "Open Auth App and Scan Code",
+    subtitle: "Open your authenticator app and scan the QR code",
+  },
+} as const;
+
 // ─── AppDownloadStep ─────────────────────────────────────────────────────────
 
 function AppDownloadStep({
@@ -45,27 +56,28 @@ function AppDownloadStep({
 }) {
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
         {apps.map((app) => (
           <div
             key={app.name}
-            className="flex flex-1 flex-col items-center gap-3 border border-border bg-muted/30 p-4 text-center"
+            className="flex items-center gap-4 border border-border bg-muted/30 p-4"
           >
-            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-              {app.icon ?? (
-                <Smartphone size={18} className="text-muted-foreground" />
+            <div className="flex shrink-0 items-center justify-center">
+              {app.qrNode ?? (
+                <div className="flex h-[80px] w-[80px] items-center justify-center border border-dashed border-border bg-muted/50 text-[11px] text-muted-foreground">
+                  Scan
+                </div>
               )}
-              {app.name}
             </div>
-            {app.qrNode ? (
-              <div className="flex items-center justify-center">
-                {app.qrNode}
-              </div>
-            ) : (
-              <div className="flex h-[100px] w-[100px] items-center justify-center border border-dashed border-border bg-muted/50 text-[11px] text-muted-foreground">
-                Scan to download
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                {app.icon ?? (
+                  <Smartphone size={16} className="text-muted-foreground" />
+                )}
+                {app.name}
               </div>
-            )}
+              <p className="text-xs text-muted-foreground">Scan to download</p>
+            </div>
           </div>
         ))}
       </div>
@@ -97,7 +109,7 @@ function VerificationStep({
   onSetupLater,
   required,
 }: {
-  qrCodeNode?: React.ReactNode;
+  qrCodeNode?: ReactNode;
   onVerify: (token: string) => Promise<void>;
   onBack: () => void;
   onSetupLater?: () => void;
@@ -116,8 +128,10 @@ function VerificationStep({
     setIsLoading(true);
     try {
       await onVerify(token);
-    } catch {
-      setError("Invalid code. Please try again.");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Invalid code. Please try again."
+      );
     } finally {
       setIsLoading(false);
     }
@@ -126,9 +140,7 @@ function VerificationStep({
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col items-center gap-3">
-        {qrCodeNode ? (
-          <div className="flex items-center justify-center">{qrCodeNode}</div>
-        ) : (
+        {qrCodeNode ?? (
           <div className="flex h-[140px] w-[140px] items-center justify-center border border-dashed border-border bg-muted/50 text-xs text-muted-foreground">
             QR Code
           </div>
@@ -185,7 +197,7 @@ function VerificationStep({
 // ─── TwoFASetupForm ───────────────────────────────────────────────────────────
 
 export function TwoFASetupForm({
-  title = "2FA Setup",
+  title,
   apps = DEFAULT_APPS,
   qrCodeNode,
   onVerify,
@@ -195,15 +207,13 @@ export function TwoFASetupForm({
 }: TwoFASetupFormProps) {
   const [step, setStep] = useState<1 | 2>(1);
 
-  const stepTitle = step === 1 ? title : "Open Auth App and Scan Code";
-  const stepSubtitle =
-    step === 1
-      ? "We recommend Google Authenticator or Microsoft Authenticator"
-      : "Open your authenticator app and scan the QR code";
+  const stepTitle =
+    step === 1 ? title ?? STEP_META[1].defaultTitle : STEP_META[2].title;
+  const stepSubtitle = STEP_META[step].subtitle;
 
   return (
     <div className={cn("flex flex-col gap-6", className)}>
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col items-center gap-1 text-center">
         <h2 className="text-xl font-semibold text-foreground">{stepTitle}</h2>
         <p className="text-sm text-muted-foreground">{stepSubtitle}</p>
       </div>