setting path removed password editmode added

client/src/components/elements/profile-menu.tsx

@@ -12,8 +12,6 @@ import {
   UserCircleIcon,
   ChevronDownIcon,
   Cog6ToothIcon,
-  InboxArrowDownIcon,
-  LifebuoyIcon,
   PowerIcon,
 } from "@heroicons/react/24/outline";
 import { clearToken } from "../../redux/reducers/authSlice";
@@ -23,24 +21,23 @@ import { USER_AVATAR } from "../../constants/common";
 import { selectStudent } from "../../redux/reducers/studentSlice";
 import LogoutConfirmationModal from "./student-logout-modal";
 
-// profile menu component
 const profileMenuItems = [
   {
     label: "My Profile",
     icon: UserCircleIcon,
   },
-  {
-    label: "Inbox",
-    icon: InboxArrowDownIcon,
-  },
+  // {
+  //   label: "Inbox",
+  //   icon: InboxArrowDownIcon,
+  // },
   {
     label: "Settings",
     icon: Cog6ToothIcon,
   },
-  {
-    label: "Help",
-    icon: LifebuoyIcon,
-  },
+  // {
+  //   label: "Help",
+  //   icon: LifebuoyIcon,
+  // },
   {
     label: "Sign Out",
     icon: PowerIcon,
@@ -61,7 +58,7 @@ export default function ProfileMenu() {
         navigate("/dashboard/my-profile");
         break;
       case "Settings":
-        navigate("/dashboard/settings");
+        navigate("#");
         break;
       case "Inbox":
         break;

client/src/components/pages/student-dash/chage-password-form.tsx

@@ -5,7 +5,13 @@ import { toast } from "react-toastify";
 import { PasswordInfo } from "../../../api/types/student/student";
 import { PasswordValidationSchema } from "../../../validations/student";
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
-const ChangePasswordForm = () => {
+
+interface Props {
+  editMode: boolean;
+  setEditMode: (val: boolean) => void;
+}
+
+const ChangePasswordForm: React.FC<Props> = ({ editMode, setEditMode }) => {
   const [showCurrentPassword, setShowCurrentPassword] = useState(false);
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [showRepeatPassword, setShowRepeatPassword] = useState(false);
@@ -14,6 +20,7 @@ const ChangePasswordForm = () => {
     try {
       const response = await changePassword(passwordInfo);
       response?.data?.status === "success" && formik.resetForm();
+      setEditMode(false);
       toast.success(response?.data?.message, {
         position: toast.POSITION.BOTTOM_RIGHT,
       });
@@ -35,7 +42,6 @@ const ChangePasswordForm = () => {
       handleSubmit(values);
     },
   });
-
 
   const togglePasswordVisibility = (field: string) => {
     switch (field) {
@@ -66,14 +72,14 @@ const ChangePasswordForm = () => {
     }
   };
 
-
   return (
     <form onSubmit={formik.handleSubmit}>
       <div className='relative z-0 w-full mb-6 group'>
         <input
           type={getPasswordInputType("currentPassword")}
           name='currentPassword'
           id='floating_current_password'
+          disabled={!editMode}
           value={formik.values.currentPassword}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
@@ -115,6 +121,7 @@ const ChangePasswordForm = () => {
         <input
           type={getPasswordInputType("newPassword")}
           name='newPassword'
+          disabled={!editMode}
           id='floating_password'
           value={formik.values.newPassword}
           onChange={formik.handleChange}
@@ -155,6 +162,7 @@ const ChangePasswordForm = () => {
         <input
           type={getPasswordInputType("repeatPassword")}
           name='repeatPassword'
+          disabled={!editMode}
           id='floating_repeat_password'
           value={formik.values.repeatPassword}
           onChange={formik.handleChange}
@@ -194,15 +202,17 @@ const ChangePasswordForm = () => {
         </button>
       </div>
       <div className='relative pt-14 pr-1'>
-        <button
-          type='submit'   
-          className='text-white absolute bottom-0 right-0 bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
-        >
-          Reset  
-        </button>  
+        {editMode && (
+          <button
+            type='submit'
+            className='text-white absolute bottom-0 right-0 bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
+          >
+            Reset
+          </button>
+        )}
       </div>
     </form>
-  );  
+  );
 };
 
 export default ChangePasswordForm;

client/src/components/pages/student-dash/dash-side-nav.tsx

@@ -7,8 +7,6 @@ import {
 } from "@material-tailwind/react";
 import { Link } from "react-router-dom";
 import { MdDashboard } from "react-icons/md";
-import { useDispatch } from "react-redux";
-import { clearToken } from "../../../redux/reducers/authSlice";
 import { FaUserGraduate } from "react-icons/fa";
 import { CgProfile } from "react-icons/cg";
 import {FiSettings} from 'react-icons/fi'
@@ -32,7 +30,7 @@ const NavItems = [
     icon: <CgProfile className='h-6 w-6' />
   },
   {
-    path: "/dashboard/settings",
+    path: "#",
     name: "Settings",
     icon: <FiSettings className='h-6 w-6' />
 
@@ -41,11 +39,7 @@ const NavItems = [
 
 const SideNav: React.FC = () => {
   const [selected, setSelected] = useState<string>("Dashboard");
-  const dispatch = useDispatch();
-  const handleLogout = () => {
-    dispatch(clearToken());
-    // location.reload();
-  };
+
   return (
     <Card className='fixed top-0  h-full w-full max-w-[17rem] p-3 rounded-none'>
       <div className=' mb-1 p-1 flex items-center gap-4  pl-3'>

client/src/components/pages/student-dash/my-profile.tsx

@@ -5,18 +5,22 @@ import { fetchStudentData } from "../../../redux/reducers/studentSlice";
 import { useDispatch } from "react-redux";
 import { FiEdit } from "react-icons/fi";
 
-type Props = {};
-
-const MyProfile: React.FC = (props: Props) => {
+const MyProfile: React.FC = () => {
   const dispatch = useDispatch();
-  const [editMode, setEditMode] = useState(false);
+  // const [editMode, setEditMode] = useState(false);
+  // const [editType, setEditType] = useState("");
+  const [editState, setEditState] = useState({ mode: false, type: "" });
 
   useEffect(() => {
     dispatch(fetchStudentData());
   }, [dispatch]);
 
-  const handleEditClick = () => {
-    setEditMode(true);  
+  const handleEditClick = (type: string) => {
+    setEditState({ mode: true, type: type });
+  };
+
+  const handleEditModeClose = () => {
+    setEditState({ mode: false, type: "" });
   };
 
   return (
@@ -36,21 +40,38 @@ const MyProfile: React.FC = (props: Props) => {
                 Account Info
               </h3>
               <div>
-                <button className='p-5' onClick={handleEditClick}>
+                <button
+                  className='p-5'
+                  onClick={() => handleEditClick("account")}
+                >
                   <FiEdit className='text-customFontColorBlack text-lg' />
                 </button>
-              </div>  
+              </div>
             </div>
             <div className='p-6'>
-              <ProfileForm editMode={editMode} setEditMode={setEditMode} />
-            </div>  
-          </div>   
+              <ProfileForm
+                editMode={editState.mode && editState.type === "account"}
+                setEditMode={handleEditModeClose}
+              />
+            </div>
+          </div>
           <div className='border my-7 md:mt-0 pt-5 pb-10 md:w-5/12 w-full h-full rounded-md bg-white border-gray-300'>
-            <h3 className='pl-5 text-lg text-customFontColorBlack font-semibold'>
-              Change password
-            </h3>
+            <div className='flex justify-between'>
+              <h3 className='pl-5 text-lg text-customFontColorBlack font-semibold'>
+                Change password
+              </h3>
+              <button
+                className='pr-3'
+                onClick={() => handleEditClick("password")}
+              >
+                <FiEdit className='text-customFontColorBlack text-lg' />
+              </button>
+            </div>
             <div className='p-6'>
-              <ChangePasswordForm />
+              <ChangePasswordForm
+                editMode={editState.mode && editState.type === "password"}
+                setEditMode={handleEditModeClose}
+              />
             </div>
           </div>
         </div>