From d800c5ef9abdfa0967f9de2417fc6d4c5180d2fc Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Wed, 16 Nov 2022 11:33:57 +0300 Subject: [PATCH] feat(#179): add error popup to facebook auth --- src/components/ErrorPopup/index.tsx | 34 ++++++++++++ src/components/ErrorPopup/styled.tsx | 54 +++++++++++++++++++ src/config/env.tsx | 2 +- .../AuthServiceApp/components/Login/index.tsx | 33 ++++++------ .../AuthServiceApp/components/Oauth/hooks.tsx | 11 ++++ .../AuthServiceApp/components/Oauth/index.tsx | 9 ++++ src/features/AuthServiceApp/config/lexics.tsx | 1 + 7 files changed, 128 insertions(+), 16 deletions(-) create mode 100644 src/components/ErrorPopup/index.tsx create mode 100644 src/components/ErrorPopup/styled.tsx diff --git a/src/components/ErrorPopup/index.tsx b/src/components/ErrorPopup/index.tsx new file mode 100644 index 00000000..8c5ec1df --- /dev/null +++ b/src/components/ErrorPopup/index.tsx @@ -0,0 +1,34 @@ +import { T9n } from 'features/T9n' + +import { + ScBody, + Modal, + ScText, + ScWrapper, +} from './styled' + +type Props = { + error: string, + handleModalClose: () => void, + isModalOpen: boolean, +} + +export const ErrorPopup = ({ + error, + handleModalClose, + isModalOpen, +}: Props) => ( + + + + + + + + + +) diff --git a/src/components/ErrorPopup/styled.tsx b/src/components/ErrorPopup/styled.tsx new file mode 100644 index 00000000..f84749fe --- /dev/null +++ b/src/components/ErrorPopup/styled.tsx @@ -0,0 +1,54 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' +import { devices } from 'config/devices' + +import { ModalWindow } from 'features/Modal/styled' +import { + Body, + Modal as BaseModal, +} from 'features/AuthServiceApp/components/RegisterPopup/styled' + +export const Modal = styled(BaseModal)` + ${ModalWindow} { + min-height: 220px; + padding-top: 0; + + display: flex; + align-items: center; + + ${isMobileDevice + ? css` + @media ${devices.mobile} { + width: 95vw; + padding-top: 0; + } + ` + : ''}; + } +` + +export const ScBody = styled(Body)` +` + +export const ScText = styled.span` + text-align: center; + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; +` + +type WrapperProps = { + isFetching?: boolean, +} + +export const ScWrapper = styled.div` + ${({ isFetching }) => ( + isFetching + ? css`pointer-events: none;` + : '' + )} +` diff --git a/src/config/env.tsx b/src/config/env.tsx index d3749e39..43f9a9fc 100644 --- a/src/config/env.tsx +++ b/src/config/env.tsx @@ -12,7 +12,7 @@ export const ENV = process.env.REACT_APP_ENV || 'staging' export const isProduction = ENV === 'production' || ENV === 'preproduction' -export const stageENV = process.env.REACT_APP_STAGE || 'staging' +export const stageENV = process.env.REACT_APP_STAGE || 'test' export const STRIPE_PUBLIC_KEY = process.env.REACT_APP_STRIPE_PK || 'pk_test_51J5TEYEDSxVnTgDWhKLstuDAhx9XmGJmj2awyZ1HghpWdU46MhXqbQt1PyW9XsRlES5JFyuQWbPRjoSsiW3wvXOH00KMirJEGZ' diff --git a/src/features/AuthServiceApp/components/Login/index.tsx b/src/features/AuthServiceApp/components/Login/index.tsx index 70779be5..17c63f43 100644 --- a/src/features/AuthServiceApp/components/Login/index.tsx +++ b/src/features/AuthServiceApp/components/Login/index.tsx @@ -10,6 +10,16 @@ import { PasswordInput } from '../PasswordInput' import { Input } from '../../../../components/Input' import { Logo } from '../Logo' import { useLoginForm } from './hooks' + +import { + RegisterButton, + AuthButtonsContainer, + AuthButton, + AuthButtonText, + AuthButtonImage, + ContinueWith, +} from './styled' + import { InputGroup, BlockTitle, @@ -24,14 +34,7 @@ import { Wrapper, ScLoaderWrapper, } from '../../styled' -import { - RegisterButton, - AuthButtonsContainer, - AuthButton, - AuthButtonText, - AuthButtonImage, - ContinueWith, -} from './styled' + import { CompanyInfo } from '../../../CompanyInfo' const Login = () => { @@ -127,14 +130,14 @@ const Login = () => { Google - {/* */} - {/* */} - {/* Facebook */} + + + Facebook + + {/* */} + {/* */} + {/* Apple ID */} {/* */} - {/* - - Apple ID - */} diff --git a/src/features/AuthServiceApp/components/Oauth/hooks.tsx b/src/features/AuthServiceApp/components/Oauth/hooks.tsx index 5c94d4d7..c5bbfdd0 100644 --- a/src/features/AuthServiceApp/components/Oauth/hooks.tsx +++ b/src/features/AuthServiceApp/components/Oauth/hooks.tsx @@ -15,6 +15,8 @@ import { API_ROOT } from '../../config/routes' export const useOauth = () => { const [email, setEmail] = useState('') const [error, setError] = useState('') + const [errorAuth, setErrorAuth] = useState('') + const [isOpenErrorPopup, setIsOpenErrorPopup] = useState(false) const [showEmailField, showShowEmailField] = useState(false) const formRef = useRef(null) @@ -37,6 +39,11 @@ export const useOauth = () => { if (data.error === 'Token missing email field') { showShowEmailField(true) } + + if (data.error === 'Email already exists') { + setErrorAuth('error_email_already_exist') + setIsOpenErrorPopup(true) + } } }, []) @@ -46,6 +53,7 @@ export const useOauth = () => { const handleEmailFocus = () => { setError('') + setErrorAuth('') } const handleEmailBlur = ({ target: { value } }: FocusEvent) => { @@ -69,11 +77,14 @@ export const useOauth = () => { return { email, error, + errorAuth, formRef, handleEmailBlur, handleEmailChange, handleEmailFocus, handleSubmit, + isOpenErrorPopup, + setIsOpenErrorPopup, showEmailField, } } diff --git a/src/features/AuthServiceApp/components/Oauth/index.tsx b/src/features/AuthServiceApp/components/Oauth/index.tsx index 124b9014..da5feca2 100644 --- a/src/features/AuthServiceApp/components/Oauth/index.tsx +++ b/src/features/AuthServiceApp/components/Oauth/index.tsx @@ -27,6 +27,7 @@ import { StyledLink, Error, } from './styled' +import { ErrorPopup } from '../../../../components/ErrorPopup' const url = `${API_ROOT}/oauth` @@ -57,11 +58,14 @@ const Oauth = () => { const { email, error, + errorAuth, formRef, handleEmailBlur, handleEmailChange, handleEmailFocus, handleSubmit, + isOpenErrorPopup, + setIsOpenErrorPopup, showEmailField, } = useOauth() @@ -155,6 +159,11 @@ const Oauth = () => { other method of authorization + setIsOpenErrorPopup(false)} + isModalOpen={isOpenErrorPopup} + error={errorAuth} + /> ) } diff --git a/src/features/AuthServiceApp/config/lexics.tsx b/src/features/AuthServiceApp/config/lexics.tsx index e98b71da..ce82d7b6 100644 --- a/src/features/AuthServiceApp/config/lexics.tsx +++ b/src/features/AuthServiceApp/config/lexics.tsx @@ -9,6 +9,7 @@ export const lexics = { confirm_email: 15432, consent: 15431, error_accept_cookies: 17268, + error_email_already_exist: 18253, error_email_already_in_use: 11156, error_empty_email: 2498, error_empty_password: 2499,