bbuddy-ui/src/components/Modals/authModalContent/EnterContent.tsx

import React, { FC, useState } from 'react';
import { Form, FormInstance, notification } from 'antd';
import Image from 'next/image';
import { Social } from '../../../types/social';
import { AUTH_USER } from '../../../constants/common';
import { SocialConfig } from '../../../constants/social';
import { useOauthWindow } from '../../../hooks/useOauthWindow';
import { getAuth } from '../../../actions/auth';
import { getPersonalData } from '../../../actions/profile';
import { CustomInput } from '../../view/CustomInput';
import { CustomInputPassword } from '../../view/CustomInputPassword';
import { FilledButton } from '../../view/FilledButton';
import { OutlinedButton } from '../../view/OutlinedButton';
import { LinkButton } from '../../view/LinkButton';
import { i18nText } from '../../../i18nKeys';

type EnterProps = {
    form: FormInstance;
    updateMode: (mode: 'enter' | 'register' | 'reset' | 'finish') => void;
    locale: string;
    handleCancel: () => void;
    updateToken: (token: string) => void;
}

export const EnterContent: FC<EnterProps> = ({
    form,
    updateMode,
    updateToken,
    locale,
    handleCancel
}) => {
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const { openOauthWindow } = useOauthWindow();

    const onLogin = () => {
        form.validateFields().then(() => {
            const { login, password } = form.getFieldsValue();
            setIsLoading(true);
            getAuth(locale, { login, password })
                .then((data) => {
                    if (data.jwtToken) {
                        getPersonalData(locale, data.jwtToken)
                            .then((profile) => {
                                localStorage.setItem(AUTH_USER, JSON.stringify(profile));
                                updateToken(data.jwtToken);
                                handleCancel();
                            })
                    }
                })
                .catch((error) => {
                    notification.error({
                        message: 'Error',
                        description: error?.response?.data?.errMessage
                    });
                })
                .finally(() => {
                    setIsLoading(false);
                })
        });
    };

    const onSocialEnter = (type: Social) => {
        const url = SocialConfig[type].oauthUrl;

        if (!url) return;

        openOauthWindow(url, type, async (event: MessageEvent) => {
            const { data: socialData } = event

            // примерная схема последующей обработки

            // const socialErrors: string[] = [];
            // try {
            //     // отправляем запрос на бэк с данными из соц сети
            //     const { data: { jwtToken } } = await query(socialData);
            //     // обновляем токен
            //     updateToken(jwtToken);
            //     // получаем данные о пользователе
            //     await getAuthUser()
            // } catch (error: any) {
            //     if (error.httpStatus === 449) {
            //         // ошибка, когда отсутствует e-mail
            //
            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку регистрации
            //         handleCancel();
            //         openSocialEmailRequestModal(socialData);
            //     } else if (error.httpStatus === 409) {
            //         // ошибка, когда по переданному email уже существует аккаунт
            //
            //         // какие-то дальнейшие действия после получения ошибки, например, закрываем окно и открываем модалку с вводом пароля
            //         handleCancel();
            //         openSocialPasswordModal(socialData);
            //     } else {
            //         // в остальных случаях записываем ошибку в массив ошибок
            //         socialErrors.push(error.toString());
            //     }
            // }
            //
            // // если все успешно, закрываем окно
            // handleCancel();
        })
    };

    return (
        <>
            <Form form={form} style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
                <Form.Item
                    name="login"
                    noStyle
                    rules={[
                        {
                            type: 'email',
                            message: i18nText('errors.validEmail', locale)
                        },
                        {
                            required: true,
                            message: i18nText('error.emptyEmail', locale)
                        }
                    ]}
                >
                    <CustomInput
                        size="small"
                        placeholder="E-mail"
                        type="email"
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    noStyle
                    rules={[{
                        required: true,
                        message: i18nText('errors.emptyPass', locale)
                    }]}
                >
                    <CustomInputPassword
                        size="small"
                        placeholder={i18nText('password', locale)}
                        autoComplete="off"
                        onPressEnter={onLogin}
                    />
                </Form.Item>
            </Form>
            <FilledButton
                type="primary"
                onClick={onLogin}
                loading={isLoading}
            >
                {i18nText('enter', locale)}
            </FilledButton>
            <OutlinedButton onClick={() => updateMode('register')}>{i18nText('registration', locale)}</OutlinedButton>
            <LinkButton
                type="link"
                onClick={() => updateMode('reset')}
            >
                {`${i18nText('forgotPass', locale)}?`}
            </LinkButton>
            <span>{i18nText('or', locale)}</span>
            <OutlinedButton
                icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
                onClick={() => onSocialEnter(Social.FACEBOOK)}
            >
                {i18nText('facebook', locale)}
            </OutlinedButton>
            <OutlinedButton
                icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
                onClick={() => onSocialEnter(Social.APPLE)}
            >
                {i18nText('apple', locale)}
            </OutlinedButton>
            <OutlinedButton
                icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
                onClick={() => onSocialEnter(Social.GOOGLE)}
            >
                {i18nText('google', locale)}
            </OutlinedButton>
        </>
    );
};