feat: add window for oauth

src/components/Modals/authModalContent/EnterContent.tsx

@@ -1,7 +1,10 @@
 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';
@@ -26,6 +29,7 @@ export const EnterContent: FC<EnterProps> = ({
     handleCancel
 }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
+    const { openOauthWindow } = useOauthWindow();
 
     const onLogin = () => {
         form.validateFields().then(() => {
@@ -54,6 +58,48 @@ export const EnterContent: FC<EnterProps> = ({
         });
     };
 
+    const onSocialClick = (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());
+            //     }
+            // }
+            //
+            // // если все успешно, закрываем окно oauth
+            // handleCancel();
+        })
+    }
+
     return (
         <>
             <Form form={form} style={{ display: 'flex', gap: 16, flexDirection: 'column' }}>
@@ -110,16 +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)}
             >
                 Facebook account
             </OutlinedButton>
             <OutlinedButton
                 icon={<Image src="/images/apple-logo.png" height={22} width={22} alt="" />}
+                onClick={() => onSocialClick(Social.APPLE)}
             >
                 Apple account
             </OutlinedButton>
             <OutlinedButton
                 icon={<Image src="/images/google-logo.png" height={20} width={20} alt="" />}
+                onClick={() => onSocialClick(Social.GOOGLE)}
             >
                 Google account
             </OutlinedButton>

src/constants/social.ts

@@ -0,0 +1,16 @@
+import { Social } from '../types/social';
+
+export const SocialConfig = {
+    [Social.FACEBOOK]: {
+        oauthUrl: 'http://vk.com',
+        redirectUrl: ''
+    },
+    [Social.APPLE]: {
+        oauthUrl: 'http://apple.com',
+        redirectUrl: ''
+    },
+    [Social.GOOGLE]: {
+        oauthUrl: 'http://google.com',
+        redirectUrl: ''
+    }
+};

src/hooks/useOauthWindow.ts

@@ -0,0 +1,38 @@
+const DEFAULT_WINDOW_PARAMS = 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
+
+export const useOauthWindow = () => {
+    let oauthWindow: Window | null = null;
+
+    const openOauthWindow = (
+        url: string,
+        name: string,
+        messageHandler: (e: MessageEvent) => void,
+        params: string = DEFAULT_WINDOW_PARAMS,
+    ) => {
+        const handler = (event: MessageEvent) => {
+            const { data } = event;
+
+            if (data.messageType === 'oAuth') {
+                messageHandler(event);
+                window.removeEventListener('message', handler);
+            }
+        }
+
+        window.removeEventListener('message', handler);
+
+        if (!oauthWindow || oauthWindow.closed) {
+            // окно ещё не существует, либо было закрыто
+            oauthWindow = window.open(url, name, params)!;
+        } else {
+            // окно уже существует
+            oauthWindow!.focus();
+        }
+
+        window.addEventListener('message', handler);
+    }
+
+    return {
+        oauthWindow,
+        openOauthWindow,
+    }
+}

src/types/social.ts

@@ -0,0 +1,5 @@
+export enum Social {
+    FACEBOOK = 'meta',
+    APPLE = 'apple',
+    GOOGLE = 'google'
+}