jj

backend/api/auth.py

@@ -194,4 +194,112 @@ def get_current_user():
         return jsonify({
             'success': False,
             'message': 'An error occurred while fetching user data'
+        }), 500
+
+
+@auth_bp.route('/forgot-password', methods=['OPTIONS'])
+def handle_forgot_password_options():
+    """Handle OPTIONS requests for preflight CORS checks for forgot password route."""
+    return '', 200
+
+
+@auth_bp.route('/forgot-password', methods=['POST'])
+def forgot_password():
+    """
+    Request password reset for a user.
+    
+    Request Body:
+        email (str): User email
+        
+    Returns:
+        JSON: Password reset request result
+    """
+    try:
+        data = request.get_json()
+        
+        # Validate required fields
+        if not data or 'email' not in data:
+            return jsonify({
+                'success': False,
+                'message': 'Email is required'
+            }), 400
+        
+        email = data['email']
+        
+        # Request password reset
+        result = request_password_reset(current_app.supabase, email)
+        
+        if result['success']:
+            return jsonify(result), 200
+        else:
+            return jsonify(result), 400
+            
+    except Exception as e:
+        current_app.logger.error(f"Forgot password error: {str(e)}")
+        return jsonify({
+            'success': False,
+            'message': 'An error occurred while processing your request'
+        }), 500
+
+
+@auth_bp.route('/reset-password', methods=['OPTIONS'])
+def handle_reset_password_options():
+    """Handle OPTIONS requests for preflight CORS checks for reset password route."""
+    return '', 200
+
+
+@auth_bp.route('/reset-password', methods=['POST'])
+def reset_password():
+    """
+    Reset user password with token.
+    
+    Request Body:
+        token (str): Password reset token
+        password (str): New password
+        confirm_password (str): Password confirmation
+        
+    Returns:
+        JSON: Password reset result
+    """
+    try:
+        data = request.get_json()
+        
+        # Validate required fields
+        if not data or not all(k in data for k in ('token', 'password', 'confirm_password')):
+            return jsonify({
+                'success': False,
+                'message': 'Token, password, and confirm_password are required'
+            }), 400
+        
+        token = data['token']
+        password = data['password']
+        confirm_password = data['confirm_password']
+        
+        # Validate password confirmation
+        if password != confirm_password:
+            return jsonify({
+                'success': False,
+                'message': 'Passwords do not match'
+            }), 400
+        
+        # Validate password length
+        if len(password) < 8:
+            return jsonify({
+                'success': False,
+                'message': 'Password must be at least 8 characters long'
+            }), 400
+        
+        # Reset password
+        result = reset_user_password(current_app.supabase, token, password)
+        
+        if result['success']:
+            return jsonify(result), 200
+        else:
+            return jsonify(result), 400
+            
+    except Exception as e:
+        current_app.logger.error(f"Reset password error: {str(e)}")
+        return jsonify({
+            'success': False,
+            'message': 'An error occurred while resetting your password'
         }), 500

backend/services/auth_service.py

@@ -2,6 +2,7 @@ from flask import current_app, request
 from flask_jwt_extended import create_access_token, get_jwt
 import bcrypt
 from datetime import datetime, timedelta
+from supabase import Client
 from backend.models.user import User
 from backend.utils.database import authenticate_user, create_user
 
@@ -165,10 +166,28 @@ def login_user(email: str, password: str, remember_me: bool = False) -> dict:
                 'message': 'No account found with this email. Please check your email or register for a new account.'
             }
         else:
