Add Logout + Delete Button

Author: Jai2501

Frontend/src/Components/LandingPage/UserProfile.css

@@ -104,4 +104,40 @@
     background: none;
     border: none;
     border-bottom: 3px solid;
+   }
+
+   .profile-delete-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+   .profile-delete-btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    width: fit-content;
+    height: 50px;
+    color: #fff;
+    background: #d63636;
+    border: none;
+    border-radius: 5px;
+    font-size: 19px;
+    cursor: pointer;
+   }
+
+   .logout-btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    width: fit-content;
+    height: 50px;
+    color: #fff;
+    background: #000;
+    border: none;
+    border-radius: 5px;
+    font-size: 19px;
+    cursor: pointer;
    }

Frontend/src/Components/LandingPage/UserProfile.jsx

@@ -7,11 +7,14 @@ import {
  getUserPreferredLanguage,
  updateUserState,
 } from "../../User/UserState";
-import {updateUserData} from "../../User/UserServiceAPI";
+import {updateUserData, deleteUser, logoutUser} from "../../User/UserServiceAPI";
+import {useNavigate} from "react-router-dom";
 
 import edit_icon from "../Assets/pencil.png";
 
 export const UserProfile = ({setUsername}) => {
+const navigate = useNavigate();
+
  const [isEdit, setEdit] = useState(false);
  const [name, setName] = useState(getUserName());
  const [email, setEmail] = useState(getUserEmail());
@@ -23,6 +26,20 @@ export const UserProfile = ({setUsername}) => {
   setUsername(name);
  };
 
+ const handleLogout = async () => {
+    const result = await logoutUser();
+    if(result) {
+        navigate("/login");
+    }
+ }
+
+ const handleDeleteUser = async () => {
+    const result = await deleteUser();
+    if(result) {
+        navigate("/login");
+    }
+ }
+
  return (
   <div className="profile-container">
    <div className="edit-container">
@@ -74,7 +91,17 @@ export const UserProfile = ({setUsername}) => {
       <div className="profile-detail">{lang}</div>
      )}
     </div>
+    <div className="profile-delete-container">
+        <div className="profile-delete-btn" onClick = {(e) => {handleDeleteUser()}}>
+            Delete Account
+        </div>
+
+        <div className="logout-btn" onClick = {(e) => {handleLogout()}}>
+            Logout
+        </div>
+    </div>
    </div>
+   
 
    {isEdit ? (
     <div className="profile-submit-container">