added edit password

src/components/profile-modal.js

@@ -0,0 +1,165 @@
+import { Button, Modal } from "@nextui-org/react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function ProfileModal({ onMessage }) {
+  const [visible, setVisible] = useState(false);
+  const [editMode, setEditMode] = useState(false); // State to manage edit mode
+  const [password, setPassword] = useState({
+    password: "",
+    againPassword: "",
+  });
+  const [data, setData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+  });
+
+  const getProfileDetails = () => {
+    axios
+      .get(
+        "https://spring-madrasda-2f6mra4vwa-em.a.run.app/api/client/myProfile",
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token_client")}`,
+          },
+        }
+      )
+      .then((res) => {
+        setData(res.data);
+        setData(res.data);
+        console.log(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const updatePassword = () => {
+    if (password.password !== password.againPassword) {
+      onMessage("error", "Passwords Must Match");
+      return;
+    }
+    axios
+      .put(
+        "https://spring-madrasda-2f6mra4vwa-em.a.run.app/api/client/updatePassword",
+        {
+          password: password.password,
+        },
+        {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token_client"),
+          },
+        }
+      )
+      .then(() => {
+        setVisible(false);
+        onMessage("success", "Password Changed Successfully");
+        setEditMode(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleEditClick = () => {
+    setEditMode(true);
+  };
+  const handler = () => {
+    setVisible(true);
+  };
+  const handleCancelClick = () => {
+    setEditMode(false);
+  };
+
+  const handleSaveClick = () => {
+    updatePassword();
+  };
+  const closeHandler = () => {
+    setVisible(false);
+  };
+  useEffect(() => {
+    getProfileDetails();
+  }, []);
+
+  return (
+    <>
+      <Button onPress={handler} style={{ backgroundColor: "#FFA000" }}>
+        My Profile
+      </Button>
+      <Modal
+        scroll='false'
+        width='100%'
+        closeButton={false}
+        open={visible}
+        onClose={closeHandler}
+        className='w-fit mx-auto'>
+        <Modal.Header className='font-black'>My Profile</Modal.Header>
+        <Modal.Body className='md:w-fit'>
+          {editMode ? (
+            // Render input fields in edit mode
+            <div className='flex flex-col space-y-4'>
+              <input
+                type='password'
+                className='border rounded-md px-4 py-2 focus:outline-none'
+                placeholder='New Password'
+                onChange={(e) =>
+                  setPassword({ ...password, password: e.target.value })
+                }
+              />
+              <input
+                type='password'
+                className='border rounded-md px-4 py-2 focus:outline-none'
+                placeholder='Re-enter Password'
+                onChange={(e) =>
+                  setPassword({
+                    ...password,
+                    againPassword: e.target.value,
+                  })
+                }
+              />
+              <div className='flex space-x-6'>
+                <Button
+                  onClick={handleSaveClick}
+                  style={{ color: "white", backgroundColor: "#FFA000" }}>
+                  Save
+                </Button>
+                <Button
+                  onClick={handleCancelClick}
+                  style={{ color: "white", backgroundColor: "#FF0000" }}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          ) : (
+            // Render profile data in view mode
+            <div className='flex flex-col space-y-5 md:w-[800px] w-full'>
+              <div>
+                <p className='font-bold text-lg'>Name</p>
+                <p>{data.name}</p>
+              </div>
+              <div>
+                <p className='font-bold text-lg'>Email</p>
+                <p>{data.email}</p>
+              </div>
+              <div>
+                <p className='font-bold text-lg'>Phone Number</p>
+                <p>{data.phone}</p>
+              </div>
+              <Button
+                onClick={handleEditClick}
+                style={{
+                  color: "white",
+                  backgroundColor: "#FFA000",
+                  width: "30%",
+                  margin: "0 auto",
+                }}>
+                Change Password
+              </Button>
+            </div>
+          )}
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}

src/pages/clientprofile.js

@@ -12,8 +12,9 @@ import { Button, Paper, Snackbar } from "@mui/material";
 import { InsertEmoticon } from "@mui/icons-material";
 import CancelOrderModal from "@/components/cancel-order";
 import MuiAlert from "@mui/material/Alert";
+import ProfileModal from "@/components/profile-modal";
 const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />;
 });
 export default function ClientProfile() {
   const router = useRouter();
@@ -38,6 +39,13 @@ export default function ClientProfile() {
       router.push("/login");
     }
   }, []);
+
+  const handleMessageAlert = (type, message) => {
+    setMessage(message);
+    setSeverity(type);
+    setState(true);
+  };
+
   const handleClose = (event, reason) => {
     if (reason === "clickaway") {
       return;
@@ -59,12 +67,12 @@ export default function ClientProfile() {
   };
   if (loading && isReady)
     return (
-      <div className="z-50 h-screen w-screen overflow-hidden">
+      <div className='z-50 h-screen w-screen overflow-hidden'>
         <Image
-          src="/loader.gif"
+          src='/loader.gif'
           width={1920}
           height={1080}
-          className="object-cover object-center w-full h-full"
+          className='object-cover object-center w-full h-full'
         />
       </div>
     );
@@ -88,19 +96,8 @@ export default function ClientProfile() {
         </Snackbar>
         <section className='body-font font-quest bg-off-white'>
           <div className='px-5 py-24 mx-auto'>
-            <h1 className='text-2xl font-bold text-primary md:ml-16 md:text-3xl md:mt-4'>
-              My Profile
-            </h1>
             <div className='flex flex-col md:flex-row md:space-x-5 mt-4 md:ml-16'>
-              <h2 className='md:ml-2 title-font font-medium text-lg md:text-xl'>
-                Phone Number
-              </h2>
-              <input
-                type='text'
-                className='bg-tertiary text-black text-lg md:text-xl outline-none focus:ring-primary cursor-default'
-                placeholder={phone}
-                readOnly
-              />
+              <ProfileModal onMessage={handleMessageAlert} />
             </div>
 
             {details && (