get all users

frontend/app/components/NexusAuth.js

@@ -3,7 +3,7 @@ import './NexusAuth.css';
 import { useState, useEffect } from 'react';
 import NexusAuthApi from '@/app/lib/Nexus_Auth_API';
 import SplashScreen from '@/app/components/SplashScreen';
-import { CheckCircleIcon} from '@heroicons/react/20/solid';
+import { CheckCircleIcon } from '@heroicons/react/20/solid';
 
 const SignupForm = ({ onSignup }) => {
     const [username, setUsername] = useState('');
@@ -183,7 +183,6 @@ export const NexusAuthWrapper = ({ children, toast }) => {
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [isSignup, setIsSignup] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
-    const [isSignupSuccessfull, setIsSignupSuccessfull] = useState(false);
 
     useEffect(() => {
         const validateUserSession = async () => {
@@ -194,28 +193,44 @@ export const NexusAuthWrapper = ({ children, toast }) => {
             if (storedUsername && storedToken && storedUserID) {
                 try {
                     // Validate the token with the NexusAuthApi
-                    const isValid = await NexusAuthApi.validateToken(storedUserID, storedToken);
-                    if (isValid) {
+                    const response = await NexusAuthApi.validateToken(storedUserID, storedToken);
+
+                    if (response.data && response.data.user_id) {
+                        // Token is valid; response contains user details
                         console.log("User is already logged in.");
-                        toast.info("Welcome back!");
+                        toast.info("Welcome back, " + response.data.username + "!");
                         setIsLoggedIn(true);
-                    } else {
-                        // Token invalid, clear localStorage
+
+                        // Optionally, update localStorage with new details if needed
+                        localStorage.setItem("me", response.data.username);
+                        localStorage.setItem("s_tkn", response.data.access_token);
+                        localStorage.setItem("u_id", response.data.user_id);
+                        localStorage.setItem("a_l", response.data.access_level);
+                    } else if (response.status === 401) {
+                        // Token is invalid; clear local storage
+                        console.error("Token validation failed with status 401:", response.data);
                         clearLocalStorage();
+                    } else {
+                        // Handle other errors (e.g., network issues)
+                        console.error("Token validation failed due to an unexpected error:", response.data);
+                        toast.error("Unable to validate token. Please check your connection.");
                     }
                 } catch (error) {
-                    console.error("Token validation failed:", error);
-                    toast.error("Token validation failed. Please login again.");
-                    clearLocalStorage();
+                    // Handle other errors (e.g., network issues)
+                    console.error("Token validation failed due to an unexpected error:", error);
+                    toast.error("Unable to validate token. Please check your connection.");
+
                 }
             }
-            setIsLoading(false); // Stop showing splash screen after validation
+            setIsLoading(false);
+
         };
 
         const clearLocalStorage = () => {
             localStorage.removeItem("me");
             localStorage.removeItem("s_tkn");
             localStorage.removeItem("u_id");
+            localStorage.removeItem("a_l");
             setIsLoggedIn(false);
             toast.error("Session expired. Please login again.");
         };
@@ -224,24 +239,23 @@ export const NexusAuthWrapper = ({ children, toast }) => {
     }, []);
 
     const handleSignup = async (data) => {
+        setIsLoading(true);
         try {
             const response = await NexusAuthApi.signup(data.username, data.password, data.email);
             console.log("Signup successful:", response);
             setIsSignupSuccessfull(true);
+            setIsLoading(false);
             toast.success('Signup successful. Please login to continue');
-
-            // Save username and token to localStorage
-            localStorage.setItem("me", response.username);
-            localStorage.setItem("s_tkn", response.access_token);
-            localStorage.setItem("u_id", response.user_id);
             setIsSignup(false);
         } catch (error) {
+            setIsLoading(false);
             console.error("Signup failed:", error);
             toast.error("Signup failed");
         }
     };
 
     const handleLogin = async (data) => {
+        setIsLoading(true);
         try {
             const response = await NexusAuthApi.login(data.username, data.password);
             console.log("Login successful:", response);
@@ -250,9 +264,12 @@ export const NexusAuthWrapper = ({ children, toast }) => {
             localStorage.setItem("me", response.username);
             localStorage.setItem("s_tkn", response.access_token);
             localStorage.setItem("u_id", response.user_id);
+            localStorage.setItem("a_l", response.access_level);
 
             setIsLoggedIn(true);
+            setIsLoading(false);
         } catch (error) {
+            setIsLoading(false);
             console.error("Login failed:", error);
             toast.error("Login failed");
         }

frontend/app/components/Sidebar.js

@@ -1,9 +1,10 @@
 'use client';
 import { VERSION } from "@/app/lib/config";
-import { Bars3Icon, UserCircleIcon, Cog6ToothIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import { Bars3Icon, UserCircleIcon, Cog6ToothIcon, QuestionMarkCircleIcon, BoltIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 import Image from "next/image";
-import logo from "@/app/assets/logo6-cropped.jpg";
+import logo from "@/app/assets/logo6.png";
 
 export default function Sidebar({ isCollapsed, toggleSidebar }) {
   const logoStyle = {
@@ -11,6 +12,8 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
     height: isCollapsed ? "60px" : "100px",
     borderRadius: "50px",
     transition: "width 0.3s ease, height 0.3s ease",
+    marginBottom: "20px",
+    marginTop: "20px",
   };
 
   const sidebarStyle = {
@@ -18,7 +21,7 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
     left: isCollapsed ? "-180px" : "0",
     backgroundColor: "var(--sidebar-background)",
     color: "var(--foreground)",
-    padding: isCollapsed ? "15px" : "30px",
+    padding: isCollapsed ? "15px" : "20px",
     position: "fixed",
     height: "100vh",
     display: "flex",
@@ -42,7 +45,7 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
     padding: "10px 5px",
     transition: "all 0.3s ease",
     color: "var(--foreground)",
-    fontSize: "1.2em",
+    fontSize: "1em",
   };
 
   const textStyle = {
@@ -75,6 +78,12 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
     transition: "background-color 0.3s ease, right 0.3s ease",
   };
 
+  const [acessLevel, setAcessLevel] = useState(null);
+
+  useEffect(() => {
+    setAcessLevel(localStorage.getItem('a_l'));
+  }, []);
+
   return (
     <div style={sidebarStyle}>
       <div className="logo-container" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
@@ -94,6 +103,12 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
             <span style={textStyle}>Profile</span>
           </Link>
         </li>
+        <li>
+          <Link href={`/su/${acessLevel}`} style={navLinkStyle}>
+            <BoltIcon style={iconStyle} />
+            <span style={textStyle}>{acessLevel}</span>
+          </Link>
+        </li>
         <li>
           <Link href="/settings" style={navLinkStyle}>
             <Cog6ToothIcon style={iconStyle} />

frontend/app/components/SplashScreen.js

@@ -1,5 +1,5 @@
 'use client';
-import logo from "@/app/assets/logo6-cropped.jpg";
+import logo from "@/app/assets/logo6.png";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 

frontend/app/globals.css

@@ -3,14 +3,14 @@
 @tailwind utilities;
 
 :root {
-  --background: #100b1a; /* Deeper dark background */
+  --background: #15171f; /* Deeper dark background */
   --foreground: #E0E0E0; /* Light gray text */
   --sidebar-background: #14141b; /* Darker sidebar background */
-  --primary: #1F1F2A; /* Darker primary for sidebar */
-  --secondary: #2A2A3B; /* Soft secondary background for content */
-  --accent: #4a4a7f;
-  --hover-accent: #5c5c8a; /* Slightly lighter accent color for hover */
-  --button-background: #3A3A4C; /* Button background */
+  --primary: #1f202a;
+  --secondary: #2a2b3b; /* Soft secondary background for content */
+  --accent: #4a557f;
+  --hover-accent: #5c608a; /* Slightly lighter accent color for hover */
+  --button-background: #3a3b4c; /* Button background */
   --button-hover: #2D2D38; /* Darker button hover */
   --shadow-dark: rgba(0, 0, 0, 0.15); /* Shadow for depth */
 }

frontend/app/layout.js

@@ -65,7 +65,7 @@ export default function RootLayout({ children }) {
             <Sidebar isCollapsed={isCollapsed} toggleSidebar={toggleSidebar} />
             <div style={contentStyle}>
               <header style={headerStyle}>
-                <h1>Welcome to Your Dashboard</h1>
+                <h1>Welcome to Nexus Dashboard</h1>
               </header>
               <div className="main-content">
               {children}

frontend/app/lib/Nexus_Auth_API.js

@@ -58,7 +58,7 @@ const NexusAuthApi = {
       throw error.response?.data || error.message;
     }
   },
-  
+
 
   async validateToken(userId, token) {
     debugLog("Validating token", { userId, token });
@@ -66,14 +66,14 @@ const NexusAuthApi = {
       const response = await axios.get(
         `${API_BASE_URL}/auth/validate?user_id=${encodeURIComponent(userId)}&token=${encodeURIComponent(token)}`
       );
-      debugLog("Token validation successful", response.data);
-      return response.data;
+      debugLog("Token validation successful", response);
+      return response;
     } catch (error) {
-      debugLog("Token validation failed", error.response?.data || error.message);
-      throw error.response?.data || error.message;
+      debugLog("Token validation failed", error.response?.data || error);
+      return error;
     }
   },
-  
+
 
   async searchUsers(query) {
     debugLog("Searching users", { query });
@@ -117,6 +117,21 @@ const NexusAuthApi = {
     }
   },
 
+  async updateOwnData(userId, updateData, token) {
+    debugLog("Updating own data", { userId, updateData });
+    try {
+      const response = await axios.put(`${API_BASE_URL}/auth/user/update`, updateData, {
+        params: { user_id: userId, token },
+      });
+      debugLog("Update own data successful", response.data);
+      return response.data;
+    } catch (error) {
+      debugLog("Update own data failed", error.response?.data || error.message);
+      throw error.response?.data || error.message;
+    }
+  },
+
+  // Admin API
   async getAllUsers(adminId, token) {
     debugLog("Fetching all users", { adminId });
     try {
@@ -176,20 +191,6 @@ const NexusAuthApi = {
       throw error.response?.data || error.message;
     }
   },
-
-  async updateOwnData(userId, updateData, token) {
-    debugLog("Updating own data", { userId, updateData });
-    try {
-      const response = await axios.put(`${API_BASE_URL}/auth/user/update`, updateData, {
-        params: { user_id: userId, token },
-      });
-      debugLog("Update own data successful", response.data);
-      return response.data;
-    } catch (error) {
-      debugLog("Update own data failed", error.response?.data || error.message);
-      throw error.response?.data || error.message;
-    }
-  },
 };
 
-export default NexusAuthApi;
+export default NexusAuthApi;

frontend/app/page.js

@@ -7,17 +7,20 @@ export default function Home() {
   const [username, setUsername] = useState(null);
   const [userID, setUserID] = useState(null);
   const [token, setToken] = useState(null);
+  const [accessLevel, setAccessLevel] = useState(null);
 
   useEffect(() => {
     setUsername(localStorage.getItem('me'));
     setUserID(localStorage.getItem('u_id'));
     setToken(localStorage.getItem('s_tkn'));
+    setAccessLevel(localStorage.getItem('a_l'));
   }, []);
 
   const clearLocalStorage = () => {
     localStorage.removeItem('me');
     localStorage.removeItem('s_tkn');
     localStorage.removeItem('u_id');
+    localStorage.removeItem('a_l');
     setUsername(null);
   };
 
@@ -35,10 +38,29 @@ export default function Home() {
   return (
     <>
       {username && (
-        <div className="user-info-card">
-          <h3>Hello, <strong>{username}</strong></h3>
-          <p>User ID: <strong>{userID}</strong></p>
-          <button onClick={handleLogout} className="logout-button">Logout</button>
+        <div className="max-w-sm mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
+          <table className="min-w-full divide-y divide-gray-700">
+            <tbody className="divide-y divide-gray-700">
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">User ID:</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{userID}</strong></td>
+              </tr>
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Username:</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{username}</strong></td>
+              </tr>
+
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Access Level:</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100"><strong>{accessLevel}</strong></td>
+              </tr>
+              <tr>
+                <td colSpan="2" className="px-6 py-4 whitespace-nowrap text-sm text-center">
+                  <button onClick={handleLogout} className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition duration-300">Logout</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       )}
     </>

frontend/app/su/[access_level]/page.js

@@ -0,0 +1,155 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import NexusAuthApi from '@/app/lib/Nexus_Auth_API';
+
+export default function SuperUser() {
+  const router = useRouter();
+  const { access_level } = useParams();
+
+  const [userDetails, setUserDetails] = useState({
+    username: null,
+    userID: null,
+    token: null,
+    accessLevel: null,
+  });
+  const [users, setUsers] = useState([]);
+
+  // Fetch user details from local storage on mount
+  useEffect(() => {
+    setUserDetails({
+      username: localStorage.getItem('me'),
+      userID: localStorage.getItem('u_id'),
+      token: localStorage.getItem('s_tkn'),
+      accessLevel: localStorage.getItem('a_l'),
+    });
+  }, []);
+
+  const clearLocalStorage = () => {
+    localStorage.removeItem('me');
+    localStorage.removeItem('s_tkn');
+    localStorage.removeItem('u_id');
+    localStorage.removeItem('a_l');
+    setUserDetails({
+      username: null,
+      userID: null,
+      token: null,
+      accessLevel: null,
+    });
+  };
+
+  const handleLogout = () => {
+    const { userID, token } = userDetails;
+    NexusAuthApi.logout(userID, token)
+      .then(() => {
+        clearLocalStorage();
+        window.location.reload();
+      })
+      .catch((error) => {
+        console.error('Logout failed', error);
+      });
+  };
+
+  const getAllUsers = () => {
+    const { userID, token } = userDetails;
+    NexusAuthApi.getAllUsers(userID, token)
+      .then((fetchedUsers) => {
+        setUsers(fetchedUsers);
+      })
+      .catch((error) => {
+        console.error('Get all users failed', error);
+      });
+  };
+
+  // Redirect if the access level doesn't match
+  useEffect(() => {
+    if (access_level && userDetails.accessLevel) {
+      if (access_level !== userDetails.accessLevel) {
+        router.push(`/su/${userDetails.accessLevel}`);
+      }
+    }
+  }, [access_level, userDetails.accessLevel]);
+
+  const { username, userID, accessLevel } = userDetails;
+
+  return (
+    <div className="max-w-xl mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
+      {username ? (
+        <>
+          <table className="min-w-full divide-y divide-gray-700">
+            <tbody className="divide-y divide-gray-700">
+              <tr>
+                <td className="px-6 py-4 text-sm font-medium text-gray-300">Username:</td>
+                <td className="px-6 py-4 text-sm text-gray-100"><strong>{username}</strong></td>
+              </tr>
+              <tr>
+                <td className="px-6 py-4 text-sm font-medium text-gray-300">User ID:</td>
+                <td className="px-6 py-4 text-sm text-gray-100"><strong>{userID}</strong></td>
+              </tr>
+              <tr>
+                <td className="px-6 py-4 text-sm font-medium text-gray-300">Access Level:</td>
+                <td className="px-6 py-4 text-sm text-gray-100"><strong>{accessLevel}</strong></td>
+              </tr>
+              <tr>
+                <td colSpan="2" className="px-6 py-4 text-center">
+                  <button
+                    onClick={handleLogout}
+                    className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition duration-300"
+                  >
+                    Logout
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          {(accessLevel === 'admin' || accessLevel === 'hush') && (
+            <div>
+              <button
+                onClick={getAllUsers}
+                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300 mt-4"
+              >
+                Get All Users
+              </button>
+              {users.length > 0 && (
+                <div className="mt-4 max-h-64 overflow-y-auto">
+                  <table className="min-w-full divide-y divide-gray-700">
+                    <thead>
+                      <tr>
+                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                          Username
+                        </th>
+                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                          Email
+                        </th>
+                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                          Access Level
+                        </th>
+                        <th className="px-6 py-3 bg-gray-700 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                          Date Joined
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-700">
+                      {users.map((user, index) => (
+                        <tr key={index}>
+                          <td className="px-6 py-4 text-sm text-gray-100">{user.username}</td>
+                          <td className="px-6 py-4 text-sm text-gray-100">{user.email || 'N/A'}</td>
+                          <td className="px-6 py-4 text-sm text-gray-100">{user.access_level}</td>
+                          <td className="px-6 py-4 text-sm text-gray-100">{new Date(user.date_joined).toLocaleDateString()}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="p-4 text-center">No user details available. Please log in.</div>
+      )}
+    </div>
+  );
+}