Как вывести всплывающее окно-уведомление о «плохом входе» - PullRequest
Новая
       20

Как вывести всплывающее окно-уведомление о «плохом входе»

0 голосов
/ 27 сентября 2019

Я хочу, чтобы уведомление о снэп-баре material-ui появлялось, когда кто-то отправлял неправильное имя пользователя или пароль, и главная проблема в том, что у меня 0 опыта работы с response и material-ui.Это было предварительно сконфигурированное упражнение для обработки страницы входа в систему, которая застряла после ошибки 401. Я «решил это» с помощью простой попытки и cath на AuthService.js, например так: 

    const login = async (usernameOrEmail, password) => {
    let response;
    try {
        response = await api.post('/auth/signin', {usernameOrEmail, password});
    } catch (error) {
        response = error;
        alert("Bad credentials, please try again");
    }

    return response;
}

Теперь то, что я хочуэто использовать панель материалов-пользовательского интерфейса вместо предупреждения, вот так выглядит Auth.page.js: 

...all the imports

const AuthPage = ({history}) => {
  const { auth, dispatch } = useContext(AuthContext);
  const classes = styles();

  if (auth.isAuthenticated) {
    history.push("/");
  }

  const submitLoginForm = async ({email, password}, actions) => {
    const loginResponse = await authService.login(email, password);
    if (!_.isEmpty(loginResponse.data)) {
      const {accessToken, tokenType} = loginResponse.data;
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('tokenType', tokenType);

      const userResponse = await authService.getCurrentUser();
      if (!_.isEmpty(userResponse.data)) {
        const user = userResponse.data;
        localStorage.setItem('user', JSON.stringify(user));
        dispatch({type: 'login'});
      }
    }
    history.push('/');
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <Formik
          onSubmit={submitLoginForm}
          validationSchema={validationSchema}
          render={(
            values,
            errors,
            setSubmitting,
            setValues,
            isSubmitting,
          ) => (
            <Form className={classes.form}>
              <Field
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                autoFocus
                component={TextField}
              />
              <Field
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
                component={TextField}
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
              >
                Sign In
              </Button>
            </Form>
          )}
        >
        </Formik>
      </div>
    </Container>
  );
};

AuthPage.propTypes = {
  match: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired
};

export default withRouter(AuthPage);

Итак, наконец, главный вопрос: где и как настроить материал?UI Снэк-бар, чтобы выскочить, когда я уловил ошибку при попытке и поймал, или если мне нужен другой подход для ее решения.

1 Ответ

0 голосов
/ 27 сентября 2019

https://codesandbox.io/s/gracious-sky-fem1x?fontsize=14

Просто поставьте строку ниже, если вы хотите показать предупреждение в виде закусочной 

setStatusBase({ msg: "Success", key: Math.random() });
...