From a967731461c84647d6b0a56bbf8ff3a4efdbf8ab Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Sun, 8 Mar 2026 17:18:28 -0400
Subject: [PATCH] feat: add a temp no access page

---
 app/layouts/shell.tsx | 228 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 217 insertions(+), 11 deletions(-)

diff --git a/app/layouts/shell.tsx b/app/layouts/shell.tsx
index 1eb7d85..76b4240 100644
--- a/app/layouts/shell.tsx
+++ b/app/layouts/shell.tsx
@@ -1,10 +1,15 @@
+import { Icon } from "@iconify/react";
 import { Form, Outlet, redirect } from "react-router";
 
 import Button from "~/components/Button";
 import Card from "~/components/Card";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
+import Link from "~/components/Link";
+import Options from "~/components/Options";
 import { Capabilities } from "~/server/web/roles";
+import toast from "~/utils/toast";
+import { getUserDisplayName } from "~/utils/user";
 
 import { Route } from "./+types/shell";
 
@@ -26,6 +31,7 @@ export async function loader({ request, context }: Route.LoaderArgs) {
     const apiKey = context.auth.getHeadscaleApiKey(principal, context.oidc?.apiKey);
     const api = context.hsApi.getRuntimeClient(apiKey);
     const check = context.auth.can(principal, Capabilities.ui_access);
+    const noAccess = !check && principal.kind === "oidc";
 
     const user =
       principal.kind === "oidc"
@@ -38,6 +44,43 @@ export async function loader({ request, context }: Route.LoaderArgs) {
           }
         : { subject: "api_key", name: principal.displayName };
 
+    let linkedUserName: string | undefined;
+    let osValue: string | undefined;
+
+    if (noAccess && principal.kind === "oidc") {
+      const hsUserId = principal.user.headscaleUserId;
+      if (hsUserId) {
+        try {
+          const apiUsers = await api.getUsers();
+          const hsUser = apiUsers.find((u) => u.id === hsUserId);
+          linkedUserName = hsUser ? getUserDisplayName(hsUser) : undefined;
+        } catch {
+          // API unavailable, skip linked user resolution
+        }
+      }
+
+      const userAgent = request.headers.get("user-agent");
+      const os = userAgent?.match(/(Linux|Windows|Mac OS X|iPhone|iPad|Android)/);
+      switch (os?.[0]) {
+        case "Windows":
+          osValue = "windows";
+          break;
+        case "Mac OS X":
+          osValue = "macos";
+          break;
+        case "iPhone":
+        case "iPad":
+          osValue = "ios";
+          break;
+        case "Android":
+          osValue = "android";
+          break;
+        default:
+          osValue = "linux";
+          break;
+      }
+    }
+
     return {
       config: context.hs.c,
       url: context.config.headscale.public_url ?? context.config.headscale.url,
@@ -53,7 +96,9 @@ export async function loader({ request, context }: Route.LoaderArgs) {
         settings: context.auth.can(principal, Capabilities.read_feature),
       },
       onboarding: request.url.endsWith("/onboarding"),
-      noAccess: !check && principal.kind === "oidc",
+      noAccess,
+      linkedUserName,
+      osValue,
       healthy: await api.isHealthy(),
     };
   } catch {
@@ -71,18 +116,179 @@ export default function Shell({ loaderData }: Route.ComponentProps) {
       <>
         <Header {...loaderData} />
         <main className="container mx-auto mt-4 mb-24 overscroll-contain">
-          <div className="mx-auto mt-24 max-w-lg">
-            <Card variant="flat">
-              <Card.Title className="mb-4">No Access</Card.Title>
+          <div className="mx-auto mt-12 grid w-fit grid-cols-1 gap-4 md:grid-cols-2">
+            {loaderData.linkedUserName ? (
+              <Card className="col-span-1 mx-auto max-w-lg md:col-span-2" variant="flat">
+                <p className="text-sm">
+                  ✓ Your account is linked to Headscale user{" "}
+                  <strong>{loaderData.linkedUserName}</strong>.
+                </p>
+              </Card>
+            ) : undefined}
+            <Card className="max-w-lg" variant="flat">
+              <Card.Title className="mb-8">
+                Access your network
+                <br />
+                via Tailscale
+              </Card.Title>
               <Card.Text>
-                Your account doesn't have permission to access the dashboard. Contact an
-                administrator if you need access.
+                You don't have dashboard access, but you can still connect to your Headscale
+                network. Install Tailscale on your device to get started.
               </Card.Text>
-              <Form action="/logout" className="mt-6" method="POST">
-                <Button className="w-full" type="submit" variant="light">
-                  Sign out
-                </Button>
-              </Form>
+
+              <Options
+                className="my-4"
+                defaultSelectedKey={loaderData.osValue ?? "linux"}
+                label="Download Selector"
+              >
+                <Options.Item
+                  key="linux"
+                  title={
+                    <div className="flex items-center gap-1">
+                      <Icon className="ml-1 w-4" icon="ion:terminal" />
+                      <span>Linux</span>
+                    </div>
+                  }
+                >
+                  <Button
+                    className="text-md flex font-mono"
+                    onPress={async () => {
+                      await navigator.clipboard.writeText(
+                        "curl -fsSL https://tailscale.com/install.sh | sh",
+                      );
+                      toast("Copied to clipboard");
+                    }}
+                  >
+                    curl -fsSL https://tailscale.com/install.sh | sh
+                  </Button>
+                  <p className="text-headplane-600 dark:text-headplane-300 mt-1 text-center text-xs">
+                    Click this button to copy the command.{" "}
+                    <Link
+                      name="Linux installation script"
+                      to="https://github.com/tailscale/tailscale/blob/main/scripts/installer.sh"
+                    >
+                      View script source
+                    </Link>
+                  </p>
+                </Options.Item>
+                <Options.Item
+                  key="windows"
+                  title={
+                    <div className="flex items-center gap-1">
+                      <Icon className="ml-1 w-4" icon="mdi:microsoft" />
+                      <span>Windows</span>
+                    </div>
+                  }
+                >
+                  <a
+                    aria-label="Download for Windows"
+                    href="https://pkgs.tailscale.com/stable/tailscale-setup-latest.exe"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <Button className="my-4 w-full" variant="heavy">
+                      Download for Windows
+                    </Button>
+                  </a>
+                  <p className="text-headplane-600 dark:text-headplane-300 text-center text-sm">
+                    Requires Windows 10 or later.
+                  </p>
+                </Options.Item>
+                <Options.Item
+                  key="macos"
+                  title={
+                    <div className="flex items-center gap-1">
+                      <Icon className="ml-1 w-4" icon="streamline-logos:mac-finder-logo-solid" />
+                      <span>macOS</span>
+                    </div>
+                  }
+                >
+                  <a
+                    aria-label="Download for macOS"
+                    href="https://pkgs.tailscale.com/stable/Tailscale-latest-macos.pkg"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <Button className="my-4 w-full" variant="heavy">
+                      Download for macOS
+                    </Button>
+                  </a>
+                  <p className="text-headplane-600 dark:text-headplane-300 text-center text-sm">
+                    Requires macOS Big Sur 11.0 or later.
+                    <br />
+                    You can also download Tailscale on the{" "}
+                    <Link
+                      name="macOS App Store"
+                      to="https://apps.apple.com/ca/app/tailscale/id1475387142"
+                    >
+                      macOS App Store
+                    </Link>
+                    {"."}
+                  </p>
+                </Options.Item>
+                <Options.Item
+                  key="ios"
+                  title={
+                    <div className="flex items-center gap-1">
+                      <Icon className="ml-1 w-4" icon="grommet-icons:apple" />
+                      <span>iOS</span>
+                    </div>
+                  }
+                >
+                  <a
+                    aria-label="Download for iOS"
+                    href="https://apps.apple.com/us/app/tailscale/id1470499037"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <Button className="my-4 w-full" variant="heavy">
+                      Download for iOS
+                    </Button>
+                  </a>
+                  <p className="text-headplane-600 dark:text-headplane-300 text-center text-sm">
+                    Requires iOS 15 or later.
+                  </p>
+                </Options.Item>
+                <Options.Item
+                  key="android"
+                  title={
+                    <div className="flex items-center gap-1">
+                      <Icon className="ml-1 w-4" icon="material-symbols:android" />
+                      <span>Android</span>
+                    </div>
+                  }
+                >
+                  <a
+                    aria-label="Download for Android"
+                    href="https://play.google.com/store/apps/details?id=com.tailscale.ipn"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <Button className="my-4 w-full" variant="heavy">
+                      Download for Android
+                    </Button>
+                  </a>
+                  <p className="text-headplane-600 dark:text-headplane-300 text-center text-sm">
+                    Requires Android 8 or later.
+                  </p>
+                </Options.Item>
+              </Options>
+            </Card>
+            <Card className="max-w-lg" variant="flat">
+              <div className="flex h-full flex-col justify-between">
+                <div>
+                  <Card.Title className="mb-4">Need dashboard access?</Card.Title>
+                  <Card.Text>
+                    Your account is signed in but doesn't have permission to manage the dashboard.
+                    Contact an administrator to request access.
+                  </Card.Text>
+                </div>
+                <Form action="/logout" className="mt-6" method="POST">
+                  <Button className="w-full" type="submit" variant="light">
+                    Sign out
+                  </Button>
+                </Form>
+              </div>
             </Card>
           </div>
         </main>