import React from 'react';
import AuthHelper from '../helpers/AuthHelper';
import { AuthContext } from '../contexts/AuthContext';
import { Form, Col, Button } from 'react-bootstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';
const Auth = new AuthHelper();
const SignupSchema = Yup.object().shape({
login: Yup.string()
.min(6, 'Логин слишком короткий!')
.max(50, 'Логин слишком длинный!')
.required('Логин обязателен к заполнению!'),
password: Yup.string()
.min(6, 'Пароль слишком корткий!')
.max(50, 'Пароль слишком длинный!')
.required('Пароль обязателен к заполнению!'),
confirmpassword: Yup.string()
.oneOf([Yup.ref('password'), null], 'Пароли должны совпадать')
.required('Пароль обязателен к заполнению!'),
});
class SignUp extends React.Component {
constructor(props, context) {
super(props);
if(context.isAuth) {
this.props.history.push('/');
}
this.onSignUp = this.onSignUp.bind(this);
};
onSignUp = async (data, actions) => {
var form_data = new FormData();
for (var key in data) {
form_data.append(key, data[key]);
}
const response = await fetch('http://localhost:4040/api/account/signup', {
method: 'POST',
body: form_data,
});
const json = await response.json();
if (json.accessToken) {
Auth.setToken(json.accessToken);
this.context.loginHandler(true);
this.props.history.push('/');
return true;
} else {
for(var k in json.errors) {
actions.setFieldError("login", json.errors[k]);
}
}
}
render = () => {
return (
<React.Fragment>
<Formik
initialValues={{
login: '',
password: '',
confirmpassword: '',
}}
validationSchema={SignupSchema}
onSubmit={(data, actions) => {
this.onSignUp(data, actions)
console.log(data);
}}
>
{({
handleSubmit,
handleChange,
values,
touched,
isValid,
errors,
}) => (
<Form noValidate onClick={handleSubmit}>
<Form.Group as={Col} md="12">
<Form.Label>Логин</Form.Label>
<Form.Control
type="text"
name="login"
value={values.login}
onChange={handleChange}
isInvalid={!!errors.login}
isValid={touched.login && !errors.login}
/>
<Form.Control.Feedback type="invalid">
{errors.login}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="12">
<Form.Label>Пароль</Form.Label>
<Form.Control
type="password"
name="password"
value={values.password}
onChange={handleChange}
isInvalid={!!errors.password}
isValid={touched.password && !errors.password}
/>
<Form.Control.Feedback type="invalid">
{errors.password}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="12">
<Form.Label>Повторите пароль</Form.Label>
<Form.Control
type="password"
name="confirmpassword"
value={values.confirmpassword}
onChange={handleChange}
isInvalid={!!errors.confirmpassword}
isValid={touched.confirmpassword && !errors.confirmpassword}
/>
<Form.Control.Feedback type="invalid">
{errors.confirmpassword}
</Form.Control.Feedback>
</Form.Group>
<Button disabled={!isValid} type="submit">
Зарегистрироваться
</Button>
</Form>
)}
</Formik>
</React.Fragment>
);
}
}
SignUp.contextType = AuthContext;
export default SignUp;