From 52e7fae7093dde1d078e1c44f8ef16a44497de67 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sat, 24 Aug 2024 14:39:04 +0330 Subject: [PATCH] add mui lab and @resolver/yup for react hook form package and complete change password part with validation and test proccess --- package.json | 2 + .../components/Profile/ChangePass/Form.jsx | 155 ++++++++++++++---- .../components/Profile/ChangePass/index.jsx | 29 ++-- ...fObjects.jsx => flattenObjectOfObjects.js} | 0 src/core/utils/routes.js | 1 + 5 files changed, 144 insertions(+), 43 deletions(-) rename src/core/utils/{flattenObjectOfObjects.jsx => flattenObjectOfObjects.js} (100%) diff --git a/package.json b/package.json index fee5c81..4132581 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@hookform/resolvers": "^3.9.0", "@mui/icons-material": "^5.15.6", + "@mui/lab": "^5.0.0-alpha.173", "@mui/material": "^5.15.6", "@mui/material-nextjs": "^5.15.6", "@mui/x-date-pickers": "^6.19.5", diff --git a/src/core/components/Profile/ChangePass/Form.jsx b/src/core/components/Profile/ChangePass/Form.jsx index 0307f8c..75c0adb 100644 --- a/src/core/components/Profile/ChangePass/Form.jsx +++ b/src/core/components/Profile/ChangePass/Form.jsx @@ -1,12 +1,48 @@ "use client"; -import { Chip, Divider, Grid, TextField } from "@mui/material"; +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 { useAuth } from "@/lib/contexts/auth"; +import useRequest from "@/lib/hooks/useRequest"; +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"; + +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 [showNewPassword, setShowNewPassword] = useState(); + const [showRepeatNewPassword, setShowRepeatNewPassword] = useState(); + + const request = useRequest(); + const { getUser } = useAuth(); -const Form = () => { const defaultValues = { - old_password: "", + current_password: "", new_password: "", repeat_new_password: "", }; @@ -17,45 +53,102 @@ const Form = () => { register, handleSubmit, setValue, - formState: { isSubmitting }, - } = useForm({ defaultValues: defaultValues }); + formState: { isSubmitting, errors }, + } = useForm({ defaultValues, resolver: yupResolver(validationSchema) }); + + useEffect(() => { + setLoading(isSubmitting); + }, [isSubmitting]); + + const onSubmit = async (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 ( <> - - + + - + + رمز عبور فعلی + + {errors.current_password ? errors.current_password.message : null} + - + + رمز عبور جدید + + setShowNewPassword(!showNewPassword)} + onMouseDown={(event) => event.preventDefault()} + edge="end" + > + {showNewPassword ? : } + + + } + /> + {errors.new_password ? errors.new_password.message : null} + - + + تکرار رمز عبور جدید + + setShowRepeatNewPassword(!showRepeatNewPassword)} + onMouseDown={(event) => event.preventDefault()} + edge="end" + > + {showRepeatNewPassword ? : } + + + } + /> + {errors.repeat_new_password ? errors.repeat_new_password.message : null} + diff --git a/src/core/components/Profile/ChangePass/index.jsx b/src/core/components/Profile/ChangePass/index.jsx index 10d4d78..085f40c 100644 --- a/src/core/components/Profile/ChangePass/index.jsx +++ b/src/core/components/Profile/ChangePass/index.jsx @@ -3,29 +3,34 @@ import { Button, Dialog, DialogActions, DialogContent } from "@mui/material"; import { useTheme } from "@mui/material/styles"; import Form from "./Form"; +import SaveIcon from "@mui/icons-material/Save"; +import { LoadingButton } from "@mui/lab"; +import { useState } from "react"; const ChangePass = ({ open, setOpen }) => { const theme = useTheme(); + const [loading, setLoading] = useState(false); + + const handleCloseForm = () => { + setOpen(false); + }; return ( - { - setOpen(false); - }}> + -
+ - - +
); diff --git a/src/core/utils/flattenObjectOfObjects.jsx b/src/core/utils/flattenObjectOfObjects.js similarity index 100% rename from src/core/utils/flattenObjectOfObjects.jsx rename to src/core/utils/flattenObjectOfObjects.js diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js index 6520a50..d4d0558 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 + "/api/v3/profile/info"; +export const CHANGE_USER_PASSWORD = api + "/api/v3/profile/change_password"; export const GET_LOGIN_ROUTE = api + "/login_dev"; export const GET_INQUIRY_PRIVACY_FENCING_ROUTE = api + "/api/v3/harim/divarkeshi"; export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";