Авторизация 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, должна быть проверка на существующий аккаунт и переход на главную страницу. Спасибо


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