'use client'; import { useState } from 'react'; export default function AuthResetPasswordDemo() { const [step, setStep] = useState<'email' | 'reset' | 'success'>('email'); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const getPasswordStrength = (pwd: string) => { let strength = 0; if (pwd.length >= 8) strength++; if (/[A-Z]/.test(pwd)) strength++; if (/[0-9]/.test(pwd)) strength++; if (/[^A-Za-z0-9]/.test(pwd)) strength++; return strength; }; const strength = getPasswordStrength(password); const strengthLabels = ['Weak', 'Fair', 'Good', 'Strong']; const strengthColors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500']; return (

{step === 'email' && ( <>

Forgot Password?

Enter your email to receive a reset link

Email setEmail(e.target.value)} className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none" placeholder="you@example.com" />

Remember your password?{' '} Sign in

)} {step === 'reset' && ( <>

Create New Password

Your new password must be different from previous ones

New Password setPassword(e.target.value)} className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none" placeholder="••••••••" /> {password && (

{[0, 1, 2, 3].map((i) => (

))}

2 ? 'text-green-600' : 'text-gray-500'}`}> Password strength: {strengthLabels[strength - 1] || 'Too weak'}

)}

Confirm Password setConfirmPassword(e.target.value)} className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none" placeholder="••••••••" /> {confirmPassword && password !== confirmPassword && (

Passwords do not match

)}

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

✓

Password Reset!

Your password has been successfully reset. You can now sign in with your new password.

)}

); }

Magic Link Login

Sign in with Email