Function SignInModal

frontend/src/components/sign-in-modal.tsx:34–186

({ isOpen, onClose }: SignInModalProps)

}

export function SignInModal({ isOpen, onClose }: SignInModalProps) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  // Destructure login from our AuthContext
  const { login } = useAuthContext();

  // Destructure `loading` so we can disable the button while logging in
  // Hidden entirely when the backend has no Google credentials — a button
  // whose only outcome is an error toast is not a feature.
  const { data: googleData } = useQuery(GOOGLE_AUTH_AVAILABLE);
  const googleAvailable = googleData?.googleAuthAvailable ?? false;
  const [loginUser, { loading }] = useMutation(LOGIN_USER, {
    onCompleted: (data) => {
      if (data?.login) {
        // Store tokens where desired (session storage for access, local for refresh)
        login(data.login.accessToken, data.login.refreshToken);
        toast.success('Login successful!');
        setErrorMessage(null);
        onClose(); // Close the modal

        // If you want to redirect somewhere on success, uncomment:
        // router.push("/main");
      }
    },
    onError: () => {
      setErrorMessage('Incorrect email or password. Please try again.');
    },
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessage(null); // Clear error when attempting login again
    try {
      await loginUser({
        variables: {
          input: {
            email,
            password,
          },
        },
      });
    } catch (error) {
      logger.error('Login failed:', error);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px] fixed top-[50%] left-[50%] transform -translate-x-[50%] -translate-y-[50%] p-0">
        {/* Invisible but accessible DialogTitle and Description */}
        <VisuallyHidden>
          <DialogTitle>Sign In</DialogTitle>
          <DialogDescription>
            Sign in to your account by entering your credentials
          </DialogDescription>
        </VisuallyHidden>