fix auth buttons disable on submitting
This commit is contained in:
parent
a7f243fe65
commit
1d7f3c5f11
@ -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}>У вас нет аккаунта? </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}>У вас нет аккаунта? </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;
|
Loading…
Reference in New Issue
Block a user