adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add auth UI foundation components and layout

Browse Source
This commit is contained in:
adrianbonpin
2026-04-26 01:17:08 +08:00
parent 9588733278
commit d09496ed6a
5 changed files with 385 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(auth)/layout.tsx
+37
View File
@@ -0,0 +1,37 @@
import type { Metadata } from "next"
import { Lock } from "lucide-react"
import Link from "next/link"
export const metadata: Metadata = {
title: "Authentication",
}
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="flex-1 flex items-center justify-center px-4 py-8 relative overflow-hidden">
{/* Background decorative orbs */}
<div className="absolute top-10 left-10 w-32 h-32 rounded-full bg-[#eb3779]/10 blur-3xl pointer-events-none" />
<div className="absolute bottom-16 right-16 w-24 h-24 rounded-full bg-[#571b8b]/15 blur-2xl pointer-events-none" />
{/* Auth card */}
<div className="w-full max-w-[400px] bg-white/[0.03] border border-white/[0.08] rounded-xl p-7 backdrop-blur-sm relative z-10">
{/* Logo */}
<Link
href="/"
className="flex items-center justify-center gap-2 mb-6"
>
<Lock className="h-5 w-5 text-[#eb3779]" />
<span className="text-lg font-bold text-[#ebe4f1]">
DeckyVault
</span>
</Link>
{children}
</div>
</div>
)
}
components/auth/otp-input.tsx
+130
View File
@@ -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>
)
}
components/auth/password-strength.tsx
+97
View File
@@ -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>
)
}
components/auth/social-buttons.tsx
+87
View File
@@ -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>
)
}
components/auth/step-indicator.tsx
+34
View File
@@ -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>
)
}