Dev

frontend/web/eslint.config.mjs

@@ -1,18 +1,22 @@
 import { defineConfig, globalIgnores } from 'eslint/config';
 import nextVitals from 'eslint-config-next/core-web-vitals';
 import nextTs from 'eslint-config-next/typescript';
+import reactHooks from 'eslint-plugin-react-hooks';
 
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    '.next/**',
-    'out/**',
-    'build/**',
-    'next-env.d.ts',
-  ]),
+
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+
+  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
 ]);
 
 export default eslintConfig;

frontend/web/package.json

@@ -60,6 +60,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.0.10",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "shadcn": "^3.8.5",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",

frontend/web/src/app/(auth)/login/page.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { FcGoogle } from 'react-icons/fc';
 import { useRouter } from 'next/navigation';
 import { AxiosError } from 'axios';
+import { CgSpinner } from 'react-icons/cg';
 import { authService } from '@/src/services/auth.services';
 
 interface ErrorResponse {
@@ -21,6 +22,15 @@ export default function LoginPage() {
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const [resetStep, setResetStep] = useState<'idle' | 'otp'>('idle');
+  const [resetForm, setResetForm] = useState({
+    email: '',
+    otp: '',
+    newPassword: '',
+  });
+  const [resetLoading, setResetLoading] = useState(false);
+  const [resetMessage, setResetMessage] = useState('');
+  const [resetError, setResetError] = useState('');
 
   const { login } = authService;
 
@@ -64,6 +74,62 @@ export default function LoginPage() {
     window.location.href = 'http://localhost:4001/api/v1/auth/google';
   };
 
+  const handleResetChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setResetForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (resetError) setResetError('');
+    if (resetMessage) setResetMessage('');
+  };
+
+  const handleRequestOtp = async () => {
+    if (!resetForm.email) {
+      setResetError('Enter your email address first.');
+      return;
+    }
+
+    setResetLoading(true);
+    setResetError('');
+    setResetMessage('');
+
+    try {
+      const data = await authService.forgotPasswordOtp(resetForm.email);
+      setResetStep('otp');
+      setResetMessage(data.message || 'OTP sent to your email.');
+    } catch (err) {
+      const error = err as AxiosError<ErrorResponse>;
+      setResetError(
+        error.response?.data?.message || 'Unable to send OTP right now.',
+      );
+    } finally {
+      setResetLoading(false);
+    }
+  };
+
+  const handleResetPassword = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setResetLoading(true);
+    setResetError('');
+    setResetMessage('');
+
+    try {
+      const data = await authService.resetPasswordWithOtp(resetForm);
+      setResetMessage(data.message || 'Password updated successfully.');
+      setResetForm((prev) => ({
+        ...prev,
+        otp: '',
+        newPassword: '',
+      }));
+    } catch (err) {
+      const error = err as AxiosError<ErrorResponse>;
+      setResetError(error.response?.data?.message || 'Password reset failed.');
+    } finally {
+      setResetLoading(false);
+    }
+  };
+
   return (
     <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50">
       <div className="absolute inset-0 z-0">
@@ -148,6 +214,23 @@ export default function LoginPage() {
                 placeholder="Enter your password"
                 className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 outline-none focus:border-green-600 focus:ring-1 focus:ring-green-600"
               />
+              <div className="mt-2 flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setResetStep((prev) => (prev === 'idle' ? 'otp' : 'idle'));
+                    setResetError('');
+                    setResetMessage('');
+                    setResetForm((prev) => ({
+                      ...prev,
+                      email: prev.email || formData.email,
+                    }));
+                  }}
+                  className="text-sm font-medium text-green-700 hover:underline"
+                >
+                  Forgot password?
+                </button>
+              </div>
             </div>
 
             <button
@@ -159,6 +242,97 @@ export default function LoginPage() {
             </button>
           </form>
 
+          {resetStep === 'otp' && (
+            <form
+              onSubmit={handleResetPassword}
+              className="mt-6 rounded-xl border border-green-100 bg-green-50/60 p-4"
+            >
+              <div className="mb-4 flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-sm font-semibold text-gray-800">
+                    Reset password with email OTP
+                  </h2>
+                  <p className="text-xs text-gray-600">
+                    Request a 6-digit code, then set a new password.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setResetStep('idle');
+                    setResetError('');
+                    setResetMessage('');
+                  }}
+                  className="text-xs font-medium text-gray-500 hover:text-gray-700"
+                >
+                  Close
+                </button>
+              </div>
+
+              <div className="space-y-3">
+                <input
+                  name="email"
+                  type="email"
+                  value={resetForm.email}
+                  onChange={handleResetChange}
+                  placeholder="Email address"
+                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 outline-none focus:border-green-600 focus:ring-1 focus:ring-green-600"
+                />
+
+                <div className="flex gap-3">
+                  <input
+                    name="otp"
+                    value={resetForm.otp}
+                    onChange={handleResetChange}
+                    placeholder="6-digit OTP"
+                    className="flex-1 rounded-lg border border-gray-300 px-4 py-3 text-gray-900 outline-none focus:border-green-600 focus:ring-1 focus:ring-green-600"
+                  />
+                  <button
+                    type="button"
+                    onClick={handleRequestOtp}
+                    disabled={resetLoading}
+                    className="rounded-lg border border-green-700 px-4 py-3 text-sm font-semibold text-green-700 hover:bg-green-100 disabled:opacity-60"
+                  >
+                    {resetLoading ? 'Sending...' : 'Send OTP'}
+                  </button>
+                </div>
+
+                <input
+                  name="newPassword"
+                  type="password"
+                  value={resetForm.newPassword}
+                  onChange={handleResetChange}
+                  placeholder="New password"
+                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 outline-none focus:border-green-600 focus:ring-1 focus:ring-green-600"
+                />
+              </div>
+
+              <div className="mt-4 min-h-[24px]">
+                {resetError && (
+                  <p className="text-sm text-red-600">{resetError}</p>
+                )}
+                {resetMessage && (
+                  <p className="text-sm text-green-700">{resetMessage}</p>
+                )}
+              </div>
+
+              <button
+                type="submit"
+                disabled={resetLoading}
+                className="mt-2 flex w-full items-center justify-center gap-2 rounded-lg bg-green-700 px-4 py-3 font-semibold text-white hover:bg-green-800 disabled:opacity-70"
+              >
+                {resetLoading ? (
+                  <>
+                    <CgSpinner className="animate-spin text-lg" />
+                    <span>Updating...</span>
+                  </>
+                ) : (
+                  'Reset password'
+                )}
+              </button>
+            </form>
+          )}
+
           <p className="mt-6 text-center text-sm text-gray-600">
             Don’t have an account?{' '}
             <button

frontend/web/src/app/(user)/Sidebar.tsx

@@ -50,7 +50,10 @@ export default function UserSidebar({
     >
       {/* Logo */}
       <div className="flex justify-between items-center mb-10 pl-2">
-        <h1 className="text-2xl font-bold tracking-tight">Healix</h1>
+        <Link href="/">
+          {' '}
+          <h1 className="text-2xl font-bold tracking-tight">Healix</h1>
+        </Link>
         <button className="md:hidden p-1" onClick={onClose}>
           <X size={24} />
         </button>