compelete design of edit profile and change password components

src/core/components/Profile/ChangePass/Form.jsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Chip, Divider, Grid, TextField } from "@mui/material";
+import StyledForm from "@/core/components/StyledForm";
+import { useForm } from "react-hook-form";
+
+const Form = () => {
+    const defaultValues = {
+        old_password: "",
+        new_password: "",
+        repeat_new_password: "",
+    };
+
+    const {
+        control,
+        watch,
+        register,
+        handleSubmit,
+        setValue,
+        formState: { isSubmitting },
+    } = useForm({ defaultValues: defaultValues });
+
+    return (
+        <>
+            <Divider sx={{ mb: 3 }}>
+                <Chip color="primary" variant="outlined" label="تغییر رمز عبور" />
+            </Divider>
+            <StyledForm id={"ChangePassword"}>
+                <Grid container columns={{ xs: 1, sm: 3 }} spacing={2}>
+                    <Grid item xs={1}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("old_password")}
+                            label="رمز عبور فعلی"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
+                    <Grid item xs={1}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("new_password")}
+                            label="رمز عبور جدید"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
+                    <Grid item xs={1}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("repeat_new_password")}
+                            label="تکرار رمز عبور جدید"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
+                </Grid>
+            </StyledForm>
+        </>
+    );
+};
+export default Form;

src/core/components/Profile/ChangePass/index.jsx

@@ -1,46 +1,27 @@
 "use client";
 
-import {
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    useMediaQuery,
-} from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import CloseIcon from "@mui/icons-material/Close";
+import Form from "./Form";
 
 const ChangePass = ({ open, setOpen }) => {
     const theme = useTheme();
-    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
 
     return (
-        <Dialog fullScreen={fullScreen} maxWidth="sm" fullWidth={true} open={open}
+        <Dialog maxWidth="sm" fullWidth={true} open={open}
                 onClose={() => {
                     setOpen(false);
                 }}>
-            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mx: 1 }}>
-                <DialogTitle sx={{ py: 2, px: 1 }}>
-                    تغییر رمز عبور
-                </DialogTitle>
-                <IconButton
-                    aria-label="بستن تغییر رمز عبور"
-                    onClick={() => {
-                        setOpen(false);
-                    }}
-                    sx={{ color: (theme) => theme.palette.grey[500] }}
-                >
-                    <CloseIcon />
-                </IconButton>
-            </Box>
             <DialogContent dividers>
-                تست
+                <Form />
             </DialogContent>
             <DialogActions>
