recode and add editor config file
This commit is contained in:
Amirhossein Mahmoodi
@@ -1,184 +1,177 @@
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {
|
||||
Button,
|
||||
Typography,
|
||||
Stack,
|
||||
Paper,
|
||||
Container,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import {Box, Button, Container, Paper, Stack, Typography,} from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import { Formik } from "formik";
|
||||
import {Formik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {useTranslations} from "next-intl";
|
||||
import PasswordField from "@/core/components/PasswordField";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { CHANGE_PASSWORD } from "@/core/data/apiRoutes";
|
||||
import {CHANGE_PASSWORD} from "@/core/data/apiRoutes";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import axios from "axios";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import { toast } from "react-toastify";
|
||||
import {toast} from "react-toastify";
|
||||
|
||||
const DashboardChangePasswordComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { token } = useUser();
|
||||
const { directionApp } = useDirection();
|
||||
const t = useTranslations();
|
||||
const {token} = useUser();
|
||||
const {directionApp} = useDirection();
|
||||
|
||||
const handleSubmit = (values, { setSubmitting, resetForm }) => {
|
||||
toast.dismiss();
|
||||
const pendingToast = toast(t("notifications.pending"), {
|
||||
position: directionApp === "ltr" ? "top-left" : "top-right",
|
||||
autoClose: false,
|
||||
closeOnClick: false,
|
||||
draggable: false,
|
||||
const handleSubmit = (values, {setSubmitting, resetForm}) => {
|
||||
toast.dismiss();
|
||||
const pendingToast = toast(t("notifications.pending"), {
|
||||
position: directionApp === "ltr" ? "top-left" : "top-right",
|
||||
autoClose: false,
|
||||
closeOnClick: false,
|
||||
draggable: false,
|
||||
});
|
||||
axios
|
||||
.post(
|
||||
CHANGE_PASSWORD,
|
||||
{
|
||||
current_password: values.current_password,
|
||||
new_password: values.new_password,
|
||||
new_password_confirmation: values.new_password_confirmation,
|
||||
},
|
||||
{
|
||||
headers: {authorization: `Bearer ${token}`},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, response, t);
|
||||
resetForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, error.response, t);
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(false); // Set `setSubmitting` to false after the API request completes
|
||||
});
|
||||
};
|
||||
const initialValues = {
|
||||
current_password: "",
|
||||
new_password: "",
|
||||
new_password_confirmation: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
current_password: Yup.string().required(
|
||||
t("ChangePassword.error_message_required")
|
||||
),
|
||||
new_password: Yup.string()
|
||||
.min(8, t("ChangePassword.error_message_password_length"))
|
||||
.required(t("ChangePassword.error_message_required")),
|
||||
new_password_confirmation: Yup.string()
|
||||
.required(t("ChangePassword.error_message_required"))
|
||||
.test(
|
||||
t("ChangePassword.error_message_password_match"),
|
||||
t("ChangePassword.error_message_password_not_match"),
|
||||
function (value) {
|
||||
return this.parent.new_password === value;
|
||||
}
|
||||
),
|
||||
});
|
||||
axios
|
||||
.post(
|
||||
CHANGE_PASSWORD,
|
||||
{
|
||||
current_password: values.current_password,
|
||||
new_password: values.new_password,
|
||||
new_password_confirmation: values.new_password_confirmation,
|
||||
},
|
||||
{
|
||||
headers: { authorization: `Bearer ${token}` },
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, response, t);
|
||||
resetForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.dismiss(pendingToast); // Dismiss the pending toast notification
|
||||
Notifications(directionApp, error.response, t);
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(false); // Set `setSubmitting` to false after the API request completes
|
||||
});
|
||||
};
|
||||
const initialValues = {
|
||||
current_password: "",
|
||||
new_password: "",
|
||||
new_password_confirmation: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
current_password: Yup.string().required(
|
||||
t("ChangePassword.error_message_required")
|
||||
),
|
||||
new_password: Yup.string()
|
||||
.min(8, t("ChangePassword.error_message_password_length"))
|
||||
.required(t("ChangePassword.error_message_required")),
|
||||
new_password_confirmation: Yup.string()
|
||||
.required(t("ChangePassword.error_message_required"))
|
||||
.test(
|
||||
t("ChangePassword.error_message_password_match"),
|
||||
t("ChangePassword.error_message_password_not_match"),
|
||||
function (value) {
|
||||
return this.parent.new_password === value;
|
||||
}
|
||||
),
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<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">
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<Image fill src="/images/change-password.svg" alt="" />
|
||||
</Box>
|
||||
<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>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{p: 5}} component="div">
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image fill src="/images/change-password.svg" alt=""/>
|
||||
</Box>
|
||||
<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>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
export default DashboardChangePasswordComponent;
|
||||
|
||||
Reference in New Issue
Block a user