2023-12-20 19:16:35 +03:00

93 lines
3.1 KiB
TypeScript

import React from "react";
import { ButtonUi, ButtonUiType } from "../../../../shared/UI/ButtonUi";
import Form from 'react-bootstrap/Form';
import { useFormik } from 'formik';
import * as yup from 'yup';
import { AuthResponsePayload } from '../../../../types';
import { api } from "../../../../query/query";
import { setCookie } from "typescript-cookie";
import styles from "./authLoginForm.module.scss";
export const AuthLoginFormUi = () => {
const schema = yup.object().shape({
username: yup.string()
.min(3, 'Минимум 3 символа!')
.max(16, 'Максимум 16 символов!')
.required('Это поле обязательное.'),
password: yup.string().required('Это обязательное поле.').min(6, 'Минимум 6 символов!'),
});
const {
handleSubmit,
handleChange,
handleBlur,
errors,
values,
setFieldError
} = useFormik({
initialValues: {
username: '',
password: '',
},
validationSchema: schema,
onSubmit: async (values): Promise<AuthResponsePayload> => {
return await api.post('/authorization', {
username: values.username,
password: values.password
}).then((res) => {
if (res.data[0]) {
setFieldError('username', res.data[0])
setFieldError('password', res.data[0])
} else {
setCookie('authToken', res.data!.authToken)
setCookie('refreshToken', res.data!.refreshToken)
window.location.replace("/auction")
}
return res.data as AuthResponsePayload
})
},
})
return (
<Form noValidate className={styles.container} onSubmit={handleSubmit}>
<Form.Group>
<Form.Control
type="text"
id="username"
placeholder="username"
onChange={handleChange}
name="username"
onBlur={handleBlur}
value={values.username}
isInvalid={!!errors.username}
/>
<Form.Control.Feedback type="invalid">
{errors.username}
</Form.Control.Feedback>
</Form.Group>
<Form.Group>
<Form.Control
type="password"
id="password"
placeholder="password"
onChange={handleChange}
value={values.password}
name="password"
onBlur={handleBlur}
isInvalid={!!errors.password}
/>
<Form.Control.Feedback type="invalid">
{errors.password}
</Form.Control.Feedback>
</Form.Group>
<ButtonUi title={'Войти'} variant={ButtonUiType.PRIMARY} type={'submit'}/>
</Form >
)
}