add change password
This commit is contained in:
AmirHossein Mahmoodi
185
src/core/components/Profile/ChangePassword/Form.jsx
Normal file
185
src/core/components/Profile/ChangePassword/Form.jsx
Normal file
@@ -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;
|
||||
45
src/core/components/Profile/ChangePassword/index.jsx
Normal file
45
src/core/components/Profile/ChangePassword/index.jsx
Normal file
@@ -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;
|
||||
@@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 = "";
|
||||
|
||||
Reference in New Issue
Block a user