-                <Button autoFocus variant="outlined" onClick={() => {
+                <Button autoFocus variant="outlined" color="error" onClick={() => {
+                    setOpen(false);
+                }}>
+                    بستن
+                </Button>
+                <Button autoFocus variant="contained" onClick={() => {
                     setOpen(false);
                 }}>
                     ثبت

src/core/components/Profile/Update/form.jsx

@@ -1,14 +1,26 @@
 "use client";
 
-import { Autocomplete, Avatar, Backdrop, Badge, Box, Grid, TextField } from "@mui/material";
+import { Autocomplete, Avatar, Backdrop, Box, Button, Chip, Divider, Grid, TextField } from "@mui/material";
 import StyledForm from "@/core/components/StyledForm";
 import useRequest from "@/lib/hooks/useRequest";
 import { Controller, useForm } from "react-hook-form";
 import { useAuth } from "@/lib/contexts/auth";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
-import DataSAverOn from "@mui/icons-material/DataSAverOn";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { styled } from "@mui/material/styles";
 import { useState } from "react";
 
+const VisuallyHiddenInput = styled("input")({
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: 1,
+    overflow: "hidden",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    whiteSpace: "nowrap",
+    width: 1,
+});
+
 const degreeItems = ["دیپلم", "کارشناسی", "کارشناسی ارشد", "دکترا"];
 
 const Form = () => {
@@ -24,8 +36,6 @@ const Form = () => {
         avatar: user.data.avatar,
     };
 
-    console.log("defaultValues", defaultValues);
-
     const {
         control,
         watch,
@@ -36,96 +46,120 @@ const Form = () => {
     } = useForm({ defaultValues: defaultValues });
 
     return (
-        <StyledForm id={"UpdateProfileForm"}>
-            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", mb: 4, position: "relative" }}>
-                <Badge
-                    overlap="circular"
-                    anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                    badgeContent={<AddCircleIcon sx={{ fontSize: "2rem" }} color="primary" />}
-                >
-                    <Avatar
-                        onMouseEnter={() => setUploadBackDrop(true)}
-                        onMouseLeave={() => setUploadBackDrop(false)}
-                        alt={watch("first_name")}
-                        src={`${process.env.NEXT_PUBLIC_API_URL}/${watch("avatar")}`}
-                        sx={{ width: 150, height: 150, border: "1px solid #e1e1e1", cursor: "pointer" }}
-                    />
-                </Badge>
-                <Backdrop
-                    sx={{
-                        color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1,
-                        position: "absolute", width: 150, height: 150,
-                        marginLeft: "auto", marginRight: "auto",
-                        borderRadius: "50%",
-                    }}
-                    open={uploadBackDrop}
-                >
-                    <DataSAverOn sx={{ fontSize: "4rem" }} color="inherit" />
-                </Backdrop>
-            </Box>
-            <Grid container columns={{ xs: 1, sm: 2 }} spacing={2}>
-                <Grid item xs={1}>
-                    <TextField
-                        autoComplete="off"
-                        {...register("first_name")}
-                        label="نام"
-                        size="small"
-                        fullWidth
-                        type="text"
-                    />
-                </Grid>
-                <Grid item xs={1}>
-                    <TextField
-                        autoComplete="off"
-                        {...register("last_name")}
-                        label="نام خانوادگی"
-                        size="small"
-                        fullWidth
-                        type="text"
-                    />
-                </Grid>
-                <Grid item xs={1}>
-                    <TextField
-                        autoComplete="off"
-                        {...register("major")}
-                        label="رشته تحصیلی"
-                        size="small"
-                        fullWidth
-                        type="text"
-                    />
-                </Grid>
-                <Grid item xs={1}>
-                    <Controller
-                        name="degree"
-                        control={control}
-                        render={({ field: { onChange, value } }) => (
-                            <Autocomplete
-                                size="small"
-                                disablePortal
-                                value={value}
-                                onChange={(event, newValue) => {
-                                    onChange(newValue);
-                                }}
-                                options={degreeItems}
-                                renderInput={(params) => (
-                                    <TextField autoComplete="off" fullWidth {...params} label="مدرک تحصیلی" />
-                                )}
+        <>
+            <Divider sx={{ mb: 3 }}>
+                <Chip color="success" variant="outlined" label="ویرایش پروفایل" />
+            </Divider>
+            <StyledForm id={"UpdateProfileForm"}>
+                <Box sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    mb: 4,
+                    position: "relative",
+                    borderRadius: "50%",
+                }}>
+                    <Button
+                        component="label"
+                        role={undefined}
+                        tabIndex={-1}
+                        sx={{
+                            borderRadius: "50%",
+                            padding: "unset",
+                            "&:hover": {
+                                backgroundColor: "unset",
+                            },
+                        }}
+                    >
+                        <Box
+                            onMouseEnter={() => setUploadBackDrop(true)}
+                            onMouseLeave={() => setUploadBackDrop(false)}
+                        >
+                            <Avatar
+                                alt={watch("first_name")}
+                                src={`${process.env.NEXT_PUBLIC_API_URL}/${watch("avatar")}`}
+                                sx={{ width: 120, height: 120, border: "1px solid #e1e1e1" }}
                             />
-                        )}
-                    />
+                            <Backdrop
+                                sx={{
+                                    color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1,
+                                    position: "absolute", width: 120, height: 120,
+                                    marginLeft: "auto", marginRight: "auto",
+                                    borderRadius: "50%",
+                                }}
+                                open={uploadBackDrop}
+                            >
+                                <CloudUploadIcon sx={{ fontSize: "2rem" }} color="inherit" />
+                            </Backdrop>
+                        </Box>
+                        <VisuallyHiddenInput type="file" />
+                    </Button>
+                </Box>
+                <Grid container columns={{ xs: 1, sm: 2 }} spacing={2}>
+                    <Grid item xs={1}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("first_name")}
+                            label="نام"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
+                    <Grid item xs={1}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("last_name")}
+                            label="نام خانوادگی"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
+                    <Grid item xs={1}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("major")}
+                            label="رشته تحصیلی"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
+                    <Grid item xs={1}>
+                        <Controller
+                            name="degree"
+                            control={control}
+                            render={({ field: { onChange, value } }) => (
+                                <Autocomplete
+                                    size="small"
+                                    disablePortal
+                                    value={value}
+                                    onChange={(event, newValue) => {
+                                        onChange(newValue);
+                                    }}
+                                    options={degreeItems}
+                                    renderInput={(params) => (
+                                        <TextField autoComplete="off" fullWidth {...params} label="مدرک تحصیلی" />
+                                    )}
+                                />
+                            )}
+                        />
+                    </Grid>
+                    <Grid item xs={2}>
+                        <TextField
+                            autoComplete="off"
+                            {...register("mobile")}
+                            label="موبایل"
+                            size="small"
+                            fullWidth
+                            type="text"
+                        />
+                    </Grid>
                 </Grid>
-                <Grid item xs={2}>
-                    <TextField
-                        autoComplete="off"
-                        {...register("mobile")}
-                        label="موبایل"
-                        size="small"
-                        fullWidth
-                        type="text"
-                    />
-                </Grid>
-            </Grid>
-        </StyledForm>
+            </StyledForm>
+        </>
     );
 };
 export default Form;

src/core/components/Profile/Update/index.jsx

@@ -1,17 +1,7 @@
 "use client";
 
-import {
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    useMediaQuery,
-} from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import CloseIcon from "@mui/icons-material/Close";
 import Form from "./form";
 
 const Update = ({ open, setOpen }) => {
@@ -23,25 +13,16 @@ const Update = ({ open, setOpen }) => {
                 onClose={() => {
                     setOpen(false);
                 }}>
-            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mx: 1 }}>
-                <DialogTitle sx={{ py: 2, px: 1 }}>
-                    ویرایش پروفایل
-                </DialogTitle>
-                <IconButton
-                    aria-label="بستن ویرایش پروفایل"
-                    onClick={() => {
-                        setOpen(false);
-                    }}
-                    sx={{ color: (theme) => theme.palette.grey[500] }}
-                >
-                    <CloseIcon />
-                </IconButton>
-            </Box>
             <DialogContent dividers>
                 <Form />
             </DialogContent>
             <DialogActions>
-                <Button autoFocus variant="outlined" onClick={() => {
+                <Button autoFocus variant="outlined" color="error" onClick={() => {
+                    setOpen(false);
+                }}>
+                    بستن
+                </Button>
+                <Button autoFocus variant="contained" onClick={() => {
                     setOpen(false);
                 }}>
                     ثبت