LoginForm.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { useAppDispatch, useAppSelector } from '@app/hooks/reduxHooks';
import { doLogin } from '@app/store/slices/authSlice';
import { useFeedback } from '@app/hooks/useFeedback';
import GoogleIcon from '@app/assets/icons/google.svg';
import * as S from './LoginForm.styles';
import * as Auth from '@app/components/layouts/AuthLayout/AuthLayout.styles';
import { useResponsive } from '@app/hooks/useResponsive';
import {
  BITBUCKET_OAUTH2_URL,
  GITHUB_OAUTH_URL,
  GOOGLE_OAUTH_URL,
  handleOauth2Submit,
  handleOauthSubmit,
} from '@app/constants/oauthHandler';
import { GithubOutlined } from '@ant-design/icons';
import { BitBucketOutlined } from '@app/components/dashboard/common/VendorDropdown/vendorIcons/VendorIcons';

interface LoginFormData {
  email: string;
  password: string;
}

export const LoginForm: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const { notification } = useFeedback();
  const { isDesktop } = useResponsive();

  const user = useAppSelector((state) => state.user.user);
  const token = useAppSelector((state) => state.auth.token);

  const [searchParams] = useSearchParams();
  const pageState = searchParams.get('state');

  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    if (!pageState && user) {
      navigate('/');
    } else if (pageState && user) {
      window.location.href = `${pageState}?token=${token}`;
      navigate('/');
    }
  }, [navigate, pageState, token, user]);

  const handleSubmit = useCallback(
    async (values: LoginFormData) => {
      setLoading(true);

      try {
        const token = await dispatch(doLogin(values)).unwrap();
        if (pageState) {
          window.location.href = `${pageState}?token=${token}`;
        }
        navigate('/');
      } catch (err) {
        notification.error({ message: err instanceof Error ? err.message : 'Login failed' });
      } finally {
        setLoading(false);
      }
    },
    [dispatch, navigate, notification, pageState]
  );

  const handleGoogleLogin = useCallback(
    async () => handleOauthSubmit({}, GOOGLE_OAUTH_URL, pageState ? false : isDesktop),
    [isDesktop, pageState]
  );

  const handleGithubLogin = useCallback(
    async () => handleOauthSubmit({}, GITHUB_OAUTH_URL, pageState ? false : isDesktop),
    [isDesktop, pageState]
  );

  const handleBitbucketLogin = useCallback(
    async () => handleOauth2Submit(BITBUCKET_OAUTH2_URL, pageState ? false : isDesktop),
    [isDesktop, pageState]
  );

  return (
    <Auth.FormWrapper>
      <BaseForm
        layout="vertical"
        onFinish={handleSubmit}
        requiredMark="optional"
        initialValues={{
          email: '',
          password: '',
        }}
      >
        <Auth.FormTitle style={{textAlign: "center"}}>{t('auth.common.login')}</Auth.FormTitle>
        <hr></hr>      
        <BaseForm.Item noStyle>
          <Auth.SocialButton type="default" htmlType="button" onClick={handleGoogleLogin}>
            <Auth.SocialIconWrapper>
              <GoogleIcon />
            </Auth.SocialIconWrapper>
            {t('auth.login.googleLink')}
          </Auth.SocialButton>
        </BaseForm.Item>
        <BaseForm.Item noStyle>
          <Auth.SocialButton type="default" htmlType="button" onClick={handleGithubLogin}>
            <Auth.SocialIconWrapper>
              <GithubOutlined />
            </Auth.SocialIconWrapper>
            {t('auth.login.githubLink')}
          </Auth.SocialButton>
        </BaseForm.Item>
        <BaseForm.Item noStyle>
          <Auth.SocialButton type="default" htmlType="button" onClick={handleBitbucketLogin}>
            <Auth.SocialIconWrapper>
              <BitBucketOutlined />
            </Auth.SocialIconWrapper>
            {t('auth.login.bitbucketLink')}
          </Auth.SocialButton>
        </BaseForm.Item>
        <Auth.FooterWrapper>
          <Auth.Text>
            {t('auth.login.noAccount')}{' '}
            <Link to="/auth/sign-up">
              <Auth.LinkText>{t('auth.common.here')}</Auth.LinkText>
            </Link>
          </Auth.Text>
        </Auth.FooterWrapper>
      </BaseForm>
    </Auth.FormWrapper>
  );
};