регистрация и авторизация с Redux-form
Подскажите, как занести данные в стор из формы регистрации, используя react-form? В компоненте SignUpForm происходит регистрация, запись username, birthday, email и password. Далее требуется заносить эти значения юзера в стор, для дальнейшей проверки и авторизации в компоненте LogInForm, где требуется ввести username и password.
В компоненте SignUp значение из форм записываю пока в loacalStorage из values, но хотелось бы в стор заносить юзеров.
const SignUp = (props) => {
const history = useHistory();
const goToLogin = (values) => {
history.push(`/login`);
const user = {
userName: values.username,
email: values.email,
birthday: values.birthday,
password: values.password,
};
localStorage.setItem('user', JSON.stringify(user));
};
return (
<>
<div className="modal__wrapper" onClick={() => history.goBack()}>
<section className="sign-up settings" onClick={(e) => e.stopPropagation()}>
<div className="settings-header">
<h2>Welcome to Fox Library</h2>
</div>
<SignUpReduxForm onSubmit={goToLogin} />
</section>
</div>
</>
);
};
export default SignUp;
const SignUpForm = (props) => {
const history = useHistory();
const { handleSubmit, submitting } = props;
return (
<form className="settings-form" onSubmit={handleSubmit}>
<Field name="username" type="text" label="Username" component={renderField} validate={[required(), length({ min: 2, max: 15 })]} />
<Field name="birthday" type="date" label="Your birthday" component={renderField} />
<Field name="email" type="email" label="Email" component={renderField} validate={[required(), email()]} />
<Field name="password" type="password" label="Password" component={renderField} validate={[required(), length({ min: 8, max: 15 })]} />
<div className="save-settings-btn sign-up-btn">
<button disabled={submitting} type="submit" className="sign-in-btn">Sign up</button>
</div>
<div className="close">
<button onClick={() => history.goBack()} className="close-btn" type="button">Close</button>
</div>
</form>
);
};
export const SignUpReduxForm = reduxForm({
form: 'signup',
})(SignUpForm);
Проверка на юзера при авторизации пока только из localStorage происходит и далее переход на главную страницу, в моем случае компонента allBooks.
const LogIn = (props) => {
const history = useHistory();
const goToAllBooks = (values) => {
const user = JSON.parse(localStorage.getItem('user'));
if (values.username === user.userName && values.password === user.password) {
history.push(`/main/allBooks`);
} else {
alert('Wrong username or password');
}
};
return (
<>
<div className="modal__wrapper" onClick={() => history.push(`/`)}>
<section className="log-in settings" onClick={(e) => e.stopPropagation()}>
<div className="settings-header">
<h2>Log In to Fox Library</h2>
</div>
<LogInReduxForm onSubmit={goToAllBooks} />
</section>
</div>
</>
);
};
const LogInForm = (props) => {
const history = useHistory();
const { handleSubmit, submitting, error } = props;
return (
<form className="settings-form" onSubmit={handleSubmit}>
<Field name="username" type="text" label="Username" component={renderField} validate={[required(), length({ min: 2, max: 15 })]} />
<Field name="password" type="password" label="Password" component={renderField} validate={[required(), length({ min: 8, max: 15 })]} />
<div className="save-settings-btn sign-up-btn">
<button disabled={submitting} type="submit" className="sign-in-btn">Log In</button>
</div>
<div className="close">
<button onClick={() => history.push(`/`)} className="close-btn" type="button">Close</button>
</div>
</form>
);
};
export const LogInReduxForm = reduxForm({
form: 'login',
})(LogInForm);