diff --git a/client/package-lock.json b/client/package-lock.json
index 31f4638..11e6563 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,6 +11,7 @@
"@chakra-ui/react": "^3.22.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
+ "axios": "^1.18.1",
"framer-motion": "^12.23.0",
"leaflet": "^1.9.4",
"lucide-react": "^0.539.0",
@@ -4943,6 +4944,18 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
+ "node_modules/agent-base": {
+ "version": "6.0.2",
+ "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+ "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "4"
+ },
+ "engines": {
+ "node": ">= 6.0.0"
+ }
+ },
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -5090,6 +5103,12 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+ "license": "MIT"
+ },
"node_modules/axe-core": {
"version": "4.12.1",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
@@ -5100,6 +5119,18 @@
"node": ">=4"
}
},
+ "node_modules/axios": {
+ "version": "1.18.1",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.18.1.tgz",
+ "integrity": "sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==",
+ "license": "MIT",
+ "dependencies": {
+ "follow-redirects": "^1.16.0",
+ "form-data": "^4.0.5",
+ "https-proxy-agent": "^5.0.1",
+ "proxy-from-env": "^2.1.0"
+ }
+ },
"node_modules/babel-plugin-macros": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -5236,6 +5267,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/call-bind-apply-helpers": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+ "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -5550,6 +5594,18 @@
"integrity": "sha512-BcKnbOEsOarCwyoLstcoEztwT0IJxqqQkNwDuA3a65sICvvHL2yoeV13psoDFh5IuiOMnIOKdQDwB4Mk3BypiA==",
"license": "Unlicense"
},
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "license": "MIT",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -5955,6 +6011,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -6011,6 +6076,20 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/dunder-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+ "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "gopd": "^1.2.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/dup": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dup/-/dup-1.0.0.tgz",
@@ -6090,6 +6169,24 @@
"is-arrayish": "^0.2.1"
}
},
+ "node_modules/es-define-property": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+ "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-errors": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+ "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/es-module-lexer": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
@@ -6097,6 +6194,33 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/es-object-atoms": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+ "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-set-tostringtag": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+ "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.6",
+ "has-tostringtag": "^1.0.2",
+ "hasown": "^2.0.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/es5-ext": {
"version": "0.10.64",
"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
@@ -6663,6 +6787,26 @@
"dtype": "^2.0.0"
}
},
+ "node_modules/follow-redirects": {
+ "version": "1.16.0",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+ "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/RubenVerborgh"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">=4.0"
+ },
+ "peerDependenciesMeta": {
+ "debug": {
+ "optional": true
+ }
+ }
+ },
"node_modules/font-atlas": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/font-atlas/-/font-atlas-2.1.0.tgz",
@@ -6697,6 +6841,22 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/form-data": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+ "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+ "license": "MIT",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "es-set-tostringtag": "^2.1.0",
+ "hasown": "^2.0.4",
+ "mime-types": "^2.1.35"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/framer-motion": {
"version": "12.23.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.0.tgz",
@@ -6787,6 +6947,43 @@
"integrity": "sha512-LnpfLf/TNzr9zVOGiIY6aKCz8EKuXmlYNV7CM2pUjBa/B+c2I15tS7KLySep75+FuerJdmArvJLcsAXWEy2H0A==",
"license": "MIT"
},
+ "node_modules/get-intrinsic": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+ "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "es-define-property": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "es-object-atoms": "^1.1.1",
+ "function-bind": "^1.1.2",
+ "get-proto": "^1.0.1",
+ "gopd": "^1.2.0",
+ "has-symbols": "^1.1.0",
+ "hasown": "^2.0.2",
+ "math-intrinsics": "^1.1.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+ "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+ "license": "MIT",
+ "dependencies": {
+ "dunder-proto": "^1.0.1",
+ "es-object-atoms": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/get-stream": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -7170,6 +7367,18 @@
"resolve": "^1.0.0"
}
},
+ "node_modules/gopd": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+ "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -7219,10 +7428,38 @@
"is-browser": "^2.0.1"
}
},
+ "node_modules/has-symbols": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+ "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/has-tostringtag": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+ "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+ "license": "MIT",
+ "dependencies": {
+ "has-symbols": "^1.0.3"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/hasown": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
- "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+ "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+ "license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
},
@@ -7263,6 +7500,19 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/https-proxy-agent": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+ "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+ "license": "MIT",
+ "dependencies": {
+ "agent-base": "6",
+ "debug": "4"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7966,6 +8216,15 @@
"integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
"license": "ISC"
},
+ "node_modules/math-intrinsics": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+ "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
"node_modules/math-log2": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/math-log2/-/math-log2-1.0.1.tgz",
@@ -7975,6 +8234,27 @@
"node": ">=0.10.0"
}
},
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/min-indent": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -8859,6 +9139,15 @@
"resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
"integrity": "sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q=="
},
+ "node_modules/proxy-from-env": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+ "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/proxy-memoize": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/proxy-memoize/-/proxy-memoize-3.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index eecb154..7c658b1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
"@chakra-ui/react": "^3.22.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
+ "axios": "^1.18.1",
"framer-motion": "^12.23.0",
"leaflet": "^1.9.4",
"lucide-react": "^0.539.0",
@@ -62,4 +63,4 @@
"public"
]
}
-}
\ No newline at end of file
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 6cf30e3..9ab481b 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,7 +1,13 @@
import 'leaflet/dist/leaflet.css';
+import { useEffect } from 'react';
import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
-import { createContext } from "react";
+
+// --- NEW AUTH IMPORTS ---
+import useAuthStore from './store/authStore';
+import ProtectedRoute from './components/layout/ProtectedRoute.jsx';
+
+// Pages & Components
import Login from "@/pages/auth/Login.jsx";
import Sidebar from "./components/layout/Sidebar.jsx";
import DialogPopup from "@/components/dashboard/DialogPopup.jsx";
@@ -41,43 +47,52 @@ function AppFoundation() {
)
}
-// function ProtectedRoute({ user, children }) {
-// if (user) return children;
-// else return ;
-// }
const Placeholder = ({ name }) => (
-
+
{name} Dashboard - Coming Soon
);
+
function App() {
+ // 1. Pull the initialization function from Zustand
+ const checkAuth = useAuthStore((state) => state.checkAuth);
+
+ // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
+ useEffect(() => {
+ checkAuth();
+ }, [checkAuth]);
+
return (
- {/*Public Routes*/}
+ {/* --- Public Routes --- */}
} />
- {/*Non-Public Routes*/}
- }>
+ {/* --- SECURE ROUTES --- */}
+ }>
- }>
- {/* We use our "pass" component to fill the Outlet until the real pages are built */}
- } />
- } />
- } />
- } />
- } />
+ {/* --- Non-Public Routes (Now completely locked down) --- */}
+ }>
+
+ }>
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ } />
+ } />
+ } />
+ } />
- } />
- } />
- } />
- } />
- {/*Redirect Routes*/}
+ {/* --- Redirect Routes --- */}
} />
-
- );
+
+ );
}
-export default App
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/client/src/api/axiosConfig.js b/client/src/api/axiosConfig.js
new file mode 100644
index 0000000..c8dec25
--- /dev/null
+++ b/client/src/api/axiosConfig.js
@@ -0,0 +1,17 @@
+// src/api/axiosConfig.js
+import axios from 'axios';
+
+const api = axios.create({
+ // Vite will catch this relative path and proxy it to Django
+ baseURL: '/api/v3/',
+
+ withCredentials: true,
+ xsrfCookieName: 'csrftoken',
+ xsrfHeaderName: 'X-CSRFToken',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ }
+});
+
+export default api;
\ No newline at end of file
diff --git a/client/src/components/Widgets/VaaActivity7Day.jsx b/client/src/components/Widgets/VaaActivity7Day.jsx
index 9742756..62e151a 100644
--- a/client/src/components/Widgets/VaaActivity7Day.jsx
+++ b/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)',
diff --git a/client/src/components/layout/Header.jsx b/client/src/components/layout/Header.jsx
index 819859c..47adb32 100644
--- a/client/src/components/layout/Header.jsx
+++ b/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 (
{/* Home Link Logo */}
@@ -27,12 +27,12 @@ export default function Header({ user = placeholderUser }) {
{/* User Profile Section */}
- {user.name}
- {user.email}
+ {displayName}
+ {displayEmail}
diff --git a/client/src/components/layout/ProtectedRoute.jsx b/client/src/components/layout/ProtectedRoute.jsx
new file mode 100644
index 0000000..66ddfe3
--- /dev/null
+++ b/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 (
+
+
Loading Secure Environment...
+
+ );
+ }
+
+ // 2. The check failed (no cookie or expired cookie)
+ if (!isAuthenticated) {
+ return ;
+ }
+
+ // 3. The check passed! Render the layout shell and the protected children
+ return ;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/client/src/components/layout/UserAvatarMenu.jsx b/client/src/components/layout/UserAvatarMenu.jsx
index 7741183..023242c 100644
--- a/client/src/components/layout/UserAvatarMenu.jsx
+++ b/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 (
@@ -20,17 +22,24 @@ export default function UserAvatarMenu({ name, avatar }) {
{/* zIndex: overlay = 1300 */}
-
+
Settings
- console.log("Log out triggered")}>
+
+ {/* Replaced console.log with the Zustand logout action */}
+
Logout
- );
+ );
}
\ No newline at end of file
diff --git a/client/src/constants/widgetRegistry.jsx b/client/src/constants/widgetRegistry.jsx
index 0f86332..43d5f77 100644
--- a/client/src/constants/widgetRegistry.jsx
+++ b/client/src/constants/widgetRegistry.jsx
@@ -1,4 +1,5 @@
// config/widgetRegistry.js
+import { lazy } from 'react';
// We assume a 12-column grid.
// w: 12 = full screen width
@@ -11,6 +12,7 @@ export const WIDGET_REGISTRY = {
name: "VAA 7 Day Activity",
category: "Aviation",
description: "Displays 7-day flight level timelines across multiple volcanoes.",
+ component: lazy(() => import('../components/widgets/VaaActivity7Day')),
allowedSizes: {
xlarge: { w: 12, h: 12 },
}
diff --git a/client/src/pages/auth/Login.jsx b/client/src/pages/auth/Login.jsx
index 6f71d4c..b76b172 100644
--- a/client/src/pages/auth/Login.jsx
+++ b/client/src/pages/auth/Login.jsx
@@ -1,91 +1,134 @@
-import { useContext } from 'react';
-import { useForm } from 'react-hook-form';
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
import {
- Button,
- Field,
- Input,
- Stack,
- useRecipe,
- Center,
- Text,
- Flex,
- Heading,
- Highlight,
- GridItem,
- Grid
-} from "@chakra-ui/react"
-import { PasswordInput } from "@/components/ui/password-input.jsx";
+ Box, Heading, Stack, Input, Button, Text, Separator, Field, Link, Flex
+} from '@chakra-ui/react';
+import useAuthStore from '../../store/authStore';
+import { toaster } from "../../components/ui/toaster.jsx"; // Ensure this path matches your project
-export default function Login( signedIn, setSignedIn) {
- const recipe = useRecipe({ key: "dashboard" }); // styling recipes option
- const styles = recipe(); // use style
+const Login = () => {
+ const navigate = useNavigate();
- const {
- register,
- handleSubmit,
- formState: { errors, isSubmitSuccessful },
- } = useForm({
- defaultValues: {
- username: "",
- password: "",
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+
+ const { login, isAuthenticated, isLoading, error } = useAuthStore();
+
+ // --- VDAP COLOR STYLES ---
+ const fieldStyles = {
+ borderRadius: "3xl",
+ bg: "gray.100",
+ borderColor: "gray.100",
+ px: 4,
+ _focus: {
+ bg: "white",
+ borderColor: "blue.400",
+ boxShadow: "0 0 0 1px #4299E1",
+ outline: "none"
}
- });
+ };
- const onSubmit = (data) => {
- console.log(data);
- // setUser(data.username);
+ const buttonStyles = {
+ borderRadius: "3xl",
+ bg: "blue.600",
+ color: "white",
+ _hover: { bg: 'blue.700', transform: 'translateY(-1px)' },
+ _active: { bg: 'blue.800', transform: 'translateY(0)' },
+ transition: 'all 0.2s'
+ };
+
+ // The Redirect Watcher
+ useEffect(() => {
+ if (isAuthenticated) {
+ navigate('/home', { replace: true });
+ }
+ }, [isAuthenticated, navigate]);
+
+ // The Error Watcher
+ useEffect(() => {
+ if (error) {
+ toaster.create({
+ title: "Login Failed",
+ description: error,
+ type: "error",
+ duration: 5000,
+ });
+ }
+ }, [error]);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (username && password) {
+ await login(username, password);
+ }
};
return (
-
-
-
-
-
-
- VDAP
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Username
+
+ setUsername(e.target.value)}
+ placeholder="jdoe"
+ {...fieldStyles}
+ />
+
+
+
+
+
+ Password
+
+
+ setPassword(e.target.value)}
+ placeholder="••••••••"
+ {...fieldStyles}
+ />
+
+
+
+
+
+ Need access?{' '}
+
+ Contact IT Administration
+
+
+
+
+
);
-}
\ No newline at end of file
+};
+
+export default Login;
\ No newline at end of file
diff --git a/client/src/pages/home/tabs/MyDashboard.jsx b/client/src/pages/home/tabs/MyDashboard.jsx
index 17ea184..be7d108 100644
--- a/client/src/pages/home/tabs/MyDashboard.jsx
+++ b/client/src/pages/home/tabs/MyDashboard.jsx
@@ -1,94 +1,146 @@
-import { Box, Text, Flex, IconButton } from "@chakra-ui/react";
+import { Box, Text, Flex, IconButton, Spinner } from "@chakra-ui/react";
import { X } from "lucide-react";
import { Responsive, WidthProvider } from "react-grid-layout";
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
+import { Suspense } from 'react';
+
+// 2. Import registry!
+import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
// React-Grid-Layout requires this wrapper to automatically calculate screen width
const ResponsiveGridLayout = WidthProvider(Responsive);
export default function MyDashboard() {
- // 1. ☁️ Connect to the Cloud (Zustand)
- const widgets = useDashboardStore(state => state.widgets);
- const isEditing = useDashboardStore(state => state.isEditing);
- const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
- const removeWidget = useDashboardStore(state => state.removeWidget);
+ // 1. ☁️ Connect to the Cloud (Zustand)
+ const widgets = useDashboardStore(state => state.widgets);
+ const isEditing = useDashboardStore(state => state.isEditing);
+ const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
+ const removeWidget = useDashboardStore(state => state.removeWidget);
- // 2. 🛠️ Format the data for RGL
- // RGL expects a very specific array format for its layout prop
- const rglLayout = widgets.map(w => ({
- i: w.id,
- x: w.x,
- y: w.y,
- w: w.w,
- h: w.h,
- isResizable: false // 🚫 The magic lock! No resizing allowed globally.
- }));
+ // 2. 🛠️ Format the data for RGL
+ // RGL expects a very specific array format for its layout prop
+ const rglLayout = widgets.map(w => ({
+ i: w.id,
+ x: w.x,
+ y: w.y,
+ w: w.w,
+ h: w.h,
+ isResizable: false // 🚫 The magic lock! No resizing allowed globally.
+ }));
+
+ // 3. THE COMPONENT MAPPER
+ const renderWidget = (widget) => {
+ const registryEntry = WIDGET_REGISTRY[widget.type];
+
+ if (registryEntry && registryEntry.component) {
+ const Component = registryEntry.component;
+
+ return (
+ // The "Frame" that holds both the Title and the Chart
+
+
+ {/* 1. THE TITLE BAR (Dynamically pulled from registry!) */}
+
+
+ {registryEntry.name}
+
+
+ {/* (Optional) This is exactly where the ellipsis/settings icon will go later! */}
+
+
+
+ {/* 2. THE CHART CANVAS */}
+
+
+
- return (
-
- updateLayoutPositions(newLayout)} // Fires when user drops a widget
- compactType="vertical" // Auto-packs widgets to the top
- >
- {/* 3. 🎨 Paint the Widgets */}
- {widgets.map(widget => (
-
- {/* 4. THE DELETE BUTTON */}
- {isEditing && (
- removeWidget(widget.id)}
- onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
- onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
- >
-
-
- )}
- {/* 🚧 Temporary Placeholder!
- Eventually, we will swap this block out for a dynamic component loader
- that looks at widget.type and loads the correct graph or table.
- */}
-
- {widget.type}
- Size: {widget.size}
-
- ))}
-
+ );
+ }
- {/* Empty State Helper */}
- {widgets.length === 0 && (
-
- Your dashboard is empty. Click Settings to add widgets.
+ // Fallback if someone asks for a widget that doesn't exist
+ return (
+
+ Error
+ Widget '{widget.type}' not found.
- )}
-
- );
+ );
+ };
+
+ return (
+
+ updateLayoutPositions(newLayout)} // Fires when user drops a widget
+ compactType="vertical" // Auto-packs widgets to the top
+ >
+ {/* 3. 🎨 Paint the Widgets */}
+ {widgets.map(widget => (
+
+ {/* 4. THE DELETE BUTTON */}
+ {isEditing && (
+ removeWidget(widget.id)}
+ onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
+ onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
+ >
+
+
+ )}
+
+ {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
+
+
+
+ }>
+ {renderWidget(widget)}
+
+
+
+ ))}
+
+
+ {/* Empty State Helper */}
+ {widgets.length === 0 && (
+
+ Your dashboard is empty. Click Settings to add widgets.
+
+ )}
+
+ );
}
\ No newline at end of file
diff --git a/client/src/store/authStore.js b/client/src/store/authStore.js
new file mode 100644
index 0000000..3c815f9
--- /dev/null
+++ b/client/src/store/authStore.js
@@ -0,0 +1,66 @@
+import { create } from 'zustand';
+import api from '../api/axiosConfig';
+
+const useAuthStore = create((set) => ({
+ isAuthenticated: false,
+ isLoading: true,
+ error: null,
+ user: null,
+
+ login: async (username, password) => {
+ set({ isLoading: true, error: null });
+ try {
+ const res = await api.post('login/', { username, password });
+ set({
+ isAuthenticated: true,
+ isLoading: false,
+ user: {
+ username: res.data.username,
+ firstName: res.data.first_name,
+ lastName: res.data.last_name,
+ email: res.data.email,
+ fullName: [res.data.first_name, res.data.last_name].filter(Boolean).join(' ')
+ }
+ });
+ } catch (err) {
+ // PROPER USAGE: Check if Django sent a specific error string, otherwise default
+ const backendError = err.response?.data?.error || 'Invalid network credentials';
+ set({ error: backendError, isLoading: false, isAuthenticated: false });
+ }
+ },
+
+ logout: async () => {
+ try {
+ await api.post('logout/');
+ } catch (err) {
+ console.error("Logout error:", err);
+ } finally {
+ set({ isAuthenticated: false, user: null, error: null });
+ }
+ },
+
+ checkAuth: async () => {
+ try {
+ // Hit the new lightweight endpoint
+ const res = await api.get('session');
+
+ // Rehydrate the store with the user's info!
+ set({
+ isAuthenticated: true,
+ isLoading: false,
+ user: {
+ username: res.data.username,
+ firstName: res.data.first_name,
+ lastName: res.data.last_name,
+ email: res.data.email,
+ fullName: [res.data.first_name, res.data.last_name].filter(Boolean).join(' ')
+ }
+ });
+ } catch {
+ // If it fails, ensure the store is completely wiped
+ set({ isAuthenticated: false, isLoading: false, user: null });
+ }
+ }
+}));
+
+export default useAuthStore;
\ No newline at end of file
diff --git a/client/vite.config.js b/client/vite.config.js
index 95d0a2e..ab47e1c 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -21,6 +21,7 @@ export default defineConfig({
target: 'http://vdap.org:8082', // The remote internet API
changeOrigin: true, // Tricks the remote server into accepting the request
secure: false, // Set to true later when you upgrade to HTTPS
+ cookieDomainRewrite: 'localhost',
},
},
},