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