Auth Recovery Codes

1"use client";
2 
3import {
4  AlertTriangle,
5  CheckCircle2,
6  Copy,
7  Download,
8  Eye,
9  EyeOff,
10  Loader2,
11  RefreshCw,
12  Shield,
13} from "lucide-react";
14import { useCallback, useState } from "react";
15import { cn } from "@/lib/utils";
16import {
17  Alert,
18  AlertDescription,
19  AlertTitle,
20} from "@/registry/new-york/ui/alert";
21import {
22  AlertDialog,
23  AlertDialogAction,
24  AlertDialogCancel,
25  AlertDialogContent,
26  AlertDialogDescription,
27  AlertDialogFooter,
28  AlertDialogHeader,
29  AlertDialogTitle,
30  AlertDialogTrigger,
31} from "@/registry/new-york/ui/alert-dialog";
32import { Button } from "@/registry/new-york/ui/button";
33import {
34  Card,
35  CardContent,
36  CardDescription,
37  CardHeader,
38  CardTitle,
39} from "@/registry/new-york/ui/card";
40 
41export interface AuthRecoveryCodesProps {
42  codes?: string[];
43  onGenerate?: () => void;
44  onRegenerate?: () => void;
45  className?: string;
46  isLoading?: boolean;
47  errors?: {
48    general?: string;
49  };
50}
51 
52function downloadCodes(codes: string[]): void {
53  if (codes.length === 0) return;
54  const content = codes.join("\n");
55  const blob = new Blob([content], { type: "text/plain" });
56  const url = URL.createObjectURL(blob);
57  const a = document.createElement("a");
58  a.href = url;
59  a.download = "recovery-codes.txt";
60  document.body.appendChild(a);
61  a.click();
62  document.body.removeChild(a);
63  URL.revokeObjectURL(url);
64}
65 
66interface ErrorAlertProps {
67  message: string;
68}
69 
70function ErrorAlert({ message }: ErrorAlertProps) {
71  return (
72    <div
73      aria-live="polite"
74      className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm"
75      role="alert"
76    >
77      {message}
78    </div>
79  );
80}
81 
82interface EmptyStateProps {
83  className?: string;
84}
85 
86function EmptyState({ className }: EmptyStateProps) {
87  return (
88    <Card className={cn("w-full max-w-sm shadow-xs", className)}>
89      <CardHeader>
90        <CardTitle className="flex items-center gap-2">
91          Recovery codes
92        </CardTitle>
93        <CardDescription>
94          Backup codes for two-factor authentication
95        </CardDescription>
96      </CardHeader>
97      <CardContent>
98        <div className="flex flex-col items-center justify-center py-8 text-center">
99          <p className="text-muted-foreground text-sm">
100            No recovery codes available. Generate codes to get started.
101          </p>
102        </div>
103      </CardContent>
104    </Card>
105  );
106}
107 
108interface EmptyStateWithGenerateProps {
109  isLoading: boolean;
110// … truncated