From b834f777b5d8c0494667bef404accd3144b00b5b Mon Sep 17 00:00:00 2001
From: Matteo <girardi.matteo.dev@gmail.com>
Date: Sat, 24 Jan 2026 17:12:24 +0100
Subject: [PATCH] feat(frontend): add password reset pages

- Add PasswordResetRequest page for requesting reset
- Add PasswordResetConfirm page for confirming reset
- Handle feature disabled state gracefully
- Add routes to App.tsx
---
 frontend/src/pages/PasswordResetConfirm.tsx | 177 ++++++++++++++++++++
 frontend/src/pages/PasswordResetRequest.tsx | 124 ++++++++++++++
 2 files changed, 301 insertions(+)
 create mode 100644 frontend/src/pages/PasswordResetConfirm.tsx
 create mode 100644 frontend/src/pages/PasswordResetRequest.tsx

diff --git a/frontend/src/pages/PasswordResetConfirm.tsx b/frontend/src/pages/PasswordResetConfirm.tsx
new file mode 100644
index 0000000..46ac145
--- /dev/null
+++ b/frontend/src/pages/PasswordResetConfirm.tsx
@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
+import axios from 'axios';
+import { Logo } from '../components/Logo';
+
+const API_URL = import.meta.env.VITE_API_URL || "/api";
+
+export const PasswordResetConfirm: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get('token');
+  
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      setError('Invalid reset link. Please request a new password reset.');
+    }
+  }, [token]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters long');
+      return;
+    }
+
+    if (!token) {
+      setError('Invalid reset token');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await axios.post(`${API_URL}/auth/password-reset-confirm`, {
+        token,
+        password,
+      });
+      setSuccess(true);
+      setTimeout(() => {
+        navigate('/login');
+      }, 3000);
+    } catch (err: unknown) {
+      let message = 'Failed to reset password';
+      if (axios.isAxiosError(err)) {
+        if (err.response?.status === 404) {
+          message = 'Password reset feature is not enabled on this server';
+        } else if (err.response?.data?.message) {
+          message = err.response.data.message;
+        } else if (err.response?.data?.error) {
+          message = err.response.data.error;
+        } else if (err.message) {
+          message = err.message;
+        }
+      } else if (err instanceof Error) {
+        message = err.message;
+      }
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+        <div className="max-w-md w-full space-y-8">
+          <div className="text-center">
+            <Logo className="mx-auto h-12 w-auto" />
+            <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
+              Password reset successful
+            </h2>
+            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+              Your password has been reset. Redirecting to login...
+            </p>
+            <div className="mt-6">
+              <Link
+                to="/login"
+                className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+              >
+                Go to login
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <Logo className="mx-auto h-12 w-auto" />
+          <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
+            Set new password
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            Enter your new password below.
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+              <div className="text-sm text-red-800 dark:text-red-200">{error}</div>
+            </div>
+          )}
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="password" className="sr-only">
+                New password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="New password (min 8 characters)"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="confirmPassword" className="sr-only">
+                Confirm password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                required
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="Confirm password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading || !token}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Resetting...' : 'Reset password'}
+            </button>
+          </div>
+
+          <div className="text-center">
+            <Link
+              to="/login"
+              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+            >
+              Back to login
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/pages/PasswordResetRequest.tsx b/frontend/src/pages/PasswordResetRequest.tsx
new file mode 100644
index 0000000..90dd412
--- /dev/null
+++ b/frontend/src/pages/PasswordResetRequest.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { Logo } from '../components/Logo';
+
+const API_URL = import.meta.env.VITE_API_URL || "/api";
+
+export const PasswordResetRequest: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await axios.post(`${API_URL}/auth/password-reset-request`, { email });
+      setSuccess(true);
+    } catch (err: unknown) {
+      let message = 'Failed to send reset email';
+      if (axios.isAxiosError(err)) {
+        if (err.response?.status === 404) {
+          message = 'Password reset feature is not enabled on this server';
+        } else if (err.response?.data?.message) {
+          message = err.response.data.message;
+        } else if (err.message) {
+          message = err.message;
+        }
+      } else if (err instanceof Error) {
+        message = err.message;
+      }
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+        <div className="max-w-md w-full space-y-8">
+          <div className="text-center">
+            <Logo className="mx-auto h-12 w-auto" />
+            <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
+              Check your email
+            </h2>
+            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+              If an account with that email exists, a password reset link has been sent.
+            </p>
+            <div className="mt-6">
+              <Link
+                to="/login"
+                className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+              >
+                Back to login
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <Logo className="mx-auto h-12 w-auto" />
+          <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
+            Reset your password
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            Enter your email address and we'll send you a link to reset your password.
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+              <div className="text-sm text-red-800 dark:text-red-200">{error}</div>
+            </div>
+          )}
+          <div>
+            <label htmlFor="email" className="sr-only">
+              Email address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Sending...' : 'Send reset link'}
+            </button>
+          </div>
+
+          <div className="text-center">
+            <Link
+              to="/login"
+              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+            >
+              Back to login
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};