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;
|
const url = SocialConfig[type].oauthUrl;
|
||||||
|
|
||||||
if (!url) return;
|
if (!url) return;
|
||||||
|
@ -95,10 +95,10 @@ export const EnterContent: FC<EnterProps> = ({
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
//
|
//
|
||||||
// // если все успешно, закрываем окно oauth
|
// // если все успешно, закрываем окно
|
||||||
// handleCancel();
|
// handleCancel();
|
||||||
})
|
})
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -156,19 +156,19 @@ export const EnterContent: FC<EnterProps> = ({
|
||||||
<span>or</span>
|
<span>or</span>
|
||||||
<OutlinedButton
|
<OutlinedButton
|
||||||
icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
|
icon={<Image src="/images/facebook-logo.png" height={20} width={20} alt="" />}
|
||||||
onClick={() => onSocialClick(Social.FACEBOOK)}
|
onClick={() => onSocialEnter(Social.FACEBOOK)}
|
||||||
>
|
>
|
||||||
Facebook account
|
Facebook account
|
||||||
</OutlinedButton>
|
</OutlinedButton>
|
||||||
<OutlinedButton
|
<OutlinedButton
|
||||||
icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
|
icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
|
||||||
onClick={() => onSocialClick(Social.APPLE)}
|
onClick={() => onSocialEnter(Social.APPLE)}
|
||||||
>
|
>
|
||||||
Apple account
|
Apple account
|
||||||
</OutlinedButton>
|
</OutlinedButton>
|
||||||
<OutlinedButton
|
<OutlinedButton
|
||||||
icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
|
icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
|
||||||
onClick={() => onSocialClick(Social.GOOGLE)}
|
onClick={() => onSocialEnter(Social.GOOGLE)}
|
||||||
>
|
>
|
||||||
Google account
|
Google account
|
||||||
</OutlinedButton>
|
</OutlinedButton>
|
||||||
|
|
|
@ -1,8 +1,12 @@
|
||||||
import React, { FC, useState } from 'react';
|
import React, { FC, useState } from 'react';
|
||||||
import { Form, FormInstance, notification } from 'antd';
|
import { Form, FormInstance, notification } from 'antd';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { Social } from '../../../types/social';
|
||||||
import { AUTH_USER } from '../../../constants/common';
|
import { AUTH_USER } from '../../../constants/common';
|
||||||
|
import { SocialConfig } from '../../../constants/social';
|
||||||
import { getRegister } from '../../../actions/auth';
|
import { getRegister } from '../../../actions/auth';
|
||||||
import { setPersonData } from '../../../actions/profile';
|
import { setPersonData } from '../../../actions/profile';
|
||||||
|
import { useOauthWindow } from '../../../hooks/useOauthWindow';
|
||||||
import { CustomInput } from '../../view/CustomInput';
|
import { CustomInput } from '../../view/CustomInput';
|
||||||
import { CustomInputPassword } from '../../view/CustomInputPassword';
|
import { CustomInputPassword } from '../../view/CustomInputPassword';
|
||||||
import { FilledButton } from '../../view/FilledButton';
|
import { FilledButton } from '../../view/FilledButton';
|
||||||
|
@ -24,6 +28,7 @@ export const RegisterContent: FC<RegisterProps> = ({
|
||||||
handleCancel
|
handleCancel
|
||||||
}) => {
|
}) => {
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||||
|
const { openOauthWindow } = useOauthWindow();
|
||||||
|
|
||||||
const onRegister = () => {
|
const onRegister = () => {
|
||||||
form.validateFields().then(() => {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Form form={form} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
|
<Form form={form} autoComplete="off" style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
|
||||||
|
@ -128,6 +175,25 @@ export const RegisterContent: FC<RegisterProps> = ({
|
||||||
Register
|
Register
|
||||||
</FilledButton>
|
</FilledButton>
|
||||||
<OutlinedButton onClick={() => updateMode('enter')}>Enter</OutlinedButton>
|
<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