80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { FormEventHandler, useCallback } from 'react'
|
||
import { Button, ButtonGroup, Form } from 'react-bootstrap'
|
||
|
||
import { useSignIn, useSignUp } from '../hooks/api'
|
||
import { composeSignUpBody } from '../api/signup'
|
||
|
||
type AuthFormProps = {
|
||
goBack: () => void,
|
||
}
|
||
|
||
const AuthForm = ({ goBack }: AuthFormProps) => {
|
||
const { handleSignUp, signUpButton } = useSignUp()
|
||
|
||
const { handleSignIn, signInButton } = useSignIn()
|
||
|
||
const handleAuth: FormEventHandler<HTMLFormElement> = useCallback((e) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
|
||
const formData = new FormData(e.currentTarget)
|
||
|
||
const register = (e.nativeEvent as SubmitEvent).submitter?.id === 'register'
|
||
|
||
void (async () => {
|
||
const accountCreated = register ? (
|
||
await handleSignUp(composeSignUpBody(formData))
|
||
) : true
|
||
|
||
if (accountCreated) {
|
||
if (await handleSignIn(formData)) {
|
||
goBack()
|
||
}
|
||
}
|
||
|
||
})()
|
||
}, [goBack, handleSignUp, handleSignIn])
|
||
|
||
return (
|
||
<Form onSubmit={handleAuth}>
|
||
<Form.Group className='mb-3' controlId='username'>
|
||
<Form.Label>Как меня называть</Form.Label>
|
||
<Form.Control placeholder='Имя или псевдоним' name='username' type='text' required />
|
||
</Form.Group>
|
||
|
||
<Form.Group className='mb-3' controlId='password'>
|
||
<Form.Label>И я могу доказать, что это я</Form.Label>
|
||
<Form.Control placeholder='Пароль' name='password' type='password' required />
|
||
</Form.Group>
|
||
|
||
<Form.Group className='mb-3' controlId='privacyPolicyConsent'>
|
||
<Form.Check>
|
||
<Form.Check.Input type='checkbox' required />
|
||
<Form.Check.Label>
|
||
Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank'>условиями обработки персональных данных</a>
|
||
</Form.Check.Label>
|
||
</Form.Check>
|
||
</Form.Group>
|
||
|
||
<ButtonGroup className='d-flex'>
|
||
<Button
|
||
className='w-100'
|
||
id='register'
|
||
variant='success'
|
||
type='submit'
|
||
{...signUpButton}
|
||
/>
|
||
<Button
|
||
className='w-100'
|
||
id='login'
|
||
variant='success'
|
||
type='submit'
|
||
{...signInButton}
|
||
/>
|
||
</ButtonGroup>
|
||
</Form>
|
||
)
|
||
}
|
||
|
||
export default AuthForm
|