[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import AuthenticationCard from "@/components/authentication-card" export default function Home() { return (

{/* Subtle overlay for better contrast */}

) } [V0_FILE]typescriptreact:file="components/authentication-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Eye, EyeOff, Mail, Lock, User, ArrowLeft, Check, Shield, X } from "lucide-react" type AuthStep = "login" | "signup" | "forgot-password" | "reset-password" | "otp" | "success" type AuthMode = "login" | "signup" interface PasswordRequirement { label: string test: (password: string) => boolean } const passwordRequirements: PasswordRequirement[] = [ { label: "At least 8 characters", test: (pwd) => pwd.length >= 8 }, { label: "One uppercase letter", test: (pwd) => /[A-Z]/.test(pwd) }, { label: "One lowercase letter", test: (pwd) => /[a-z]/.test(pwd) }, { label: "One number", test: (pwd) => /\d/.test(pwd) }, { label: "One special character", test: (pwd) => /[!@#$%^&*(),.?":{}|<>]/.test(pwd) }, ] export default function AuthenticationCard() { const [step, setStep] = useState("login") const [mode, setMode] = useState("login") const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""], }) const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleOtpChange = (index: number, value: string) => { if (value.length <= 1 && /^\d*$/.test(value)) { const newOtp = [...formData.otp] newOtp[index] = value setFormData((prev) => ({ ...prev, otp: newOtp })) // Auto-focus next input if (value && index < 5) { const nextInput = document.getElementById(`otp-${index + 1}`) nextInput?.focus() } } } const getPasswordStrength = (password: string) => { const passedRequirements = passwordRequirements.filter((req) => req.test(password)).length if (passedRequirements === 0) return { strength: 0, label: "", color: "" } if (passedRequirements <= 2) return { strength: 25, label: "Weak", color: "bg-red-500" } if (passedRequirements <= 3) return { strength: 50, label: "Fair", color: "bg-yellow-500" } if (passedRequirements <= 4) return { strength: 75, label: "Good", color: "bg-blue-500" } return { strength: 100, label: "Strong", color: "bg-green-500" } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) if (step === "login" || step === "signup") { setStep("otp") } else if (step === "forgot-password") { setStep("reset-password") } else if (step === "reset-password") { setStep("success") } else if (step === "otp") { setStep("success") } setIsLoading(false) } const switchMode = (newMode: AuthMode) => { setMode(newMode) setStep(newMode) setFormData({ email: "", password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""] }) } const resetToLogin = () => { setStep("login") setMode("login") setFormData({ email: "", password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""] }) } const goToForgotPassword = () => { setStep("forgot-password") setFormData((prev) => ({ ...prev, password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""] })) } const getCardHeight = () => { switch (step) { case "login": return "h-[480px]" case "signup": return "h-[680px]" case "forgot-password": return "h-[380px]" case "reset-password": return "h-[520px]" case "otp": return "h-[380px]" case "success": return "h-[320px]" default: return "h-[480px]" } } const passwordStrength = getPasswordStrength(formData.password) const isSignupValid = step === "signup" && formData.name && formData.email && formData.password && formData.confirmPassword && formData.password === formData.confirmPassword && passwordRequirements.every((req) => req.test(formData.password)) return (

{/* Glass morphism card */}

{/* Content */}

{step === "login" && (

Welcome Back

handleInputChange("email", e.target.value)} className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Enter your email" required />

Password

handleInputChange("password", e.target.value)} className="pl-10 pr-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Enter your password" required />

)} {step === "signup" && (

Create Account

Join us today

Full Name

handleInputChange("name", e.target.value)} className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Enter your full name" required />

Password

{formData.password && (

Password strength = 75 ? "text-white/80" : passwordStrength.strength >= 50 ? "text-white/70" : "text-white/50" }`} > {passwordStrength.label}

{passwordRequirements.map((req, index) => (

{req.label}

))}

)}

Confirm Password

handleInputChange("confirmPassword", e.target.value)} className="pl-10 pr-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Confirm your password" required />

{formData.confirmPassword && formData.password !== formData.confirmPassword && (

Passwords do not match

)}

)} {step === "forgot-password" && (

Reset Password

Enter your email to receive reset instructions

)} {step === "reset-password" && (

Create New Password

Enter your new password below

New Password

Confirm New Password

{formData.confirmPassword && formData.password !== formData.confirmPassword && (

Passwords do not match

)}

)} {step === "otp" && (

Verify Your Email

Enter the 6-digit code sent to

{formData.email}

)} {step === "success" && (

{step === "success" && mode === "signup" ? "Welcome!" : "Success!"}

{step === "success" && mode === "signup" ? "Your account has been verified successfully" : "Your password has been reset successfully"}

)}

) }

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This