Ott 1500 remove authentication pages (#449)
* fix(1500): DateFilter key fix * refactor(1500): removed Login page * refactor(1500): removed Registration page * fix(1500): redirect to auth provider if no tokenkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
4 years ago
committed by
GitHub
parent
6945f318a4
commit
92d4d6be4c
@ -1,16 +0,0 @@ |
|||||||
import { useEffect } from 'react' |
|
||||||
|
|
||||||
import { useAuthStore } from 'features/AuthStore' |
|
||||||
import { queryParamStorage } from 'features/QueryParamsStorage' |
|
||||||
|
|
||||||
export const RedirectCallback = () => { |
|
||||||
const { signinRedirectCallback } = useAuthStore() |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
signinRedirectCallback().then(() => { |
|
||||||
queryParamStorage.clear() |
|
||||||
}) |
|
||||||
}, [signinRedirectCallback]) |
|
||||||
|
|
||||||
return null |
|
||||||
} |
|
||||||
@ -1,76 +0,0 @@ |
|||||||
import { lazy } from 'react' |
|
||||||
|
|
||||||
import { |
|
||||||
Redirect, |
|
||||||
Route, |
|
||||||
Switch, |
|
||||||
} from 'react-router-dom' |
|
||||||
|
|
||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { PAGES } from 'config' |
|
||||||
import { publicLexics } from 'config/lexics/public' |
|
||||||
|
|
||||||
import { useLexicsConfig } from 'features/LexicsStore' |
|
||||||
import { LanguageSelect } from 'features/LanguageSelect' |
|
||||||
import { HeaderGroup } from 'features/ProfileHeader/styled' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { RedirectCallback } from './RedirectCallback' |
|
||||||
|
|
||||||
const Login = lazy(() => import('features/Login')) |
|
||||||
const Register = lazy(() => import('features/Register')) |
|
||||||
|
|
||||||
const Main = styled.main` |
|
||||||
width: 100%; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
min-height: 100vh; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
const HeaderStyled = styled.header` |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
height: 3.02rem; |
|
||||||
padding: 0.755rem 1.369rem 0 1.04rem; |
|
||||||
margin-bottom: 1.416rem; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
padding-top: 15px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const UnauthenticatedApp = () => { |
|
||||||
useLexicsConfig(publicLexics) |
|
||||||
|
|
||||||
return ( |
|
||||||
<Main> |
|
||||||
<HeaderStyled> |
|
||||||
<HeaderGroup /> |
|
||||||
<HeaderGroup> |
|
||||||
<LanguageSelect /> |
|
||||||
</HeaderGroup> |
|
||||||
</HeaderStyled> |
|
||||||
<Switch> |
|
||||||
<Route path={PAGES.login}> |
|
||||||
<Login /> |
|
||||||
</Route> |
|
||||||
|
|
||||||
<Route path={PAGES.register}> |
|
||||||
<Register /> |
|
||||||
</Route> |
|
||||||
|
|
||||||
<Route path='/redirect'> |
|
||||||
<RedirectCallback /> |
|
||||||
</Route> |
|
||||||
|
|
||||||
<Redirect to={PAGES.login} /> |
|
||||||
</Switch> |
|
||||||
</Main> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import { useHistory } from 'react-router-dom' |
|
||||||
|
|
||||||
import { PAGES } from 'config' |
|
||||||
import { register } from 'requests' |
|
||||||
|
|
||||||
type Args = Parameters<typeof register>[0] |
|
||||||
|
|
||||||
export const useRegister = () => { |
|
||||||
const history = useHistory() |
|
||||||
|
|
||||||
const goToRegistrationSuccess = () => { |
|
||||||
history.replace(`${PAGES.register}/successful`) |
|
||||||
} |
|
||||||
|
|
||||||
return async (args: Args) => ( |
|
||||||
register(args).then(goToRegistrationSuccess) |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
import map from 'lodash/map' |
|
||||||
|
|
||||||
import { useLexicsStore } from 'features/LexicsStore' |
|
||||||
import { OutsideClick } from 'features/OutsideClick' |
|
||||||
|
|
||||||
import { useToggle } from 'hooks' |
|
||||||
|
|
||||||
import type { Languages } from './config' |
|
||||||
import { langsList } from './config' |
|
||||||
import { |
|
||||||
Wrapper, |
|
||||||
WorldIcon, |
|
||||||
LangsList, |
|
||||||
LangsItem, |
|
||||||
FlagIcon, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
export const LanguageSelect = () => { |
|
||||||
const { changeLang, translate } = useLexicsStore() |
|
||||||
const { |
|
||||||
close, |
|
||||||
isOpen, |
|
||||||
open, |
|
||||||
} = useToggle() |
|
||||||
|
|
||||||
const handleLangChange = (locale: Languages) => () => { |
|
||||||
changeLang(locale) |
|
||||||
close() |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<Wrapper> |
|
||||||
<WorldIcon |
|
||||||
onClick={open} |
|
||||||
active={isOpen} |
|
||||||
title={translate('select_language')} |
|
||||||
aria-expanded={isOpen} |
|
||||||
aria-controls='langsList' |
|
||||||
/> |
|
||||||
{isOpen && ( |
|
||||||
<OutsideClick onClick={close}> |
|
||||||
<LangsList id='langsList'> |
|
||||||
{ |
|
||||||
map( |
|
||||||
langsList, |
|
||||||
({ |
|
||||||
className, |
|
||||||
locale, |
|
||||||
title, |
|
||||||
}) => ( |
|
||||||
<LangsItem |
|
||||||
key={locale} |
|
||||||
title={title} |
|
||||||
onClick={handleLangChange(locale)} |
|
||||||
> |
|
||||||
<FlagIcon flag={className} /> |
|
||||||
</LangsItem> |
|
||||||
), |
|
||||||
) |
|
||||||
} |
|
||||||
</LangsList> |
|
||||||
</OutsideClick> |
|
||||||
)} |
|
||||||
</Wrapper> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,145 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
export const Wrapper = styled.div` |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
` |
|
||||||
|
|
||||||
type WorldIconProps = { |
|
||||||
active?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const WorldIcon = styled.button<WorldIconProps>` |
|
||||||
display: block; |
|
||||||
width: 0.85rem; |
|
||||||
height: 0.85rem; |
|
||||||
border: none; |
|
||||||
background: none; |
|
||||||
outline: none; |
|
||||||
background-image: url(/images/worldIcon.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
cursor: pointer; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
background-size: cover; |
|
||||||
width: 19px; |
|
||||||
min-width: 19px; |
|
||||||
height: 19px; |
|
||||||
position: absolute; |
|
||||||
top: 5px; |
|
||||||
right: 10px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
|
|
||||||
:hover { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
${({ active }) => (active ? 'opacity: 1;' : 'opacity: 0.7;')} |
|
||||||
` |
|
||||||
|
|
||||||
export const LangsList = styled.ul` |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
width: 4.6rem; |
|
||||||
position: absolute; |
|
||||||
background-color: #666666; |
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); |
|
||||||
border-radius: 2px; |
|
||||||
right: -92%; |
|
||||||
top: calc(100% + 0.19rem); |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
top: 35px; |
|
||||||
right: 10px; |
|
||||||
width: 55px; |
|
||||||
height: 25px; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
gap: 5px; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
:before { |
|
||||||
content: ''; |
|
||||||
width: 0.567rem; |
|
||||||
height: 0.567rem; |
|
||||||
transform: translateY(-50%) rotate(45deg); |
|
||||||
position: absolute; |
|
||||||
right: 0.9rem; |
|
||||||
background-color: #666666; |
|
||||||
z-index: 0; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 10px; |
|
||||||
height: 20px; |
|
||||||
right: 10px; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const LangsItem = styled.li` |
|
||||||
text-align: center; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
width: 2.28rem; |
|
||||||
height: 2.28rem; |
|
||||||
z-index: 1; |
|
||||||
border-radius: 2px; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 22px; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
:hover { |
|
||||||
background-color: #999999; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
type Position = { |
|
||||||
col: number, |
|
||||||
row: number, |
|
||||||
} |
|
||||||
|
|
||||||
const flagPositions: Record<string, Position> = { |
|
||||||
gb: { |
|
||||||
col: 4, |
|
||||||
row: 12, |
|
||||||
}, |
|
||||||
ru: { |
|
||||||
col: 8, |
|
||||||
row: 9, |
|
||||||
}, |
|
||||||
} |
|
||||||
|
|
||||||
const getFlagPosition = (flag: string) => { |
|
||||||
const { col, row } = flagPositions[flag] |
|
||||||
return `${col * -24}px ${row * -16}px` |
|
||||||
} |
|
||||||
|
|
||||||
type FlagIconProps = { |
|
||||||
flag: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const FlagIcon = styled.span<FlagIconProps>` |
|
||||||
display: inline-block; |
|
||||||
width: 28px; |
|
||||||
height: 16px; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
background-image: url('/images/flags-sprite.png'); |
|
||||||
background-position: 1000px 1000px; |
|
||||||
background-repeat: no-repeat; |
|
||||||
display: inline-block; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
background-size: 360px; |
|
||||||
height: 16px; |
|
||||||
width: 24px; |
|
||||||
|
|
||||||
background-position: ${({ flag }) => getFlagPosition(flag)}; |
|
||||||
` |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { ButtonSolid as BaseButtonSolid } from 'features/Common' |
|
||||||
|
|
||||||
const backgroundColors = { |
|
||||||
facebook: '#4468B2', |
|
||||||
google: '#FFFFFF', |
|
||||||
} |
|
||||||
|
|
||||||
const textColors = { |
|
||||||
facebook: '#FFFFFF', |
|
||||||
google: '#4F4F4F', |
|
||||||
} |
|
||||||
|
|
||||||
const Button = styled(BaseButtonSolid)<Props>` |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
width: 100%; |
|
||||||
border-radius: 10px; |
|
||||||
box-shadow: 0px 1px 0.283rem rgba(0, 0, 0, 0.2); |
|
||||||
font-weight: 500; |
|
||||||
font-size: 0.95rem; |
|
||||||
letter-spacing: -0.408px; |
|
||||||
|
|
||||||
color: ${({ provider }) => textColors[provider]}; |
|
||||||
background-color: ${({ provider }) => backgroundColors[provider]}; |
|
||||||
margin-bottom: 0.71rem; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
border-radius: 6px; |
|
||||||
font-size: 12.31px; |
|
||||||
margin-bottom: 9.23px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
max-width: 290px; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''} |
|
||||||
|
|
||||||
` |
|
||||||
|
|
||||||
const Icon = styled.span<Props>` |
|
||||||
display: inline-block; |
|
||||||
width: 1rem; |
|
||||||
height: 1rem; |
|
||||||
margin-right: 0.38rem; |
|
||||||
background-image: url(/images/${({ provider }) => provider}.png); |
|
||||||
background-size: contain; |
|
||||||
background-repeat: no-repeat; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 12.92px; |
|
||||||
height: 12.92px; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
` |
|
||||||
|
|
||||||
const lexics = { |
|
||||||
facebook: 'Войти через Facebook', |
|
||||||
google: 'Войти через Google', |
|
||||||
} |
|
||||||
|
|
||||||
type Props = { |
|
||||||
provider: keyof typeof backgroundColors, |
|
||||||
} |
|
||||||
|
|
||||||
export const AuthProviderButton = ({ provider }: Props) => ( |
|
||||||
<Button type='button' provider={provider}> |
|
||||||
<Icon provider={provider} /> |
|
||||||
{lexics[provider]} |
|
||||||
</Button> |
|
||||||
) |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
import type { MouseEvent } from 'react' |
|
||||||
|
|
||||||
import { |
|
||||||
CloseButton, |
|
||||||
Header, |
|
||||||
HeaderActions, |
|
||||||
} from 'features/PopupComponents' |
|
||||||
import { InputGroup, NewInput } from 'features/Common' |
|
||||||
|
|
||||||
import { ButtonSolid } from '../../styled' |
|
||||||
import { |
|
||||||
Modal, |
|
||||||
Body, |
|
||||||
Title, |
|
||||||
ButtonWrapper, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
type Props = { |
|
||||||
onHide: () => void, |
|
||||||
} |
|
||||||
|
|
||||||
export const PasswordResetPopup = ({ onHide }: Props) => { |
|
||||||
const close = (e: MouseEvent<HTMLButtonElement>) => { |
|
||||||
e.stopPropagation() |
|
||||||
onHide() |
|
||||||
} |
|
||||||
return ( |
|
||||||
<Modal |
|
||||||
isOpen |
|
||||||
close={onHide} |
|
||||||
withCloseButton={false} |
|
||||||
> |
|
||||||
<Header height={50}> |
|
||||||
<Title> |
|
||||||
Восстановление пароля |
|
||||||
</Title> |
|
||||||
<HeaderActions position='right'> |
|
||||||
<CloseButton |
|
||||||
onClick={close} |
|
||||||
/> |
|
||||||
</HeaderActions> |
|
||||||
</Header> |
|
||||||
<Body> |
|
||||||
<InputGroup> |
|
||||||
<NewInput type='email' placeholder='Введите email, указанный при регистрации' /> |
|
||||||
</InputGroup> |
|
||||||
<ButtonWrapper> |
|
||||||
<ButtonSolid width='270px' onClick={close}>Отправить</ButtonSolid> |
|
||||||
</ButtonWrapper> |
|
||||||
</Body> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { Modal as BaseModal } from 'features/Modal' |
|
||||||
import { ModalWindow } from 'features/Modal/styled' |
|
||||||
import { HeaderTitle } from 'features/PopupComponents' |
|
||||||
|
|
||||||
export const Modal = styled(BaseModal)` |
|
||||||
background-color: rgba(0, 0, 0, 0.7); |
|
||||||
|
|
||||||
${ModalWindow} { |
|
||||||
width: 577px; |
|
||||||
padding: 15px 0; |
|
||||||
background-color: #333333; |
|
||||||
border-radius: 5px; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 100%; |
|
||||||
padding: 15px 30px 0; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const Body = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
margin-top: 24px; |
|
||||||
padding: 0 40px; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 100%; |
|
||||||
padding: 0; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''} |
|
||||||
` |
|
||||||
|
|
||||||
export const Title = styled(HeaderTitle)`` |
|
||||||
|
|
||||||
export const ButtonWrapper = styled.div` |
|
||||||
padding: 25px 0; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 100%; |
|
||||||
padding: 12px 0 35px; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
padding-top: 20px; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''} |
|
||||||
` |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
import type { FormEvent } from 'react' |
|
||||||
|
|
||||||
import { useAuthStore } from 'features/AuthStore' |
|
||||||
|
|
||||||
export const useLoginForm = () => { |
|
||||||
const { login } = useAuthStore() |
|
||||||
|
|
||||||
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => { |
|
||||||
event.preventDefault() |
|
||||||
login() |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
handleSubmit, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
import { PAGES } from 'config' |
|
||||||
|
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import { Logo } from 'features/Logo' |
|
||||||
|
|
||||||
import { useLoginForm } from './hooks' |
|
||||||
import { |
|
||||||
BlockTitle, |
|
||||||
CenterBlock, |
|
||||||
ButtonsBlock, |
|
||||||
Form, |
|
||||||
RegisterButton, |
|
||||||
ButtonSolid, |
|
||||||
// Or,
|
|
||||||
// BorderlessButton,
|
|
||||||
} from './styled' |
|
||||||
// import { AuthProviderButton } from './components/AuthProviderButton'
|
|
||||||
// import { PasswordResetPopup } from './components/PasswordResetPopup'
|
|
||||||
|
|
||||||
const Login = () => { |
|
||||||
const { |
|
||||||
handleSubmit, |
|
||||||
} = useLoginForm() |
|
||||||
|
|
||||||
return ( |
|
||||||
<CenterBlock> |
|
||||||
<Logo /> |
|
||||||
<Form onSubmit={handleSubmit}> |
|
||||||
<BlockTitle t='step_title_login' /> |
|
||||||
|
|
||||||
<ButtonsBlock> |
|
||||||
<ButtonSolid type='submit'> |
|
||||||
<T9n t='login' /> |
|
||||||
</ButtonSolid> |
|
||||||
<RegisterButton to={PAGES.register}> |
|
||||||
<T9n t='register' /> |
|
||||||
</RegisterButton> |
|
||||||
</ButtonsBlock> |
|
||||||
{/* TODO: раскомментить когда будет готово */} |
|
||||||
{/* <Or>или</Or> |
|
||||||
<AuthProviderButton provider='facebook' /> |
|
||||||
<AuthProviderButton provider='google' /> |
|
||||||
<BorderlessButton |
|
||||||
type='button' |
|
||||||
onClick={toggleResetPopup} |
|
||||||
> |
|
||||||
Забыли пароль? |
|
||||||
</BorderlessButton> |
|
||||||
{ |
|
||||||
isResetPopupOpen && ( |
|
||||||
<PasswordResetPopup onHide={toggleResetPopup} /> |
|
||||||
) |
|
||||||
} */} |
|
||||||
</Form> |
|
||||||
</CenterBlock> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default Login |
|
||||||
@ -1,157 +0,0 @@ |
|||||||
import { Link } from 'react-router-dom' |
|
||||||
|
|
||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { |
|
||||||
outlineButtonStyles, |
|
||||||
ButtonSolid as BaseButtonSolid, |
|
||||||
ButtonOutline, |
|
||||||
} from 'features/Common' |
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
|
|
||||||
export const CenterBlock = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: flex-start; |
|
||||||
margin-top: 6.133rem; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
margin-top: 110px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
width: 290px; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const Form = styled.form<{ forRegPage?: boolean }>` |
|
||||||
width: 23.255rem; |
|
||||||
margin-top: 1.982rem; |
|
||||||
margin-bottom: 6.604rem; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 100%; |
|
||||||
padding: 0 28px; |
|
||||||
margin-top: 22px; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
margin-bottom: 20px; |
|
||||||
margin-top: 10px; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const BlockTitle = styled(T9n)` |
|
||||||
display: block; |
|
||||||
font-style: normal; |
|
||||||
font-weight: bold; |
|
||||||
font-size: 1.14rem; |
|
||||||
line-height: 1.14rem; |
|
||||||
color: ${({ theme: { colors } }) => colors.text100}; |
|
||||||
margin-bottom: 1.3rem; |
|
||||||
transition: color 0.3s ease-in-out; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 14.77px; |
|
||||||
line-height: 14.77px;
|
|
||||||
margin-bottom: 18.46px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
type ButtonsBlockProps = { |
|
||||||
marginTop?: number, |
|
||||||
} |
|
||||||
|
|
||||||
export const ButtonsBlock = styled.div<ButtonsBlockProps>` |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: flex-start; |
|
||||||
margin-top: ${({ marginTop = 0 }) => marginTop}px; |
|
||||||
` |
|
||||||
|
|
||||||
type ButtonSolidProps = { |
|
||||||
width?: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const ButtonSolid = styled(BaseButtonSolid)<ButtonSolidProps>` |
|
||||||
width: ${({ width = '100%' }) => width}; |
|
||||||
border-radius: 5px; |
|
||||||
font-weight: normal; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
font-size: 12.31px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
max-width: 290px; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''};
|
|
||||||
` |
|
||||||
|
|
||||||
export const RegisterButton = styled(Link)` |
|
||||||
${outlineButtonStyles} |
|
||||||
width: 100%; |
|
||||||
border-radius: 5px; |
|
||||||
margin-top: 0.71rem; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
min-height: 30px;
|
|
||||||
margin-top: 9.23px; |
|
||||||
font-size: 12.31px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
max-width: 290px; |
|
||||||
margin: 9.23px auto 0; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const BorderlessButton = styled(ButtonOutline)` |
|
||||||
border: none; |
|
||||||
padding: 0; |
|
||||||
width: auto; |
|
||||||
height: 2.123rem; |
|
||||||
font-weight: normal; |
|
||||||
font-size: 0.755rem; |
|
||||||
align-self: flex-start; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 9.8px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const Or = styled.span` |
|
||||||
margin-top: 0.85rem; |
|
||||||
margin-bottom: 0.65rem; |
|
||||||
color: ${({ theme: { colors } }) => colors.text100}; |
|
||||||
font-style: normal; |
|
||||||
font-weight: normal; |
|
||||||
font-size: 0.755rem; |
|
||||||
line-height: 2.123rem; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 14.77px; |
|
||||||
padding: 20px 0;
|
|
||||||
margin: 0; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
padding: 10px 0; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
import { useAuthForm } from 'hooks/useAuthForm' |
|
||||||
|
|
||||||
import { useAuthStore } from 'features/AuthStore' |
|
||||||
|
|
||||||
export const useRegistrationForm = () => { |
|
||||||
const { register } = useAuthStore() |
|
||||||
|
|
||||||
return { |
|
||||||
...useAuthForm({ onSubmit: register }), |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { useHistory } from 'react-router' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import { |
|
||||||
ButtonOutline as ButtonOutlineBase, |
|
||||||
NewInput, |
|
||||||
InputGroup, |
|
||||||
PasswordInput, |
|
||||||
} from 'features/Common' |
|
||||||
import { Error } from 'features/Common/Input/styled' |
|
||||||
import { |
|
||||||
BlockTitle, |
|
||||||
ButtonsBlock, |
|
||||||
ButtonSolid, |
|
||||||
Form, |
|
||||||
} from 'features/Login/styled' |
|
||||||
|
|
||||||
import { useRegistrationForm } from './hooks' |
|
||||||
|
|
||||||
const ButtonOutline = styled(ButtonOutlineBase)` |
|
||||||
width: 100%; |
|
||||||
margin-top: 0.71rem; |
|
||||||
border-radius: 5px; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
margin-top: 9.23px; |
|
||||||
min-height: 30px; |
|
||||||
font-size: 12.31px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const RegistrationStep = () => { |
|
||||||
const history = useHistory() |
|
||||||
const { |
|
||||||
email, |
|
||||||
error, |
|
||||||
handleSubmit, |
|
||||||
onEmailBlur, |
|
||||||
onEmailChange, |
|
||||||
onPasswordBlur, |
|
||||||
onPasswordChange, |
|
||||||
password, |
|
||||||
} = useRegistrationForm() |
|
||||||
|
|
||||||
return ( |
|
||||||
<Form onSubmit={handleSubmit} forRegPage> |
|
||||||
<BlockTitle t='step_title_registration' /> |
|
||||||
<InputGroup> |
|
||||||
<NewInput |
|
||||||
type='email' |
|
||||||
placeholderLexic='form_email' |
|
||||||
value={email} |
|
||||||
onChange={onEmailChange} |
|
||||||
onBlur={onEmailBlur} |
|
||||||
/> |
|
||||||
<PasswordInput |
|
||||||
placeholderLexic='form_password' |
|
||||||
value={password} |
|
||||||
onChange={onPasswordChange} |
|
||||||
onBlur={onPasswordBlur} |
|
||||||
/> |
|
||||||
</InputGroup> |
|
||||||
<ButtonsBlock> |
|
||||||
<Error t={error} marginBottom={0.472} /> |
|
||||||
<ButtonSolid |
|
||||||
type='submit' |
|
||||||
disabled={!email || !password || Boolean(error)} |
|
||||||
> |
|
||||||
<T9n t='sign_up' /> |
|
||||||
</ButtonSolid> |
|
||||||
<ButtonOutline |
|
||||||
type='button' |
|
||||||
onClick={history.goBack} |
|
||||||
> |
|
||||||
<T9n t='go_back' /> |
|
||||||
</ButtonOutline> |
|
||||||
</ButtonsBlock> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
import { PAGES } from 'config' |
|
||||||
|
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import { BlockTitle } from 'features/Login/styled' |
|
||||||
|
|
||||||
import { |
|
||||||
Container, |
|
||||||
GreenTick, |
|
||||||
ButtonLink, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
export const RegistrationSuccessful = () => ( |
|
||||||
<Container> |
|
||||||
<BlockTitle t='registration_successful' /> |
|
||||||
<GreenTick /> |
|
||||||
<ButtonLink to={PAGES.login}> |
|
||||||
<T9n t='login' /> |
|
||||||
</ButtonLink> |
|
||||||
</Container> |
|
||||||
) |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
import { Link } from 'react-router-dom' |
|
||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { devices } from 'config/devices' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { solidButtonStyles } from 'features/Common' |
|
||||||
import { BlockTitle } from 'features/Login/styled' |
|
||||||
|
|
||||||
export const Container = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
margin-top: 80px; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
margin-top: 20px; |
|
||||||
}
|
|
||||||
` |
|
||||||
: ''}; |
|
||||||
|
|
||||||
@media ${devices.tablet} { |
|
||||||
|
|
||||||
${BlockTitle} { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media ${devices.mobile} { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const GreenTick = styled.div` |
|
||||||
width: 288px; |
|
||||||
height: 288px; |
|
||||||
margin: 60px 0 156px 0; |
|
||||||
background-image: url(/images/greenTick.svg); |
|
||||||
background-position-y: -98px; |
|
||||||
background-position-x: center; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 200px; |
|
||||||
height: 200px; |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center; |
|
||||||
background-size: contain; |
|
||||||
margin: 0 auto 15%; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const ButtonLink = styled(Link)` |
|
||||||
${solidButtonStyles} |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
border-radius: 5px; |
|
||||||
font-size: 12.31px; |
|
||||||
font-weight: normal; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
|
|
||||||
` |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
import { Route } from 'react-router' |
|
||||||
|
|
||||||
import { PAGES } from 'config' |
|
||||||
|
|
||||||
import { Logo } from 'features/Logo' |
|
||||||
import { CenterBlock } from 'features/Login/styled' |
|
||||||
|
|
||||||
import { RegistrationStep } from './components/RegistrationStep' |
|
||||||
import { RegistrationSuccessful } from './components/RegistrationSuccessful' |
|
||||||
|
|
||||||
const Register = () => ( |
|
||||||
<CenterBlock> |
|
||||||
<Logo /> |
|
||||||
<Route exact path={`${PAGES.register}`}> |
|
||||||
<RegistrationStep /> |
|
||||||
</Route> |
|
||||||
<Route exact path={`${PAGES.register}/successful`}> |
|
||||||
<RegistrationSuccessful /> |
|
||||||
</Route> |
|
||||||
</CenterBlock> |
|
||||||
) |
|
||||||
|
|
||||||
export default Register |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import { isValidEmail } from '..' |
|
||||||
|
|
||||||
it('invalid emails', () => { |
|
||||||
expect(isValidEmail('a')).toBeFalsy() |
|
||||||
expect(isValidEmail('1')).toBeFalsy() |
|
||||||
expect(isValidEmail('a@')).toBeFalsy() |
|
||||||
expect(isValidEmail('a@m')).toBeFalsy() |
|
||||||
expect(isValidEmail('a@m.')).toBeFalsy() |
|
||||||
expect(isValidEmail('a@mail')).toBeFalsy() |
|
||||||
expect(isValidEmail('a@mail.')).toBeFalsy() |
|
||||||
expect(isValidEmail('abcd.mail.com')).toBeFalsy() |
|
||||||
}) |
|
||||||
|
|
||||||
it('valid emails', () => { |
|
||||||
expect(isValidEmail('a@mail.com')).toBeTruthy() |
|
||||||
expect(isValidEmail('A@MAIL.COM')).toBeTruthy() |
|
||||||
expect(isValidEmail('123@mail.com')).toBeTruthy() |
|
||||||
expect(isValidEmail('A123@mail.com')).toBeTruthy() |
|
||||||
expect(isValidEmail('a.b@mail.com')).toBeTruthy() |
|
||||||
expect(isValidEmail('a-b-c@mail.com')).toBeTruthy() |
|
||||||
expect(isValidEmail('a-b@a-b.com')).toBeTruthy() |
|
||||||
}) |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
import size from 'lodash/size' |
|
||||||
|
|
||||||
export const emailRegex = '[a-z0-9!#$%&/\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&/\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?' |
|
||||||
|
|
||||||
const emailRegExp = new RegExp(emailRegex) |
|
||||||
|
|
||||||
export const isValidEmail = (email: string) => ( |
|
||||||
emailRegExp.test(email.toLowerCase()) && size(email) <= 100 |
|
||||||
) |
|
||||||
@ -1,62 +0,0 @@ |
|||||||
import type { FocusEvent, FormEvent } from 'react' |
|
||||||
import { useState } from 'react' |
|
||||||
|
|
||||||
import { isValidEmail } from 'helpers/isValidEmail' |
|
||||||
import { isValidPassword } from 'helpers/isValidPassword' |
|
||||||
|
|
||||||
export type Values = { |
|
||||||
email: string, |
|
||||||
password: string, |
|
||||||
} |
|
||||||
|
|
||||||
type Args = { |
|
||||||
onSubmit: (values: Values) => Promise<void>, |
|
||||||
} |
|
||||||
|
|
||||||
export const useAuthForm = ({ onSubmit }: Args) => { |
|
||||||
const [email, setEmail] = useState('') |
|
||||||
const [password, setPassword] = useState('') |
|
||||||
const [error, setError] = useState('') |
|
||||||
|
|
||||||
const onEmailChange = ({ target: { value } }: FocusEvent<HTMLInputElement>) => { |
|
||||||
setError('') |
|
||||||
setEmail(value) |
|
||||||
} |
|
||||||
|
|
||||||
const onPasswordChange = ({ target: { value } }: FocusEvent<HTMLInputElement>) => { |
|
||||||
setError('') |
|
||||||
setPassword(value) |
|
||||||
} |
|
||||||
|
|
||||||
const onEmailBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => { |
|
||||||
if (!value) { |
|
||||||
setError('error_empty_email') |
|
||||||
} else if (!isValidEmail(value)) { |
|
||||||
setError('error_invalid_email_format') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const onPasswordBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => { |
|
||||||
if (!value) { |
|
||||||
setError('error_empty_password') |
|
||||||
} else if (!isValidPassword(value)) { |
|
||||||
setError('error_simple_password') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => { |
|
||||||
event.preventDefault() |
|
||||||
onSubmit({ email, password }).catch(setError) |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
email, |
|
||||||
error, |
|
||||||
handleSubmit, |
|
||||||
onEmailBlur, |
|
||||||
onEmailChange, |
|
||||||
onPasswordBlur, |
|
||||||
onPasswordChange, |
|
||||||
password, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,54 +0,0 @@ |
|||||||
import { DATA_URL, PROCEDURES } from 'config' |
|
||||||
import { callApiBase } from 'helpers' |
|
||||||
|
|
||||||
const proc = PROCEDURES.create_user |
|
||||||
|
|
||||||
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, |
|
||||||
} |
|
||||||
|
|
||||||
type Args = { |
|
||||||
email: string, |
|
||||||
password: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const register = async ({ |
|
||||||
email, |
|
||||||
password, |
|
||||||
}: Args) => { |
|
||||||
const config = { |
|
||||||
body: { |
|
||||||
params: { |
|
||||||
_p_email: email, |
|
||||||
_p_password: password, |
|
||||||
}, |
|
||||||
proc, |
|
||||||
}, |
|
||||||
} |
|
||||||
|
|
||||||
try { |
|
||||||
const response = await callApiBase({ |
|
||||||
config, |
|
||||||
url: DATA_URL, |
|
||||||
}) |
|
||||||
|
|
||||||
const { _p_status }: Response = await response.json() |
|
||||||
|
|
||||||
if (_p_status === statusCodes.SUCCESS) { |
|
||||||
return Promise.resolve(response) |
|
||||||
} |
|
||||||
return Promise.reject(errorMessages[_p_status]) |
|
||||||
} catch { |
|
||||||
return Promise.reject() |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue