flyer-crawler.projectium.com/src/pages/ResetPasswordPage.tsx

// src/pages/ResetPasswordPage.tsx
import React, { useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import * as apiClient from '../services/apiClient';
import { logger } from '../services/logger.client';
import { LoadingSpinner } from '../components/LoadingSpinner';
import { PasswordInput } from '../components/PasswordInput';

export const ResetPasswordPage: React.FC = () => {
  const { token } = useParams<{ token: string }>();
  const navigate = useNavigate();

  // State for both password fields
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setMessage('');

    if (!token) {
      setError('No reset token provided. Please use the link from your email.');
      return;
    }

    // Add validation to check if passwords match
    if (password !== confirmPassword) {
      setError('Passwords do not match.');
      return;
    }

    setLoading(true);
    setError('');
    setMessage('');

    try {
      const response = await apiClient.resetPassword(token, password);
      const data = await response.json();
      setMessage(data.message + ' You will be redirected to the homepage shortly.');
      logger.info('Password has been successfully reset.');
      // After a short delay to allow the user to read the message, navigate them to the home page.
      setTimeout(() => {
        navigate('/');
      }, 4000); // 4-second delay
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
      setError(errorMessage);
      logger.error({ err }, 'Failed to reset password.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 dark:bg-gray-950 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-xl shadow-lg">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
            Set a New Password
          </h2>
        </div>
        {message ? (
          <div className="text-center">
            <p className="text-green-600 dark:text-green-400">{message}</p>
            <Link
              to="/"
              className="mt-4 inline-block font-medium text-brand-primary hover:underline"
            >
              Return to Home
            </Link>
          </div>
        ) : (
          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
            <div className="rounded-md shadow-sm space-y-4">
              <PasswordInput
                id="new-password"
                name="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                placeholder="New Password" // This field already exists
                showStrength
              />
              {/* Add the missing confirm password field */}
              <PasswordInput
                id="confirm-new-password"
                name="confirmPassword"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
                placeholder="Confirm New Password"
              />
            </div>
            {error && <p className="text-sm text-red-600 dark:text-red-400 text-center">{error}</p>}
            <div>
              <button
                type="submit"
                disabled={loading}
                aria-label="Reset Password"
                className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-secondary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary disabled:bg-gray-400"
              >
                {loading ? (
                  <div className="w-5 h-5">
                    <LoadingSpinner />
                  </div>
                ) : (
                  'Reset Password'
                )}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};