@wakastellar/ui 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",

package/src/blocks/auth-2fa/index.tsx

@@ -0,0 +1,655 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/card"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Label } from "../../components/label"
+import { Badge } from "../../components/badge"
+import { Separator } from "../../components/separator"
+import { RadioGroup, RadioGroupItem } from "../../components/radio-group"
+import {
+  Shield,
+  Smartphone,
+  Mail,
+  Key,
+  Copy,
+  Check,
+  RefreshCw,
+  AlertTriangle,
+  Lock,
+  QrCode,
+  Download,
+  Eye,
+  EyeOff,
+  ChevronRight,
+  ShieldCheck,
+  ShieldAlert,
+  Fingerprint,
+  MessageSquare,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type TwoFactorMethod = "authenticator" | "sms" | "email" | "hardware"
+
+export interface BackupCode {
+  code: string
+  used: boolean
+}
+
+export interface TwoFactorStatus {
+  enabled: boolean
+  method?: TwoFactorMethod
+  phone?: string
+  email?: string
+  lastVerified?: Date | string
+}
+
+export interface Auth2FAProps {
+  /** Current 2FA status */
+  status?: TwoFactorStatus
+  /** Available methods */
+  availableMethods?: TwoFactorMethod[]
+  /** QR code data URL for authenticator setup */
+  qrCodeUrl?: string
+  /** Secret key for manual entry */
+  secretKey?: string
+  /** Backup codes */
+  backupCodes?: BackupCode[]
+  /** Handler for enabling 2FA */
+  onEnable?: (method: TwoFactorMethod, verificationCode: string) => Promise<boolean>
+  /** Handler for disabling 2FA */
+  onDisable?: (verificationCode: string) => Promise<boolean>
+  /** Handler for regenerating backup codes */
+  onRegenerateBackupCodes?: () => Promise<BackupCode[]>
+  /** Handler for sending verification code */
+  onSendCode?: (method: TwoFactorMethod) => Promise<boolean>
+  /** Custom className */
+  className?: string
+}
+
+// ============================================
+// SUBCOMPONENTS
+// ============================================
+
+const methodConfig = {
+  authenticator: {
+    icon: <Smartphone className="h-5 w-5" />,
+    title: "Authenticator App",
+    description: "Use an app like Google Authenticator or Authy",
+    recommended: true,
+  },
+  sms: {
+    icon: <MessageSquare className="h-5 w-5" />,
+    title: "SMS",
+    description: "Receive codes via text message",
+    recommended: false,
+  },
+  email: {
+    icon: <Mail className="h-5 w-5" />,
+    title: "Email",
+    description: "Receive codes via email",
+    recommended: false,
+  },
+  hardware: {
+    icon: <Key className="h-5 w-5" />,
+    title: "Hardware Key",
+    description: "Use a physical security key (YubiKey, etc.)",
+    recommended: true,
+  },
+}
+
+function MethodSelector({
+  methods,
+  selected,
+  onSelect,
+}: {
+  methods: TwoFactorMethod[]
+  selected: TwoFactorMethod
+  onSelect: (method: TwoFactorMethod) => void
+}) {
+  return (
+    <RadioGroup value={selected} onValueChange={(v) => onSelect(v as TwoFactorMethod)}>
+      <div className="space-y-3">
+        {methods.map((method) => {
+          const config = methodConfig[method]
+          return (
+            <Label
+              key={method}
+              className={cn(
+                "flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-colors",
+                selected === method ? "border-primary bg-primary/5" : "hover:bg-muted/50"
+              )}
+            >
+              <RadioGroupItem value={method} />
+              <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center">
+                {config.icon}
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{config.title}</span>
+                  {config.recommended && (
+                    <Badge variant="secondary" className="text-xs">Recommended</Badge>
+                  )}
+                </div>
+                <p className="text-sm text-muted-foreground">{config.description}</p>
+              </div>
+            </Label>
+          )
+        })}
+      </div>
+    </RadioGroup>
+  )
+}
+
+function CodeInput({
+  length = 6,
+  value,
+  onChange,
+}: {
+  length?: number
+  value: string
+  onChange: (value: string) => void
+}) {
+  const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])
+  const digits = value.padEnd(length, "").split("").slice(0, length)
+
+  const handleInput = (index: number, newValue: string) => {
+    if (!/^\d*$/.test(newValue)) return
+
+    const newDigits = [...digits]
+    newDigits[index] = newValue.slice(-1)
+    onChange(newDigits.join(""))
+
+    if (newValue && index < length - 1) {
+      inputRefs.current[index + 1]?.focus()
+    }
+  }
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus()
+    }
+  }
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault()
+    const pasteData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length)
+    onChange(pasteData)
+  }
+
+  return (
+    <div className="flex gap-2 justify-center">
+      {digits.map((digit, index) => (
+        <Input
+          key={index}
+          ref={(el) => { inputRefs.current[index] = el }}
+          type="text"
+          inputMode="numeric"
+          maxLength={1}
+          value={digit}
+          onChange={(e) => handleInput(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          onPaste={handlePaste}
+          className="w-12 h-14 text-center text-2xl font-mono"
+        />
+      ))}
+    </div>
+  )
+}
+
+function BackupCodesDisplay({
+  codes,
+  onRegenerate,
+  onDownload,
+}: {
+  codes: BackupCode[]
+  onRegenerate?: () => void
+  onDownload?: () => void
+}) {
+  const [copied, setCopied] = React.useState(false)
+  const [showCodes, setShowCodes] = React.useState(false)
+
+  const copyAllCodes = () => {
+    const codesText = codes.map((c) => c.code).join("\n")
+    navigator.clipboard.writeText(codesText)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const unusedCodes = codes.filter((c) => !c.used)
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Key className="h-5 w-5" />
+              Backup Codes
+            </CardTitle>
+            <CardDescription>
+              {unusedCodes.length} of {codes.length} codes remaining
+            </CardDescription>
+          </div>
+          <Button variant="ghost" size="icon" onClick={() => setShowCodes(!showCodes)}>
+            {showCodes ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-2">
+          {codes.map((code, index) => (
+            <div
+              key={index}
+              className={cn(
+                "font-mono text-sm p-2 rounded border text-center",
+                code.used
+                  ? "bg-muted text-muted-foreground line-through"
+                  : "bg-card"
+              )}
+            >
+              {showCodes ? code.code : "••••••••"}
+            </div>
+          ))}
+        </div>
+
+        {unusedCodes.length < 3 && (
+          <div className="mt-4 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 flex items-center gap-3">
+            <AlertTriangle className="h-5 w-5 text-yellow-500" />
+            <p className="text-sm">You're running low on backup codes. Consider regenerating them.</p>
+          </div>
+        )}
+      </CardContent>
+      <CardFooter className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={copyAllCodes}>
+          {copied ? <Check className="h-4 w-4 mr-2" /> : <Copy className="h-4 w-4 mr-2" />}
+          {copied ? "Copied" : "Copy All"}
+        </Button>
+        {onDownload && (
+          <Button variant="outline" size="sm" onClick={onDownload}>
+            <Download className="h-4 w-4 mr-2" />
+            Download
+          </Button>
+        )}
+        {onRegenerate && (
+          <Button variant="outline" size="sm" onClick={onRegenerate}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Regenerate
+          </Button>
+        )}
+      </CardFooter>
+    </Card>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function Auth2FA({
+  status = { enabled: false },
+  availableMethods = ["authenticator", "sms", "email"],
+  qrCodeUrl,
+  secretKey,
+  backupCodes,
+  onEnable,
+  onDisable,
+  onRegenerateBackupCodes,
+  onSendCode,
+  className,
+}: Auth2FAProps) {
+  const [step, setStep] = React.useState<"overview" | "setup" | "verify" | "disable">("overview")
+  const [selectedMethod, setSelectedMethod] = React.useState<TwoFactorMethod>(availableMethods[0])
+  const [verificationCode, setVerificationCode] = React.useState("")
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const [copied, setCopied] = React.useState(false)
+  const [codeSent, setCodeSent] = React.useState(false)
+
+  const handleCopySecret = () => {
+    if (secretKey) {
+      navigator.clipboard.writeText(secretKey)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  const handleSendCode = async () => {
+    if (!onSendCode) return
+    setIsLoading(true)
+    try {
+      await onSendCode(selectedMethod)
+      setCodeSent(true)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleEnable = async () => {
+    if (!onEnable) return
+    setIsLoading(true)
+    setError(null)
+    try {
+      const success = await onEnable(selectedMethod, verificationCode)
+      if (success) {
+        setStep("overview")
+        setVerificationCode("")
+      } else {
+        setError("Invalid verification code. Please try again.")
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleDisable = async () => {
+    if (!onDisable) return
+    setIsLoading(true)
+    setError(null)
+    try {
+      const success = await onDisable(verificationCode)
+      if (success) {
+        setStep("overview")
+        setVerificationCode("")
+      } else {
+        setError("Invalid verification code. Please try again.")
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn("space-y-6 max-w-2xl", className)}>
+      {/* Status Card */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {status.enabled ? (
+                <div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center">
+                  <ShieldCheck className="h-6 w-6 text-green-500" />
+                </div>
+              ) : (
+                <div className="h-12 w-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                  <ShieldAlert className="h-6 w-6 text-yellow-500" />
+                </div>
+              )}
+              <div>
+                <CardTitle>Two-Factor Authentication</CardTitle>
+                <CardDescription>
+                  {status.enabled
+                    ? `Enabled via ${methodConfig[status.method!]?.title}`
+                    : "Add an extra layer of security to your account"}
+                </CardDescription>
+              </div>
+            </div>
+            <Badge variant={status.enabled ? "default" : "secondary"}>
+              {status.enabled ? "Enabled" : "Disabled"}
+            </Badge>
+          </div>
+        </CardHeader>
+        {step === "overview" && (
+          <CardFooter>
+            {status.enabled ? (
+              <div className="flex gap-2 w-full">
+                <Button variant="outline" className="flex-1" onClick={() => setStep("setup")}>
+                  Change Method
+                </Button>
+                <Button variant="destructive" className="flex-1" onClick={() => setStep("disable")}>
+                  Disable 2FA
+                </Button>
+              </div>
+            ) : (
+              <Button className="w-full" onClick={() => setStep("setup")}>
+                <Shield className="h-4 w-4 mr-2" />
+                Enable Two-Factor Authentication
+              </Button>
+            )}
+          </CardFooter>
+        )}
+      </Card>
+
+      {/* Setup Step */}
+      {step === "setup" && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Choose Authentication Method</CardTitle>
+            <CardDescription>Select how you want to receive verification codes</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <MethodSelector
+              methods={availableMethods}
+              selected={selectedMethod}
+              onSelect={setSelectedMethod}
+            />
+          </CardContent>
+          <CardFooter className="flex gap-2">
+            <Button variant="outline" onClick={() => setStep("overview")}>
+              Cancel
+            </Button>
+            <Button className="flex-1" onClick={() => setStep("verify")}>
+              Continue
+              <ChevronRight className="h-4 w-4 ml-2" />
+            </Button>
+          </CardFooter>
+        </Card>
+      )}
+
+      {/* Verification Step */}
+      {step === "verify" && (
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              {selectedMethod === "authenticator" ? "Set Up Authenticator" : "Verify Your Identity"}
+            </CardTitle>
+            <CardDescription>
+              {selectedMethod === "authenticator"
+                ? "Scan the QR code with your authenticator app"
+                : `Enter the code sent to your ${selectedMethod}`}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {selectedMethod === "authenticator" && (
+              <>
+                {qrCodeUrl && (
+                  <div className="flex justify-center">
+                    <div className="p-4 bg-white rounded-lg">
+                      <img src={qrCodeUrl} alt="QR Code" className="h-48 w-48" />
+                    </div>
+                  </div>
+                )}
+
+                {secretKey && (
+                  <div className="space-y-2">
+                    <Label>Or enter this code manually:</Label>
+                    <div className="flex items-center gap-2">
+                      <Input value={secretKey} readOnly className="font-mono" />
+                      <Button variant="outline" size="icon" onClick={handleCopySecret}>
+                        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
+                <Separator />
+              </>
+            )}
+
+            {(selectedMethod === "sms" || selectedMethod === "email") && !codeSent && (
+              <div className="text-center">
+                <p className="text-sm text-muted-foreground mb-4">
+                  We'll send a verification code to your {selectedMethod === "sms" ? "phone" : "email"}
+                </p>
+                <Button onClick={handleSendCode} disabled={isLoading}>
+                  {isLoading ? (
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                  ) : selectedMethod === "sms" ? (
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                  ) : (
+                    <Mail className="h-4 w-4 mr-2" />
+                  )}
+                  Send Code
+                </Button>
+              </div>
+            )}
+
+            {(selectedMethod === "authenticator" || codeSent) && (
+              <div className="space-y-4">
+                <Label className="text-center block">Enter the 6-digit code</Label>
+                <CodeInput value={verificationCode} onChange={setVerificationCode} />
+                {error && (
+                  <p className="text-sm text-destructive text-center">{error}</p>
+                )}
+              </div>
+            )}
+          </CardContent>
+          <CardFooter className="flex gap-2">
+            <Button variant="outline" onClick={() => setStep("setup")}>
+              Back
+            </Button>
+            <Button
+              className="flex-1"
+              onClick={handleEnable}
+              disabled={verificationCode.length !== 6 || isLoading}
+            >
+              {isLoading ? (
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Lock className="h-4 w-4 mr-2" />
+              )}
+              Verify & Enable
+            </Button>
+          </CardFooter>
+        </Card>
+      )}
+
+      {/* Disable Step */}
+      {step === "disable" && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-destructive">Disable Two-Factor Authentication</CardTitle>
+            <CardDescription>
+              Enter your verification code to confirm. This will make your account less secure.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="p-4 rounded-lg bg-destructive/10 border border-destructive/20">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="h-5 w-5 text-destructive mt-0.5" />
+                <div>
+                  <p className="font-medium text-destructive">Warning</p>
+                  <p className="text-sm text-muted-foreground">
+                    Disabling 2FA will remove an important layer of security from your account.
+                    Anyone with your password will be able to access your account.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Enter your verification code</Label>
+              <CodeInput value={verificationCode} onChange={setVerificationCode} />
+              {error && (
+                <p className="text-sm text-destructive text-center">{error}</p>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex gap-2">
+            <Button variant="outline" onClick={() => setStep("overview")}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              className="flex-1"
+              onClick={handleDisable}
+              disabled={verificationCode.length !== 6 || isLoading}
+            >
+              {isLoading ? (
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <ShieldAlert className="h-4 w-4 mr-2" />
+              )}
+              Disable 2FA
+            </Button>
+          </CardFooter>
+        </Card>
+      )}
+
+      {/* Backup Codes */}
+      {status.enabled && backupCodes && backupCodes.length > 0 && step === "overview" && (
+        <BackupCodesDisplay
+          codes={backupCodes}
+          onRegenerate={onRegenerateBackupCodes}
+          onDownload={() => {
+            const codesText = backupCodes.map((c) => c.code).join("\n")
+            const blob = new Blob([codesText], { type: "text/plain" })
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement("a")
+            a.href = url
+            a.download = "backup-codes.txt"
+            a.click()
+          }}
+        />
+      )}
+
+      {/* Security Tips */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Fingerprint className="h-5 w-5" />
+            Security Tips
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-start gap-3">
+            <Check className="h-4 w-4 text-green-500 mt-1" />
+            <p className="text-sm text-muted-foreground">
+              Use an authenticator app for the most secure experience
+            </p>
+          </div>
+          <div className="flex items-start gap-3">
+            <Check className="h-4 w-4 text-green-500 mt-1" />
+            <p className="text-sm text-muted-foreground">
+              Store your backup codes in a safe place (password manager, safe deposit box)
+            </p>
+          </div>
+          <div className="flex items-start gap-3">
+            <Check className="h-4 w-4 text-green-500 mt-1" />
+            <p className="text-sm text-muted-foreground">
+              Never share your verification codes with anyone
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+// ============================================
+// PRESET DATA
+// ============================================
+
+export const defaultBackupCodes: BackupCode[] = [
+  { code: "ABCD-1234", used: false },
+  { code: "EFGH-5678", used: false },
+  { code: "IJKL-9012", used: true },
+  { code: "MNOP-3456", used: false },
+  { code: "QRST-7890", used: false },
+  { code: "UVWX-1234", used: true },
+  { code: "YZAB-5678", used: false },
+  { code: "CDEF-9012", used: false },
+]
+
+export const defaultStatus: TwoFactorStatus = {
+  enabled: true,
+  method: "authenticator",
+  lastVerified: new Date("2024-03-01"),
+}
+
+export default Auth2FA