From 50e87ed8db28087f93892a9b10f170e5eb181306 Mon Sep 17 00:00:00 2001
From: lucarickli <luca@rickli.dev>
Date: Sat, 11 Jan 2025 18:37:49 +0100
Subject: [PATCH] more actions

---
 src/lib/api/headscale.ts                      |   2 -
 .../data/acl/AccessControlInfo.svelte         |  18 ++-
 src/lib/components/data/acl/CreateRule.svelte | 139 ++++++++++++++++++
 src/lib/components/data/acl/EditRule.svelte   |  98 +++++++-----
 src/lib/components/data/acl/RuleInfo.svelte   |   5 +-
 .../components/data/apikey/ApikeyInfo.svelte  |   4 +-
 src/lib/components/data/host/HostInfo.svelte  |  75 ++++++++++
 .../components/data/page/PageActions.svelte   |  37 +++--
 .../data/page/UserAndGroupInfo.svelte         |   2 +-
 src/lib/components/data/tag/CreateTag.svelte  |   4 +-
 src/routes/(app)/+page.svelte                 |   8 +-
 src/routes/(app)/+page.ts                     |   3 -
 12 files changed, 324 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/components/data/acl/CreateRule.svelte
 create mode 100644 src/lib/components/data/host/HostInfo.svelte

