From b09d9c7859f3e91ba42a526c219f19a2ca9613db Mon Sep 17 00:00:00 2001
From: Yasiu1376 <yasaman1376529@gmail.com>
Date: Mon, 30 Oct 2023 14:57:54 +0330
Subject: [PATCH] LFFE-3 improvement of change password

---
 .../change-password-form/index.jsx            | 140 +++++++++++++++++
 .../dashboard/change-password/index.jsx       | 141 +-----------------
 2 files changed, 143 insertions(+), 138 deletions(-)
 create mode 100644 src/components/dashboard/change-password/change-password-form/index.jsx

diff --git a/src/components/dashboard/change-password/change-password-form/index.jsx b/src/components/dashboard/change-password/change-password-form/index.jsx
new file mode 100644
index 0000000..e94801d
--- /dev/null
+++ b/src/components/dashboard/change-password/change-password-form/index.jsx
@@ -0,0 +1,140 @@
+import {Formik} from "formik";
+import {useTranslations} from "next-intl";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+import {Button, Paper, Stack, Typography} from "@mui/material";
+import * as Yup from "yup";
+import StyledForm from "@/core/components/StyledForm";
+import PasswordField from "@/core/components/PasswordField";
+
+const ChangePasswordForm = ({onSubmit}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+
+    const handleSubmit = (values, {setSubmitting, resetForm}) => {
+        requestServer(SET_USER_PASSWORD, 'post', {
+            data: {
+                current_password: values.current_password,
+                new_password: values.new_password,
+                new_password_confirmation: values.new_password_confirmation,
+            },
+        }).then((response) => {
+            resetForm();
+        }).catch(() => {
+        }).finally(() => {
+            setSubmitting(false);
+        });
+    };
+    const initialValues = {
+        current_password: "",
+        new_password: "",
+        new_password_confirmation: "",
+    };
+    const validationSchema = Yup.object().shape({
+        current_password: Yup.string().required(
+            t("ChangePassword.error_message_current_password")
+        ),
+        new_password: Yup.string()
+            .required(t("ExpertMangement.error_message_new_password"))
+            .matches(
+                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
+                t("ExpertMangement.error_message_new_password_regex")
+            ),
+        new_password_confirmation: Yup.string()
+            .required(t("ChangePassword.error_message_confirm_password"))
+            .test(
+                t("ChangePassword.error_message_password_match"),
+                t("ChangePassword.error_message_password_not_match"),
+                function (value) {
+                    return this.parent.new_password === value;
+                }
+            ),
+    });
+
+    return (
+        <Formik
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            validationSchema={validationSchema}
+        >
+            {(props) => (
+                <StyledForm
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        props.handleSubmit();
+                    }}
+                >
+                    <Paper elevation={0}>
+                        <Stack spacing={3} sx={{p: 5}} component="div">
+                            <Typography margin={2} variant="h4" textAlign="center">
+                                {t("ChangePassword.typography_change_password")}
+                            </Typography>
+                            <Stack spacing={1} component="div">
+                                <PasswordField
+                                    name="current_password"
+                                    label={t("ChangePassword.label_current_password")}
+                                    error={
+                                        props.touched.current_password &&
+                                        props.errors.current_password
+                                            ? true
+                                            : false
+                                    }
+                                    helperText={
+                                        props.touched.current_password
+                                            ? props.errors.current_password
+                                            : null
+                                    }
+                                />
+                            </Stack>
+                            <Stack spacing={1} component="div">
+                                <PasswordField
+                                    name="new_password"
+                                    label={t("ChangePassword.label_new_password")}
+                                    error={
+                                        props.touched.new_password && props.errors.new_password
+                                            ? true
+                                            : false
+                                    }
+                                    helperText={
+                                        props.touched.new_password ? props.errors.new_password : null
+                                    }
+                                />
+                            </Stack>
+                            <Stack spacing={1} component="div">
+                                <PasswordField
+                                    name="new_password_confirmation"
+                                    label={t("ChangePassword.label_confirm_password")}
+                                    error={
+                                        props.touched.new_password_confirmation &&
+                                        props.errors.new_password_confirmation
+                                            ? true
+                                            : false
+                                    }
+                                    helperText={
+                                        props.touched.new_password_confirmation
+                                            ? props.errors.new_password_confirmation
+                                            : null
+                                    }
+                                />
+                            </Stack>
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                size="large"
+                                disabled={props.isSubmitting || !(props.values.current_password && props.values.new_password && props.values.new_password_confirmation)}
+                            >
+                                {props.isSubmitting
+                                    ? t("SubmitButton.button_while_submit")
+                                    : t("SubmitButton.button_submit")}
+                            </Button>
+                        </Stack>
+                    </Paper>
+                </StyledForm>
+            )}
+        </Formik>
+    );
+};
+
+export default ChangePasswordForm;
\ No newline at end of file
diff --git a/src/components/dashboard/change-password/index.jsx b/src/components/dashboard/change-password/index.jsx
index cd2b9fd..b6337d4 100644
--- a/src/components/dashboard/change-password/index.jsx
+++ b/src/components/dashboard/change-password/index.jsx
@@ -1,149 +1,14 @@
 import CenterLayout from "@/layouts/CenterLayout";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
