loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add RegEx for password field and add chnage password option for expert management and a bit debug on update of expert

Browse Source
This commit is contained in:
Mohammad Jalali
2023-09-17 15:18:46 +03:30
parent 123eb18a81
commit 0c0fc5515e
7 changed files with 164 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/locales/fa/app.json
View File

@@ -345,6 +345,7 @@
"button-confirm": "ثبت",
"create": "افزودن کارشناس",
"update": "ویرایش کارشناس",
"change_password": "تغییر رمز عبور",
"text_field_name": "نام",
"text_field_username": "نام کاربری",
"text_field_email": "پست الکترونیک",
@@ -362,21 +363,26 @@
"text_field_please_select_province": "ابتدا استان خود را انتخاب کنید",
"text_field_loading_cities_list": "درحال دریافت شهر ها",
"text_field_error_fetching_cities": "خطا در دریافت شهر ها",
"text_field_new_password": "رمز عبور جدید",
"error_message_name": "نام خود را وارد کنید",
"error_message_username": "نام کاربری خود را وارد کنید",
"error_message_email": "پست الکترونیک خود را وارد کنید",
"error_message_phone_number": "شماره همراه خود را وارد کنید",
"error_message_national_id": "کد ملی خود را وارد کنید",
"error_message_password": "رمز عبور خود را وارد کنید",
"error_message_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
"error_message_position": "سمت خود را وارد کنید",
"error_message_province_id": "استان خود را وارد کنید",
"error_message_city_id": "شهر خود را وارد کنید",
"error_message_role_id": "نقش خود را وارد کنید",
"error_message_new_password": "رمز عبور جدید را وارد کنید",
"error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
"personal_info": "مشخصات کارشناس",
"user_info": "اطلاعات کاربری",
"rest_info": "اطلاعات تکمیلی",
"delete_tooltip": "حذف",
"update_tooltip": "ویرایش کارشناس",
"change_password_tooltip": "تغییر رمز عبور",
"delete_expert": "حذف کارشناس",
"are_you_sure_text": "آیا از انجام این عملیات اطمینان دارید؟"
}

91
src/components/dashboard/expert-management/Form/ChangePassword/ChangePasswordContent.jsx Normal file
View File

@@ -0,0 +1,91 @@
import {useTranslations} from "next-intl";
import {Button, DialogActions, DialogContent, IconButton, InputAdornment, TextField} from "@mui/material";
import {CHANGE_PASSWORD_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import {useFormik} from "formik";
import * as Yup from "yup";
import {Visibility, VisibilityOff} from "@mui/icons-material";
import {useState} from "react";
import useRequest from "@/lib/app/hooks/useRequest";
const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDialog}) => {
const t = useTranslations();
const requestServer = useRequest();
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const validationSchema = Yup.object().shape({
new_password: Yup.string()
.required(t("ExpertMangement.error_message_new_password"))
.matches(
/^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/,
t("ExpertMangement.error_message_new_password_regex")
),
});
const formik = useFormik({
initialValues: {
new_password: "",
},
validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("new_password", values.new_password);
requestServer(`${CHANGE_PASSWORD_EXPERT_MANAGEMENT}/${rowId}`, 'post', {
auth: true,
data: formData
})
.then((response) => {
mutate(fetchUrl)
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
return (
<>
<DialogContent>
<TextField
name="new_password"
label={t("ExpertMangement.text_field_new_password")}
variant="outlined"
margin="normal"
size="small"
value={formik.values.new_password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.new_password && !!formik.errors.new_password}
helperText={formik.touched.new_password && formik.errors.new_password ? formik.errors.new_password : null}
type={showPassword ? "text" : "password"}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleClickShowPassword}>
{showPassword ? <Visibility/> : <VisibilityOff/>}
</IconButton>
</InputAdornment>
),
}}
sx={{width: "100%"}}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenChangePasswordDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ExpertMangement.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ExpertMangement.button-confirm")}
</Button>
</DialogActions>
</>
);
};
export default ChnagePasswordContent;

33
src/components/dashboard/expert-management/Form/ChangePassword/index.jsx Normal file
View File

@@ -0,0 +1,33 @@
import {useTranslations} from "next-intl";
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import KeyIcon from '@mui/icons-material/Key';
import {useState} from "react";
import ChangePasswordContent from "./ChangePasswordContent";
const ChangePassword = ({rowId, fetchUrl, mutate}) => {
const t = useTranslations();
const [openChnagePasswordDialog, setOpenChangePasswordDialog] = useState(false);
return (
<>
<Tooltip title={t("ExpertMangement.change_password_tooltip")}>
<IconButton
color="primary"
onClick={() => {
setOpenChangePasswordDialog(true)
}}
>
<KeyIcon/>
</IconButton>
</Tooltip>
<Dialog fullWidth maxWidth={'xs'} open={openChnagePasswordDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("ExpertMangement.change_password")}</DialogTitle>
<ChangePasswordContent rowId={rowId} mutate={mutate} fetchUrl={fetchUrl}
setOpenChangePasswordDialog={setOpenChangePasswordDialog}/>
</Dialog>
</>
);
};
export default ChangePassword;

