From 9603d68e333762aab9d4c1b7cd78b44435eb1421 Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Wed, 7 May 2025 09:05:50 +0330
Subject: [PATCH] add change password

---
 .../Profile/ChangePassword/Form.jsx           | 185 ++++++++++++++++++
 .../Profile/ChangePassword/index.jsx          |  45 +++++
 .../components/Profile/ProfileActions.jsx     |   5 +-
 src/core/utils/routes.js                      |   1 +
 4 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 src/core/components/Profile/ChangePassword/Form.jsx
 create mode 100644 src/core/components/Profile/ChangePassword/index.jsx

diff --git a/src/core/components/Profile/ChangePassword/Form.jsx b/src/core/components/Profile/ChangePassword/Form.jsx
new file mode 100644
index 0000000..01b7503
--- /dev/null
+++ b/src/core/components/Profile/ChangePassword/Form.jsx
@@ -0,0 +1,185 @@
+"use client";
+
+import {
+  Chip,
+  Divider,
+  FormControl,
+  FormHelperText,
+  Grid,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+} from "@mui/material";
+import StyledForm from "@/core/components/StyledForm";
+import { useForm } from "react-hook-form";
+import { CHANGE_USER_PASSWORD } from "@/core/utils/routes";
+import { object, string } from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useEffect, useState } from "react";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import useRequest from "@/lib/hooks/useRequest";
+
+const validationSchema = object({
+  current_password: string().required("اجباری"),
+  new_password: string().required("اجباری"),
+  repeat_new_password: string()
+    .required("اجباری")
+    .test(
+      "password-match",
+      "رمز عبور جدید و تکرار آن باید یکسان باشند",
+      function (value) {
+        return this.parent.new_password === value;
+      },
+    ),
+});
+
+const Form = ({ handleCloseForm, setLoading }) => {
+  const request = useRequest();
+  const [showNewPassword, setShowNewPassword] = useState();
+  const [showRepeatNewPassword, setShowRepeatNewPassword] = useState();
+
+  const defaultValues = {
+    current_password: "",
+    new_password: "",
+    repeat_new_password: "",
+  };
+
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+  } = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
+
+  useEffect(() => {
+    setLoading(isSubmitting);
+  }, [isSubmitting]);
+
+  const onSubmit = async (data) => {
+    console.log(data);
+
+    const formData = new FormData();
+    formData.append("current_password", data.current_password);
+    formData.append("new_password", data.new_password);
+    try {
+      await request(CHANGE_USER_PASSWORD, "post", { data: formData });
+      handleCloseForm();
+    } catch (error) {}
+  };
+
+  return (
+    <>
+      <Divider sx={{ mb: 3 }}>
+        <Chip color="primary" variant="outlined" label="تغییر رمز عبور" />
+      </Divider>
+      <StyledForm onSubmit={handleSubmit(onSubmit)} id={"ChangePassword"}>
+        <Grid container columns={1} spacing={3}>
+          <Grid size={1}>
+            <FormControl
+              error={!!errors.current_password}
+              size="small"
+              fullWidth
+              variant="outlined"
+            >
+              <InputLabel htmlFor="current_password">رمز عبور فعلی</InputLabel>
+              <OutlinedInput
+                id="current_password"
+                label="رمز عبور فعلی"
+                autoComplete="off"
+                {...register("current_password")}
+                size="small"
+                fullWidth
+                type="text"
+              />
+              <FormHelperText id="current_password">
+                {errors.current_password
+                  ? errors.current_password.message
+                  : null}
+              </FormHelperText>
+            </FormControl>
+          </Grid>
+          <Grid size={1}>
+            <FormControl
+              error={!!errors.new_password}
+              size="small"
+              fullWidth
+              variant="outlined"
+            >
+              <InputLabel htmlFor="new_password">رمز عبور جدید</InputLabel>
+              <OutlinedInput
+                id="new_password"
+                autoComplete="off"
+                {...register("new_password")}
+                label="رمز عبور جدید"
+                size="small"
+                fullWidth
+                type={showNewPassword ? "text" : "password"}
+                endAdornment={
+                  <InputAdornment position="end">
+                    <IconButton
+                      aria-label="toggle password visibility"
+                      onClick={() => setShowNewPassword(!showNewPassword)}
+                      onMouseDown={(event) => event.preventDefault()}
+                      edge="end"
+                    >
+                      {showNewPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                }
+              />
+              <FormHelperText id="new_password">
+                {errors.new_password ? errors.new_password.message : null}
+              </FormHelperText>
+            </FormControl>
+          </Grid>
+          <Grid size={1}>
+            <FormControl
+              error={!!errors.repeat_new_password}
+              size="small"
+              fullWidth
+              variant="outlined"
+            >
+              <InputLabel htmlFor="repeat_new_password">
+                تکرار رمز عبور جدید
+              </InputLabel>
+              <OutlinedInput
+                id="repeat_new_password"
+                autoComplete="off"
+                {...register("repeat_new_password")}
+                size="small"
+                fullWidth
+                label="تکرار رمز عبور جدید"
+                type={showRepeatNewPassword ? "text" : "password"}
+                endAdornment={
+                  <InputAdornment position="end">
+                    <IconButton
+                      aria-label="toggle password visibility"
+                      onClick={() =>
+                        setShowRepeatNewPassword(!showRepeatNewPassword)
+                      }
+                      onMouseDown={(event) => event.preventDefault()}
+                      edge="end"
+                    >
+                      {showRepeatNewPassword ? (
+                        <VisibilityOff />
+                      ) : (
+                        <Visibility />
+                      )}
+                    </IconButton>
+                  </InputAdornment>
+                }
+              />
+              <FormHelperText id="repeat_new_password">
+                {errors.repeat_new_password
+                  ? errors.repeat_new_password.message
+                  : null}
+              </FormHelperText>
+            </FormControl>
+          </Grid>
+        </Grid>
+      </StyledForm>
+    </>
+  );
+};
+export default Form;
diff --git a/src/core/components/Profile/ChangePassword/index.jsx b/src/core/components/Profile/ChangePassword/index.jsx
new file mode 100644
index 0000000..366584b
--- /dev/null
+++ b/src/core/components/Profile/ChangePassword/index.jsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
+import SaveIcon from "@mui/icons-material/Save";
+import { useState } from "react";
+import Form from "./Form";
+
+const ChangePassword = ({ open, setOpen }) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleCloseForm = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Dialog maxWidth="xs" fullWidth={true} open={open}>
+      <DialogContent dividers>
+        <Form handleCloseForm={handleCloseForm} setLoading={setLoading} />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          disabled={loading}
+          variant="outlined"
+          color="secondary"
+          size="large"
+          onClick={handleCloseForm}
+        >
+          بستن
+        </Button>
+        <Button
+          type="submit"
+          disabled={loading}
+          form="ChangePassword"
+          size="large"
+          autoFocus
+          variant="contained"
+          endIcon={<SaveIcon />}
+        >
+          تغییر
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+export default ChangePassword;
diff --git a/src/core/components/Profile/ProfileActions.jsx b/src/core/components/Profile/ProfileActions.jsx
index eeb500c..fde87b9 100644
--- a/src/core/components/Profile/ProfileActions.jsx
+++ b/src/core/components/Profile/ProfileActions.jsx
@@ -7,6 +7,7 @@ import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import { Box, Divider, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
+import ChangePassword from "./ChangePassword";
 
 const ProfileActions = () => {
   const { getUser, logout } = useAuth();
@@ -65,8 +66,8 @@ const ProfileActions = () => {
           </IconButton>
         </Tooltip>
       </Box>
-      {/* <Update open={openUpdate} setOpen={setOpenUpdate} />
-            <ChangePass open={openChangePass} setOpen={setOpenChangePass} /> */}
+      {/* <Update open={openUpdate} setOpen={setOpenUpdate} /> */}
+      <ChangePassword open={openChangePass} setOpen={setOpenChangePass} />
     </>
   );
 };
diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js
index 37e72fe..577f689 100644
--- a/src/core/utils/routes.js
+++ b/src/core/utils/routes.js
@@ -1,6 +1,7 @@
 const api = process.env.NEXT_PUBLIC_API_URL;
 
 export const GET_USER_ROUTE = api + "/profile/info";
+export const CHANGE_USER_PASSWORD = api + "/profile/change_password";
 export const GET_USER_LOGIN_ROUTE = api + "/auth/login";
 export const GET_USER_LOGOUT_ROUTE = api + "/auth/logout";
 export const GET_PERMISSIONS_ROUTE = "";