регистрация и авторизация с 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);

Ответы (0 шт):