diff --git a/src/config/lexics/public.tsx b/src/config/lexics/public.tsx index 7ff007b8..fc34e997 100644 --- a/src/config/lexics/public.tsx +++ b/src/config/lexics/public.tsx @@ -1,5 +1,6 @@ export const publicLexics = { error_account_blocked: 12909, + error_email_already_in_use: 11156, error_empty_email: 2498, error_empty_password: 2499, error_fill_out_required_fields: 12911, diff --git a/src/features/AuthStore/hooks/useRegister.tsx b/src/features/AuthStore/hooks/useRegister.tsx index 8ee9dc0c..8ec22651 100644 --- a/src/features/AuthStore/hooks/useRegister.tsx +++ b/src/features/AuthStore/hooks/useRegister.tsx @@ -12,12 +12,7 @@ export const useRegister = () => { history.replace(`${PAGES.register}/successful`) } - const showError = (message: string) => { - // eslint-disable-next-line no-alert - window.alert(message) - } - return async (args: Args) => ( - register(args).then(goToRegistrationSuccess, showError) + register(args).then(goToRegistrationSuccess) ) } diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 4c61dd04..01abfca1 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -47,7 +47,7 @@ export const LabelTitle = styled.p` padding-top: 2px; color: ${({ theme: { colors } }) => colors.secondary}; width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; - + @media ${devices.laptop} { ${({ isUserAccountPage }) => (!isUserAccountPage ? css` @@ -131,7 +131,7 @@ export const InputStyled = styled.input` } ` : '')} - + } @media ${devices.tablet} { @@ -157,7 +157,7 @@ export const InputStyled = styled.input` export const InputWrapper = styled.div` position: relative; ${wrapperStyles} - + @media ${devices.mobile} { height: 40px; @@ -215,7 +215,7 @@ export const Error = styled(T9n)` ${({ marginBottom }) => ( marginBottom - ? `margin-bottom: ${marginBottom}px` + ? `margin-bottom: ${marginBottom}px;` : '' )} diff --git a/src/features/Login/index.tsx b/src/features/Login/index.tsx index c021d132..a7360026 100644 --- a/src/features/Login/index.tsx +++ b/src/features/Login/index.tsx @@ -54,7 +54,7 @@ const LoginForm = () => { /> - + diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index 2f1bdfa2..9cab5845 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -60,28 +60,31 @@ export const BlockTitle = styled(T9n)` } ` -export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>` +type ButtonsBlockProps = { + marginTop?: number, +} + +export const ButtonsBlock = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')}; - margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')}; position: relative; + margin-top: ${({ marginTop = 2 }) => marginTop}px; @media ${devices.laptop} { - margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '32px')}; + margin-top: 32px; } @media ${devices.mobile} { - bottom: ${({ forSubsPage }) => (forSubsPage ? '20px' : '10px')}; - margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '0' : '')}; - position: ${({ forSubsPage }) => (forSubsPage ? 'absolute' : 'relative')}; + bottom: 10px; + margin-bottom: 0; + position: relative; } ` export const RegisterButton = styled(Link)` ${outlineButtonStyles} - margin-top: 40px; + margin-top: 15px; display: flex; align-items: center; justify-content: center; diff --git a/src/features/Register/components/CardStep/index.tsx b/src/features/Register/components/CardStep/index.tsx index 91dee12d..d4c97b79 100644 --- a/src/features/Register/components/CardStep/index.tsx +++ b/src/features/Register/components/CardStep/index.tsx @@ -34,7 +34,7 @@ export const CardStep = () => { /> - + diff --git a/src/features/Register/components/RegistrationStep/hooks/useSubmitHandler.tsx b/src/features/Register/components/RegistrationStep/hooks/useSubmitHandler.tsx index 1928bbb0..33422a53 100644 --- a/src/features/Register/components/RegistrationStep/hooks/useSubmitHandler.tsx +++ b/src/features/Register/components/RegistrationStep/hooks/useSubmitHandler.tsx @@ -11,7 +11,7 @@ import { useValidateForm } from './useValidateForm' export const useSubmitHandler = () => { const { register } = useAuthStore() - const { readFormValue } = useForm() + const { readFormValue, updateFormError } = useForm() const validateForm = useValidateForm() const readTrimmedValue = (fieldName: string) => trim(readFormValue(fieldName)) @@ -26,6 +26,8 @@ export const useSubmitHandler = () => { register({ email, password, + }).catch((message) => { + updateFormError(formIds.formError, message) }) } } diff --git a/src/features/Register/components/RegistrationStep/index.tsx b/src/features/Register/components/RegistrationStep/index.tsx index 15c789b8..2c7e3e05 100644 --- a/src/features/Register/components/RegistrationStep/index.tsx +++ b/src/features/Register/components/RegistrationStep/index.tsx @@ -44,10 +44,10 @@ const Registration = () => { onChange={updateFormValue(formIds.password)} /> + - ) diff --git a/src/features/Register/components/SubscriptionsStep/index.tsx b/src/features/Register/components/SubscriptionsStep/index.tsx index 77c41994..d96634e9 100644 --- a/src/features/Register/components/SubscriptionsStep/index.tsx +++ b/src/features/Register/components/SubscriptionsStep/index.tsx @@ -6,7 +6,6 @@ import { PAGES } from 'config' import { T9n } from 'features/T9n' import { ButtonSolid } from 'features/Common/Button' import { ArrowLeft, ArrowRight } from 'features/Common/Arrows' -import { ButtonsBlock } from 'features/Login/styled' import { MainSubscription } from 'features/Register/components/MainSubscription' import { AdditionalSubscription } from 'features/Register/components/AdditionalSubscription' @@ -21,6 +20,7 @@ import { TotalInfoText, TotalPriceAmmount, TotalPriceDetails, + ButtonsBlock, } from './styled' export const SubscriptionStep = () => { @@ -53,7 +53,7 @@ export const SubscriptionStep = () => { - + Базовая + 2 дополнительно 6997 diff --git a/src/features/Register/components/SubscriptionsStep/styled.tsx b/src/features/Register/components/SubscriptionsStep/styled.tsx index 1519c041..dd59441e 100644 --- a/src/features/Register/components/SubscriptionsStep/styled.tsx +++ b/src/features/Register/components/SubscriptionsStep/styled.tsx @@ -2,6 +2,21 @@ import styled from 'styled-components/macro' import { devices } from 'config/devices' +export const ButtonsBlock = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 80px; + margin-bottom: 96px; + position: relative; + + @media ${devices.mobile} { + bottom: 20px; + margin-bottom: 0; + position: absolute; + } +` + type SubscriptionsBlockProps = { forAdditionalTitle?: boolean, isSubsStep?: boolean, diff --git a/src/requests/login.tsx b/src/requests/login.tsx index 66cc98f7..ebf04803 100644 --- a/src/requests/login.tsx +++ b/src/requests/login.tsx @@ -4,7 +4,6 @@ import { TOKEN_KEY, } from 'config' import { callApiBase } from 'helpers/callApi' -import { checkStatus } from 'helpers/callApi/checkStatus' import { parseJSON } from 'helpers/callApi/parseJSON' const proc = PROCEDURES.auth_user @@ -51,7 +50,6 @@ export const login = async ({ config, url: DATA_URL, }) - checkStatus(response) const token = response.headers.get(TOKEN_KEY) const { _p_status }: Response = await parseJSON(response) diff --git a/src/requests/register.tsx b/src/requests/register.tsx index 4d7c56dc..683bece7 100644 --- a/src/requests/register.tsx +++ b/src/requests/register.tsx @@ -1,13 +1,17 @@ import { DATA_URL, PROCEDURES } from 'config' -import { callApi } from 'helpers' +import { callApiBase } from 'helpers' const proc = PROCEDURES.create_user -const responseStatus = { - FAILURE: 2, +const statusCodes = { + EMAIL_IN_USE: 2, SUCCESS: 1, } +const errorMessages = { + [statusCodes.EMAIL_IN_USE]: 'error_email_already_in_use', +} + type Response = { _p_error: string | null, _p_status: 1 | 2, @@ -32,14 +36,19 @@ export const register = async ({ }, } - const response: Response = await callApi({ - config, - url: DATA_URL, - }) + try { + const response = await callApiBase({ + config, + url: DATA_URL, + }) - if (response._p_status === responseStatus.SUCCESS) { - return Promise.resolve(response) - } + const { _p_status }: Response = await response.json() - return Promise.reject(response._p_error) + if (_p_status === statusCodes.SUCCESS) { + return Promise.resolve(response) + } + return Promise.reject(errorMessages[_p_status]) + } catch { + return Promise.reject() + } }