Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | // In ForgotPassword.tsx import { useAuth } from '@common/contexts/AuthContext'; import { motion } from 'framer-motion'; import { AlertCircle, ArrowLeft, CheckCircle, Mail } from 'lucide-react'; import { useState } from 'react'; import { Link } from 'react-router-dom'; const ForgotPassword = () => { const [email, setEmail] = useState(''); const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null); const { resetPassword, loading } = useAuth(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setMessage(null); const { error } = await resetPassword(email); if (error) { setMessage({ type: 'error', text: error.message || 'Failed to send reset email', }); } else { setMessage({ type: 'success', text: 'Password reset link sent! Please check your email.', }); } }; return ( <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="sm:mx-auto sm:w-full sm:max-w-md" > <div className="text-center"> <p className="text-gray-600 dark:text-slate-400 mb-6 text-center"> <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-slate-100"> Forgot your password? </h2> <p className="mt-2 text-sm text-gray-600 dark:text-slate-400"> Enter your email and we'll send you a link to reset your password. </p> </p> </div> <div className="mt-8 bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> {message && ( <div className={`mb-4 p-4 rounded-md ${message.type === 'error' ? 'bg-red-50' : 'bg-green-50' }`} > <div className={`flex ${message.type === 'error' ? 'text-red-800' : 'text-green-800' }`} > {message.type === 'error' ? ( <AlertCircle className="h-5 w-5 mr-2" /> ) : ( <CheckCircle className="h-5 w-5 mr-2" /> )} <p className="text-sm">{message.text}</p> </div> </div> )} <form className="space-y-6" onSubmit={handleSubmit}> <div> <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-slate-300" > Email address </label> <div className="mt-1 relative rounded-md shadow-sm"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <Mail className="h-5 w-5 text-gray-400" /> </div> <input id="email" name="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="appearance-none block w-full pl-10 px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="you@example.com" /> </div> </div> <div> <button type="submit" disabled={loading} className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${loading ? 'opacity-70 cursor-not-allowed' : '' }`} > {loading ? 'Sending...' : 'Send Reset Link'} </button> </div> </form> <div className="mt-6"> <div className="relative"> <div className="absolute inset-0 flex items-center"> <div className="w-full border-t border-gray-300" /> </div> <div className="relative flex justify-center text-sm"> <span className="px-2 bg-white text-gray-500"> <Link to="/login" className="font-medium text-indigo-600 hover:text-indigo-500 flex items-center" > <ArrowLeft className="h-4 w-4 mr-1" /> Back to sign in </Link> </span> </div> </div> </div> </div> </motion.div> </div> ); }; export default ForgotPassword; |