fix auth buttons disable on submitting

This commit is contained in:
nflnkr 2023-05-21 14:05:19 +03:00
parent a7f243fe65
commit 1d7f3c5f11
2 changed files with 278 additions and 254 deletions

@ -1,163 +1,174 @@
import * as React from "react";
import { useNavigate } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
import { useTheme } from "@mui/material/styles";
import { Formik, Field, Form } from "formik";
import { Formik, Field, Form, FormikHelpers } from "formik";
import { Link } from "react-router-dom";
import { Box, Checkbox, Typography, FormControlLabel } from "@mui/material";
import { Box, Checkbox, Typography, FormControlLabel, Button } from "@mui/material";
import Logo from "@pages/Logo";
import CleverButton from "@kitUI/cleverButton";
import OutlinedInput from "@kitUI/outlinedInput";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { authStore } from "@root/stores/auth";
interface Values {
email: string;
password: string;
email: string;
password: string;
}
function validate(values: Values) {
const errors = {} as any;
const errors = {} as any;
if (!values.email) {
errors.email = "Required";
}
if (!values.email) {
errors.email = "Required";
}
if (!values.password) {
errors.password = "Required";
}
if (!values.password) {
errors.password = "Required";
}
if (values.password && !/^[\S]{8,25}$/i.test(values.password)) {
errors.password = "Invalid password";
}
if (values.password && !/^[\S]{8,25}$/i.test(values.password)) {
errors.password = "Invalid password";
}
return errors;
return errors;
}
const SigninForm = () => {
const theme = useTheme();
const navigate = useNavigate();
const [isReady] = React.useState(true);
const theme = useTheme();
const navigate = useNavigate();
const { makeRequest } = authStore();
const { makeRequest } = authStore();
const initialValues: Values = {
email: "",
password: "",
};
const initialValues: Values = {
email: "",
password: "",
};
const onSignFormSubmit = (values: Values) => {
makeRequest({
url: "https://admin.pena.digital/auth/login",
body: {
email: values.email,
password: values.password,
},
useToken: false,
})
.then((e) => {
navigate("/users");
})
.catch((e) => {
console.log(e);
enqueueSnackbar(e.message ? e.message : `Unknown error`);
});
};
const onSignFormSubmit = (values: Values, formikHelpers: FormikHelpers<Values>) => {
formikHelpers.setSubmitting(true);
makeRequest({
url: "https://admin.pena.digital/auth/login",
body: {
email: values.email,
password: values.password,
},
useToken: false,
})
.then((e) => {
navigate("/users");
})
.catch((e) => {
console.log(e);
enqueueSnackbar(e.message ? e.message : `Unknown error`);
}).finally(() => {
formikHelpers.setSubmitting(false);
});
};
return (
<Formik initialValues={initialValues} validate={validate} onSubmit={onSignFormSubmit}>
<Form>
<Box
component="section"
sx={{
minHeight: "100vh",
height: "100%",
width: "100%",
backgroundColor: theme.palette.content.main,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "15px 0",
}}
>
<Box
component="article"
sx={{
width: "350px",
backgroundColor: theme.palette.content.main,
display: "flex",
flexDirection: "column",
justifyContent: "center",
"> *": {
marginTop: "15px",
},
}}
>
<Logo />
<Box>
<Typography variant="h5" color={theme.palette.secondary.main}>
Добро пожаловать
</Typography>
<Typography variant="h6" color={theme.palette.secondary.main}>
Мы рады что вы выбрали нас!
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
</Box>
<Box
component="article"
sx={{
display: "flex",
alignItems: "center",
}}
>
<FormControlLabel
sx={{ color: "white" }}
control={
<Checkbox
value="checkedA"
inputProps={{ "aria-label": "Checkbox A" }}
sx={{
color: "white",
transform: "scale(1.5)",
"&.Mui-checked": {
color: "white",
},
"&.MuiFormControlLabel-root": {
color: "white",
},
}}
/>
}
label="Запомнить этот компьютер"
/>
</Box>
<Link to="/restore" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Забыли пароль?</Typography>
</Link>
<CleverButton type="submit" text="Войти" isReady={isReady} />
<Box
sx={{
display: "flex",
}}
>
<Typography color={theme.palette.secondary.main}>У вас нет аккаунта?&nbsp;</Typography>
<Link to="/signup" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Зарегестрируйтесь</Typography>
</Link>
</Box>
</Box>
</Box>
</Form>
</Formik>
);
return (
<Formik initialValues={initialValues} validate={validate} onSubmit={onSignFormSubmit}>
{props =>
<Form>
<Box
component="section"
sx={{
minHeight: "100vh",
height: "100%",
width: "100%",
backgroundColor: theme.palette.content.main,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "15px 0",
}}
>
<Box
component="article"
sx={{
width: "350px",
backgroundColor: theme.palette.content.main,
display: "flex",
flexDirection: "column",
justifyContent: "center",
"> *": {
marginTop: "15px",
},
}}
>
<Logo />
<Box>
<Typography variant="h5" color={theme.palette.secondary.main}>
Добро пожаловать
</Typography>
<Typography variant="h6" color={theme.palette.secondary.main}>
Мы рады что вы выбрали нас!
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
</Box>
<Box
component="article"
sx={{
display: "flex",
alignItems: "center",
}}
>
<FormControlLabel
sx={{ color: "white" }}
control={
<Checkbox
value="checkedA"
inputProps={{ "aria-label": "Checkbox A" }}
sx={{
color: "white",
transform: "scale(1.5)",
"&.Mui-checked": {
color: "white",
},
"&.MuiFormControlLabel-root": {
color: "white",
},
}}
/>
}
label="Запомнить этот компьютер"
/>
</Box>
<Link to="/restore" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Забыли пароль?</Typography>
</Link>
<Button
type="submit"
disabled={props.isSubmitting}
sx={{
width: "250px",
margin: "15px auto",
padding: "20px 30px",
fontSize: 18,
}}
>Войти</Button>
<Box
sx={{
display: "flex",
}}
>
<Typography color={theme.palette.secondary.main}>У вас нет аккаунта?&nbsp;</Typography>
<Link to="/signup" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Зарегестрируйтесь</Typography>
</Link>
</Box>
</Box>
</Box>
</Form>
}
</Formik>
);
};
export default SigninForm;

