implement change passwo

public/locales/fa/app.json

@@ -22,7 +22,8 @@
     "machinary-office": "ماشین آلات",
     "passenger-boss": "رئیس مسافر",
     "transportation-assistance": "معاونت حمل و نقل",
-    "manager": "مدیر کل"
+    "manager": "مدیر کل",
+    "change-password": "تغییر رمز عبور"
   },
   "Authorization": {
     "typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
@@ -43,9 +44,24 @@
     "error_message_required": "اجباری!"
   },
   "Dashboard": {
-    "dashboard_page": "داشبورد"
+    "dashboard_page": "داشبورد",
+    "change_password": "تغییر رمز عبور"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
+  },
+  "ChangePassword": {
+    "typography_change_password": "تغییر رمز عبور",
+    "label_current_password": "رمز عبور فعلی",
+    "label_new_password": "رمز عبور جدید",
+    "label_confirm_password": "تکرار رمز عبور جدید",
+    "error_message_required": "اجباری !",
+    "error_message_password_length": "رمز عبور باید حداقل 8 کاراکتر باشد.",
+    "error_message_password_match": "پسورد ها یکسان هستند",
+    "error_message_password_not_match": "پسورد و تکرار رمز عبور باید یکسان باشد"
+  },
+  "SubmitButton": {
+    "button_while_submit": "در حال ثبت",
+    "button_submit": "ثبت"
   }
 }

src/components/dashboard/change-password/index.jsx

@@ -0,0 +1,184 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {
+  Button,
+  Typography,
+  Stack,
+  Paper,
+  Container,
+  Box,
+} from "@mui/material";
+import Image from "next/image";
+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 { CHANGE_PASSWORD } from "@/core/data/apiRoutes";
+import useUser from "@/lib/app/hooks/useUser";
+import axios from "axios";
+import Notifications from "@/core/components/notifications";
+import useDirection from "@/lib/app/hooks/useDirection";
+import { toast } from "react-toastify";
+
+const DashboardChangePasswordComponent = () => {
+  const t = useTranslations();
+  const { token } = useUser();
+  const { directionApp } = useDirection();
+
+  const handleSubmit = (values, { setSubmitting, resetForm }) => {
+    toast.dismiss();
+    const pendingToast = toast("Pending...", {
+      position: directionApp === "ltr" ? "top-left" : "top-right",
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+    });
+    axios
+      .post(
+        CHANGE_PASSWORD,
+        {
+          current_password: values.current_password,
+          new_password: values.new_password,
+          new_password_confirmation: values.new_password_confirmation,
+        },
+        {
+          headers: { authorization: `Bearer ${token}` },
+        }
+      )
+      .then((response) => {
+        toast.dismiss(pendingToast); // Dismiss the pending toast notification
+        Notifications(directionApp, response, t);
+        resetForm();
+      })
+      .catch((error) => {
+        toast.dismiss(pendingToast); // Dismiss the pending toast notification
+        Notifications(directionApp, error.response, t);
+      })
+      .finally(() => {
+        setSubmitting(false); // Set `setSubmitting` to false after the API request completes
+      });
+  };
+  const initialValues = {
+    current_password: "",
+    new_password: "",
+    new_password_confirmation: "",
+  };
+  const validationSchema = Yup.object().shape({
+    current_password: Yup.string().required(
+      t("ChangePassword.error_message_required")
+    ),
+    new_password: Yup.string()
+      .min(8, t("ChangePassword.error_message_password_length"))
+      .required(t("ChangePassword.error_message_required")),
+    new_password_confirmation: Yup.string()
+      .required(t("ChangePassword.error_message_required"))
+      .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">
+                    <Box
+                      sx={{ position: "relative", width: "100%", height: 200 }}
+                    >
+                      <Image fill src="/images/change-password.svg" alt="" />
+                    </Box>
+                    <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>
+        </Container>
+      </CenterLayout>
+    </DashboardLayouts>
+  );
+};
+export default DashboardChangePasswordComponent;

src/core/data/apiRoutes.js

@@ -0,0 +1,6 @@
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+//change password
+export const CHANGE_PASSWORD =
+  BASE_URL + "/dashboard/profile/change_password";
+//end change password

src/pages/dashboard/change-password/index.jsx

@@ -0,0 +1,23 @@
+import DashboardChangePasswordComponent from "@/components/dashboard/change-password";
+import TitlePage from "@/core/components/TitlePage";
+import WithAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+
+export default function LoanFollowUp() {
+  return (
+    <WithAuthMiddleware>
+      <TitlePage text="Dashboard.change_password" />
+      <DashboardChangePasswordComponent />
+    </WithAuthMiddleware>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}