feat: Add forgot password and reset password pages.

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>
+  );
+}

src/app/reset-password/page.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import { Suspense, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { authService, AuthService } from '@/services';
+
+function ResetPasswordContent() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    // Validate password strength
+    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+    if (!passwordRegex.test(password)) {
+      setError('Password must be at least 8 characters with 1 uppercase, 1 lowercase, 1 number, and 1 special character');
+      return;
+    }
+
+    if (!token) {
+      setError('Invalid reset link. No token provided.');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await authService.resetPassword({ token, password });
+      setSuccess(true);
+    } catch (err) {
+      setError(AuthService.getErrorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // No token provided
+  if (!token) {
+    return (
+      <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-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Invalid Link</h2>
+          <p className="text-sm text-[#00293d]/70 mb-6">
+            This password reset link is invalid or has expired. Please request a new one.
+          </p>
+          <Link
+            href="/forgot-password"
+            className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
+          >
+            Request New Link
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Success state
+  if (success) {
+    return (
+      <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Password Reset Successful</h2>
+          <p className="text-sm text-[#00293d]/70 mb-6">
+            Your password has been reset successfully. You can now login with your new password.
+          </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"
+          >
+            Go to Login
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Reset password form
+  return (
+    <>
+      {/* Reset Password Heading */}
+      <div className="text-center mb-6">
+        <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Reset Password</h2>
+        <p className="text-sm text-[#00293d] px-4 leading-relaxed">
+          Enter your new password below
+        </p>
+      </div>
+
+      {/* Reset 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>
+        )}
+
+        {/* New Password Input */}
+        <div>
+          <div className="relative">
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="New Password"
+              value={password}
+              onChange={(e) => setPassword(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 pr-14"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-5 top-1/2 -translate-y-1/2 text-[#00293d]/60 hover:text-[#00293d] transition-colors"
+            >
+              {showPassword ? (
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              ) : (
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                </svg>
+              )}
+            </button>
+          </div>
+          <p className="text-[#00293d]/60 text-xs mt-2 ml-2">
+            Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character
+          </p>
+        </div>
+
+        {/* Confirm Password Input */}
+        <div className="relative">
+          <input
+            type={showConfirmPassword ? 'text' : 'password'}
+            placeholder="Confirm New Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(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 pr-14"
+          />
+          <button
+            type="button"
+            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+            className="absolute right-5 top-1/2 -translate-y-1/2 text-[#00293d]/60 hover:text-[#00293d] transition-colors"
+          >
+            {showConfirmPassword ? (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+            ) : (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+              </svg>
+            )}
+          </button>
+        </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 ? 'Resetting Password...' : 'Reset Password'}
+        </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>
+    </>
+  );
+}
+
+function LoadingFallback() {
+  return (
+    <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-[#5ba4a4] animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
+        <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Loading...</h2>
+        <p className="text-sm text-[#00293d]/70">Please wait...</p>
+      </div>
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  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>
+
+        {/* Content */}
+        <Suspense fallback={<LoadingFallback />}>
+          <ResetPasswordContent />
+        </Suspense>
+      </div>
+    </div>
+  );
+}