feat: Add forgot password and reset password pages.

2025-12-22 13:14:00 +05:30
parent 6c6129e8d1
commit 45c2c22129
2 changed files with 363 additions and 0 deletions
--- a/src/app/forgot-password/page.tsx
+++ b/src/app/forgot-password/page.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { authService, AuthService } from '@/services';
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await authService.forgotPassword({ email });
+      setSubmitted(true);
+    } catch (err) {
+      setError(AuthService.getErrorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
+      <div className="w-full max-w-[510px]">
+        {/* Logo */}
+        <div className="text-center mb-4">
+          <img
+            src="/assets/logo.svg"
+            alt="RE-QuestN"
+            className="h-8 mx-auto"
+          />
+        </div>
+
+        {submitted ? (
+          /* Success Message */
+          <div className="bg-white rounded-[20px] p-8 shadow-sm">
+            <div className="text-center">
+              <div className="mb-6">
+                <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
+              <p className="text-sm text-[#00293d]/70 mb-6">
+                We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
+              </p>
+              <Link
+                href="/login"
+                className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
+              >
+                Back to Login
+              </Link>
+              <button
+                type="button"
+                onClick={() => {
+                  setSubmitted(false);
+                  setEmail('');
+                }}
+                className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
+              >
+                Try a different email
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* Forgot Password Heading */}
+            <div className="text-center mb-6">
+              <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
+              <p className="text-sm text-[#00293d] px-4 leading-relaxed">
+                Enter your email address and we'll send you a link to reset your password
+              </p>
+            </div>
+
+            {/* Forgot Password Form */}
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[20px] text-sm">
+                  {error}
+                </div>
+              )}
+
+              {/* Email Input */}
+              <div>
+                <input
+                  type="email"
+                  placeholder="Email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
+                />
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'Sending...' : 'Send Reset Link'}
+              </button>
+            </form>
+
+            {/* Back to Login */}
+            <div className="text-center mt-8">
+              <Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
+                Back to Login
+              </Link>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}