feat: add auth UI foundation components and layout

2026-04-26 01:17:08 +08:00
parent 9588733278
commit d09496ed6a
5 changed files with 385 additions and 0 deletions
@@ -0,0 +1,130 @@
+"use client"
+
+import { useRef, useState, useCallback, useEffect } from "react"
+
+interface OtpInputProps {
+    length?: number
+    value: string
+    onChange: (value: string) => void
+    disabled?: boolean
+    error?: string
+}
+
+export default function OtpInput({
+    length = 6,
+    value,
+    onChange,
+    disabled = false,
+    error,
+}: OtpInputProps) {
+    const [digits, setDigits] = useState<string[]>(
+        value.split("").concat(Array(length).fill("")).slice(0, length),
+    )
+    const refs = useRef<(HTMLInputElement | null)[]>([])
+
+    // Sync with external value
+    useEffect(() => {
+        const newDigits = value
+            .split("")
+            .concat(Array(length).fill(""))
+            .slice(0, length)
+        setDigits(newDigits)
+    }, [value, length])
+
+    const updateDigits = useCallback(
+        (newDigits: string[]) => {
+            setDigits(newDigits)
+            onChange(newDigits.join(""))
+        },
+        [onChange],
+    )
+
+    const handleChange = useCallback(
+        (index: number, val: string) => {
+            // Only allow single digit
+            const digit = val.replace(/\D/g, "").slice(-1)
+            const newDigits = [...digits]
+            newDigits[index] = digit
+            updateDigits(newDigits)
+
+            // Auto-advance to next box
+            if (digit && index < length - 1) {
+                refs.current[index + 1]?.focus()
+            }
+        },
+        [digits, length, updateDigits],
+    )
+
+    const handleKeyDown = useCallback(
+        (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Backspace") {
+                if (!digits[index] && index > 0) {
+                    // Move to previous box if current is empty
+                    refs.current[index - 1]?.focus()
+                    const newDigits = [...digits]
+                    newDigits[index - 1] = ""
+                    updateDigits(newDigits)
+                }
+            } else if (e.key === "ArrowLeft" && index > 0) {
+                refs.current[index - 1]?.focus()
+            } else if (e.key === "ArrowRight" && index < length - 1) {
+                refs.current[index + 1]?.focus()
+            }
+        },
+        [digits, length, updateDigits],
+    )
+
+    const handlePaste = useCallback(
+        (e: React.ClipboardEvent<HTMLInputElement>) => {
+            e.preventDefault()
+            const pasted = e.clipboardData
+                .getData("text")
+                .replace(/\D/g, "")
+                .slice(0, length)
+            const newDigits = Array(length).fill("")
+            for (let i = 0; i < pasted.length; i++) {
+                newDigits[i] = pasted[i]
+            }
+            updateDigits(newDigits)
+
+            // Focus last filled box or next empty
+            const focusIndex = Math.min(pasted.length, length - 1)
+            refs.current[focusIndex]?.focus()
+        },
+        [length, updateDigits],
+    )
+
+    return (
+        <div>
+            <div className="flex gap-2 justify-center">
+                {Array.from({ length }).map((_, i) => (
+                    <input
+                        key={i}
+                        ref={(el) => {
+                            refs.current[i] = el
+                        }}
+                        type="text"
+                        inputMode="numeric"
+                        maxLength={1}
+                        value={digits[i]}
+                        onChange={(e) => handleChange(i, e.target.value)}
+                        onKeyDown={(e) => handleKeyDown(i, e)}
+                        onPaste={handlePaste}
+                        disabled={disabled}
+                        aria-label={`Digit ${i + 1} of ${length}`}
+                        className={`w-11 h-[52px] text-center text-xl font-bold rounded-lg border bg-white/[0.03] text-[#ebe4f1] outline-none transition-colors ${
+                            error
+                                ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500/50"
+                                : "border-white/10 focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50"
+                        } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+                    />
+                ))}
+            </div>
+            {error && (
+                <p className="text-red-400 text-xs mt-2 text-center">
+                    {error}
+                </p>
+            )}
+        </div>
+    )
+}
@@ -0,0 +1,97 @@
+"use client"
+
+import { ShieldCheck, ShieldAlert, ShieldQuestion } from "lucide-react"
+import { motion } from "motion/react"
+import {
+    checkPasswordStrength,
+    type StrengthLevel,
+} from "@/lib/auth/password-strength"
+
+interface PasswordStrengthProps {
+    password: string
+}
+
+const levelColors: Record<StrengthLevel, string> = {
+    weak: "#ef4444",
+    fair: "#f59e0b",
+    good: "#eab308",
+    strong: "#22c55e",
+    excellent: "#10b981",
+}
+
+const levelLabels: Record<StrengthLevel, string> = {
+    weak: "Weak",
+    fair: "Fair",
+    good: "Good",
+    strong: "Strong",
+    excellent: "Excellent",
+}
+
+const levelBars: Record<StrengthLevel, number> = {
+    weak: 1,
+    fair: 2,
+    good: 3,
+    strong: 4,
+    excellent: 5,
+}
+
+export default function PasswordStrengthMeter({
+    password,
+}: PasswordStrengthProps) {
+    if (!password) return null
+
+    const { level, feedback } = checkPasswordStrength(password)
+    const color = levelColors[level]
+    const bars = levelBars[level]
+
+    return (
+        <div className="mt-2">
+            {/* Bar indicator */}
+            <div className="flex gap-1 mb-1.5">
+                {Array.from({ length: 5 }).map((_, i) => (
+                    <motion.div
+                        key={i}
+                        className="h-[3px] flex-1 rounded-full"
+                        initial={{ backgroundColor: "rgba(255,255,255,0.1)" }}
+                        animate={{
+                            backgroundColor:
+                                i < bars ? color : "rgba(255,255,255,0.1)",
+                        }}
+                        transition={{ duration: 0.2 }}
+                    />
+                ))}
+            </div>
+
+            {/* Label and feedback */}
+            <div className="flex items-start gap-1.5">
+                {level === "excellent" || level === "strong" ? (
+                    <ShieldCheck
+                        className="h-3.5 w-3.5 mt-0.5 shrink-0"
+                        style={{ color }}
+                    />
+                ) : level === "weak" ? (
+                    <ShieldAlert
+                        className="h-3.5 w-3.5 mt-0.5 shrink-0"
+                        style={{ color }}
+                    />
+                ) : (
+                    <ShieldQuestion
+                        className="h-3.5 w-3.5 mt-0.5 shrink-0"
+                        style={{ color }}
+                    />
+                )}
+                <div>
+                    <span className="text-xs font-medium" style={{ color }}>
+                        {levelLabels[level]}
+                    </span>
+                    {feedback.length > 0 &&
+                        feedback[0] !== "Great password!" && (
+                            <span className="text-xs text-[#ebe4f1]/50 ml-1">
+                                — {feedback[0]}
+                            </span>
+                        )}
+                </div>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,87 @@
+"use client"
+
+import { useState } from "react"
+import { Loader2 } from "lucide-react"
+import { authClient } from "@/lib/auth-client"
+
+interface SocialButtonsProps {
+    callbackURL?: string
+    disabled?: boolean
+}
+
+export default function SocialButtons({
+    callbackURL = "/",
+    disabled = false,
+}: SocialButtonsProps) {
+    const [loadingProvider, setLoadingProvider] = useState<
+        "google" | "discord" | null
+    >(null)
+
+    const handleSocialLogin = async (provider: "google" | "discord") => {
+        setLoadingProvider(provider)
+        await authClient.signIn.social(
+            {
+                provider,
+                callbackURL,
+            },
+            {
+                onError: () => {
+                    setLoadingProvider(null)
+                },
+            },
+        )
+    }
+
+    const isLoading = loadingProvider !== null
+
+    return (
+        <div className="flex gap-2">
+            <button
+                type="button"
+                onClick={() => handleSocialLogin("google")}
+                disabled={disabled || isLoading}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm font-medium hover:bg-white/[0.06] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                {loadingProvider === "google" ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                    <svg className="h-4 w-4" viewBox="0 0 24 24">
+                        <path
+                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+                            fill="#4285F4"
+                        />
+                        <path
+                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                            fill="#34A853"
+                        />
+                        <path
+                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                            fill="#FBBC05"
+                        />
+                        <path
+                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                            fill="#EA4335"
+                        />
+                    </svg>
+                )}
+                Google
+            </button>
+
+            <button
+                type="button"
+                onClick={() => handleSocialLogin("discord")}
+                disabled={disabled || isLoading}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm font-medium hover:bg-white/[0.06] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                {loadingProvider === "discord" ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="#5865F2">
+                        <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z" />
+                    </svg>
+                )}
+                Discord
+            </button>
+        </div>
+    )
+}
@@ -0,0 +1,34 @@
+"use client"
+
+import { motion } from "motion/react"
+
+interface StepIndicatorProps {
+    currentStep: number
+    totalSteps: number
+}
+
+export default function StepIndicator({
+    currentStep,
+    totalSteps,
+}: StepIndicatorProps) {
+    return (
+        <div className="flex gap-2 justify-center">
+            {Array.from({ length: totalSteps }).map((_, i) => (
+                <motion.div
+                    key={i}
+                    className="h-1 w-8 rounded-full"
+                    initial={false}
+                    animate={{
+                        backgroundColor:
+                            i < currentStep - 1
+                                ? "#22c55e" // completed
+                                : i === currentStep - 1
+                                  ? "#eb3779" // current
+                                  : "rgba(255,255,255,0.1)", // upcoming
+                    }}
+                    transition={{ duration: 0.3 }}
+                />
+            ))}
+        </div>
+    )
+}