Авторизация React redux-form
Подскажите пожалуйста, как можно реализовать проверку наличия пользователя и вход в аккаунт после прохождения регистрации? Формы регистрации и авторизации подвязаны на redux-form.
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div className="user-info__item">
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
</div>
</div>
);
const SignUpForm = (props) => {
const history = useHistory();
// eslint-disable-next-line react/prop-types
const { handleSubmit, submitting } = props;
const handleGoTo = (e) => {
e.preventDefault();
history.push(`/login`);
};
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 onClick={handleGoTo} disabled={submitting} type="submit" className="sign-in-btn">
Sign up
</button>
</div>
<div className="close">
<button onClick={() => history.goBack()} className="close-btn" type="button">x</button>
</div>
</form>
);
};
export const SignUpReduxForm = reduxForm({
form: 'signup',
})(SignUpForm);
После ввода данных и нажатия на sign up появляется окошко с входом в аккаунт.
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div className="user-info__item">
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
</div>
</div>
);
const LogInForm = (props) => {
const history = useHistory();
// eslint-disable-next-line react/prop-types
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="password"
type="password"
label="Password"
component={renderField}
validate={[required(), length({ min: 8, max: 15 })]}
/>
<div className="save-settings-btn sign-up-btn">
<button onClick={() => history.push(`/main/allBooks`)} disabled={submitting} type="submit" className="sign-in-btn">
Log In
</button>
</div>
<div className="close">
<button onClick={() => history.push(`/`)} className="close-btn" type="button">x</button>
</div>
</form>
);
};
export const LogInReduxForm = reduxForm({
form: 'login',
})(LogInForm);
После ввода данных и нажатия на log in, должна быть проверка на существующий аккаунт и переход на главную страницу.
Спасибо