@ -1,11 +1,9 @@
import * as React from "react";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@mui/material/styles";
import { Formik, Field, Form } from "formik";
import { Link } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import CleverButton from "@kitUI/cleverButton";
import { Box, Button, Typography } from "@mui/material";
import OutlinedInput from "@kitUI/outlinedInput";
import Logo from "@pages/Logo/index";
@ -13,126 +11,141 @@ import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { authStore } from "@root/stores/auth";
interface Values {
email: string;
password: string;
repeatPassword: string;
email: string;
password: string;
repeatPassword: string;
}
function validate(values: Values) {
const errors = {} as any;
if (!values.email) {
errors.login = "Required";
}
if (!values.password) {
errors.password = "Required";
} else if (!/^[\S]{8,25}$/i.test(values.password)) {
errors.password = "Invalid password";
}
if (values.password !== values.repeatPassword) {
errors.repeatPassword = "Passwords do not match";
}
return errors;
const errors = {} as any;
if (!values.email) {
errors.login = "Required";
}
if (!values.password) {
errors.password = "Required";
} else if (!/^[\S]{8,25}$/i.test(values.password)) {
errors.password = "Invalid password";
}
if (values.password !== values.repeatPassword) {
errors.repeatPassword = "Passwords do not match";
}
return errors;
}
export default () => {
const navigate = useNavigate();
const theme = useTheme();
const [isReady, setIsReady] = React.useState(true);
const { makeRequest } = authStore();
const SignUp = () => {
const navigate = useNavigate();
const theme = useTheme();
const { makeRequest } = authStore();
return (
<Formik
initialValues={{
email: "",
password: "",
repeatPassword: "",
}}
validate={validate}
onSubmit={(values) => {
makeRequest({
url: "https://admin.pena.digital/auth/register",
body: {
login: values.email,
email: values.email,
password: values.repeatPassword,
phoneNumber: "--",
},
useToken: false,
})
.then((e) => {
navigate("/users");
})
.catch((e) => {
console.log(e);
enqueueSnackbar(
e.response && e.response.data && e.response.data.message ? e.response.data.message : `Unknown error`
);
});
}}
>
<Form>
<Box
component="section"
sx={{
minHeight: "100vh",
height: "100%",
width: "100%",
backgroundColor: theme.palette.content.main,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "15px 0",
}}
>
<Box
component="article"
sx={{
width: "350px",
backgroundColor: theme.palette.content.main,
display: "flex",
flexDirection: "column",
justifyContent: "center",
"> *": {
marginTop: "15px",
},
return (
<Formik
initialValues={{
email: "",
password: "",
repeatPassword: "",
}}
>
<Typography variant="h6" color={theme.palette.secondary.main}>
Новый аккаунт
</Typography>
<Logo />
validate={validate}
onSubmit={(values, formikHelpers) => {
formikHelpers.setSubmitting(true);
makeRequest({
url: "https://admin.pena.digital/auth/register",
body: {
login: values.email,
email: values.email,
password: values.repeatPassword,
phoneNumber: "--",
},
useToken: false,
})
.then((e) => {
navigate("/users");
})
.catch((e) => {
console.log(e);
enqueueSnackbar(
e.response && e.response.data && e.response.data.message ? e.response.data.message : `Unknown error`
);
}).finally(() => {
formikHelpers.setSubmitting(false);
});
}}
>
{props =>
<Form>
<Box
component="section"
sx={{
minHeight: "100vh",
height: "100%",
width: "100%",
backgroundColor: theme.palette.content.main,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "15px 0",
}}
>
<Box
component="article"
sx={{
width: "350px",
backgroundColor: theme.palette.content.main,
display: "flex",
flexDirection: "column",
justifyContent: "center",
"> *": {
marginTop: "15px",
},
}}
>
<Typography variant="h6" color={theme.palette.secondary.main}>
Новый аккаунт
</Typography>
<Logo />
<Box>
<Typography variant="h5" color={theme.palette.secondary.main}>
Добро пожаловать
</Typography>
<Typography variant="h6" color={theme.palette.secondary.main}>
Мы рады что вы выбрали нас!
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field
as={OutlinedInput}
type="password"
name="repeatPassword"
variant="filled"
label="Повторите пароль"
/>
</Box>
<CleverButton type="submit" text="Отправить" isReady={isReady} />
<Link to="/signin" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>У меня уже есть аккаунт</Typography>
</Link>
</Box>
</Box>
</Form>
</Formik>
);
<Box>
<Typography variant="h5" color={theme.palette.secondary.main}>
Добро пожаловать
</Typography>
<Typography variant="h6" color={theme.palette.secondary.main}>
Мы рады что вы выбрали нас!
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
</Box>
<Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field
as={OutlinedInput}
type="password"
name="repeatPassword"
variant="filled"
label="Повторите пароль"
/>
</Box>
<Button
type="submit"
disabled={props.isSubmitting}
sx={{
width: "250px",
margin: "15px auto",
padding: "20px 30px",
fontSize: 18,
}}
>Войти</Button>
<Link to="/signin" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>У меня уже есть аккаунт</Typography>
</Link>
</Box>
</Box>
</Form>
}
</Formik>
);
};
export default SignUp;