Auth Two Factor Setup

1"use client";
2 
3import {
4  CheckCircle2,
5  Copy,
6  Download,
7  Eye,
8  EyeOff,
9  Loader2,
10  QrCode,
11  RefreshCw,
12  Shield,
13  ShieldCheck,
14  ShieldOff,
15} from "lucide-react";
16import Image from "next/image";
17import { useCallback, useState } from "react";
18import { cn } from "@/lib/utils";
19import { Button } from "@/registry/new-york/ui/button";
20import {
21  Card,
22  CardContent,
23  CardDescription,
24  CardHeader,
25  CardTitle,
26} from "@/registry/new-york/ui/card";
27import {
28  Field,
29  FieldContent,
30  FieldDescription,
31  FieldError,
32  FieldLabel,
33} from "@/registry/new-york/ui/field";
34import {
35  InputGroup,
36  InputGroupAddon,
37  InputGroupButton,
38  InputGroupInput,
39} from "@/registry/new-york/ui/input-group";
40import { Separator } from "@/registry/new-york/ui/separator";
41import { Switch } from "@/registry/new-york/ui/switch";
42 
43interface ErrorAlertProps {
44  message: string;
45}
46 
47function ErrorAlert({ message }: ErrorAlertProps) {
48  return (
49    <div
50      aria-live="polite"
51      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
52      role="alert"
53    >
54      {message}
55    </div>
56  );
57}
58 
59interface EnabledStateHeaderProps {
60  className?: string;
61}
62 
63function EnabledStateHeader({ className }: EnabledStateHeaderProps) {
64  return (
65    <div
66      className={cn(
67        "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
68        className
69      )}
70    >
71      <div className="min-w-0 flex-1">
72        <CardTitle className="flex flex-wrap items-center gap-2">
73          <ShieldCheck
74            aria-hidden="true"
75            className="size-5 shrink-0 text-primary"
76          />
77          <span className="wrap-break-word">Two-factor authentication</span>
78        </CardTitle>
79        <CardDescription className="wrap-break-word">
80          Your account is protected with 2FA
81        </CardDescription>
82      </div>
83      <div className="flex shrink-0 items-center gap-2">
84        <span className="whitespace-nowrap text-muted-foreground text-sm">
85          Enabled
86        </span>
87        <Switch checked={true} disabled />
88      </div>
89    </div>
90  );
91}
92 
93function ActiveStatusCard() {
94  return (
95    <div className="rounded-lg border bg-muted/50 p-4">
96      <div className="flex items-start gap-3">
97        <ShieldCheck
98          aria-hidden="true"
99          className="size-5 shrink-0 text-primary"
100        />
101        <div className="flex min-w-0 flex-1 flex-col gap-2">
102// … truncated