diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 192ba78..8334094 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -23,7 +23,8 @@
"passenger-boss": "رئیس مسافر",
"transportation-assistance": "معاونت حمل و نقل",
"manager": "مدیر کل",
- "change-password": "تغییر رمز عبور"
+ "change-password": "تغییر رمز عبور",
+ "edit-profile": "ویرایش پروفایل"
},
"Authorization": {
"typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
@@ -63,5 +64,11 @@
"SubmitButton": {
"button_while_submit": "در حال ثبت",
"button_submit": "ثبت"
+ },
+ "UpdateProfile": {
+ "error_invalid_email": "ایمیل نامعتبر است",
+ "typography_edit_profile": "ویرایش پروفایل",
+ "text_field_email": "ایمیل",
+ "text_field_enter_your_password": "رمز عبور خود را وارد کنید"
}
}
diff --git a/src/components/dashboard/edit-profile/index.jsx b/src/components/dashboard/edit-profile/index.jsx
new file mode 100644
index 0000000..cfa16d7
--- /dev/null
+++ b/src/components/dashboard/edit-profile/index.jsx
@@ -0,0 +1,282 @@
+import StyledForm from "@/core/components/StyledForm";
+import CenterLayout from "@/layouts/CenterLayout";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import useUser from "@/lib/app/hooks/useUser";
+import {
+ Box,
+ Button,
+ Container,
+ Grid,
+ Paper,
+ Stack,
+ TextField,
+ Typography,
+} from "@mui/material";
+import * as Yup from "yup";
+import { Field, Formik } from "formik";
+import { useTranslations } from "next-intl";
+import AvatarUpload from "@/core/components/AvatarUpload";
+import axios from "axios";
+import { UPDATE_PROFILE, UPDATE_AVATAR } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
+import Notifications from "@/core/components/notifications";
+import ImageResizer from "@/core/components/ImageConvertor";
+
+const DashboardEditProfile = () => {
+ const t = useTranslations();
+ const { user, token, getUser, changeUser } = useUser();
+ const { directionApp } = useDirection();
+
+ const editAvatar = async (avatar) => {
+ try {
+ const formData = new FormData();
+
+ if (avatar != null) {
+ var resizedAvatar;
+ resizedAvatar = await ImageResizer(avatar);
+ formData.append("avatar", resizedAvatar);
+ }
+
+ await axios.post(UPDATE_AVATAR, formData, {
+ headers: {
+ authorization: `Bearer ${token}`,
+ "Content-Type": "multipart/form-data",
+ },
+ });
+ } catch (error) {
+ Notifications(directionApp, error.response, t);
+ throw error;
+ }
+ };
+ const handleSubmit = (values, { setSubmitting }) => {
+ // const formData = new FormData();
+ // formData.append("email", values.expert_email);
+ // if (values.change_avatar !== false) {
+ // editAvatar(values.expert_avatar)
+ // .then(() => {
+ // return axios.post(UPDATE_PROFILE, formData, {
+ // headers: {
+ // authorization: `Bearer ${token}`,
+ // "Content-Type": "multipart/form-data",
+ // },
+ // });
+ // })
+ // .then((response) => {
+ // Notifications(directionApp, response, t);
+ // getUser((data) => {
+ // changeUser(data);
+ // });
+ // })
+ // .catch((error) => {
+ // Notifications(directionApp, error.response, t);
+ // })
+ // .finally(() => {
+ // setSubmitting(false);
+ // });
+ // } else {
+ // axios
+ // .post(UPDATE_PROFILE, formData, {
+ // headers: {
+ // authorization: `Bearer ${token}`,
+ // "Content-Type": "multipart/form-data",
+ // },
+ // })
+ // .then((response) => {
+ // Notifications(directionApp, response, t);
+ // getUser((data) => {
+ // changeUser(data);
+ // });
+ // })
+ // .catch((error) => {
+ // Notifications(directionApp, error.response, t);
+ // })
+ // .finally(() => {
+ // setSubmitting(false);
+ // });
+ // }
+ };
+ const initialValues = {
+ expert_avatar: null,
+ expert_email: user.expert_email,
+ change_avatar: false,
+ };
+ const validationSchema = Yup.object().shape({
+ expert_email: Yup.string().email(t("UpdateProfile.error_invalid_email")),
+ });
+
+ return (
+
+
+
+
+ {(props) => (
+ {
+ e.preventDefault();
+ props.handleSubmit();
+ }}
+ >
+
+
+
+ {t("UpdateProfile.typography_edit_profile")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default DashboardEditProfile;
diff --git a/src/core/components/AvatarUpload.jsx b/src/core/components/AvatarUpload.jsx
new file mode 100644
index 0000000..e1ade5c
--- /dev/null
+++ b/src/core/components/AvatarUpload.jsx
@@ -0,0 +1,128 @@
+import { Avatar, Box, TextField } from "@mui/material";
+import { useState } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+
+const AvatarUpload = ({ user, setFieldValue, valueAvatar, changeFlag }) => {
+ const [selectedImage, setSelectedImage] = useState(user.expert_avatar);
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleImageChange = (event) => {
+ const newImage = event.target?.files?.[0];
+ if (newImage) {
+ setSelectedImage(URL.createObjectURL(newImage));
+ setFieldValue(valueAvatar, newImage);
+ setFieldValue(changeFlag, true);
+ } else {
+ setSelectedImage("");
+ setFieldValue(valueAvatar, null);
+ }
+ };
+
+ const handleDeleteImage = () => {
+ setSelectedImage("");
+ setFieldValue(valueAvatar, null);
+ setFieldValue(changeFlag, true);
+ };
+
+ const handleMouseEnter = () => {
+ setIsHovered(true);
+ };
+
+ const handleMouseLeave = () => {
+ setIsHovered(false);
+ };
+
+ return (
+
+
+
+
+ {isHovered && (
+
+ {selectedImage ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+ );
+};
+
+export default AvatarUpload;
diff --git a/src/pages/dashboard/edit-profile/index.jsx b/src/pages/dashboard/edit-profile/index.jsx
new file mode 100644
index 0000000..1cf3b5c
--- /dev/null
+++ b/src/pages/dashboard/edit-profile/index.jsx
@@ -0,0 +1,23 @@
+import DashboardEditProfile from "@/components/dashboard/edit-profile";
+import TitlePage from "@/core/components/TitlePage";
+import WithAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+
+export default function LoanFollowUp() {
+ return (
+
+
+
+
+ );
+}
+
+export async function getServerSideProps({ req, locale }) {
+ const { isBot } = parse(req.headers["user-agent"]);
+ return {
+ props: {
+ messages: (await import(`&/locales/${locale}/app.json`)).default,
+ isBot,
+ },
+ };
+}