You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.8 KiB
78 lines
1.8 KiB
import React from 'react'
|
|
|
|
import { PAGES } from 'config'
|
|
import { formIds } from 'config/form'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
import { Logo } from 'features/Logo'
|
|
import { Input, ButtonSolid } from 'features/Common'
|
|
import { Error } from 'features/Common/Input/styled'
|
|
import { FormStore } from 'features/FormStore'
|
|
|
|
import { useLoginForm } from './hooks'
|
|
import {
|
|
BlockTitle,
|
|
CenterBlock,
|
|
ButtonsBlock,
|
|
Form,
|
|
RegisterButton,
|
|
} from './styled'
|
|
|
|
const labelWidth = 75
|
|
|
|
const LoginForm = () => {
|
|
const {
|
|
handleSubmit,
|
|
onEmailBlur,
|
|
readFormError,
|
|
readFormValue,
|
|
updateFormValue,
|
|
} = useLoginForm()
|
|
|
|
const requestError = readFormError(formIds.formError)
|
|
|
|
return (
|
|
<CenterBlock>
|
|
<Logo />
|
|
<Form onSubmit={handleSubmit}>
|
|
<BlockTitle>
|
|
<T9n t='step_title_login' />
|
|
</BlockTitle>
|
|
|
|
<Input
|
|
type='email'
|
|
value={readFormValue(formIds.email)}
|
|
error={readFormError(formIds.email)}
|
|
onChange={updateFormValue(formIds.email)}
|
|
onBlur={onEmailBlur}
|
|
labelLexic='form_email'
|
|
labelWidth={labelWidth}
|
|
/>
|
|
<Input
|
|
type='password'
|
|
value={readFormValue(formIds.password)}
|
|
error={readFormError(formIds.password)}
|
|
onChange={updateFormValue(formIds.password)}
|
|
labelLexic='form_password'
|
|
labelWidth={labelWidth}
|
|
/>
|
|
|
|
<ButtonsBlock>
|
|
<Error t={requestError || ''} marginBottom={8} />
|
|
<ButtonSolid type='submit'>
|
|
<T9n t='login' />
|
|
</ButtonSolid>
|
|
<RegisterButton to={PAGES.register}>
|
|
<T9n t='register' />
|
|
</RegisterButton>
|
|
</ButtonsBlock>
|
|
</Form>
|
|
</CenterBlock>
|
|
)
|
|
}
|
|
|
|
export const Login = () => (
|
|
<FormStore>
|
|
<LoginForm />
|
|
</FormStore>
|
|
)
|
|
|