Email SMTP Fix

2025-12-07 16:59:21 +07:00
parent 7b8ee6442a
commit 79cebd205c
15 changed files with 978 additions and 78 deletions
--- a/src/pages/ForgotPassword.js
+++ b/src/pages/ForgotPassword.js
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { Card } from '../components/ui/card';
+import { toast } from 'sonner';
+import Navbar from '../components/Navbar';
+import { ArrowRight, ArrowLeft, Mail, CheckCircle } from 'lucide-react';
+
+const ForgotPassword = () => {
+  const { forgotPassword } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [email, setEmail] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      await forgotPassword(email);
+      setSubmitted(true);
+      toast.success('Password reset email sent!');
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to send reset email. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+
+      <div className="max-w-md mx-auto px-6 py-12">
+        <div className="mb-8">
+          <Link to="/login" className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Login
+          </Link>
+        </div>
+
+        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          {!submitted ? (
+            <>
+              <div className="mb-8 text-center">
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#FFF3E0] mb-4">
+                  <Mail className="h-8 w-8 text-[#E07A5F]" />
+                </div>
+                <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+                  Forgot Password?
+                </h1>
+                <p className="text-lg text-[#6B708D]">
+                  No worries! Enter your email and we'll send you reset instructions.
+                </p>
+              </div>
+
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <Label htmlFor="email">Email Address</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="your.email@example.com"
+                    className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                  />
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+                >
+                  {loading ? 'Sending...' : 'Send Reset Link'}
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Button>
+
+                <p className="text-center text-[#6B708D]">
+                  Remember your password?{' '}
+                  <Link to="/login" className="text-[#E07A5F] hover:underline font-medium">
+                    Login here
+                  </Link>
+                </p>
+              </form>
+            </>
+          ) : (
+            <div className="text-center">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#E8F5E9] mb-6">
+                <CheckCircle className="h-8 w-8 text-[#4CAF50]" />
+              </div>
+              <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+                Check Your Email
+              </h1>
+              <p className="text-lg text-[#6B708D] mb-8">
+                If an account exists for <span className="font-medium text-[#3D405B]">{email}</span>,
+                you will receive a password reset link shortly.
+              </p>
+              <p className="text-sm text-[#6B708D] mb-8">
+                The link will expire in 1 hour. If you don't see the email, check your spam folder.
+              </p>
+              <Link to="/login">
+                <Button className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
+                  Return to Login
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Button>
+              </Link>
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;