-            return {
-                'success': False,
-                'message': f'Login failed: {str(e)}'
-            }
+            error_str = str(e).lower()
+            if 'invalid credentials' in error_str or 'unauthorized' in error_str:
+                return {
+                    'success': False,
+                    'message': 'Password/email Incorrect'
+                }
+            elif 'email not confirmed' in error_str or 'email not verified' in error_str:
+                return {
+                    'success': False,
+                    'message': 'Check your mail to confirm your account',
+                    'requires_confirmation': True
+                }
+            elif 'user not found' in error_str:
+                return {
+                    'success': False,
+                    'message': 'No account found with this email. Please check your email or register for a new account.'
+                }
+            else:
+                return {
+                    'success': False,
+                    'message': 'Password/email Incorrect'
+                }
 
 def get_user_by_id(user_id: str) -> dict:
     """
@@ -195,4 +214,87 @@ def get_user_by_id(user_id: str) -> dict:
         else:
             return None
     except Exception:
-        return None
+        return None
+
+
+def request_password_reset(supabase: Client, email: str) -> dict:
+    """
+    Request password reset for a user.
+    
+    Args:
+        supabase (Client): Supabase client instance
+        email (str): User email
+        
+    Returns:
+        dict: Password reset request result
+    """
+    try:
+        # Request password reset
+        response = supabase.auth.reset_password_for_email(email)
+        
+        return {
+            'success': True,
+            'message': 'Password reset instructions sent to your email. Please check your inbox.'
+        }
+    except Exception as e:
+        error_str = str(e).lower()
+        if 'user not found' in error_str:
+            # We don't want to reveal if a user exists or not for security reasons
+            # But we still return a success message to prevent user enumeration
+            return {
+                'success': True,
+                'message': 'If an account exists with this email, password reset instructions have been sent.'
+            }
+        else:
+            return {
+                'success': False,
+                'message': f'Failed to process password reset request: {str(e)}'
+            }
+
+
+def reset_user_password(supabase: Client, token: str, new_password: str) -> dict:
+    """
+    Reset user password with token.
+    
+    Args:
+        supabase (Client): Supabase client instance
+        token (str): Password reset token (not directly used in Supabase v2)
+        new_password (str): New password
+        
+    Returns:
+        dict: Password reset result
+    """
+    try:
+        # In Supabase v2, we update the user's password directly
+        # The token verification is handled by Supabase when the user clicks the link
+        response = supabase.auth.update_user({
+            'password': new_password
+        })
+        
+        if response.user:
+            return {
+                'success': True,
+                'message': 'Password reset successfully! You can now log in with your new password.'
+            }
+        else:
+            return {
+                'success': False,
+                'message': 'Failed to reset password. Please try again.'
+            }
+    except Exception as e:
+        error_str = str(e).lower()
+        if 'invalid token' in error_str or 'expired' in error_str:
+            return {
+                'success': False,
+                'message': 'Invalid or expired reset token. Please request a new password reset.'
+            }
+        elif 'password' in error_str:
+            return {
+                'success': False,
+                'message': 'Password does not meet requirements. Please use at least 8 characters.'
+            }
+        else:
+            return {
+                'success': False,
+                'message': f'Failed to reset password: {str(e)}'
+            }

frontend/src/App.jsx

@@ -5,6 +5,8 @@ import { getCurrentUser, checkCachedAuth, autoLogin } from './store/reducers/aut
 import cookieService from './services/cookieService';
 import Login from './pages/Login.jsx';
 import Register from './pages/Register.jsx';
+import ForgotPassword from './pages/ForgotPassword.jsx';
+import ResetPassword from './pages/ResetPassword.jsx';
 import Dashboard from './pages/Dashboard.jsx';
 import Sources from './pages/Sources.jsx';
 import Accounts from './pages/Accounts.jsx';
@@ -248,16 +250,18 @@ function App() {
                 </div>
               </div>
             ) : (
-              <Routes>
-                <Route path="/" element={
-                  <Suspense fallback={<div className="mobile-loading-optimized">Loading...</div>}>
-                    <Home />
-                  </Suspense>
-                } />
-                <Route path="/login" element={<Login />} />
-                <Route path="/register" element={<Register />} />
-                <Route path="/linkedin/callback" element={<LinkedInCallbackHandler />} />
-              </Routes>
+                          <Routes>
+              <Route path="/" element={
+                <Suspense fallback={<div className="mobile-loading-optimized">Loading...</div>}>
+                  <Home />
+                </Suspense>
+              } />
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/forgot-password" element={<ForgotPassword />} />
+              <Route path="/reset-password" element={<ResetPassword />} />
+              <Route path="/linkedin/callback" element={<LinkedInCallbackHandler />} />
+            </Routes>
             )}
           </div>
         ) : (

frontend/src/pages/ForgotPassword.jsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { clearError } from '../store/reducers/authSlice';
+import authService from '../services/authService';
+
+const ForgotPassword = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { loading, error } = useSelector(state => state.auth);
+  
+  const [formData, setFormData] = useState({
+    email: ''
+  });
+  
+  const [isFocused, setIsFocused] = useState({
+    email: false
+  });
+  
+  const [success, setSuccess] = useState(false);
+  
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+  
+  const handleFocus = (field) => {
+    setIsFocused({
+      ...isFocused,
+      [field]: true
+    });
+  };
+  
+  const handleBlur = (field) => {
+    setIsFocused({
+      ...isFocused,
+      [field]: false
+    });
+  };
+  
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Prevent form submission if already loading
+    if (loading === 'pending') {
+      return;
+    }
+    
+    try {
+      await authService.forgotPassword(formData.email);
+      setSuccess(true);
+      // Clear form
+      setFormData({ email: '' });
+    } catch (err) {
+      console.error('Password reset request failed:', err);
+    }
+  };
+  
+  const handleBackToLogin = () => {
+    dispatch(clearError());
+    navigate('/login');
+  };
+  
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-accent-50 flex items-center justify-center p-3 sm:p-4 animate-fade-in">
+      <div className="w-full max-w-sm sm:max-w-md">
+        {/* Logo and Brand */}
+        <div className="text-center mb-6 sm:mb-8 animate-slide-up">
+          <div className="inline-flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-primary-600 to-primary-800 rounded-2xl shadow-lg mb-3 sm:mb-4">
+            <span className="text-xl sm:text-2xl font-bold text-white">Lin</span>
+          </div>
+          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1 sm:mb-2">Reset Password</h1>
+          <p className="text-sm sm:text-base text-gray-600">
+            {success 
+              ? 'Check your email for password reset instructions' 
+              : 'Enter your email to receive password reset instructions'}
+          </p>
+        </div>
+        
+        {/* Auth Card */}
+        <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-8 space-y-4 sm:space-y-6 animate-slide-up animate-delay-100">
+          {/* Success Message */}
+          {success && (
+            <div className="bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 animate-slide-up animate-delay-200">
+              <div className="flex items-start space-x-2">
+                <svg className="w-4 h-4 sm:w-5 sm:h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                <span className="text-green-700 text-xs sm:text-sm font-medium">
+                  Password reset instructions sent to your email. Please check your inbox.
+                </span>
+              </div>
+            </div>
+          )}
+          
+          {/* Error Message */}
+          {error && !success && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4 animate-slide-up animate-delay-200">
+              <div className="flex items-start space-x-2">
+                <svg className="w-4 h-4 sm:w-5 sm:h-5 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+                <span className="text-red-700 text-xs sm:text-sm font-medium">{error}</span>
+              </div>
+            </div>
+          )}
+          
+          {!success && (
+            <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
+              {/* Email Field */}
+              <div className="space-y-2">
+                <label htmlFor="email" className="block text-xs sm:text-sm font-semibold text-gray-700">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    onFocus={() => handleFocus('email')}
+                    onBlur={() => handleBlur('email')}
+                    className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-xl border-2 transition-all duration-200 ${
+                      isFocused.email
+                        ? 'border-primary-500 shadow-md'
+                        : 'border-gray-200 hover:border-gray-300'
+                    } ${formData.email ? 'text-gray-900' : 'text-gray-500'} focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 touch-manipulation`}
+                    placeholder="Enter your email"
+                    required
+                    aria-required="true"
+                    aria-label="Email address"
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                    <svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={loading === 'pending'}
+                className="w-full bg-gradient-to-r from-primary-600 to-primary-800 text-white font-semibold py-2.5 sm:py-3 px-4 rounded-xl hover:from-primary-700 hover:to-primary-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none touch-manipulation"
+                aria-busy={loading === 'pending'}
+              >
+                {loading === 'pending' ? (
+                  <div className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-2 sm:mr-3 h-4 w-4 sm:h-5 sm:w-5 text-white" xmlns="http://www.w3.org/2000/svg" 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>
+                    <span className="text-xs sm:text-sm">Sending...</span>
+                  </div>
+                ) : (
+                  <span className="text-xs sm:text-sm">Send Reset Instructions</span>
+                )}
+              </button>
+            </form>
+          )}
+          
+          {/* Back to Login Link */}
+          <div className="text-center">
+            <button
+              type="button"
+              onClick={handleBackToLogin}
+              className="font-semibold text-primary-600 hover:text-primary-500 transition-colors focus:outline-none focus:underline text-xs sm:text-sm"
+              aria-label="Back to login"
+            >
+              Back to Sign In
+            </button>
+          </div>
+        </div>
+        
+        {/* Footer */}
+        <div className="text-center mt-6 sm:mt-8 text-xs text-gray-500">
+          <p>&copy; 2024 Lin. All rights reserved.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;

frontend/src/pages/Login.jsx

@@ -258,9 +258,13 @@ const Login = () => {
                 </label>
               </div>
               <div className="text-xs sm:text-sm">
-                <a href="#" className="font-medium text-primary-600 hover:text-primary-500 transition-colors focus:outline-none focus:underline">
+                <button
+                  type="button"
+                  onClick={() => navigate('/forgot-password')}
+                  className="font-medium text-primary-600 hover:text-primary-500 transition-colors focus:outline-none focus:underline"
+                >
                   Forgot password?
-                </a>
+                </button>
               </div>
             </div>
             

frontend/src/pages/ResetPassword.jsx

@@ -0,0 +1,309 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { resetPassword, clearError } from '../store/reducers/authSlice';
+
+const ResetPassword = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { loading, error } = useSelector(state => state.auth);
+  
+  const [formData, setFormData] = useState({
+    token: '',
+    password: '',
+    confirmPassword: ''
+  });
+  
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [passwordStrength, setPasswordStrength] = useState(0);
+  const [isFocused, setIsFocused] = useState({
+    password: false,
+    confirmPassword: false
+  });
+  
+  // Get token from URL params
+  useEffect(() => {
+    const token = searchParams.get('token');
+    if (token) {
+      setFormData(prev => ({ ...prev, token }));
+    }
+  }, [searchParams]);
+  
+  const calculatePasswordStrength = (password) => {
+    let strength = 0;
+    
+    // Length check
+    if (password.length >= 8) strength += 1;
+    if (password.length >= 12) strength += 1;
+    
+    // Character variety checks
+    if (/[a-z]/.test(password)) strength += 1;
+    if (/[A-Z]/.test(password)) strength += 1;
+    if (/[0-9]/.test(password)) strength += 1;
+    if (/[^A-Za-z0-9]/.test(password)) strength += 1;
+    
+    setPasswordStrength(Math.min(strength, 6));
+  };
+  
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Calculate password strength
+    if (name === 'password') {
+      calculatePasswordStrength(value);
+    }
+  };
+  
+  const handleFocus = (field) => {
+    setIsFocused({
+      ...isFocused,
+      [field]: true
+    });
+  };
+  
+  const handleBlur = (field) => {
+    setIsFocused({
+      ...isFocused,
+      [field]: false
+    });
+  };
+  
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  
+  const toggleConfirmPasswordVisibility = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
+  
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Basic validation
+    if (formData.password !== formData.confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+    
+    if (formData.password.length < 8) {
+      alert('Password must be at least 8 characters long');
+      return;
+    }
+    
+    try {
+      await dispatch(resetPassword(formData)).unwrap();
+      // Show success message and redirect to login
+      alert('Password reset successfully! You can now log in with your new password.');
+      navigate('/login');
+    } catch (err) {
+      // Error is handled by the Redux slice
+      console.error('Password reset failed:', err);
+    }
+  };
+  
+  const handleBackToLogin = () => {
+    dispatch(clearError());
+    navigate('/login');
+  };
+  
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-accent-50 flex items-center justify-center p-3 sm:p-4 animate-fade-in">
+      <div className="w-full max-w-sm sm:max-w-md">
+        {/* Logo and Brand */}
+        <div className="text-center mb-6 sm:mb-8 animate-slide-up">
+          <div className="inline-flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-primary-600 to-primary-800 rounded-2xl shadow-lg mb-3 sm:mb-4">
+            <span className="text-xl sm:text-2xl font-bold text-white">Lin</span>
+          </div>
+          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1 sm:mb-2">Reset Password</h1>
+          <p className="text-sm sm:text-base text-gray-600">Enter your new password below</p>
+        </div>
+        
+        {/* Auth Card */}
+        <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-8 space-y-4 sm:space-y-6 animate-slide-up animate-delay-100">
+          {/* Error Message */}
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4 animate-slide-up animate-delay-200">
+              <div className="flex items-start space-x-2">
+                <svg className="w-4 h-4 sm:w-5 sm:h-5 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+                <span className="text-red-700 text-xs sm:text-sm font-medium">{error}</span>
+              </div>
+            </div>
+          )}
+          
+          <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
+            {/* Password Field */}
+            <div className="space-y-2">
+              <label htmlFor="password" className="block text-xs sm:text-sm font-semibold text-gray-700">
+                New Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  onFocus={() => handleFocus('password')}
+                  onBlur={() => handleBlur('password')}
+                  className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-xl border-2 transition-all duration-200 ${
+                    isFocused.password
+                      ? 'border-primary-500 shadow-md'
+                      : 'border-gray-200 hover:border-gray-300'
+                  } ${formData.password ? 'text-gray-900' : 'text-gray-500'} focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 touch-manipulation`}
+                  placeholder="Create a new password"
+                  required
+                  aria-required="true"
+                  aria-label="New password"
+                />
+                <button
+                  type="button"
+                  onClick={togglePasswordVisibility}
+                  className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors touch-manipulation"
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                  {showPassword ? (
+                    <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+                      <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
+                    </svg>
+                  ) : (
+                    <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clipRule="evenodd" />
+                      <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+                    </svg>
+                  )}
+                </button>
+              </div>
+              
+              {/* Password Strength Indicator */}
+              {formData.password && (
+                <div className="space-y-1">
+                  <div className="flex justify-between text-xs">
+                    <span className="text-gray-600">Password strength</span>
+                    <span className={`font-medium ${
+                      passwordStrength <= 2 ? 'text-red-600' :
+                      passwordStrength <= 4 ? 'text-yellow-600' :
+                      'text-green-600'
+                    }`}>
+                      {passwordStrength <= 2 ? 'Weak' :
+                       passwordStrength <= 4 ? 'Fair' :
+                       passwordStrength === 5 ? 'Good' : 'Strong'}
+                    </span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-1.5 sm:h-2">
+                    <div
+                      className={`h-1.5 sm:h-2 rounded-full transition-all duration-300 ${
+                        passwordStrength <= 2 ? 'bg-red-500 w-1/3' :
+                        passwordStrength <= 4 ? 'bg-yellow-500 w-2/3' :
+                        passwordStrength === 5 ? 'bg-green-500 w-4/5' :
+                        'bg-green-600 w-full'
+                      }`}
+                    ></div>
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    Use 8+ characters with uppercase, lowercase, numbers, and symbols
+                  </div>
+                </div>
+              )}
+            </div>
+            
+            {/* Confirm Password Field */}
+            <div className="space-y-2">
+              <label htmlFor="confirmPassword" className="block text-xs sm:text-sm font-semibold text-gray-700">
+                Confirm New Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  onFocus={() => handleFocus('confirmPassword')}
+                  onBlur={() => handleBlur('confirmPassword')}
+                  className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-xl border-2 transition-all duration-200 ${
+                    isFocused.confirmPassword
+                      ? 'border-primary-500 shadow-md'
+                      : 'border-gray-200 hover:border-gray-300'
+                  } ${formData.confirmPassword ? 'text-gray-900' : 'text-gray-500'} focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 touch-manipulation`}
+                  placeholder="Confirm your new password"
+                  required
+                  aria-required="true"
+                  aria-label="Confirm new password"
+                />
+                <button
+                  type="button"
+                  onClick={toggleConfirmPasswordVisibility}
+                  className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors touch-manipulation"
+                  aria-label={showConfirmPassword ? "Hide confirm password" : "Show confirm password"}
+                >
+                  {showConfirmPassword ? (
+                    <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+                      <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
+                    </svg>
+                  ) : (
+                    <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clipRule="evenodd" />
+                      <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+                    </svg>
+                  )}
+                </button>
+              </div>
+              {formData.confirmPassword && formData.password !== formData.confirmPassword && (
+                <p className="text-red-600 text-xs">Passwords do not match</p>
+              )}
+            </div>
+            
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={loading === 'pending'}
+              className="w-full bg-gradient-to-r from-primary-600 to-primary-800 text-white font-semibold py-2.5 sm:py-3 px-4 rounded-xl hover:from-primary-700 hover:to-primary-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none touch-manipulation"
+              aria-busy={loading === 'pending'}
+            >
+              {loading === 'pending' ? (
+                <div className="flex items-center justify-center">
+                  <svg className="animate-spin -ml-1 mr-2 sm:mr-3 h-4 w-4 sm:h-5 sm:w-5 text-white" xmlns="http://www.w3.org/2000/svg" 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>
+                  <span className="text-xs sm:text-sm">Resetting password...</span>
+                </div>
+              ) : (
+                <span className="text-xs sm:text-sm">Reset Password</span>
+              )}
+            </button>
+          </form>
+          
+          {/* Back to Login Link */}
+          <div className="text-center">
+            <button
+              type="button"
+              onClick={handleBackToLogin}
+              className="font-semibold text-primary-600 hover:text-primary-500 transition-colors focus:outline-none focus:underline text-xs sm:text-sm"
+              aria-label="Back to login"
+            >
+              Back to Sign In
+            </button>
+          </div>
+        </div>
+        
+        {/* Footer */}
+        <div className="text-center mt-6 sm:mt-8 text-xs text-gray-500">
+          <p>&copy; 2024 Lin. All rights reserved.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;

frontend/src/services/authService.js

@@ -85,6 +85,47 @@ class AuthService {
       throw error;
     }
   }
+
+  /**
+   * Request password reset
+   * @param {string} email - User email
+   * @returns {Promise<Object>} - API response
+   */
+  async forgotPassword(email) {
+    try {
+      const response = await apiClient.post('/auth/forgot-password', { email });
+      return response;
+    } catch (error) {
+      console.error('AuthService: Forgot password error', error);
+      // Handle network errors
+      if (!error.response) {
+        throw new Error('Network error - please check your connection');
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Reset password with token
+   * @param {Object} resetData - Password reset data
+   * @param {string} resetData.token - Reset token
+   * @param {string} resetData.password - New password
+   * @param {string} resetData.confirm_password - Password confirmation
+   * @returns {Promise<Object>} - API response
+   */
+  async resetPassword(resetData) {
+    try {
+      const response = await apiClient.post('/auth/reset-password', resetData);
+      return response;
+    } catch (error) {
+      console.error('AuthService: Reset password error', error);
+      // Handle network errors
+      if (!error.response) {
+        throw new Error('Network error - please check your connection');
+      }
+      throw error;
+    }
+  }
 }
 
 // Export singleton instance

frontend/src/store/reducers/authSlice.js

@@ -266,6 +266,30 @@ export const loginUser = createAsyncThunk(
   }
 );
 
+export const forgotPassword = createAsyncThunk(
+  'auth/forgotPassword',
+  async (email, { rejectWithValue }) => {
+    try {
+      const response = await authService.forgotPassword(email);
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.response?.data || { success: false, message: 'Password reset request failed' });
+    }
+  }
+);
+
+export const resetPassword = createAsyncThunk(
+  'auth/resetPassword',
+  async (resetData, { rejectWithValue }) => {
+    try {
+      const response = await authService.resetPassword(resetData);
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.response?.data || { success: false, message: 'Password reset failed' });
+    }
+  }
+);
+
 export const logoutUser = createAsyncThunk(
   'auth/logout',
   async (_, { rejectWithValue }) => {
@@ -466,7 +490,7 @@ const authSlice = createSlice({
             const errorMsg = errorPayload.message.toLowerCase();
             if (errorMsg.includes('email not confirmed') || errorMsg.includes('email not verified') || errorPayload.requires_confirmation) {
               errorMessage = 'Check your mail to confirm your account';
-            } else if (errorMsg.includes('invalid credentials') || errorMsg.includes('invalid email') || errorMsg.includes('invalid password')) {
+            } else if (errorMsg.includes('invalid credentials') || errorMsg.includes('invalid email') || errorMsg.includes('invalid password') || errorMsg.includes('login failed')) {
               errorMessage = 'Password/email Incorrect';
             } else if (errorMsg.includes('user not found')) {
               errorMessage = 'No account found with this email. Please check your email or register for a new account.';
@@ -504,6 +528,68 @@ const authSlice = createSlice({
         localStorage.removeItem('token');
       })
 
+    // Forgot password
+      .addCase(forgotPassword.pending, (state) => {
+        state.loading = 'pending';
+        state.error = null;
+      })
+      .addCase(forgotPassword.fulfilled, (state, action) => {
+        state.loading = 'succeeded';
+        state.error = null;
+      })
+      .addCase(forgotPassword.rejected, (state, action) => {
+        state.loading = 'failed';
+        
+        // Handle different error types with specific messages
+        const errorPayload = action.payload;
+        let errorMessage = 'Password reset request failed';
+        
+        if (errorPayload) {
+          if (errorPayload.message) {
+            errorMessage = errorPayload.message;
+          } else if (typeof errorPayload === 'string') {
+            errorMessage = errorPayload;
+          }
+        }
+        
+        state.error = errorMessage;
+      })
+
+    // Reset password
+      .addCase(resetPassword.pending, (state) => {
+        state.loading = 'pending';
+        state.error = null;
+      })
+      .addCase(resetPassword.fulfilled, (state, action) => {
+        state.loading = 'succeeded';
+        state.error = null;
+      })
+      .addCase(resetPassword.rejected, (state, action) => {
+        state.loading = 'failed';
+        
+        // Handle different error types with specific messages
+        const errorPayload = action.payload;
+        let errorMessage = 'Password reset failed';
+        
+        if (errorPayload) {
+          if (errorPayload.message) {
+            // Check for specific error types
+            const errorMsg = errorPayload.message.toLowerCase();
+            if (errorMsg.includes('token')) {
+              errorMessage = 'Invalid or expired reset token. Please request a new password reset.';
+            } else if (errorMsg.includes('password')) {
+              errorMessage = 'Password does not meet requirements. Please use at least 8 characters.';
+            } else {
+              errorMessage = errorPayload.message;
+            }
+          } else if (typeof errorPayload === 'string') {
+            errorMessage = errorPayload;
+          }
+        }
+        
+        state.error = errorMessage;
+      })
+
     // Get current user (existing)
       .addCase(getCurrentUser.pending, (state) => {
         state.loading = 'pending';
@@ -530,4 +616,15 @@ export const {
   setRememberMe
 } = authSlice.actions;
 
+export {
+  registerUser,
+  loginUser,
+  logoutUser,
+  getCurrentUser,
+  checkCachedAuth,
+  autoLogin,
+  forgotPassword,
+  resetPassword
+};
+
 export default authSlice.reducer;