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,