-
- {loaderData.magic ? (
-
-
-
- Since MagicDNS is enabled, you can access devices based
- on their name and also at{' '}
-
- [name].
- {loaderData.magic}
-
-
-
- ) : undefined}
-
-
- {/* We only want to show the version column if there are agents */}
- {loaderData.agent !== undefined ? (
-
+
+ {loaderData.magic ? (
+
+
+
+ Since MagicDNS is enabled, you can access devices based on their name and
+ also at{" "}
+
+ [name].
+ {loaderData.magic}
+
+
+
+ ) : undefined}
+
+
+ {/* We only want to show the version column if there are agents */}
+ {loaderData.agent !== undefined ? (
+
+
+ );
}
diff --git a/app/routes/users/onboarding.tsx b/app/routes/users/onboarding.tsx
index ee5ff33..dbbedd6 100644
--- a/app/routes/users/onboarding.tsx
+++ b/app/routes/users/onboarding.tsx
@@ -1,328 +1,314 @@
-import { Icon } from '@iconify/react';
-import { ArrowRight } from 'lucide-react';
-import { useEffect } from 'react';
-import { NavLink } from 'react-router';
-import Button from '~/components/Button';
-import Card from '~/components/Card';
-import Link from '~/components/Link';
-import Options from '~/components/Options';
-import StatusCircle from '~/components/StatusCircle';
-import { Machine } from '~/types';
-import cn from '~/utils/cn';
-import { useLiveData } from '~/utils/live-data';
-import log from '~/utils/log';
-import toast from '~/utils/toast';
-import type { Route } from './+types/onboarding';
+import { Icon } from "@iconify/react";
+import { ArrowRight } from "lucide-react";
+import { useEffect } from "react";
+import { NavLink } from "react-router";
+
+import Button from "~/components/Button";
+import Card from "~/components/Card";
+import Link from "~/components/Link";
+import Options from "~/components/Options";
+import StatusCircle from "~/components/StatusCircle";
+import { Machine } from "~/types";
+import cn from "~/utils/cn";
+import { useLiveData } from "~/utils/live-data";
+import log from "~/utils/log";
+import toast from "~/utils/toast";
+
+import type { Route } from "./+types/onboarding";
export async function loader({ request, context }: Route.LoaderArgs) {
- const session = await context.sessions.auth(request);
+ const session = await context.sessions.auth(request);
- // Try to determine the OS split between Linux, Windows, macOS, iOS, and Android
- // We need to convert this to a known value to return it to the client so we can
- // automatically tab to the correct download button.
- const userAgent = request.headers.get('user-agent');
- const os = userAgent?.match(/(Linux|Windows|Mac OS X|iPhone|iPad|Android)/);
- let osValue = 'linux';
- switch (os?.[0]) {
- case 'Windows':
- osValue = 'windows';
- break;
- case 'Mac OS X':
- osValue = 'macos';
- break;
+ // Try to determine the OS split between Linux, Windows, macOS, iOS, and Android
+ // We need to convert this to a known value to return it to the client so we can
+ // automatically tab to the correct download button.
+ const userAgent = request.headers.get("user-agent");
+ const os = userAgent?.match(/(Linux|Windows|Mac OS X|iPhone|iPad|Android)/);
+ let osValue = "linux";
+ switch (os?.[0]) {
+ case "Windows":
+ osValue = "windows";
+ break;
+ case "Mac OS X":
+ osValue = "macos";
+ break;
- case 'iPhone':
- case 'iPad':
- osValue = 'ios';
- break;
+ case "iPhone":
+ case "iPad":
+ osValue = "ios";
+ break;
- case 'Android':
- osValue = 'android';
- break;
+ case "Android":
+ osValue = "android";
+ break;
- default:
- osValue = 'linux';
- break;
- }
+ default:
+ osValue = "linux";
+ break;
+ }
- const api = context.hsApi.getRuntimeClient(session.api_key);
- let firstMachine: Machine | undefined;
- try {
- const nodes = await api.getNodes();
- const node = nodes.find((n) => {
- if (n.user.provider !== 'oidc') {
- return false;
- }
+ const api = context.hsApi.getRuntimeClient(session.api_key);
+ let firstMachine: Machine | undefined;
+ try {
+ const nodes = await api.getNodes();
+ const node = nodes.find((n) => {
+ // Tag-only nodes have no user
+ if (!n.user || n.user.provider !== "oidc") {
+ return false;
+ }
- // For some reason, headscale makes providerID a url where the
- // last component is the subject, so we need to strip that out
- const subject = n.user.providerId?.split('/').pop();
- if (!subject) {
- return false;
- }
+ // For some reason, headscale makes providerID a url where the
+ // last component is the subject, so we need to strip that out
+ const subject = n.user.providerId?.split("/").pop();
+ if (!subject) {
+ return false;
+ }
- if (subject !== session.user.subject) {
- return false;
- }
+ if (subject !== session.user.subject) {
+ return false;
+ }
- return true;
- });
+ return true;
+ });
- firstMachine = node;
- } catch (e) {
- // If we cannot lookup nodes, we cannot proceed
- log.debug('api', 'Failed to lookup nodes %o', e);
- }
+ firstMachine = node;
+ } catch (e) {
+ // If we cannot lookup nodes, we cannot proceed
+ log.debug("api", "Failed to lookup nodes %o", e);
+ }
- return {
- user: session.user,
- osValue,
- firstMachine,
- };
+ return {
+ user: session.user,
+ osValue,
+ firstMachine,
+ };
}
export default function Page({
- loaderData: { user, osValue, firstMachine },
+ loaderData: { user, osValue, firstMachine },
}: Route.ComponentProps) {
- const { pause, resume } = useLiveData();
- useEffect(() => {
- if (firstMachine) {
- pause();
- } else {
- resume();
- }
- }, [firstMachine]);
+ const { pause, resume } = useLiveData();
+ useEffect(() => {
+ if (firstMachine) {
+ pause();
+ } else {
+ resume();
+ }
+ }, [firstMachine]);
- const subject = user.email ? (
- <>
- as {user.email}
-
- ) : (
- 'with your OIDC provider'
- );
+ const subject = user.email ? (
+ <>
+ as {user.email}
+
+ ) : (
+ "with your OIDC provider"
+ );
- return (
-
-
-
-
- Welcome!
-
- Let's get set up
-
-
- Install Tailscale and sign in {subject}. Once you sign in on a
- device, it will be automatically added to your Headscale network.
-
+ return (
+
+
+
+
+ Welcome!
+
+ Let's get set up
+
+
+ Install Tailscale and sign in {subject}. Once you sign in on a device, it will be
+ automatically added to your Headscale network.
+
-
-
-
- Linux
-
- }
- >
-
+ }
+ >
+
-
- Click this button to copy the command.{' '}
-
- View script source
-
-
+ )}
+
+
+
+
+
+
+ );
}
diff --git a/app/routes/users/overview.tsx b/app/routes/users/overview.tsx
index a7057b6..eb14eb0 100644
--- a/app/routes/users/overview.tsx
+++ b/app/routes/users/overview.tsx
@@ -1,147 +1,142 @@
-import { createHash } from 'node:crypto';
-import { useEffect, useState } from 'react';
-import { Capabilities } from '~/server/web/roles';
-import type { Machine, User } from '~/types';
-import cn from '~/utils/cn';
-import type { Route } from './+types/overview';
-import ManageBanner from './components/manage-banner';
-import UserRow from './components/user-row';
-import { userAction } from './user-actions';
+import { createHash } from "node:crypto";
+import { useEffect, useState } from "react";
+
+import type { Machine, User } from "~/types";
+
+import { Capabilities } from "~/server/web/roles";
+import cn from "~/utils/cn";
+
+import type { Route } from "./+types/overview";
+
+import ManageBanner from "./components/manage-banner";
+import UserRow from "./components/user-row";
+import { userAction } from "./user-actions";
interface UserMachine extends User {
- machines: Machine[];
+ machines: Machine[];
}
export async function loader({ request, context }: Route.LoaderArgs) {
- const session = await context.sessions.auth(request);
- const check = await context.sessions.check(request, Capabilities.read_users);
- if (!check) {
- // Not authorized to view this page
- throw new Error(
- 'You do not have permission to view this page. Please contact your administrator.',
- );
- }
+ const session = await context.sessions.auth(request);
+ const check = await context.sessions.check(request, Capabilities.read_users);
+ if (!check) {
+ // Not authorized to view this page
+ throw new Error(
+ "You do not have permission to view this page. Please contact your administrator.",
+ );
+ }
- const writablePermission = await context.sessions.check(
- request,
- Capabilities.write_users,
- );
+ const writablePermission = await context.sessions.check(request, Capabilities.write_users);
- const api = context.hsApi.getRuntimeClient(session.api_key);
- const [nodes, apiUsers] = await Promise.all([api.getNodes(), api.getUsers()]);
+ const api = context.hsApi.getRuntimeClient(session.api_key);
+ const [nodes, apiUsers] = await Promise.all([api.getNodes(), api.getUsers()]);
- const users = apiUsers.map((user) => ({
- ...user,
- machines: nodes.filter((node) => node.user.id === user.id),
- profilePicUrl:
- context.config.oidc?.profile_picture_source === 'gravatar'
- ? (() => {
- if (!user.email) {
- return undefined;
- }
+ const users = apiUsers.map((user) => ({
+ ...user,
+ machines: nodes.filter((node) => node.user?.id === user.id),
+ profilePicUrl:
+ context.config.oidc?.profile_picture_source === "gravatar"
+ ? (() => {
+ if (!user.email) {
+ return undefined;
+ }
- const emailHash = user.email.trim().toLowerCase();
- const hash = createHash('sha256').update(emailHash).digest('hex');
- return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon&r=x`;
- })()
- : user.profilePicUrl,
- }));
+ const emailHash = user.email.trim().toLowerCase();
+ const hash = createHash("sha256").update(emailHash).digest("hex");
+ return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon&r=x`;
+ })()
+ : user.profilePicUrl,
+ }));
- const roles = await Promise.all(
- users
- .sort((a, b) => a.name.localeCompare(b.name))
- .map(async (user) => {
- if (user.provider !== 'oidc') {
- return 'no-oidc';
- }
+ const roles = await Promise.all(
+ users
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map(async (user) => {
+ if (user.provider !== "oidc") {
+ return "no-oidc";
+ }
- if (user.provider === 'oidc' && user.providerId) {
- // For some reason, headscale makes providerID a url where the
- // last component is the subject, so we need to strip that out
- const subject = user.providerId.split('/').pop();
- if (!subject) {
- return 'invalid-oidc';
- }
+ if (user.provider === "oidc" && user.providerId) {
+ // For some reason, headscale makes providerID a url where the
+ // last component is the subject, so we need to strip that out
+ const subject = user.providerId.split("/").pop();
+ if (!subject) {
+ return "invalid-oidc";
+ }
- const role = await context.sessions.roleForSubject(subject);
- return role ?? 'no-role';
- }
+ const role = await context.sessions.roleForSubject(subject);
+ return role ?? "no-role";
+ }
- // No role means the user is not registered in Headplane, but they
- // are in Headscale. We also need to handle what happens if someone
- // logs into the UI and they don't have a Headscale setup.
- return 'no-role';
- }),
- );
+ // No role means the user is not registered in Headplane, but they
+ // are in Headscale. We also need to handle what happens if someone
+ // logs into the UI and they don't have a Headscale setup.
+ return "no-role";
+ }),
+ );
- let magic: string | undefined;
- if (context.hs.readable()) {
- if (context.hs.c?.dns.magic_dns) {
- magic = context.hs.c.dns.base_domain;
- }
- }
+ let magic: string | undefined;
+ if (context.hs.readable()) {
+ if (context.hs.c?.dns.magic_dns) {
+ magic = context.hs.c.dns.base_domain;
+ }
+ }
- return {
- writable: writablePermission, // whether the user can write to the API
- oidc: context.config.oidc
- ? {
- issuer: context.config.oidc.issuer,
- }
- : undefined,
- roles,
- magic,
- users,
- };
+ return {
+ writable: writablePermission, // whether the user can write to the API
+ oidc: context.config.oidc
+ ? {
+ issuer: context.config.oidc.issuer,
+ }
+ : undefined,
+ roles,
+ magic,
+ users,
+ };
}
export const action = userAction;
export default function Page({ loaderData }: Route.ComponentProps) {
- const [users, setUsers] = useState(loaderData.users);
+ const [users, setUsers] = useState(loaderData.users);
- // This useEffect is entirely for the purpose of updating the users when the
- // drag and drop changes the machines between users. It's pretty hacky, but
- // the idea is to treat data.users as the source of truth and update the
- // local state when it changes.
- useEffect(() => {
- setUsers(loaderData.users);
- }, [loaderData.users]);
+ // This useEffect is entirely for the purpose of updating the users when the
+ // drag and drop changes the machines between users. It's pretty hacky, but
+ // the idea is to treat data.users as the source of truth and update the
+ // local state when it changes.
+ useEffect(() => {
+ setUsers(loaderData.users);
+ }, [loaderData.users]);
- return (
- <>
-
Users
-
- Manage the users in your network and their permissions.
-