ui: add dashboard page (#72)

* create components folder

* install react router and upgrade node to 22

* remove unused css

* remove react router

* install wouter

* render login and home page conditionally

* basic dashboard with router

* style the sidebar

* fix the typo

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
           go-version: stable
       - uses: actions/setup-node@v3
         with:
-          node-version: "18.x"
+          node-version: "22.x"
       - name: Build webapp
         working-directory: ./webapp
         run: npm ci && npm run build

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine3.20 AS frontend
+FROM node:22-alpine3.20 AS frontend
 
 # Set the working directory
 WORKDIR /webapp

webapp/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "wouter": "^3.3.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

webapp/src/App.jsx

@@ -1,9 +1,26 @@
-import AdminLoginPage from './login/AdminLoginPage'
-import './output.css'
+import { useEffect, useState} from 'react';
+
+import LoginPage from './components/LoginPage'
+import HomePage from './components/home/Page'
 
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  useEffect(() => {
+      const adminSecret = localStorage.getItem('adminSecret');
+      if (adminSecret) {
+          setIsAuthenticated(true);
+      }
+  }, []);
+
+  if (isAuthenticated) {
+    return (
+      <HomePage />
+    )
+  }
+
   return (
-    <AdminLoginPage/>
+    <LoginPage setIsAuthenticated={setIsAuthenticated} />
   )
 }
 

webapp/src/login/AdminLoginPage.jsx → webapp/src/components/LoginPage.jsx

@@ -1,13 +1,14 @@
 import { useState } from 'react';
+import PropTypes from 'prop-types';
 import shinobiStackLogo from '../assets/shinobistack.png';
 
-const AdminLoginPage = () => {
+const LoginPage = ({ setIsAuthenticated }) => {
   const [adminSecret, setAdminSecret] = useState('');
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    // TODO: Handle admin login logic here
-    console.log('Admin Secret:', adminSecret);
+    localStorage.setItem('adminSecret', adminSecret);
+    setIsAuthenticated(true)
   };
 
   return (
@@ -18,7 +19,7 @@ const AdminLoginPage = () => {
             alt="Admin Logo" 
             className="w-full h-auto mb-4 rounded-3xl" 
           />
-        <h2 className="text-2xl font-bold font-mono text-center">gokakshi</h2>
+        <h2 className="text-2xl font-bold font-mono text-center">gokakashi</h2>
         <h3 className="text-1xl font-thin text-center">The centralized security platform</h3>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
@@ -44,4 +45,8 @@ const AdminLoginPage = () => {
   );
 };
 
-export default AdminLoginPage;
+LoginPage.propTypes = {
+  setIsAuthenticated: PropTypes.func.isRequired,
+};
+
+export default LoginPage;

webapp/src/components/agents/List.jsx

@@ -0,0 +1,7 @@
+const List = () => {
+  return (
+    <div>Agents List</div>
+  );
+};
+
+export default List;

webapp/src/components/home/Page.jsx

@@ -0,0 +1,24 @@
+import { Route, Switch } from 'wouter';
+import Sidebar from './Sidebar';
+import PolicyList from '../policies/List';
+import ScanList from '../scans/List';
+import IntegrationList from '../integrations/List';
+import AgentList from '../agents/List';
+
+const Page = () => {
+    return (
+        <div className="flex bg-gray-200">
+            <Sidebar />
+            <div className="flex-grow p-4">
+                <Switch>
+                    <Route path="/policies" component={PolicyList} />
+                    <Route path="/scans" component={ScanList} />
+                    <Route path="/integrations" component={IntegrationList} />
+                    <Route path="/agents" component={AgentList} />
+                </Switch>
+            </div>
+        </div>
+    );
+}
+
+export default Page;

webapp/src/components/home/Sidebar.jsx

@@ -0,0 +1,49 @@
+import { Link } from 'wouter';
+
+const Sidebar = () => {
+    return (
+        <aside className="h-screen w-64 bg-slate-50 flex flex-col rounded-2xl shadow-2xl p-2 m-2">
+            <div className="flex items-center justify-center h-16">
+                <h1 className="text-lg font-bold font-mono">gokakashi</h1>
+            </div>
+            <nav className="flex-grow">
+                <ul className="space-y-2 p-4">
+                    <li>
+                    <Link href="/policies" className="flex items-center p-2 rounded hover:bg-slate-400">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6 mr-2">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+                      </svg>
+                      Policies
+                    </Link>
+                    </li>
+                    <li>
+                    <Link href="/scans" className="flex items-center p-2 rounded hover:bg-slate-400">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6 mr-2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                      </svg>
+                      Scans
+                    </Link>
+                    </li>
+                    <li>
+                    <Link href="/integrations" className="flex items-center p-2 rounded hover:bg-slate-400">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6 mr-2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+                      </svg>
+                      Integrations
+                    </Link>
+                    </li>
+                    <li>
+                    <Link href="/agents" className="flex items-center p-2 rounded hover:bg-slate-400">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6 mr-2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
+                      </svg>
+                      Agents
+                    </Link>
+                    </li>
+                </ul>
+            </nav>
+        </aside>
+    );
+};
+
+export default Sidebar;

webapp/src/components/integrations/List.jsx

@@ -0,0 +1,7 @@
+const List = () => {
+  return (
+    <div>Integrations List</div>
+  );
+};
+
+export default List;

webapp/src/components/policies/List.jsx

@@ -0,0 +1,7 @@
+const List = () => {
+  return (
+    <div>Policies List</div>
+  );
+};
+
+export default List;

webapp/src/components/scans/List.jsx

@@ -0,0 +1,7 @@
+const List = () => {
+  return (
+    <div>Scans List</div>
+  );
+};
+
+export default List;