fix auth buttons disable on submitting

src/pages/Authorization/signin.tsx

@@ -1,12 +1,10 @@
-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";
@@ -38,7 +36,6 @@ function validate(values: Values) {
 const SigninForm = () => {
     const theme = useTheme();
     const navigate = useNavigate();
-  const [isReady] = React.useState(true);
 
     const { makeRequest } = authStore();
 
@@ -47,7 +44,8 @@ const SigninForm = () => {
         password: "",
     };
 
-  const onSignFormSubmit = (values: Values) => {
+    const onSignFormSubmit = (values: Values, formikHelpers: FormikHelpers<Values>) => {
+        formikHelpers.setSubmitting(true);
         makeRequest({
             url: "https://admin.pena.digital/auth/login",
             body: {
@@ -62,11 +60,14 @@ const SigninForm = () => {
             .catch((e) => {
                 console.log(e);
                 enqueueSnackbar(e.message ? e.message : `Unknown error`);
+            }).finally(() => {
+                formikHelpers.setSubmitting(false);
             });
     };
 
     return (
         <Formik initialValues={initialValues} validate={validate} onSubmit={onSignFormSubmit}>
+            {props =>
                 <Form>
                     <Box
                         component="section"
@@ -142,7 +143,16 @@ const SigninForm = () => {
                             <Link to="/restore" style={{ textDecoration: "none" }}>
                                 <Typography color={theme.palette.golden.main}>Забыли пароль?</Typography>
                             </Link>
-            <CleverButton type="submit" text="Войти" isReady={isReady} />
+                            <Button
+                                type="submit"
+                                disabled={props.isSubmitting}
+                                sx={{
+                                    width: "250px",
+                                    margin: "15px auto",
+                                    padding: "20px 30px",
+                                    fontSize: 18,
+                                }}
+                            >Войти</Button>
                             <Box
                                 sx={{
                                     display: "flex",
@@ -156,6 +166,7 @@ const SigninForm = () => {
                         </Box>
                     </Box>
                 </Form>
+            }
         </Formik>
     );
 };

src/pages/Authorization/signup.tsx

@@ -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 { Box, Button, Typography } from "@mui/material";
-import CleverButton from "@kitUI/cleverButton";
 import OutlinedInput from "@kitUI/outlinedInput";
 
 import Logo from "@pages/Logo/index";
@@ -32,10 +30,9 @@ function validate(values: Values) {
     }
     return errors;
 }
-export default () => {
+const SignUp = () => {
     const navigate = useNavigate();
     const theme = useTheme();
-  const [isReady, setIsReady] = React.useState(true);
     const { makeRequest } = authStore();
 
     return (
@@ -46,7 +43,8 @@ export default () => {
                 repeatPassword: "",
             }}
             validate={validate}
-      onSubmit={(values) => {
+            onSubmit={(values, formikHelpers) => {
+                formikHelpers.setSubmitting(true);
                 makeRequest({
                     url: "https://admin.pena.digital/auth/register",
                     body: {
@@ -65,9 +63,12 @@ export default () => {
                         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"
@@ -126,13 +127,25 @@ export default () => {
                                     label="Повторите пароль"
                                 />
                             </Box>
-            <CleverButton type="submit" text="Отправить" isReady={isReady} />
+                            <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;