diff --git a/src/lib/api/headscale.ts b/src/lib/api/headscale.ts
index 7af5b39..653d219 100644
--- a/src/lib/api/headscale.ts
+++ b/src/lib/api/headscale.ts
@@ -716,8 +716,6 @@ export class Acl {
 		const p: V1Policy = policy?.length ? parse(stripJsonTrailingCommas(policy)) : undefined;
 		const comments = p as unknown as V1PolicyComments;
 
-		console.debug({ p, comments, policy });
-
 		return {
 			policy: p,
 			comments,
diff --git a/src/lib/components/data/acl/AccessControlInfo.svelte b/src/lib/components/data/acl/AccessControlInfo.svelte
index 8b5e23a..5ab570d 100644
--- a/src/lib/components/data/acl/AccessControlInfo.svelte
+++ b/src/lib/components/data/acl/AccessControlInfo.svelte
@@ -4,9 +4,13 @@
 	import type { Acl, User } from '$lib/api';
 	import RuleInfo from './RuleInfo.svelte';
 	import Plus from 'lucide-svelte/icons/plus';
+	import CreateRule from './CreateRule.svelte';
+	import { createEventDispatcher } from 'svelte';
 
 	export let acl: Acl;
 	export let users: User[] | undefined;
+
+	const dispatch = createEventDispatcher<{ close: undefined }>();
 </script>
 
 <Sheet.Root>
@@ -21,16 +25,20 @@
 
 		<ul class="menu">
 			<li>
-				<button disabled>
-					<Plus />
-					<span> Rule </span>
-				</button>
+				<CreateRule {acl} {users} on:submit={() => dispatch('close')}>
+					<svelte:fragment slot="trigger" let:builder>
+						<button {...builder} use:builder.action>
+							<Plus />
+							<span> Rule </span>
+						</button>
+					</svelte:fragment>
+				</CreateRule>
 			</li>
 		</ul>
 
 		<div class="!mt-8 space-y-4">
 			{#each acl?.acls || [] as rule}
-				<RuleInfo {acl} {users} {rule} />
+				<RuleInfo {acl} {users} {rule} on:close />
 			{/each}
 		</div>
 
diff --git a/src/lib/components/data/acl/CreateRule.svelte b/src/lib/components/data/acl/CreateRule.svelte
new file mode 100644
index 0000000..22e1fa1
--- /dev/null
+++ b/src/lib/components/data/acl/CreateRule.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { defaults, superForm } from 'sveltekit-superforms';
+	import { zod } from 'sveltekit-superforms/adapters';
+	import { createEventDispatcher } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { z } from 'zod';
+
+	import * as Select from '$lib/components/ui/select/index.js';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import { Textarea } from '$lib/components/ui/textarea';
+
+	import * as Form from '$lib/components/form';
+
+	import type { Acl, AclData, User } from '$lib/api';
+
+	import SelectRuleSource from './SelectRuleSource.svelte';
+	import SelectRuleTarget from './SelectRuleTarget.svelte';
+	import { errorToast, successToast } from '$lib/utils/toast';
+	import { formatError } from '$lib/utils/error';
+
+	export let acl: Acl;
+	export let users: User[] | undefined;
+
+	const dispatch = createEventDispatcher<{ submit: undefined }>();
+
+	let mainSheet: InstanceType<typeof Sheet.Root>;
+
+	const schema: z.ZodType<Omit<AclData['acls'][0], 'id'>> = z.object({
+		action: z.literal('accept'),
+		src: z.array(z.string()).min(1),
+		dst: z.array(z.object({ host: z.string(), port: z.string() })).min(1),
+		comments: z.array(z.string()).default([])
+	});
+
+	const formDefaults = defaults(zod(schema));
+	const form = superForm(
+		{ ...formDefaults, data: { ...formDefaults.data, action: 'accept' } },
+		{
+			SPA: true,
+			dataType: 'json',
+			invalidateAll: true,
+			validators: zod(schema),
+			async onUpdate({ form }) {
+				if (form.valid) {
+					try {
+						acl.acls.push({
+							...form.data,
+							id: '0'
+						});
+
+						const { error } = await acl.save();
+						if (error) throw error;
+
+						successToast('Created new rule');
+						dispatch('submit');
+						mainSheet.close();
+					} catch (err) {
+						console.error(err);
+						errorToast(formatError(err));
+					}
+				}
+			}
+		}
+	);
+
+	const { form: formData } = form;
+
+	const description = writable<string>('');
+
+	description.subscribe((desc) => {
+		formData.update((data) => ({ ...data, comments: desc.split(/\n{1,}/gm).map((i) => i.trim()) }));
+	});
+</script>
+
+<Sheet.Root bind:this={mainSheet}>
+	<Sheet.Trigger asChild let:builder>
+		<slot name="trigger" {builder} />
+	</Sheet.Trigger>
+
+	<Sheet.Content side="left">
+		<Sheet.Header>
+			<Sheet.Title>Create rule</Sheet.Title>
+		</Sheet.Header>
+
+		<Form.Root {form} submitText="Create">
+			<Form.Field {form} name="action" let:constraints>
+				<Form.Control let:attrs>
+					<Form.Label>Action</Form.Label>
+					<Select.Root {...attrs} {...constraints} selected={{ label: 'accept', value: 'accept' }}>
+						<Select.Trigger>
+							<Select.Value />
+						</Select.Trigger>
+
+						<Select.Content class="!mt-0">
+							<Select.Group>
+								<Select.Item value="accept">accept</Select.Item>
+							</Select.Group>
+						</Select.Content>
+					</Select.Root>
+				</Form.Control>
+			</Form.Field>
+
+			<Form.Field {form} name="src" let:constraints>
+				<Form.Control let:attrs>
+					<Form.Label class="required" for={attrs.id}>Source</Form.Label>
+					<SelectRuleSource
+						{...attrs}
+						{...constraints}
+						{acl}
+						{users}
+						bind:selected={$formData.src}
+					/>
+					<Form.FieldErrors />
+				</Form.Control>
+			</Form.Field>
+
+			<Form.Field {form} name="dst" let:constraints>
+				<Form.Control let:attrs>
+					<Form.Label class="required" for={attrs.id}>Destination</Form.Label>
+					<SelectRuleTarget
+						{...attrs}
+						{...constraints}
+						{acl}
+						{users}
+						bind:selected={$formData.dst}
+					/>
+					<Form.FieldErrors />
+				</Form.Control>
+			</Form.Field>
+
+			<Form.Field {form} name="comments" let:constraints>
+				<Form.Control let:attrs>
+					<Form.Label for={attrs.id}>Description</Form.Label>
+					<Textarea {...attrs} {...constraints} bind:value={$description} />
+				</Form.Control>
+			</Form.Field>
+		</Form.Root>
+	</Sheet.Content>
+</Sheet.Root>
diff --git a/src/lib/components/data/acl/EditRule.svelte b/src/lib/components/data/acl/EditRule.svelte
index bcc2df6..01e25c3 100644
--- a/src/lib/components/data/acl/EditRule.svelte
+++ b/src/lib/components/data/acl/EditRule.svelte
@@ -15,6 +15,8 @@
 
 	import SelectRuleSource from './SelectRuleSource.svelte';
 	import SelectRuleTarget from './SelectRuleTarget.svelte';
+	import { errorToast, successToast } from '$lib/utils/toast';
+	import { formatError } from '$lib/utils/error';
 
 	export let acl: Acl;
 	export let users: User[] | undefined;
@@ -22,6 +24,8 @@
 
 	const dispatch = createEventDispatcher<{ submit: undefined }>();
 
+	let mainSheet: InstanceType<typeof Sheet.Root>;
+
 	const schema: z.ZodType<Omit<AclData['acls'][0], 'id'>> = z.object({
 		action: z.literal('accept'),
 		src: z.array(z.string()),
@@ -29,40 +33,46 @@
 		comments: z.array(z.string()).default([])
 	});
 
-	const form = superForm(defaults(zod(schema)), {
-		SPA: true,
-		dataType: 'json',
-		invalidateAll: true,
-		validators: zod(schema),
-		async onUpdate({ form }) {
-			if (form.valid) {
-				console.debug('form is valid');
-				dispatch('submit');
+	const formDefaults = defaults(zod(schema));
+	const form = superForm(
+		{ ...formDefaults, data: rule },
+		{
+			SPA: true,
+			dataType: 'json',
+			invalidateAll: true,
+			validators: zod(schema),
+			async onUpdate({ form }) {
+				if (form.valid) {
+					try {
+						acl.acls = acl.acls.map((acl) =>
+							acl.id === rule.id ? { ...rule, ...form.data } : rule
+						);
+
+						const { error } = await acl.save();
+						if (error) throw error;
+
+						successToast(`Saved rule ${rule.id}`);
+						dispatch('submit');
+						mainSheet.close();
+					} catch (err) {
+						console.error(err);
+						errorToast(formatError(err));
+					}
+				}
 			}
 		}
-	});
+	);
 
-	const { form: formData, constraints } = form;
+	const { form: formData } = form;
 
-	const description = writable<string>(rule.comments?.join('\n') || '');
+	const description = writable<string>(rule.comments?.join('\n\n') || '');
 
 	description.subscribe((desc) => {
 		formData.update((data) => ({ ...data, comments: desc.split(/\n{1,}/gm) }));
 	});
-
-	export function reset() {
-		formData.set({
-			action: 'accept',
-			src: rule.src,
-			dst: rule.dst,
-			comments: get(description).split(/\n{2,}/gm)
-		});
-	}
-
-	reset();
 </script>
 
-<Sheet.Root>
+<Sheet.Root bind:this={mainSheet}>
 	<Sheet.Trigger asChild let:builder>
 		<slot name="trigger" {builder} />
 	</Sheet.Trigger>
@@ -72,12 +82,11 @@
 			<Sheet.Title>Edit rule</Sheet.Title>
 		</Sheet.Header>
 
-		<Form.Root {form} {reset} submitText="Save">
-			<Form.Field {form} name="action">
+		<Form.Root {form} submitText="Save">
+			<Form.Field {form} name="action" let:constraints>
 				<Form.Control let:attrs>
 					<Form.Label>Action</Form.Label>
-
-					<Select.Root selected={{ label: 'accept', value: 'accept' }}>
+					<Select.Root {...attrs} {...constraints} selected={{ label: 'accept', value: 'accept' }}>
 						<Select.Trigger>
 							<Select.Value />
 						</Select.Trigger>
@@ -91,27 +100,38 @@
 				</Form.Control>
 			</Form.Field>
 
-			<Form.Field {form} name="src">
+			<Form.Field {form} name="src" let:constraints>
 				<Form.Control let:attrs>
-					<Form.Label for={attrs.id}>Source</Form.Label>
-
-					<SelectRuleSource {...attrs} {acl} {users} bind:selected={$formData.src} />
+					<Form.Label class="required" for={attrs.id}>Source</Form.Label>
+					<SelectRuleSource
+						{...attrs}
+						{...constraints}
+						{acl}
+						{users}
+						bind:selected={$formData.src}
+					/>
+					<Form.FieldErrors />
 				</Form.Control>
 			</Form.Field>
 
-			<Form.Field {form} name="dst">
+			<Form.Field {form} name="dst" let:constraints>
 				<Form.Control let:attrs>
-					<Form.Label for={attrs.id}>Destination</Form.Label>
-
-					<SelectRuleTarget {...attrs} {acl} {users} bind:selected={$formData.dst} />
+					<Form.Label class="required" for={attrs.id}>Destination</Form.Label>
+					<SelectRuleTarget
+						{...attrs}
+						{...constraints}
+						{acl}
+						{users}
+						bind:selected={$formData.dst}
+					/>
+					<Form.FieldErrors />
 				</Form.Control>
 			</Form.Field>
 
-			<Form.Field {form} name="comments">
+			<Form.Field {form} name="comments" let:constraints>
 				<Form.Control let:attrs>
 					<Form.Label for={attrs.id}>Description</Form.Label>
-
-					<Textarea {...attrs} {...$constraints.comments} bind:value={$description} />
+					<Textarea {...attrs} {...constraints} bind:value={$description} />
 				</Form.Control>
 			</Form.Field>
 		</Form.Root>
diff --git a/src/lib/components/data/acl/RuleInfo.svelte b/src/lib/components/data/acl/RuleInfo.svelte
index 512d0cb..d2e711c 100644
--- a/src/lib/components/data/acl/RuleInfo.svelte
+++ b/src/lib/components/data/acl/RuleInfo.svelte
@@ -12,11 +12,14 @@
 	import { Label } from '$lib/components/ui/label';
 
 	import EditRule from './EditRule.svelte';
+	import { createEventDispatcher } from 'svelte';
 
 	export let acl: Acl;
 	export let users: User[] | undefined;
 	export let rule: AclData['acls'][0];
 	export let prefixes: { in: Set<string>; out: Set<string> } | undefined = undefined;
+
+	const dispatch = createEventDispatcher<{ close: undefined }>();
 </script>
 
 <div class="space-y-3 border-b pb-5 last:border-b-0 [&>div]:space-y-2">
@@ -24,7 +27,7 @@
 		<div class="flex items-center justify-between gap-2">
 			<Label>Source</Label>
 			<div class="flex items-center gap-1.5">
-				<EditRule {rule} {acl} {users}>
+				<EditRule {rule} {acl} {users} on:submit={() => dispatch('close')}>
 					<svelte:fragment slot="trigger" let:builder>
 						<button
 							{...builder}
diff --git a/src/lib/components/data/apikey/ApikeyInfo.svelte b/src/lib/components/data/apikey/ApikeyInfo.svelte
index a776559..8c703aa 100644
--- a/src/lib/components/data/apikey/ApikeyInfo.svelte
+++ b/src/lib/components/data/apikey/ApikeyInfo.svelte
@@ -18,7 +18,7 @@
 
 	export let apikeys: ApiKey[] | undefined = undefined;
 
-	const dispatch = createEventDispatcher<{ submit: undefined }>();
+	const dispatch = createEventDispatcher<{ close: undefined }>();
 
 	if (!apikeys) {
 		ApiKey.list().then(({ data }) => {
@@ -34,7 +34,7 @@
 			if (error) throw error;
 
 			successToast(`Expired API key "${key.prefix}..."`);
-			dispatch('submit');
+			dispatch('close');
 		} catch (err) {
 			console.error(err);
 			errorToast(formatError(err));
diff --git a/src/lib/components/data/host/HostInfo.svelte b/src/lib/components/data/host/HostInfo.svelte
new file mode 100644
index 0000000..5a548f2
--- /dev/null
+++ b/src/lib/components/data/host/HostInfo.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Acl, Machine } from '$lib/api';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Table from '$lib/components/ui/table';
+	import Plus from 'lucide-svelte/icons/plus';
+
+	export let acl: Acl;
+	export let machines: Machine[] | undefined;
+</script>
+
+<Sheet.Root>
+	<Sheet.Trigger asChild let:builder>
+		<slot name="trigger" {builder} />
+	</Sheet.Trigger>
+
+	<Sheet.Content>
+		<Sheet.Header>
+			<Sheet.Title>Hosts</Sheet.Title>
+		</Sheet.Header>
+
+		<ul class="menu">
+			<li>
+				<button disabled>
+					<Plus />
+					<span> Host </span>
+				</button>
+			</li>
+		</ul>
+
+		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Name</Table.Head>
+					<Table.Head>CIDR</Table.Head>
+				</Table.Row>
+			</Table.Header>
+
+			<Table.Body>
+				{#each acl.hosts || [] as host}
+					<Table.Row>
+						<Table.Cell>
+							{host.name}
+						</Table.Cell>
+
+						<Table.Cell>
+							{host.cidr}
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
+
+		<!-- <Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Name</Table.Head>
+				</Table.Row>
+			</Table.Header>
+
+			<Table.Body>
+				{#each machines || [] as machine}
+					<Table.Row>
+						<Table.Cell>
+							<button class="link">
+								{machine.givenName}
+							</button>
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root> -->
+
+		<slot />
+	</Sheet.Content>
+</Sheet.Root>
diff --git a/src/lib/components/data/page/PageActions.svelte b/src/lib/components/data/page/PageActions.svelte
index b365a7a..bcb7285 100644
--- a/src/lib/components/data/page/PageActions.svelte
+++ b/src/lib/components/data/page/PageActions.svelte
@@ -14,18 +14,21 @@
 	import Tag from 'lucide-svelte/icons/tag';
 	import X from 'lucide-svelte/icons/x';
 
-	import CreateUser from '$lib/components/data/user/CreateUser.svelte';
+	import AccessControlInfo from '$lib/components/data/acl/AccessControlInfo.svelte';
 	import ApikeyInfo from '$lib/components/data/apikey/ApikeyInfo.svelte';
+	import CreateUser from '$lib/components/data/user/CreateUser.svelte';
 	import TagInfo from '$lib/components/data/tag/TagInfo.svelte';
-	import UserAndGroupInfo from './UserAndGroupInfo.svelte';
-	import EndSession from './EndSession.svelte';
 
-	import type { Acl, User } from '$lib/api';
+	import type { Acl, Machine, User } from '$lib/api';
 	import { base } from '$app/paths';
-	import AccessControlInfo from '../acl/AccessControlInfo.svelte';
+
+	import MachineAndHostInfo from '../host/HostInfo.svelte';
+	import UserAndGroupInfo from './UserAndGroupInfo.svelte';
+	import EndSession from './EndSession.svelte';
 
 	export let acl: Acl;
 	export let users: User[] | undefined;
+	export let machines: Machine[] | undefined;
 
 	const dispatch = createEventDispatcher<{ close: undefined }>();
 </script>
@@ -62,7 +65,7 @@
 <hr />
 
 <li>
-	<AccessControlInfo {acl} {users}>
+	<AccessControlInfo {acl} {users} on:close>
 		<svelte:fragment slot="trigger" let:builder>
 			<button {...builder} use:builder.action>
 				<Lock />
@@ -73,14 +76,7 @@
 </li>
 
 <li>
-	<button disabled>
-		<Network />
-		<span>Machines, Hosts</span>
-	</button>
-</li>
-
-<li>
-	<UserAndGroupInfo {acl} {users} on:close={() => dispatch('close')}>
+	<UserAndGroupInfo {acl} {users} on:close>
 		<svelte:fragment slot="trigger" let:builder>
 			<button {...builder} use:builder.action>
 				<Users />
@@ -90,6 +86,17 @@
 	</UserAndGroupInfo>
 </li>
 
+<li>
+	<MachineAndHostInfo {machines} {acl}>
+		<svelte:fragment slot="trigger" let:builder>
+			<button {...builder} use:builder.action>
+				<Network />
+				<span>Hosts</span>
+			</button>
+		</svelte:fragment>
+	</MachineAndHostInfo>
+</li>
+
 <li>
 	<TagInfo {acl}>
 		<svelte:fragment slot="trigger" let:builder>
@@ -109,7 +116,7 @@
 </li>
 
 <li>
-	<ApikeyInfo on:submit={() => dispatch('close')}>
+	<ApikeyInfo on:close>
 		<svelte:fragment slot="trigger" let:builder>
 			<button {...builder} use:builder.action>
 				<KeyRound />
diff --git a/src/lib/components/data/page/UserAndGroupInfo.svelte b/src/lib/components/data/page/UserAndGroupInfo.svelte
index ebe579c..6da057b 100644
--- a/src/lib/components/data/page/UserAndGroupInfo.svelte
+++ b/src/lib/components/data/page/UserAndGroupInfo.svelte
@@ -3,8 +3,8 @@
 	import Trash from 'lucide-svelte/icons/trash-2';
 	import Plus from 'lucide-svelte/icons/plus';
 
-	import * as Table from '$lib/components/ui/table';
 	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Table from '$lib/components/ui/table';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 
 	import { type User, type Acl } from '$lib/api';
diff --git a/src/lib/components/data/tag/CreateTag.svelte b/src/lib/components/data/tag/CreateTag.svelte
index 83ad49a..bb4facd 100644
--- a/src/lib/components/data/tag/CreateTag.svelte
+++ b/src/lib/components/data/tag/CreateTag.svelte
@@ -39,7 +39,9 @@
 			if (ev.form.valid && acl) {
 				acl.tagOwners.push(ev.form.data);
 				try {
-					await acl.save();
+					const { error } = await acl.save();
+					if (error) throw error;
+
 					successToast(`Created tag "${ev.form.data.name}"`);
 					dispatch('submit');
 					mainSheet.close();
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 4b2662d..1c4a541 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -51,7 +51,6 @@
 	const preAuthKeys = writable<PreAuthKey[]>([]);
 
 	page.subscribe(async ({ data }) => {
-		console.debug(data);
 		for (const err of data.errors || []) errorToast(formatError(err));
 		graphData.set(formatGraphData(data as PageData));
 		preAuthKeys.set(await PreAuthKey.list(data.users || []));
@@ -221,7 +220,12 @@
 </NetworkGraphActions>
 
 <NetworkGraphActions bind:this={pageActions}>
-	<PageActions on:close={pageActions.close} acl={data.acl} users={data.users} />
+	<PageActions
+		on:close={pageActions.close}
+		acl={data.acl}
+		users={data.users}
+		machines={data.machines}
+	/>
 </NetworkGraphActions>
 
 <Sheet.Root bind:this={linkInfo} let:close>
diff --git a/src/routes/(app)/+page.ts b/src/routes/(app)/+page.ts
index e68b056..e0e8cd7 100644
--- a/src/routes/(app)/+page.ts
+++ b/src/routes/(app)/+page.ts
@@ -11,9 +11,6 @@ export async function load({ data, fetch }) {
 		Acl.load(headscale)
 	]);
 
-	console.debug(acl.data.stringify());
-	console.debug(stringify(acl.data.acls));
-
 	return {
 		...(data || {}),
 		acl: acl.data,