-import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
-import {Formik} from "formik";
-import * as Yup from "yup";
-import {useTranslations} from "next-intl";
-import PasswordField from "@/core/components/PasswordField";
-import StyledForm from "@/core/components/StyledForm";
-import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
-import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
-import useRequest from "@/lib/app/hooks/useRequest";
+import {Container} from "@mui/material";
+import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
 
 const DashboardChangePasswordComponent = () => {
-    const t = useTranslations();
-    const requestServer = useRequest({auth: true})
-
-    const handleSubmit = (values, {setSubmitting, resetForm}) => {
-        requestServer(SET_USER_PASSWORD, 'post', {
-            data: {
-                current_password: values.current_password,
-                new_password: values.new_password,
-                new_password_confirmation: values.new_password_confirmation,
-            },
-        }).then((response) => {
-            resetForm();
-        }).catch(() => {
-        }).finally(() => {
-            setSubmitting(false);
-        });
-    };
-    const initialValues = {
-        current_password: "",
-        new_password: "",
-        new_password_confirmation: "",
-    };
-    const validationSchema = Yup.object().shape({
-        current_password: Yup.string().required(
-            t("ChangePassword.error_message_current_password")
-        ),
-        new_password: Yup.string()
-            .required(t("ExpertMangement.error_message_new_password"))
-            .matches(
-                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
-                t("ExpertMangement.error_message_new_password_regex")
-            ),
-        new_password_confirmation: Yup.string()
-            .required(t("ChangePassword.error_message_confirm_password"))
-            .test(
-                t("ChangePassword.error_message_password_match"),
-                t("ChangePassword.error_message_password_not_match"),
-                function (value) {
-                    return this.parent.new_password === value;
-                }
-            ),
-    });
-
     return (
         <DashboardLayouts>
             <CenterLayout>
                 <Container maxWidth="sm">
-                    <Formik
-                        initialValues={initialValues}
-                        onSubmit={handleSubmit}
-                        validationSchema={validationSchema}
-                    >
-                        {(props) => (
-                            <StyledForm
-                                onSubmit={(e) => {
-                                    e.preventDefault();
-                                    props.handleSubmit();
-                                }}
-                            >
-                                <Paper elevation={0}>
-                                    <Stack spacing={3} sx={{p: 5}} component="div">
-                                        <SvgChangePassword width={300} height={200}/>
-                                        <Typography margin={2} variant="h4" textAlign="center">
-                                            {t("ChangePassword.typography_change_password")}
-                                        </Typography>
-                                        <Stack spacing={1} component="div">
-                                            <PasswordField
-                                                name="current_password"
-                                                label={t("ChangePassword.label_current_password")}
-                                                error={
-                                                    props.touched.current_password &&
-                                                    props.errors.current_password
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.current_password
-                                                        ? props.errors.current_password
-                                                        : null
-                                                }
-                                            />
-                                        </Stack>
-                                        <Stack spacing={1} component="div">
-                                            <PasswordField
-                                                name="new_password"
-                                                label={t("ChangePassword.label_new_password")}
-                                                error={
-                                                    props.touched.new_password &&
-                                                    props.errors.new_password
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.new_password
-                                                        ? props.errors.new_password
-                                                        : null
-                                                }
-                                            />
-                                        </Stack>
-                                        <Stack spacing={1} component="div">
-                                            <PasswordField
-                                                name="new_password_confirmation"
-                                                label={t("ChangePassword.label_confirm_password")}
-                                                error={
-                                                    props.touched.new_password_confirmation &&
-                                                    props.errors.new_password_confirmation
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.new_password_confirmation
-                                                        ? props.errors.new_password_confirmation
-                                                        : null
-                                                }
-                                            />
-                                        </Stack>
-                                        <Button
-                                            type="submit"
-                                            fullWidth
-                                            variant="contained"
-                                            color="primary"
-                                            size="large"
-                                            disabled={props.isSubmitting}
-                                        >
-                                            {props.isSubmitting
-                                                ? t("SubmitButton.button_while_submit")
-                                                : t("SubmitButton.button_submit")}
-                                        </Button>
-                                    </Stack>
-                                </Paper>
-                            </StyledForm>
-                        )}
-                    </Formik>
+                    <ChangePasswordForm />
                 </Container>
             </CenterLayout>
         </DashboardLayouts>