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/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams, 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, Lock, AlertCircle } from 'lucide-react';
+
+const ResetPassword = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { resetPassword } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [token, setToken] = useState('');
+  const [formData, setFormData] = useState({
+    newPassword: '',
+    confirmPassword: ''
+  });
+
+  useEffect(() => {
+    const tokenParam = searchParams.get('token');
+    if (!tokenParam) {
+      toast.error('Invalid reset link');
+      navigate('/login');
+    } else {
+      setToken(tokenParam);
+    }
+  }, [searchParams, navigate]);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (formData.newPassword.length < 6) {
+      toast.error('Password must be at least 6 characters');
+      return;
+    }
+
+    if (formData.newPassword !== formData.confirmPassword) {
+      toast.error('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await resetPassword(token, formData.newPassword);
+      toast.success('Password reset successful! Please login with your new password.');
+      navigate('/login');
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to reset password. The link may have expired.';
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+
+      <div className="max-w-md mx-auto px-6 py-12">
+        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          <div className="mb-8 text-center">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#FFF3E0] mb-4">
+              <Lock className="h-8 w-8 text-[#E07A5F]" />
+            </div>
+            <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+              Reset Password
+            </h1>
+            <p className="text-lg text-[#6B708D]">
+              Enter your new password below.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <Label htmlFor="newPassword">New Password</Label>
+              <Input
+                id="newPassword"
+                name="newPassword"
+                type="password"
+                required
+                value={formData.newPassword}
+                onChange={handleInputChange}
+                placeholder="Enter new password (min. 6 characters)"
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="confirmPassword">Confirm New Password</Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                value={formData.confirmPassword}
+                onChange={handleInputChange}
+                placeholder="Re-enter new password"
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+              />
+            </div>
+
+            <div className="bg-[#FFF3E0] border-l-4 border-[#E07A5F] p-4 rounded-lg">
+              <div className="flex items-start">
+                <AlertCircle className="h-5 w-5 text-[#E07A5F] mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-[#6B708D]">
+                  <p className="font-medium text-[#3D405B] mb-1">Password Requirements:</p>
+                  <ul className="list-disc list-inside space-y-1">
+                    <li>At least 6 characters long</li>
+                    <li>Both passwords must match</li>
+                  </ul>
+                </div>
+              </div>
+            </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 ? 'Resetting Password...' : 'Reset Password'}
+              <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>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;