Auth Two Factor Verify

1"use client";
2 
3import { Loader2, RefreshCw, ShieldCheck } from "lucide-react";
4import { useCallback, useEffect, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/new-york/ui/button";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card";
14import {
15  Field,
16  FieldContent,
17  FieldError,
18  FieldLabel,
19} from "@/registry/new-york/ui/field";
20import {
21  InputGroup,
22  InputGroupAddon,
23  InputGroupInput,
24} from "@/registry/new-york/ui/input-group";
25import {
26  InputOTP,
27  InputOTPGroup,
28  InputOTPSlot,
29} from "@/registry/new-york/ui/input-otp";
30import { Separator } from "@/registry/new-york/ui/separator";
31 
32interface ErrorAlertProps {
33  message: string;
34}
35 
36function ErrorAlert({ message }: ErrorAlertProps) {
37  return (
38    <div
39      aria-live="polite"
40      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
41      role="alert"
42    >
43      {message}
44    </div>
45  );
46}
47 
48function Header() {
49  return (
50    <>
51      <CardTitle className="flex items-center gap-2">
52        Verify two-factor authentication
53      </CardTitle>
54      <CardDescription>
55        Enter the 6-digit code from your authenticator app
56      </CardDescription>
57    </>
58  );
59}
60 
61interface RecoveryCodeFieldProps {
62  value: string;
63  onChange: (value: string) => void;
64  error?: string;
65}
66 
67function RecoveryCodeField({ value, onChange, error }: RecoveryCodeFieldProps) {
68  return (
69    <Field data-invalid={!!error}>
70      <FieldLabel htmlFor="recovery-code">
71        Recovery code
72        <span aria-label="required" className="text-destructive">
73          *
74        </span>
75      </FieldLabel>
76      <FieldContent>
77        <InputGroup aria-invalid={!!error}>
78          <InputGroupAddon>
79            <ShieldCheck aria-hidden="true" className="size-4" />
80          </InputGroupAddon>
81          <InputGroupInput
82            aria-describedby={error ? "recovery-code-error" : undefined}
83            aria-invalid={!!error}
84            autoComplete="one-time-code"
85            id="recovery-code"
86            name="recoveryCode"
87            onChange={(e) => onChange(e.target.value)}
88            placeholder="Enter recovery code…"
89            required
90            type="text"
91            value={value}
92          />
93        </InputGroup>
94        {error && <FieldError id="recovery-code-error">{error}</FieldError>}
95      </FieldContent>
96    </Field>
97  );
98}
99 
100// … truncated