From b6d11a5b30edfce3b0ea8b1def4529c9cd88127c Mon Sep 17 00:00:00 2001
From: SD <syutkina.dasha@gmail.com>
Date: Sat, 6 Apr 2024 17:34:51 +0400
Subject: [PATCH] feat: add social buttons in register

---
 .../Modals/authModalContent/EnterContent.tsx  | 12 ++--
 .../authModalContent/RegisterContent.tsx      | 66 +++++++++++++++++++
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/src/components/Modals/authModalContent/EnterContent.tsx b/src/components/Modals/authModalContent/EnterContent.tsx
index b884c8d..f414bfa 100644
--- a/src/components/Modals/authModalContent/EnterContent.tsx
+++ b/src/components/Modals/authModalContent/EnterContent.tsx
@@ -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>
diff --git a/src/components/Modals/authModalContent/RegisterContent.tsx b/src/components/Modals/authModalContent/RegisterContent.tsx
index fafee2e..dbd8ed0 100644
--- a/src/components/Modals/authModalContent/RegisterContent.tsx
+++ b/src/components/Modals/authModalContent/RegisterContent.tsx
@@ -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>
         </>
     );
 };