29
src/components/dashboard/expert-management/Form/CreateForm/CreateContent.jsx
View File

@@ -8,6 +8,8 @@ import {
FormControl,
FormHelperText,
Grid,
IconButton,
InputAdornment,
InputLabel,
MenuItem,
Select,
@@ -16,11 +18,12 @@ import {
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {useEffect, useState} from "react";
import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST, GET_ROLE_LIST} from "@/core/data/apiRoutes";
import {useState} from "react";
import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import useProvince from "@/lib/app/hooks/useProvince";
import useRole from "@/lib/app/hooks/useRole";
import {Visibility, VisibilityOff} from "@mui/icons-material";
const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
const t = useTranslations();
@@ -29,6 +32,11 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
const {roleList, isLoadingRoleList, errorRoleList} = useRole();
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
function getCities(province_id) {
formik.setFieldTouched("city_id", false, false);
@@ -56,7 +64,12 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
email: Yup.string().required(t("ExpertMangement.error_message_email")),
phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
password: Yup.string().required(t("ExpertMangement.error_message_password")),
password: Yup.string()
.required(t("ExpertMangement.error_message_password"))
.matches(
/^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/,
t("ExpertMangement.error_message_password_regex")
),
position: Yup.string().required(t("ExpertMangement.error_message_position")),
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
@@ -208,6 +221,16 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
onBlur={formik.handleBlur}
error={formik.touched.password && !!formik.errors.password}
helperText={formik.touched.password && formik.errors.password ? formik.errors.password : null}
type={showPassword ? "text" : "password"}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleClickShowPassword}>
{showPassword ? <Visibility/> : <VisibilityOff/>}
</IconButton>
</InputAdornment>
),
}}
sx={{width: "100%"}}
/>
</Grid>

3
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent.jsx
View File

@@ -59,7 +59,6 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
email: Yup.string().required(t("ExpertMangement.error_message_email")),
phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
password: Yup.string().required(t("ExpertMangement.error_message_password")),
position: Yup.string().required(t("ExpertMangement.error_message_position")),
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
@@ -300,7 +299,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
<Select
name="role_id"
label={t("ExpertMangement.text_field_role_id")}
value={roleList ? 1 : ""}
value={roleList ? formik.values.role_id && 1 : ""}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
fullWidth

23
src/components/dashboard/expert-management/Form/UpdateForm/index.jsx
View File

@@ -2,35 +2,13 @@ import {useTranslations} from "next-intl";
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import {useState} from "react";
import useRequest from "@/lib/app/hooks/useRequest";
import UpdateContent from "./UpdateContent";
import {GET_CITY_LIST} from "@/core/data/apiRoutes";
const Update = ({row, fetchUrl, mutate}) => {
const t = useTranslations();
const requestServer = useRequest();
const [openUpdateDialog, setOpenUpdateDialog] = useState(false);
// function getCities(province_id) {
// formik.setFieldTouched("city_id", false, false);
// // formik.setFieldValue("city_id", "")
// setCityTextField(t("ExpertMangement.text_field_loading_cities_list"))
// requestServer(`${GET_CITY_LIST}?province_id=${province_id}`, "get", {auth: true, notification: false})
// .then(({data}) => {
// const result = data.data;
// const formattedData = result.map((city, index) => ({
// id: index,
// name: city.name,
// value: city.id,
// }));
// setCityList(formattedData);
// setCityTextField(t("ExpertMangement.text_field_city_id"))
// }).catch(() => {
// setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"))
// });
// }
return (
<>
<Tooltip title={t("ExpertMangement.update_tooltip")}>
@@ -38,7 +16,6 @@ const Update = ({row, fetchUrl, mutate}) => {
color="primary"
onClick={() => {
setOpenUpdateDialog(true)
// getCities(row.original.province_id)
}}
>
<EditIcon/>

7
src/components/dashboard/expert-management/TableRowActions.jsx
View File

@@ -1,6 +1,7 @@
import {Box} from "@mui/material";
import Update from "./Form/UpdateForm"
import Delete from "./Form/DeleteForm";
import ChangePassword from "./Form/ChangePassword";
const TableRowActions = ({row, mutate, fetchUrl}) => {
return (
@@ -10,11 +11,17 @@ const TableRowActions = ({row, mutate, fetchUrl}) => {
mutate={mutate}
fetchUrl={fetchUrl}
/>
<ChangePassword
rowId={row.getValue("id")}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<Delete
rowId={row.getValue("id")}
mutate={mutate}
fetchUrl={fetchUrl}
/>
</Box>
);
};