Added LDAP config and auth

client/src/components/Widgets/VaaActivity7Day.jsx

@@ -59,12 +59,12 @@ export default function VaaActivity7Day() {
             paper_bgcolor: 'transparent', // Let Chakra UI background show through
             plot_bgcolor: 'transparent',
             font: { color: '#d1d5db' }, // gray.300
-            // margin: { t: 40, r: 20, l: 30, b: 60 }, // Extra bottom margin for legend
-            title: {
-                text: '7 Day Consolidated Flight Levels',
-                font: { size: 16, color: 'white' },
-                x: 0.05
-            },
+            margin: { t: 20, r: 20, l: 20, b: 20 },
+            // title: {
+            //     text: '7 Day Consolidated Flight Levels',
+            //     font: { size: 16, color: 'white' },
+            //     x: 0.05
+            // },
             xaxis: {
                 title: {
                     text: 'Date (UTC)',

client/src/components/layout/Header.jsx

@@ -1,22 +1,22 @@
 import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
 import { NavLink } from "react-router-dom";
+import useAuthStore from "@/store/authStore";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
 
-// TODO: Pull this dynamically from an Auth Context later!
-const placeholderUser = {
-    name: "Princess Zelda",
-    email: "zelda.royal@hyrule.gov",
-    // avatar: defaultAvatar
-}
-
 // Accept a 'user' prop now, fallback to placeholder if empty
-export default function Header({ user = placeholderUser }) {
+export default function Header() {
     const recipe = useRecipe({ key: "header" });
     const styles = recipe();
 
+    const { user } = useAuthStore();
+    console.log(user);
+    const displayName = user ? (user.fullName || user.username) : "Loading...";
+
+    const displayEmail = user?.email || "LDAP User";
+
     return (
         <Flex css={styles} justify="space-between" align="center" width="100%">
             {/* Home Link Logo */}
@@ -27,12 +27,12 @@ export default function Header({ user = placeholderUser }) {
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
                 <Stack gap="0" textAlign="right" cursor="default">
-                    <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
-                    <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
+                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
                 </Stack>
                 <UserAvatarMenu
-                    name={user.name}
-                    avatar={user.avatar}
+                    name={displayName}
+                    // avatar={user.avatar}
                 />
             </Flex>
         </Flex>

client/src/components/layout/ProtectedRoute.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import useAuthStore from '../../store/authStore';
+
+const ProtectedRoute = () => {
+    // Grab the state directly from your Zustand store
+    const { isAuthenticated, isLoading } = useAuthStore();
+
+    // 1. App is currently pinging Django to verify the HttpOnly cookie
+    if (isLoading) {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20vh' }}>
+                <h2>Loading Secure Environment...</h2>
+            </div>
+        );
+    }
+
+    // 2. The check failed (no cookie or expired cookie)
+    if (!isAuthenticated) {
+        return <Navigate to="/login" replace />;
+    }
+
+    // 3. The check passed! Render the layout shell and the protected children
+    return <Outlet />;
+};
+
+export default ProtectedRoute;

client/src/components/layout/UserAvatarMenu.jsx

@@ -1,16 +1,18 @@
 import { Avatar, Menu, Portal, Box } from "@chakra-ui/react";
 import { NavLink } from "react-router-dom";
-
+import useAuthStore from "../../store/authStore";
 
 export default function UserAvatarMenu({ name, avatar }) {
+	const { logout } = useAuthStore();
+
 	return (
 		<Menu.Root>
 			<Menu.Trigger focusRing="none">
 				<Box
-						rounded="full" 
-						tabIndex={0}
-						_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
-						cursor="pointer"
+					rounded="full"
+					tabIndex={0}
+					_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
+					cursor="pointer"
 				>
 					<Avatar.Root shape="full">
 						<Avatar.Fallback name={name} />
@@ -20,17 +22,24 @@ export default function UserAvatarMenu({ name, avatar }) {
 			</Menu.Trigger>
 			<Portal>
 				{/* zIndex: overlay = 1300 */}
-				<Menu.Positioner zIndex="overlay"> 
+				<Menu.Positioner zIndex="overlay">
 					<Menu.Content>
 						<Menu.Item value="settings" as={NavLink} to={"/settings"}>
 							Settings
 						</Menu.Item>
-						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>
+
+						{/* Replaced console.log with the Zustand logout action */}
+						<Menu.Item
+							value="logout"
+							onClick={logout}
+							color="red.600"
+							_dark={{ color: "red.400" }}
+						>
 							Logout
 						</Menu.Item>
 					</Menu.Content>
 				</Menu.Positioner>
 			</Portal>
 		</Menu.Root>
-		);
+	);
 }