working OBS scene controller, small frontend changes

Author: devyntk

Cargo.toml

@@ -39,7 +39,7 @@ ctrlc = "3.1.9"
 argon2 = "0.4.1"
 rand_core = { version = "0.6", features = ["std"] }
 anyhow = "1.0.68"
-serde = { version = "1.0.150", features = ["derive"] }
+serde = { version = "1.0.150", features = ["derive", "rc"] }
 serde_json = "1.0.91"
 biscuit-auth = "2.2.0"
 ed25519-dalek = "1.0.1"

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.2.2",
+    "postcss-nesting": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.2",
@@ -33,6 +34,7 @@
     "prettier": "^2.8.2",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "vite": "^4.0.4",
+    "less": "^4.1.3"
   }
 }

frontend/src/main.tsx

@@ -2,16 +2,28 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-import "./styles.css";
-import "rsuite/dist/rsuite.min.css";
-import Dashboard from "./pages/Dashboard";
-import Login from "./pages/Login";
+import "./styles.less";
+import "rsuite/styles/index.less";
+import Dashboard from "~/pages/Dashboard";
+import Login from "~/pages/Login";
 import { CustomProvider } from "rsuite";
+import Home from "~/pages/Home";
+import Status from "~/pages/Status";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Dashboard />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: "status",
+        element: <Status />,
+      },
+    ],
   },
   {
     path: "/login",

frontend/src/pages/Dashboard.tsx

@@ -9,9 +9,9 @@ import {
 } from "rsuite";
 import ArrowLeftLineIcon from "@rsuite/icons/ArrowLeftLine";
 import ArrowRightLineIcon from "@rsuite/icons/ArrowRightLine";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Outlet, useNavigate } from "react-router";
-import { Link } from "react-router-dom";
+import { Link, NavLinkProps, NavLink } from "react-router-dom";
 import { useAuthStore } from "../stores/auth";
 
 export default function Dashboard() {
@@ -46,7 +46,12 @@ export default function Dashboard() {
         >
           <Sidenav.Body>
             <Nav>
-              <Nav.Item>Home</Nav.Item>
+              <Nav.Item to="/" as={NavLink}>
+                Home
+              </Nav.Item>
+              <Nav.Item to="/status" as={NavLink}>
+                Status
+              </Nav.Item>
               <Nav.Item
                 onClick={() => {
                   auth.logout();
@@ -71,8 +76,7 @@ export default function Dashboard() {
       </Sidebar>
 
       <Container>
-        {/*<Header />*/}
-        <Content>
+        <Content style={{ backgroundColor: "#f5f8fa" }}>
           <Outlet />
         </Content>
       </Container>

frontend/src/pages/Home.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <></>;
+}

frontend/src/pages/Login.tsx

@@ -37,9 +37,7 @@ export default function Login() {
             <Form.Control name="username" />
           </Form.Group>
           <Form.Group controlId="password">
-            <Form.ControlLabel>
-              <span>Password</span>
-            </Form.ControlLabel>
+            <Form.ControlLabel>Password</Form.ControlLabel>
             <Form.Control name="password" type="password" />
           </Form.Group>
           <Form.Group>
@@ -53,7 +51,7 @@ export default function Login() {
                       password: form.password,
                     })
                     .then((response) => {
-                      auth.login(response.token);
+                      auth.login(response.data.token);
                       navigate("/");
                     });
                 }}

frontend/src/pages/Status.tsx

@@ -0,0 +1,3 @@
+export default function Status() {
+  return <></>;
+}

frontend/src/stores/auth.ts

@@ -16,7 +16,10 @@ export const useAuthStore = create<AuthState>()(
         logout: () => set((state) => ({ sessionKey: null })),
         login: (key: string) => set(() => ({ sessionKey: key })),
       }),
-      { name: "sc-auth-storage" }
+      {
+        name: "sc-auth-storage",
+        storage: createJSONStorage(() => sessionStorage),
+      }
     )
   )
 );

frontend/src/styles.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.rs-sidenav-item,
+.rs-dropdown-item {
+  &.active {
+    color: #3498ff !important;
+  }
+}