Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 166x 166x 2x 1x 1x 1x 1x 166x 166x | import * as yup from "yup";
import {useFormik} from "formik";
import {Stack, TextField} from "@mui/material";
import React from "react";
import SimpleFormDialog, {ButtonProps} from "./SimpleFormDialog";
import AuthService from "../auth/AuthService";
type Value = {
username: string,
password: string,
}
type Props = {
authService: typeof AuthService,
onSuccess: (value: Value) => void,
buttonText: string,
button: ButtonProps
}
export default function LoginDialog(props: Props) {
const validationSchemaLogin = yup.object({
username: yup
// @ts-ignore
.string('Enter your username')
.required('Email is required'),
password: yup
// @ts-ignore
.string('Enter your password')
.required('Password is required'),
});
const formik = useFormik({
initialValues: {
username: '',
password: '',
},
validationSchema: validationSchemaLogin,
onSubmit: (values) => {
props.authService.login(values.username, values.password)
.then((_response: any) => {
props.onSuccess(values);
})
.catch((errors: any) => {
Iif(errors.response.status === 400) {
formik.setErrors(errors.response.data);
}
// user does not exists, the password is wrong or it is not authorized to login (banned, ...)
Eif(errors.response.status === 401) {
formik.setErrors({
"username": "The user does not exist ...",
"password": "... or the password is wrong"
});
}
});
}
});
const fields = <Stack spacing={2}>
<TextField
fullWidth
id="username"
name="username"
label="Username"
value={formik.values.username}
onChange={formik.handleChange}
error={formik.touched.username && Boolean(formik.errors.username)}
helperText={formik.touched.username && formik.errors.username}
/>
<TextField
fullWidth
id="password"
name="password"
label="Password"
type="password"
value={formik.values.password}
onChange={formik.handleChange}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password && formik.errors.password}
/>
</Stack>
return(
<SimpleFormDialog
fields={fields}
formik={formik}
buttonText={props.buttonText}
button={props.button}
/>
)
}
|