96:I[903690,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/36at-fgxccn6g.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/2mjr-ow9jt224.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/16pppxvb6m7dw.js","/chat-static/_next/static/immutable/chunks/0pj67mrdn212d.js","/chat-static/_next/static/immutable/chunks/3-2-_f137e0jx.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/36at-fgxccn6g.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/2mjr-ow9jt224.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/16pppxvb6m7dw.js","/chat-static/_next/static/immutable/chunks/0pj67mrdn212d.js","/chat-static/_next/static/immutable/chunks/3-2-_f137e0jx.js"],"SWRDataProvider"] 98:T7148,[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"}

)}

) }8d:["$","$L96",null,{"chatId":"qkj9UGz9Qgc","children":["$","$L97",null,{"data":{"@\"active-block\",\"qkj9UGz9Qgc\",":{"id":"b_B9FEvVYeZyU","messageId":"uQ2tFpVzcPLxN4TW6Vclah52rdN8G52a","source":"$98","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"auth-app","type":"code-project","project":"auth-app","taskNameActive":"Adding close button","taskNameComplete":"Added close button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"qkj9UGz9Qgc\",":false},"children":"$L99"}]}]

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This