LFFE-3 Merge branch 'feature/LFFE-3_improvement_of_change_password' into 'develop'
This commit is contained in:
AmirHossein Mahmoodi
@@ -0,0 +1,140 @@
|
|||||||
|
import {Formik} from "formik";
|
||||||
|
import {useTranslations} from "next-intl";
|
||||||
|
import useRequest from "@/lib/app/hooks/useRequest";
|
||||||
|
import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
|
||||||
|
import {Button, Paper, Stack, Typography} from "@mui/material";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
import StyledForm from "@/core/components/StyledForm";
|
||||||
|
import PasswordField from "@/core/components/PasswordField";
|
||||||
|
|
||||||
|
const ChangePasswordForm = ({onSubmit}) => {
|
||||||
|
const t = useTranslations();
|
||||||
|
const requestServer = useRequest({auth: true})
|
||||||
|
|
||||||
|
const handleSubmit = (values, {setSubmitting, resetForm}) => {
|
||||||
|
requestServer(SET_USER_PASSWORD, 'post', {
|
||||||
|
data: {
|
||||||
|
current_password: values.current_password,
|
||||||
|
new_password: values.new_password,
|
||||||
|
new_password_confirmation: values.new_password_confirmation,
|
||||||
|
},
|
||||||
|
}).then((response) => {
|
||||||
|
resetForm();
|
||||||
|
}).catch(() => {
|
||||||
|
}).finally(() => {
|
||||||
|
setSubmitting(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const initialValues = {
|
||||||
|
current_password: "",
|
||||||
|
new_password: "",
|
||||||
|
new_password_confirmation: "",
|
||||||
|
};
|
||||||
|
const validationSchema = Yup.object().shape({
|
||||||
|
current_password: Yup.string().required(
|
||||||
|
t("ChangePassword.error_message_current_password")
|
||||||
|
),
|
||||||
|
new_password: Yup.string()
|
||||||
|
.required(t("ExpertMangement.error_message_new_password"))
|
||||||
|
.matches(
|
||||||
|
/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
|
||||||
|
t("ExpertMangement.error_message_new_password_regex")
|
||||||
|
),
|
||||||
|
new_password_confirmation: Yup.string()
|
||||||
|
.required(t("ChangePassword.error_message_confirm_password"))
|
||||||
|
.test(
|
||||||
|
t("ChangePassword.error_message_password_match"),
|
||||||
|
t("ChangePassword.error_message_password_not_match"),
|
||||||
|
function (value) {
|
||||||
|
return this.parent.new_password === value;
|
||||||
|
}
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
<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.values.current_password && props.values.new_password && props.values.new_password_confirmation)}
|
||||||
|
>
|
||||||
|
{props.isSubmitting
|
||||||
|
? t("SubmitButton.button_while_submit")
|
||||||
|
: t("SubmitButton.button_submit")}
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Paper>
|
||||||
|
</StyledForm>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChangePasswordForm;
|
||||||
@@ -1,149 +1,14 @@
|
|||||||
import CenterLayout from "@/layouts/CenterLayout";
|
import CenterLayout from "@/layouts/CenterLayout";
|
||||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||||
import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
|
import {Container} from "@mui/material";
|
||||||
import {Formik} from "formik";
|
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
|
||||||
import * as Yup from "yup";
|
|
||||||
import {useTranslations} from "next-intl";
|
|
||||||
import PasswordField from "@/core/components/PasswordField";
|
|
||||||
import StyledForm from "@/core/components/StyledForm";
|
|
||||||
import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
|
|
||||||
import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
|
|
||||||
import useRequest from "@/lib/app/hooks/useRequest";
|
|
||||||
|
|
||||||
const DashboardChangePasswordComponent = () => {
|
const DashboardChangePasswordComponent = () => {
|
||||||
const t = useTranslations();
|
|
||||||
const requestServer = useRequest({auth: true})
|
|
||||||
|
|
||||||
const handleSubmit = (values, {setSubmitting, resetForm}) => {
|
|
||||||
requestServer(SET_USER_PASSWORD, 'post', {
|
|
||||||
data: {
|
|
||||||
current_password: values.current_password,
|
|
||||||
new_password: values.new_password,
|
|
||||||
new_password_confirmation: values.new_password_confirmation,
|
|
||||||
},
|
|
||||||
}).then((response) => {
|
|
||||||
resetForm();
|
|
||||||
}).catch(() => {
|
|
||||||
}).finally(() => {
|
|
||||||
setSubmitting(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const initialValues = {
|
|
||||||
current_password: "",
|
|
||||||
new_password: "",
|
|
||||||
new_password_confirmation: "",
|
|
||||||
};
|
|
||||||
const validationSchema = Yup.object().shape({
|
|
||||||
current_password: Yup.string().required(
|
|
||||||
t("ChangePassword.error_message_current_password")
|
|
||||||
),
|
|
||||||
new_password: Yup.string()
|
|
||||||
.required(t("ExpertMangement.error_message_new_password"))
|
|
||||||
.matches(
|
|
||||||
/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
|
|
||||||
t("ExpertMangement.error_message_new_password_regex")
|
|
||||||
),
|
|
||||||
new_password_confirmation: Yup.string()
|
|
||||||
.required(t("ChangePassword.error_message_confirm_password"))
|
|
||||||
.test(
|
|
||||||
t("ChangePassword.error_message_password_match"),
|
|
||||||
t("ChangePassword.error_message_password_not_match"),
|
|
||||||
function (value) {
|
|
||||||
return this.parent.new_password === value;
|
|
||||||
}
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayouts>
|
<DashboardLayouts>
|
||||||
<CenterLayout>
|
<CenterLayout>
|
||||||
<Container maxWidth="sm">
|
<Container maxWidth="sm">
|
||||||
<Formik
|
<ChangePasswordForm />
|
||||||
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">
|
|
||||||
<SvgChangePassword width={300} height={200}/>
|
|
||||||
<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>
|
</Container>
|
||||||
</CenterLayout>
|
</CenterLayout>
|
||||||
</DashboardLayouts>
|
</DashboardLayouts>
|
||||||
|
|||||||
Reference in New Issue
Block a user