Implement more stuff

frontend/src/App.tsx

@@ -1,5 +1,6 @@
-import { createEffect } from "solid-js"
-import { Router, Route, useLocation } from "@solidjs/router"
+import { createEffect, createResource, Show } from "solid-js"
+import { Router, Route, useLocation, useNavigate } from "@solidjs/router"
+import type { Component } from "solid-js"
 import Navbar from "./components/Navbar"
 import Home from "./pages/Home"
 import Login from "./pages/Login"
@@ -13,6 +14,8 @@ import AdminTenantDetail from "./pages/admin/AdminTenantDetail"
 import AdminRelays from "./pages/admin/AdminRelays"
 import AdminRelayDetail from "./pages/admin/AdminRelayDetail"
 import AdminRelayEdit from "./pages/admin/AdminRelayEdit"
+import { useActiveAccount } from "./lib/nostr"
+import { adminListTenants } from "./lib/api"
 
 function Layout(props: { children?: any }) {
   const location = useLocation()
@@ -32,20 +35,64 @@ function Layout(props: { children?: any }) {
 }
 
 export default function App() {
+  const withTenantAuth = (Page: Component): Component => {
+    return () => {
+      const navigate = useNavigate()
+      const account = useActiveAccount()
+
+      createEffect(() => {
+        if (!account()) navigate("/login", { replace: true })
+      })
+
+      return <Show when={account()}><Page /></Show>
+    }
+  }
+
+  const withAdminAuth = (Page: Component): Component => {
+    return () => {
+      const navigate = useNavigate()
+      const account = useActiveAccount()
+      const [adminCheck] = createResource(
+        () => account()?.id,
+        async () => {
+          await adminListTenants()
+          return true
+        },
+      )
+
+      createEffect(() => {
+        if (!account()) navigate("/login", { replace: true })
+      })
+
+      return (
+        <Show when={account()}>
+          <Show when={!adminCheck.loading} fallback={<div class="max-w-4xl mx-auto px-4 py-8 text-gray-500">Checking admin access...</div>}>
+            <Show
+              when={!adminCheck.error}
+              fallback={<div class="max-w-4xl mx-auto px-4 py-8 text-red-600">You do not have admin access.</div>}
+            >
+              <Page />
+            </Show>
+          </Show>
+        </Show>
+      )
+    }
+  }
+
   return (
     <Router root={Layout}>
       <Route path="/" component={Home} />
       <Route path="/login" component={Login} />
-      <Route path="/relays" component={RelayList} />
-      <Route path="/relays/new" component={RelayNew} />
-      <Route path="/relays/:id" component={RelayDetail} />
-      <Route path="/relays/:id/edit" component={RelayEdit} />
-      <Route path="/account" component={Account} />
-      <Route path="/admin/tenants" component={AdminTenants} />
-      <Route path="/admin/tenants/:id" component={AdminTenantDetail} />
-      <Route path="/admin/relays" component={AdminRelays} />
-      <Route path="/admin/relays/:id" component={AdminRelayDetail} />
-      <Route path="/admin/relays/:id/edit" component={AdminRelayEdit} />
+      <Route path="/relays" component={withTenantAuth(RelayList)} />
+      <Route path="/relays/new" component={withTenantAuth(RelayNew)} />
+      <Route path="/relays/:id" component={withTenantAuth(RelayDetail)} />
+      <Route path="/relays/:id/edit" component={withTenantAuth(RelayEdit)} />
+      <Route path="/account" component={withTenantAuth(Account)} />
+      <Route path="/admin/tenants" component={withAdminAuth(AdminTenants)} />
+      <Route path="/admin/tenants/:id" component={withAdminAuth(AdminTenantDetail)} />
+      <Route path="/admin/relays" component={withAdminAuth(AdminRelays)} />
+      <Route path="/admin/relays/:id" component={withAdminAuth(AdminRelayDetail)} />
+      <Route path="/admin/relays/:id/edit" component={withAdminAuth(AdminRelayEdit)} />
     </Router>
   )
 }