🔨 Add workflow and dockerfile

pkg/view/src/layouts/RootLayout.tsx

@@ -0,0 +1,46 @@
+import Navbar from "./shared/Navbar.tsx";
+import { readProfiles, useUserinfo } from "../stores/userinfo.tsx";
+import { createEffect, createSignal, Show } from "solid-js";
+import { readWellKnown } from "../stores/wellKnown.tsx";
+import { BeforeLeaveEventArgs, useBeforeLeave, useLocation, useNavigate } from "@solidjs/router";
+
+export default function RootLayout(props: any) {
+  const [ready, setReady] = createSignal(false);
+
+  Promise.all([readWellKnown(), readProfiles()]).then(() => setReady(true));
+
+  const navigate = useNavigate();
+  const userinfo = useUserinfo();
+
+  const location = useLocation();
+
+  createEffect(() => {
+    if (ready()) {
+      keepGate(location.pathname);
+    }
+  }, [ready, userinfo]);
+
+  function keepGate(path: string, e?: BeforeLeaveEventArgs) {
+    const whitelist = ["/auth/login", "/auth/register", "/users/me/confirm"];
+
+    if (!userinfo?.isLoggedIn && !whitelist.includes(path)) {
+      if (!e?.defaultPrevented) e?.preventDefault();
+      navigate(`/auth/login?redirect_uri=${path}`);
+    }
+  }
+
+  useBeforeLeave((e: BeforeLeaveEventArgs) => keepGate(e.to.toString().split("?")[0], e));
+
+  return (
+    <Show when={ready()} fallback={
+      <div class="h-screen w-screen flex justify-center items-center">
+        <div>
+          <span class="loading loading-lg loading-infinity"></span>
+        </div>
+      </div>
+    }>
+      <Navbar />
+      <main class="h-[calc(100vh-68px)] mt-[68px]">{props.children}</main>
+    </Show>
+  );
+}

pkg/view/src/layouts/shared/Navbar.tsx

@@ -0,0 +1,83 @@
+import { For, Match, Switch } from "solid-js";
+import { clearUserinfo, useUserinfo } from "../../stores/userinfo.tsx";
+import { useNavigate } from "@solidjs/router";
+import { useWellKnown } from "../../stores/wellKnown.tsx";
+
+interface MenuItem {
+  label: string;
+  href: string;
+}
+
+export default function Navbar() {
+  const nav: MenuItem[] = [{ label: "Dashboard", href: "/" }];
+
+  const wellKnown = useWellKnown();
+  const userinfo = useUserinfo();
+  const navigate = useNavigate();
+
+  function logout() {
+    clearUserinfo();
+    navigate("/auth/login");
+  }
+
+  return (
+    <div class="navbar bg-base-100 shadow-md px-5 z-10 fixed top-0">
+      <div class="navbar-start">
+        <div class="dropdown">
+          <div tabIndex={0} role="button" class="btn btn-ghost lg:hidden">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
+            </svg>
+          </div>
+          <ul
+            tabIndex={0}
+            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+          >
+            <For each={nav}>
+              {(item) => (
+                <li>
+                  <a href={item.href}>{item.label}</a>
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+        <a href="/" class="btn btn-ghost text-xl">
+          {wellKnown?.name ?? "Goatpass"}
+        </a>
+      </div>
+      <div class="navbar-center hidden lg:flex">
+        <ul class="menu menu-horizontal px-1">
+          <For each={nav}>
+            {(item) => (
+              <li>
+                <a href={item.href}>{item.label}</a>
+              </li>
+            )}
+          </For>
+        </ul>
+      </div>
+      <div class="navbar-end pe-5">
+        <Switch>
+          <Match when={userinfo?.isLoggedIn}>
+            <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>Logout</button>
+          </Match>
+          <Match when={!userinfo?.isLoggedIn}>
+            <a href="/auth/login" class="btn btn-sm btn-primary">Login</a>
+          </Match>
+        </Switch>
+      </div>
+    </div>
+  );
+}