feat: add social buttons in register
This commit is contained in:
parent
07052b9c01
commit
b6d11a5b30
|
|
@ -58,7 +58,7 @@ export const EnterContent: FC<EnterProps> = ({
|
|||
});
|
||||
};
|
||||
|
||||
const onSocialClick = (type: Social) => {
|
||||
const onSocialEnter = (type: Social) => {
|
||||
const url = SocialConfig[type].oauthUrl;
|
||||
|
||||
if (!url) return;
|
||||
|
|
@ -95,10 +95,10 @@ export const EnterContent: FC<EnterProps> = ({
|
|||
// }
|
||||
// }
|
||||
//
|
||||
// // если все успешно, закрываем окно oauth
|
||||
// // если все успешно, закрываем окно
|
||||
// handleCancel();
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -156,19 +156,19 @@ export const EnterContent: FC<EnterProps> = ({
|
|||
<span>or</span>
|
||||
<OutlinedButton
|
||||
icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
|
||||
onClick={() => onSocialClick(Social.FACEBOOK)}
|
||||
onClick={() => onSocialEnter(Social.FACEBOOK)}
|
||||
>
|
||||
Facebook account
|
||||
</OutlinedButton>
|
||||
<OutlinedButton
|
||||
icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
|
||||
onClick={() => onSocialClick(Social.APPLE)}
|
||||
onClick={() => onSocialEnter(Social.APPLE)}
|
||||
>
|
||||
Apple account
|
||||
</OutlinedButton>
|
||||
<OutlinedButton
|
||||
icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
|
||||
onClick={() => onSocialClick(Social.GOOGLE)}
|
||||
onClick={() => onSocialEnter(Social.GOOGLE)}
|
||||
>
|
||||
Google account
|
||||
</OutlinedButton>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
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 { getRegister } from '../../../actions/auth';
|
||||
import { setPersonData } from '../../../actions/profile';
|
||||
import { useOauthWindow } from '../../../hooks/useOauthWindow';
|
||||
import { CustomInput } from '../../view/CustomInput';
|
||||
import { CustomInputPassword } from '../../view/CustomInputPassword';
|
||||
import { FilledButton } from '../../view/FilledButton';
|
||||
|
|
@ -24,6 +28,7 @@ export const RegisterContent: FC<RegisterProps> = ({
|
|||
handleCancel
|
||||
}) => {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const { openOauthWindow } = useOauthWindow();
|
||||
|
||||
const onRegister = () => {
|
||||
form.validateFields().then(() => {
|
||||
|
|
@ -58,6 +63,48 @@ export const RegisterContent: FC<RegisterProps> = ({
|
|||
});
|
||||
};
|
||||
|
||||
const onSocialRegister = (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} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
|
||||
|
|
@ -128,6 +175,25 @@ export const RegisterContent: FC<RegisterProps> = ({
|
|||
Register
|
||||
</FilledButton>
|
||||
<OutlinedButton onClick={() => updateMode('enter')}>Enter</OutlinedButton>
|
||||
<span>or</span>
|
||||
<OutlinedButton
|
||||
icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
|
||||
onClick={() => onSocialRegister(Social.FACEBOOK)}
|
||||
>
|
||||
Facebook account
|
||||
</OutlinedButton>
|
||||
<OutlinedButton
|
||||
icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
|
||||
onClick={() => onSocialRegister(Social.APPLE)}
|
||||
>
|
||||
Apple account
|
||||
</OutlinedButton>
|
||||
<OutlinedButton
|
||||
icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
|
||||
onClick={() => onSocialRegister(Social.GOOGLE)}
|
||||
>
|
||||
Google account
|
||||
</OutlinedButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue