more pages

src/pages/404.tsx

@@ -0,0 +1,7 @@
+export function MissingPage() {
+    return (
+        <div>
+            404
+        </div>
+    )
+}

src/pages/Bot.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom"
+import { useAuthFetch } from "../authorization"
+
+export function Bot() {
+    const { id } = useParams()
+    var data = useAuthFetch("/bot/" + (id || ""), "GET")
+    return (
+        <div>
+            {JSON.stringify(data)}
+        </div>
+    )
+}

src/pages/Bots.tsx

@@ -0,0 +1,10 @@
+import { useAuthFetch } from "../authorization"
+
+export function Bots() {
+    var data = useAuthFetch("/bots", "GET")
+    return (
+        <div>
+            {JSON.stringify(data)}
+        </div>
+    )
+}

src/pages/Dashboard.tsx

@@ -0,0 +1,7 @@
+export function Dashboard() {
+    return (
+        <div>
+            dashboard
+        </div>
+    )
+}

src/pages/Layout.tsx

@@ -1,14 +1,32 @@
-import { Outlet, Navigate } from 'react-router-dom'
-import { isLoggedIn, LoggedIn } from '../authorization'
+import { Outlet, Navigate, NavLink } from 'react-router-dom'
+import { isLoggedIn, LoginState, usePersistentState } from '../authorization'
+
+const activeClassName: ({ isActive }: { isActive: boolean }) => string = ({ isActive }) => isActive ? "active" : ""
 
 export function Layout() {
+    const [collapsed, setCollapsed] = usePersistentState("collapsed", false)
     return (
         <div>
             {
-                isLoggedIn() === LoggedIn.No && <Navigate to="/login" replace={true} />
+                isLoggedIn() === LoginState.No && <Navigate to="/login" replace={true} />
             }
-            <span>Layout</span>
-            <Outlet />
+            <div id="sidebar" className={collapsed ? "collapse" : ""}>
+                <label id="collapse">
+                    <input type="checkbox" checked={collapsed} onChange={e => setCollapsed(e.target.checked)} />
+                    <div className="button">yo</div>
+                </label>
+                <div className="menu">
+                    <NavLink className={activeClassName} to="/"><span className="item">Dashboard</span></NavLink>
+                    <NavLink className={activeClassName} to="/bots"><span className="item">Bots</span></NavLink>
+                    <NavLink className={activeClassName} to="/tokens"><span className="item">Tokens</span></NavLink>
+                    <NavLink className={activeClassName} to="/settings"><span className="item">Settings</span></NavLink>
+                    <NavLink className={activeClassName} to="/logout"><span className="item important">Logout</span></NavLink>
+                    <NavLink className={activeClassName} to="/404"><span className="item">(temp) 404</span></NavLink>
+                </div>
+            </div>
+            <div id="content">
+                <Outlet />
+            </div>
         </div>
     )
 }

src/pages/Login.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react"
 import { Navigate } from "react-router-dom"
-import { authorizeLogin, isLoggedIn, LoggedIn } from "../authorization"
+import { authorizeLogin, isLoggedIn, LoginState, useClearToken } from "../authorization"
 
 export function Login() {
     var [username, setUsername] = useState("")
@@ -9,23 +9,23 @@ export function Login() {
 
     var login = () => {
         if (username.length === 0 || password.length === 0) {
-            setLoggedIn(LoggedIn.Invalid)
+            setLoggedIn(LoginState.Invalid)
             return
         }
         authorizeLogin(username, password, setLoggedIn)
     }
 
     useMemo(() => {
-        if (loggedIn === LoggedIn.Invalid) {
-            setLoggedIn(LoggedIn.No)
+        if (loggedIn === LoginState.Invalid) {
+            setLoggedIn(LoginState.No)
         }
     }, [username, password])
 
     return (
         <div id="login">
             <div className="form">
-                <input type="text" className={loggedIn === LoggedIn.Invalid ? "error" : ""} onChange={e => setUsername(e.target.value)} />
-                <input type="password" className={loggedIn === LoggedIn.Invalid ? "error" : ""} onChange={e => setPassword(e.target.value)} />
+                <input type="text" className={loggedIn === LoginState.Invalid ? "error" : ""} onChange={e => setUsername(e.target.value)} />
+                <input type="password" className={loggedIn === LoginState.Invalid ? "error" : ""} onChange={e => setPassword(e.target.value)} />
             </div>
             <div>
                 <button className="pad svg" onClick={login}>
@@ -35,8 +35,19 @@ export function Login() {
                 </button>
             </div>
             {
-                loggedIn === LoggedIn.Yes && <Navigate to="/" replace={true} />
+                loggedIn === LoginState.Yes && <Navigate to="/" replace={true} />
             }
         </div>
     )
+}
+
+export function Logout() {
+    const loggedOut = useClearToken()
+    return (
+        <>
+            {
+                loggedOut && <Navigate to="/login" replace={true} />
+            }
+        </>
+    )
 }

src/pages/Settings.tsx

@@ -0,0 +1,7 @@
+export function Settings() {
+    return (
+        <div>
+            settings
+        </div>
+    )
+}

src/pages/Token.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom"
+import { useAuthFetch } from "../authorization"
+
+export function Token() {
+    const { id } = useParams()
+    var data = useAuthFetch("/token/" + (id || ""), "GET")
+    return (
+        <div>
+            {JSON.stringify(data)}
+        </div>
+    )
+}

src/pages/Tokens.tsx

@@ -0,0 +1,10 @@
+import { useAuthFetch } from "../authorization"
+
+export function Tokens() {
+    var data = useAuthFetch("/tokens", "GET")
+    return (
+        <div>
+            {JSON.stringify(data)}
+        </div>
+    )
+}