Function AuthModal

frontend/src/components/auth/AuthModal.tsx:52–516

({
  isOpen,
  onClose,
  defaultMode = 'login',
  onLoginSuccess,
})

}

const AuthModal: React.FC<AuthModalProps> = ({
  isOpen,
  onClose,
  defaultMode = 'login',
  onLoginSuccess,
}) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const [mode, setMode] = useState<'login' | 'signup'>(defaultMode);

  // Update mode when defaultMode prop changes
  useEffect(() => {
    setMode(defaultMode);
  }, [defaultMode]);

  const [showPassword, setShowPassword] = useState(false);
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    name: '',
  });

  const [passwordStrength, setPasswordStrength] =
    useState<PasswordStrength | null>(null);
  const [passwordRequirements, setPasswordRequirements] =
    useState<PasswordRequirements | null>(null);

  const { login, signup, isLoading, error, clearError } = useAuth();
  const { showSuccess } = useNotifications();

  // Handle close with navigation logic for settings page
  const handleClose = () => {
    // If we're on the settings page, navigate to home instead of just closing
    if (location.pathname.startsWith('/settings')) {
      navigate('/');
    } else {
      onClose();
    }
  };

  // Load password requirements from frontend validator (no API call needed)
  useEffect(() => {
    if (isOpen) {
      setPasswordRequirements(PasswordValidator.getPasswordRequirements());
    }
  }, [isOpen]);

  // Instant password strength checker using frontend validator
  const checkPasswordStrength = useCallback(
    (password: string) => {
      if (!password || password.length < 1) {
        setPasswordStrength(null);
        return;
      }

      // Use frontend validator for instant feedback
      const result = PasswordValidator.validatePasswordWithPersonalInfo(