Navigate

Author: HugeFrog24

frontend/src/components/ProfileSettings.jsx

@@ -1,28 +1,33 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, LinearProgress } from '@mui/material';
 import api from '../utils/api';
+import UserContext from './contexts/UserContext';
+import { handleLogout } from '../utils/auth'; // Import handleLogout
 
 const ProfileSettings = () => {
   const [open, setOpen] = useState(false);
-  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const [deleteInProgress, setDeleteInProgress] = useState(false);
   const [deleteSuccess, setDeleteSuccess] = useState(false);
+  const user = useContext(UserContext);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login');
+    }
+  }, [user, navigate]);
 
   const handleClickOpen = () => {
     setOpen(true);
   };
 
-  const handleClose = () => {
+  const handleClose = async () => {
     setOpen(false);
-  };
-
-  const handleDeleteConfirm = () => {
-    setDeleteConfirmOpen(true);
-  };
-
-  const handleDeleteConfirmClose = () => {
-    setDeleteConfirmOpen(false);
-    setDeleteSuccess(false);
+    if (deleteSuccess) {
+      await handleLogout(); // Log out the user
+      navigate('/login'); // Redirect to login page
+    }
   };
 
   const handleDeleteProfile = async () => {
@@ -37,6 +42,10 @@ const ProfileSettings = () => {
     setDeleteInProgress(false);
   };
 
+  if (!user) {
+    return null; // Optionally, you can return a loading spinner or a message here
+  }
+
   return (
     <div className="container">
       <h2>Profile Settings</h2>

frontend/src/utils/auth.js

@@ -1,6 +1,7 @@
 import api from './api';
 import FetchUser from './FetchUser';
 import { toast } from 'react-toastify';
+import { removeTokens } from './AccessToken'; // Import removeTokens
 
 export const handleLogin = async (username, password, recaptchaToken, onLogin, navigate, setIsLoading) => {
     setIsLoading(true);
@@ -35,8 +36,10 @@ export const handleLogin = async (username, password, recaptchaToken, onLogin, n
 export const handleLogout = async () => {
     try {
         await api.post(`/auth/logout/`, {}, { withCredentials: true });
+        removeTokens(); // Clear tokens on logout
         // Handle successful logout, e.g. redirect to login page
     } catch (err) {
+        console.error('Error during logout:', err);
         // Handle errors
     }
 };