opnsense connections page ui improvements

initial opnsense connections page
routing improvements
2024-11-02 01:53:11 -07:00 · 2024-11-02 01:26:41 -07:00 · 2024-11-02 00:53:16 -07:00 · 2024-11-02 00:34:21 -07:00 · 2024-11-01 00:06:33 -07:00 · 2024-10-31 02:38:33 -07:00
44 changed files with 933 additions and 13 deletions
--- a/.env.example
+++ b/.env.example
@ -1 +1,8 @@
 DATABASE_URL=local.db
 AUTH_DOMAIN=auth.lab.cazzzer.com
 AUTH_CLIENT_ID=
 AUTH_CLIENT_SECRET=
 AUTH_REDIRECT_URI=http://localhost:5173/auth/authentik/callback
 OPNSENSE_API_URL=https://opnsense.home
 OPNSENSE_API_KEY=
 OPNSENSE_API_SECRET=
--- a/bruno/bruno.json
+++ b/bruno/bruno.json
@ -0,0 +1,9 @@
 {
  "version": "1",
  "name": "vpgen",
  "type": "collection",
  "ignore": [
    "node_modules",
    ".git"
  ]
 }
--- a/bruno/collection.bru
+++ b/bruno/collection.bru
@ -0,0 +1,8 @@
 auth {
  mode: basic
 }
 auth:basic {
  username: {{opnsense_key}}
  password: {{opnsense_secret}}
 }
--- a/bruno/environments/dev.bru
+++ b/bruno/environments/dev.bru
@ -0,0 +1,6 @@
 vars {
  opnsense_key: 33NhXqaJwrWy1T4Qi60GK90RXJuS3PWIYwlwYPnQ8f5YPe/J1q/g6/l4bZ2/kJk71MFhwP+9mr+IiQPi
 }
 vars:secret [
  opnsense_secret
 ]
--- a/bruno/opnsense-api/Get
+++ b/bruno/opnsense-api/Get
@ -0,0 +1,28 @@
 meta {
  name: Get Interfaces
  type: http
  seq: 2
 }
 post {
  url: https://opnsense.home/api/wireguard/service/show
  body: json
  auth: inherit
 }
 headers {
  Content-Type: application/json
  Accept: application/json
 }
 body:json {
  {
    "current": 1,
    "rowCount": 7,
    "sort": {},
    "searchPhrase": "",
    "type": [
      "interface"
    ]
  }
 }
--- a/bruno/opnsense-api/Get
+++ b/bruno/opnsense-api/Get
@ -0,0 +1,28 @@
 meta {
  name: Get Peers
  type: http
  seq: 1
 }
 post {
  url: https://opnsense.home/api/wireguard/service/show
  body: json
  auth: inherit
 }
 headers {
  Content-Type: application/json
  Accept: application/json
 }
 body:json {
  {
    "current": 1,
    "rowCount": 7,
    "sort": {},
    "searchPhrase": "",
    "type": [
      "peer"
    ]
  }
 }
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -24,6 +24,7 @@
 		"@types/better-sqlite3": "^7.6.11",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "^0.21.16",
 		"clsx": "^2.1.1",
 		"drizzle-kit": "^0.22.0",
 		"eslint": "^9.7.0",
@ -45,7 +46,9 @@
 	"dependencies": {
 		"@oslojs/crypto": "^1.0.1",
 		"@oslojs/encoding": "^1.1.0",
 		"arctic": "^2.2.1",
 		"better-sqlite3": "^11.1.2",
-		"drizzle-orm": "^0.33.0"
+		"drizzle-orm": "^0.33.0",
 		"lucide-svelte": "^0.454.0"
 	}
 }
--- a/src/app.html
+++ b/src/app.html
@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@ -1,6 +1,7 @@
-import type { Handle } from '@sveltejs/kit';
+import { type Handle, redirect } from '@sveltejs/kit';
 import { dev } from '$app/environment';
-import * as auth from '$lib/server/auth.js';
+import * as auth from '$lib/server/auth';
 import { sequence } from '@sveltejs/kit/hooks';
 const handleAuth: Handle = async ({ event, resolve }) => {
 	const sessionId = event.cookies.get(auth.sessionCookieName);
@ -29,4 +30,17 @@ const handleAuth: Handle = async ({ event, resolve }) => {
 	return resolve(event);
 };
-export const handle: Handle = handleAuth;
+
 const authRequired = new Set([
 	'/user',
 	'/connections',
 	'/api/connections',
 ]);
 const handleProtectedPaths: Handle = ({ event, resolve }) => {
 	if (authRequired.has(event.url.pathname) && !event.locals.user) {
 		return redirect(302, '/');
 	}
 	return resolve(event);
 }
 export const handle: Handle = sequence(handleAuth, handleProtectedPaths);
--- a/src/lib/components/app/auth-form/auth-form.svelte
+++ b/src/lib/components/app/auth-form/auth-form.svelte
@ -0,0 +1,22 @@
 <script lang="ts">
 	import { LucideLoaderCircle } from 'lucide-svelte';
 	import { Button } from "$lib/components/ui/button";
 	import { cn } from "$lib/utils.js";
 	let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props();
 	let isLoading = $state(false);
 </script>
 <div class={cn("grid gap-6", className)} {...rest}>
 	<form method="get" action="/auth/authentik">
 		<Button type="submit" onclick={() => {isLoading=true}}>
 			{#if isLoading}
 				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 			{:else}
 				<img class="mr-2 h-4 w-4" alt="Authentik Logo" src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg" />
 			{/if}
 			Sign in with Authentik
 		</Button>
 	</form>
 </div>
--- a/src/lib/components/app/auth-form/index.ts
+++ b/src/lib/components/app/auth-form/index.ts
@ -0,0 +1,7 @@
 import Root from "./auth-form.svelte";
 export {
 	Root,
 	//
 	Root as AuthForm,
 };
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@ -0,0 +1,25 @@
 <script lang="ts">
 	import { Button as ButtonPrimitive } from "bits-ui";
 	import { type Events, type Props, buttonVariants } from "./index.js";
 	import { cn } from "$lib/utils.js";
 	type $$Props = Props;
 	type $$Events = Events;
 	let className: $$Props["class"] = undefined;
 	export let variant: $$Props["variant"] = "default";
 	export let size: $$Props["size"] = "default";
 	export let builders: $$Props["builders"] = [];
 	export { className as class };
 </script>
 <ButtonPrimitive.Root
 	{builders}
 	class={cn(buttonVariants({ variant, size, className }))}
 	type="button"
 	{...$$restProps}
 	on:click
 	on:keydown
 >
 	<slot />
 </ButtonPrimitive.Root>
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@ -0,0 +1,49 @@
 import { type VariantProps, tv } from "tailwind-variants";
 import type { Button as ButtonPrimitive } from "bits-ui";
 import Root from "./button.svelte";
 const buttonVariants = tv({
 	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 			outline:
 				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline",
 		},
 		size: {
 			default: "h-10 px-4 py-2",
 			sm: "h-9 rounded-md px-3",
 			lg: "h-11 rounded-md px-8",
 			icon: "h-10 w-10",
 		},
 	},
 	defaultVariants: {
 		variant: "default",
 		size: "default",
 	},
 });
 type Variant = VariantProps<typeof buttonVariants>["variant"];
 type Size = VariantProps<typeof buttonVariants>["size"];
 type Props = ButtonPrimitive.Props & {
 	variant?: Variant;
 	size?: Size;
 };
 type Events = ButtonPrimitive.Events;
 export {
 	Root,
 	type Props,
 	type Events,
 	//
 	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
 	buttonVariants,
 };
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@ -0,0 +1,35 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
 	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
 	type $$Props = CheckboxPrimitive.Props;
 	type $$Events = CheckboxPrimitive.Events;
 	let className: $$Props["class"] = undefined;
 	export let checked: $$Props["checked"] = false;
 	export { className as class };
 </script>
 <CheckboxPrimitive.Root
 	class={cn(
 		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked
 	{...$$restProps}
 	on:click
 >
 	<CheckboxPrimitive.Indicator
 		class={cn("flex h-4 w-4 items-center justify-center text-current")}
 		let:isChecked
 		let:isIndeterminate
 	>
 		{#if isChecked}
 			<Check class="h-3.5 w-3.5" />
 		{:else if isIndeterminate}
 			<Minus class="h-3.5 w-3.5" />
 		{/if}
 	</CheckboxPrimitive.Indicator>
 </CheckboxPrimitive.Root>
--- a/src/lib/components/ui/checkbox/index.ts
+++ b/src/lib/components/ui/checkbox/index.ts
@ -0,0 +1,6 @@
 import Root from "./checkbox.svelte";
 export {
 	Root,
 	//
 	Root as Checkbox,
 };
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@ -0,0 +1,29 @@
 import Root from "./input.svelte";
 export type FormInputEvent<T extends Event = Event> = T & {
 	currentTarget: EventTarget & HTMLInputElement;
 };
 export type InputEvents = {
 	blur: FormInputEvent<FocusEvent>;
 	change: FormInputEvent<Event>;
 	click: FormInputEvent<MouseEvent>;
 	focus: FormInputEvent<FocusEvent>;
 	focusin: FormInputEvent<FocusEvent>;
 	focusout: FormInputEvent<FocusEvent>;
 	keydown: FormInputEvent<KeyboardEvent>;
 	keypress: FormInputEvent<KeyboardEvent>;
 	keyup: FormInputEvent<KeyboardEvent>;
 	mouseover: FormInputEvent<MouseEvent>;
 	mouseenter: FormInputEvent<MouseEvent>;
 	mouseleave: FormInputEvent<MouseEvent>;
 	mousemove: FormInputEvent<MouseEvent>;
 	paste: FormInputEvent<ClipboardEvent>;
 	input: FormInputEvent<InputEvent>;
 	wheel: FormInputEvent<WheelEvent>;
 };
 export {
 	Root,
 	//
 	Root as Input,
 };
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@ -0,0 +1,42 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from "svelte/elements";
 	import type { InputEvents } from "./index.js";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLInputAttributes;
 	type $$Events = InputEvents;
 	let className: $$Props["class"] = undefined;
 	export let value: $$Props["value"] = undefined;
 	export { className as class };
 	// Workaround for https://github.com/sveltejs/svelte/issues/9305
 	// Fixed in Svelte 5, but not backported to 4.x.
 	export let readonly: $$Props["readonly"] = undefined;
 </script>
 <input
 	class={cn(
 		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
 	{readonly}
 	on:blur
 	on:change
 	on:click
 	on:focus
 	on:focusin
 	on:focusout
 	on:keydown
 	on:keypress
 	on:keyup
 	on:mouseover
 	on:mouseenter
 	on:mouseleave
 	on:mousemove
 	on:paste
 	on:input
 	on:wheel|passive
 	{...$$restProps}
 />
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@ -0,0 +1,7 @@
 import Root from "./label.svelte";
 export {
 	Root,
 	//
 	Root as Label,
 };
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@ -0,0 +1,21 @@
 <script lang="ts">
 	import { Label as LabelPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 	type $$Props = LabelPrimitive.Props;
 	type $$Events = LabelPrimitive.Events;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <LabelPrimitive.Root
 	class={cn(
 		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 		className
 	)}
 	{...$$restProps}
 	on:mousedown
 >
 	<slot />
 </LabelPrimitive.Root>
--- a/src/lib/components/ui/table/index.ts
+++ b/src/lib/components/ui/table/index.ts
@ -0,0 +1,28 @@
 import Root from "./table.svelte";
 import Body from "./table-body.svelte";
 import Caption from "./table-caption.svelte";
 import Cell from "./table-cell.svelte";
 import Footer from "./table-footer.svelte";
 import Head from "./table-head.svelte";
 import Header from "./table-header.svelte";
 import Row from "./table-row.svelte";
 export {
 	Root,
 	Body,
 	Caption,
 	Cell,
 	Footer,
 	Head,
 	Header,
 	Row,
 	//
 	Root as Table,
 	Body as TableBody,
 	Caption as TableCaption,
 	Cell as TableCell,
 	Footer as TableFooter,
 	Head as TableHead,
 	Header as TableHeader,
 	Row as TableRow,
 };
--- a/src/lib/components/ui/table/table-body.svelte
+++ b/src/lib/components/ui/table/table-body.svelte
@ -0,0 +1,13 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
 	<slot />
 </tbody>
--- a/src/lib/components/ui/table/table-caption.svelte
+++ b/src/lib/components/ui/table/table-caption.svelte
@ -0,0 +1,13 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <caption class={cn("text-muted-foreground mt-4 text-sm", className)} {...$$restProps}>
 	<slot />
 </caption>
--- a/src/lib/components/ui/table/table-cell.svelte
+++ b/src/lib/components/ui/table/table-cell.svelte
@ -0,0 +1,18 @@
 <script lang="ts">
 	import type { HTMLTdAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLTdAttributes;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <td
 	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 	{...$$restProps}
 	on:click
 	on:keydown
 >
 	<slot />
 </td>
--- a/src/lib/components/ui/table/table-footer.svelte
+++ b/src/lib/components/ui/table/table-footer.svelte
@ -0,0 +1,13 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <tfoot class={cn("bg-muted/50 text-primary-foreground font-medium", className)} {...$$restProps}>
 	<slot />
 </tfoot>
--- a/src/lib/components/ui/table/table-head.svelte
+++ b/src/lib/components/ui/table/table-head.svelte
@ -0,0 +1,19 @@
 <script lang="ts">
 	import type { HTMLThAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLThAttributes;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <th
 	class={cn(
 		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
 		className
 	)}
 	{...$$restProps}
 >
 	<slot />
 </th>
--- a/src/lib/components/ui/table/table-header.svelte
+++ b/src/lib/components/ui/table/table-header.svelte
@ -0,0 +1,14 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
 	<slot />
 </thead>
--- a/src/lib/components/ui/table/table-row.svelte
+++ b/src/lib/components/ui/table/table-row.svelte
@ -0,0 +1,23 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
 		"data-state"?: unknown;
 	};
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <tr
 	class={cn(
 		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 		className
 	)}
 	{...$$restProps}
 	on:click
 	on:keydown
 >
 	<slot />
 </tr>
--- a/src/lib/components/ui/table/table.svelte
+++ b/src/lib/components/ui/table/table.svelte
@ -0,0 +1,15 @@
 <script lang="ts">
 	import type { HTMLTableAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 	type $$Props = HTMLTableAttributes;
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 <div class="relative w-full overflow-auto">
 	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
 		<slot />
 	</table>
 </div>
--- a/src/lib/opnsense/wg.ts
+++ b/src/lib/opnsense/wg.ts
@ -0,0 +1,56 @@
 export interface PeerRow {
 	if: string;
 	type: "peer";
 	'public-key': string;
 	endpoint: string;
 	'allowed-ips': string;
 	'latest-handshake': number;
 	'transfer-rx': number;
 	'transfer-tx': number;
 	'persistent-keepalive': string;
 	name: string;
 	ifname: string;
 }
 export interface OpnsenseWgPeers {
 	total: number;
 	rowCount: number;
 	current: number;
 	rows: PeerRow[];
 }
 // Sample request to OPNsense WireGuard API
 // const url = 'https://opnsense.home/api/wireguard/service/show';
 // const options = {
 //   method: 'POST',
 //   headers: {
 //     Authorization: 'Basic ...',
 //     'Content-Type': 'application/json',
 //     Accept: 'application/json',
 //     'content-type': 'application/json'
 //   },
 //   body: '{"current":1,"rowCount":7,"sort":{},"searchPhrase":"","type":["peer"]}'
 // };
 // Sample response from OPNsense WireGuard API
 // {
 //   "total": 17,
 //     "rowCount": 7,
 //     "current": 1,
 //     "rows": [
 //   {
 //     "if": "wg0",
 //     "type": "peer",
 //     "public-key": "iJa5JmJbMHNlbEluNwoB2Q8LyrPAfb7S/mluanMcI08=",
 //     "endpoint": "10.17.20.107:42516",
 //     "allowed-ips": "2600:1700:115f:300d:0:6:3:0/112,10.6.0.3/32",
 //     "latest-handshake": 1729319339,
 //     "transfer-rx": 1052194743,
 //     "transfer-tx": 25203263456,
 //     "persistent-keepalive": "off",
 //     "name": "Yura-TPX13",
 //     "ifname": "wg0"
 //   }
 // ]
 // }
--- a/src/lib/server/auth.ts
+++ b/src/lib/server/auth.ts
@ -3,6 +3,8 @@ import { sha256 } from '@oslojs/crypto/sha2';
 import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
 import { db } from '$lib/server/db';
 import * as table from '$lib/server/db/schema';
 import type { RequestEvent } from '@sveltejs/kit';
 import { dev } from '$app/environment';
 const DAY_IN_MS = 1000 * 60 * 60 * 24;
@ -10,8 +12,7 @@ export const sessionCookieName = 'auth-session';
 function generateSessionToken(): string {
 	const bytes = crypto.getRandomValues(new Uint8Array(20));
-	const token = encodeBase32LowerCaseNoPadding(bytes);
+	return encodeBase32LowerCaseNoPadding(bytes);
 	return token;
 }
 export async function createSession(userId: string): Promise<table.Session> {
@ -26,15 +27,29 @@ export async function createSession(userId: string): Promise<table.Session> {
 	return session;
 }
 export function setSessionTokenCookie(event: RequestEvent, sessionId: string, expiresAt: Date) {
 	event.cookies.set(sessionCookieName, sessionId, {
 		path: '/',
 		sameSite: 'lax',
 		httpOnly: true,
 		expires: expiresAt,
 		secure: !dev,
 	});
 }
 export async function invalidateSession(sessionId: string): Promise<void> {
 	await db.delete(table.session).where(eq(table.session.id, sessionId));
 }
 export function deleteSessionTokenCookie(event: RequestEvent) {
 	event.cookies.delete(sessionCookieName, { path: '/' });
 }
 export async function validateSession(sessionId: string) {
 	const [result] = await db
 		.select({
 			// Adjust user table here to tweak returned data
-			user: { id: table.user.id, username: table.user.username },
+			user: { id: table.user.id, username: table.user.username, name: table.user.name },
 			session: table.session
 		})
 		.from(table.session)
--- a/src/lib/server/db/index.ts
+++ b/src/lib/server/db/index.ts
@ -1,6 +1,8 @@
 import { drizzle } from 'drizzle-orm/better-sqlite3';
 import Database from 'better-sqlite3';
 import { env } from '$env/dynamic/private';
-if (!env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
+import assert from 'node:assert';
 assert(env.DATABASE_URL, 'DATABASE_URL is not set');
 const client = new Database(env.DATABASE_URL);
 export const db = drizzle(client);
--- a/src/lib/server/db/schema.ts
+++ b/src/lib/server/db/schema.ts
@ -2,7 +2,8 @@ import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
 export const user = sqliteTable('user', {
 	id: text('id').primaryKey(),
-	age: integer('age')
+	username: text('username').notNull(),
 	name: text('name').notNull(),
 });
 export const session = sqliteTable('session', {
--- a/src/lib/server/oauth.ts
+++ b/src/lib/server/oauth.ts
@ -0,0 +1,9 @@
 import { Authentik } from 'arctic';
 import * as env from '$env/static/private';
 export const authentik = new Authentik(
 	env.AUTH_DOMAIN,
 	env.AUTH_CLIENT_ID,
 	env.AUTH_CLIENT_SECRET,
 	env.AUTH_REDIRECT_URI
 );
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@ -0,0 +1,9 @@
 import type { LayoutServerLoad } from "./$types";
 export const load: LayoutServerLoad = async (event) => {
 	const { user } = event.locals;
 	return {
 		user
 	};
 };
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,6 +1,34 @@
 <script lang="ts">
 	import '../app.css';
-	let { children } = $props();
+	import { page } from '$app/stores';
 	import { cn } from '$lib/utils';
 	const { data, children } = $props();
 	const { user } = data;
 	function getNavClass(path: string) {
 		return cn("hover:text-foreground/80 transition-colors",
 			$page.url.pathname === path ? "text-foreground" : "text-foreground/60");
 	}
 </script>
-{@render children()}
+<header class="p-4 sm:flex">
 	<span class=" mr-6 font-bold sm:inline-block">My App</span>
 	<nav class="flex items-center gap-6 text-sm">
 		<a href="/" class={getNavClass("/")}>Home</a>
 		{#if user}
 			<a href="/user" class={getNavClass("/user")}>Profile</a>
 			<a href="/connections" class={getNavClass("/connections")}>Connections</a>
 		{/if}
 	</nav>
 </header>
 <main class="flex-grow p-4">
 	{@render children()}
 </main>
 <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
 <!--Some shenanings needed to be done to get the footer position to stick correctly,
 didn't work with display: contents-->
 <footer class="p-4 relative text-center inset-x-0 bottom-0">
 	<p>&copy; 2024</p>
 </footer>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,2 +1,18 @@
 <script lang="ts">
 	import { AuthForm } from '$lib/components/app/auth-form';
 	const { data } = $props();
 	const { user } = data;
 </script>
 <svelte:head>
 	<title>VpGen</title>
 </svelte:head>
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+
 {#if user }
 	<p>Hi {user.name}</p>
 {:else}
 	<AuthForm class="p-4" />
 {/if}
--- a/src/routes/api/connections/+server.ts
+++ b/src/routes/api/connections/+server.ts
@ -0,0 +1,32 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { env } from '$env/dynamic/private';
 import type { OpnsenseWgPeers } from '$lib/opnsense/wg';
 export const GET: RequestHandler = async ({ url }) => {
 	const apiUrl = `${env.OPNSENSE_API_URL}/api/wireguard/service/show`;
 	const options: RequestInit = {
 		method: 'POST',
 		headers: {
 			Authorization: `Basic ${Buffer.from(`${env.OPNSENSE_API_KEY}:${env.OPNSENSE_API_SECRET}`).toString('base64')}`,
 			Accept: 'application/json',
 			'Content-Type': 'application/json',
 		},
 		body: JSON.stringify({
 			"current": 1,
 			// "rowCount": 7,
 			"sort": {},
 			"searchPhrase": "",
 			"type": ["peer"],
 		}),
 	};
 	console.log("Fetching peers from OPNsense WireGuard API: ", apiUrl, options)
 	const res = await fetch(apiUrl, options);
 	const peers = await res.json() as OpnsenseWgPeers;
 	if (!peers) {
 		error(500, "Error getting info from OPNsense API");
 	}
 	return new Response(JSON.stringify(peers));
 };
--- a/src/routes/auth/+page.server.ts
+++ b/src/routes/auth/+page.server.ts
@ -0,0 +1,14 @@
 import { fail, redirect } from "@sveltejs/kit";
 import { invalidateSession, deleteSessionTokenCookie } from "$lib/server/auth";
 import type { Actions } from "./$types";
 export const actions: Actions = {
 	logout: async (event) => {
 		if (event.locals.session === null) {
 			return fail(401);
 		}
 		await invalidateSession(event.locals.session.id);
 		deleteSessionTokenCookie(event);
 		return redirect(302, "/");
 	}
 };
--- a/src/routes/auth/authentik/+server.ts
+++ b/src/routes/auth/authentik/+server.ts
@ -0,0 +1,30 @@
 import { generateState, generateCodeVerifier } from "arctic";
 import { authentik } from "$lib/server/oauth";
 import type { RequestEvent } from "@sveltejs/kit";
 export async function GET(event: RequestEvent): Promise<Response> {
 	const state = generateState();
 	const codeVerifier = generateCodeVerifier();
 	const url = authentik.createAuthorizationURL(state, codeVerifier, ["openid", "profile"]);
 	event.cookies.set("authentik_oauth_state", state, {
 		path: "/",
 		httpOnly: true,
 		maxAge: 60 * 10, // 10 minutes
 		sameSite: "lax"
 	});
 	event.cookies.set("authentik_code_verifier", codeVerifier, {
 		path: "/",
 		httpOnly: true,
 		maxAge: 60 * 10, // 10 minutes
 		sameSite: "lax"
 	});
 	return new Response(null, {
 		status: 302,
 		headers: {
 			Location: url.toString()
 		}
 	});
 }
--- a/src/routes/auth/authentik/callback/+server.ts
+++ b/src/routes/auth/authentik/callback/+server.ts
@ -0,0 +1,78 @@
 import { createSession, setSessionTokenCookie } from "$lib/server/auth";
 import { authentik } from "$lib/server/oauth";
 import { decodeIdToken } from "arctic";
 import type { RequestEvent } from "@sveltejs/kit";
 import type { OAuth2Tokens } from "arctic";
 import { db } from '$lib/server/db';
 import { eq } from 'drizzle-orm';
 import * as table from '$lib/server/db/schema';
 export async function GET(event: RequestEvent): Promise<Response> {
 	const code = event.url.searchParams.get("code");
 	const state = event.url.searchParams.get("state");
 	const storedState = event.cookies.get("authentik_oauth_state") ?? null;
 	const codeVerifier = event.cookies.get("authentik_code_verifier") ?? null;
 	if (code === null || state === null || storedState === null || codeVerifier === null) {
 		return new Response(null, {
 			status: 400
 		});
 	}
 	if (state !== storedState) {
 		return new Response(null, {
 			status: 400
 		});
 	}
 	let tokens: OAuth2Tokens;
 	try {
 		tokens = await authentik.validateAuthorizationCode(code, codeVerifier);
 	} catch (e) {
 		// Invalid code or client credentials
 		return new Response(null, {
 			status: 400
 		});
 	}
 	const claims = decodeIdToken(tokens.idToken());
 	console.log("claims", claims);
 	const userId: string = claims.sub;
 	const username: string = claims.preferred_username;
 	const [existingUser] = await db.select().from(table.user).where(eq(table.user.id, userId));
 	if (existingUser) {
 		const session = await createSession(existingUser.id);
 		setSessionTokenCookie(event, session.id, session.expiresAt);
 		return new Response(null, {
 			status: 302,
 			headers: {
 				Location: "/"
 			}
 		});
 	}
 	const user: table.User = {
 		id: userId,
 		username,
 		name: claims.name as string,
 	};
 	try {
 		await db.insert(table.user).values(user);
 		const session = await createSession(user.id);
 		setSessionTokenCookie(event, session.id, session.expiresAt);
 	} catch (e) {
 		console.error('failed to create user', e);
 		return new Response(null, {
 			status: 500
 		});
 	}
 	return new Response(null, {
 		status: 302,
 		headers: {
 			Location: "/"
 		}
 	});
 }
--- a/src/routes/connections/+page.svelte
+++ b/src/routes/connections/+page.svelte
@ -0,0 +1,79 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { invalidate } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import * as Table from '$lib/components/ui/table';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { Label } from '$lib/components/ui/label';
 	const { data }: { data: PageData } = $props();
 	let showOnlyActive = $state(false);
 	const peerRows = $derived(data.peers.rows.filter((peer) => showOnlyActive ? peer['latest-handshake'] : true));
 	onMount(() => {
 		// refresh every 5 seconds
 		setInterval(() => {
 			console.log('Refreshing connections');
 			invalidate('/api/connections');
 		}, 5000);
 	});
 	function getSize(size: number) {
 		let sizes = ['Bytes', 'KiB', 'MiB', 'GiB',
 			'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
 		for (let i = 1; i < sizes.length; i++) {
 			if (size < Math.pow(1024, i))
 				return (Math.round((size / Math.pow(
 					1024, i - 1)) * 100) / 100) + ' ' + sizes[i - 1];
 		}
 		return size;
 	}
 </script>
 <svelte:head>
 	<title>Connections</title>
 </svelte:head>
 <Checkbox id="showOnlyActive" bind:checked={showOnlyActive} />
 <Label for="showOnlyActive">Show only active connections</Label>
 {#if peerRows.length === 0}
 	<p>No active connections</p>
 {:else}
 	<Table.Root class="bg-accent rounded-xl">
 		<Table.Header>
 			<Table.Head>Name</Table.Head>
 			<Table.Head>Public Key</Table.Head>
 			<Table.Head>Endpoint</Table.Head>
 			<Table.Head>Allowed IPs</Table.Head>
 			<Table.Head>Latest Handshake</Table.Head>
 			<Table.Head>RX</Table.Head>
 			<Table.Head>TX</Table.Head>
 			<Table.Head>Persistent Keepalive</Table.Head>
 			<Table.Head>Interface Name</Table.Head>
 		</Table.Header>
 		<Table.Body>
 			{#each peerRows as peer}
 				<Table.Row class="border-y-2 border-background">
 					<Table.Cell>{peer.name}</Table.Cell>
 					<Table.Cell>{peer['public-key'].substring(0, 10)}</Table.Cell>
 					<Table.Cell>{peer.endpoint}</Table.Cell>
 					<Table.Cell>{peer['allowed-ips']}</Table.Cell>
 					{#if peer['latest-handshake']}
 						<Table.Cell>{new Date(peer['latest-handshake'] * 1000).toLocaleString()}</Table.Cell>
 						<Table.Cell>{getSize(peer['transfer-rx'])}</Table.Cell>
 						<Table.Cell>{getSize(peer['transfer-tx'])}</Table.Cell>
 					{:else}
 						<Table.Cell>Never</Table.Cell>
 						<Table.Cell>--</Table.Cell>
 						<Table.Cell>--</Table.Cell>
 					{/if}
 					<Table.Cell>{peer['persistent-keepalive']}</Table.Cell>
 					<Table.Cell>{peer.ifname}</Table.Cell>
 				</Table.Row>
 			{/each}
 		</Table.Body>
 	</Table.Root>
 {/if}
--- a/src/routes/connections/+page.ts
+++ b/src/routes/connections/+page.ts
@ -0,0 +1,9 @@
 import type { PageLoad } from './$types';
 import type { OpnsenseWgPeers } from '$lib/opnsense/wg';
 export const load: PageLoad = async ({ fetch, params }) => {
 	const res = await fetch('/api/connections');
 	const peers = await res.json() as OpnsenseWgPeers;
 	return { peers };
 };
--- a/src/routes/user/+page.svelte
+++ b/src/routes/user/+page.svelte
@ -0,0 +1,40 @@
 <script lang="ts">
 	import { invalidate, invalidateAll } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import { LucideLoaderCircle, LucideLogOut, LucideRefreshCw } from 'lucide-svelte';
 	let { data } = $props();
 	let isLoadingSignOut = $state(false);
 	function refetch() {
 		console.log("refetching");
 		invalidate((url) => {
 			console.log("invalidation url", url);
 			return true;
 		});
 		invalidateAll();
 	}
 </script>
 <svelte:head>
 	<title>User Profile</title>
 </svelte:head>
 <p>
 	{JSON.stringify(data.user)}
 </p>
 <Button onclick={refetch}>
 		<LucideRefreshCw class="mr-2 h-4 w-4" />
 	Invalidate Data
 </Button>
 <form class="inline-flex" method="post" action="/auth?/logout">
 	<Button type="submit" onclick={() => {isLoadingSignOut = true}}>
 		{#if isLoadingSignOut}
 			<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 		{:else}
 			<LucideLogOut class="mr-2 h-4 w-4" />
 		{/if}
 		Sign Out
 	</Button>
 </form>
Author	SHA1	Message	Date
Yuri Tatishchev	cffeade642	opnsense connections page ui improvements	2024-11-02 01:53:11 -07:00
Yuri Tatishchev	2368fa4a1c	initial opnsense connections page	2024-11-02 01:26:41 -07:00
Yuri Tatishchev	3b2ed4ddea	routing improvements	2024-11-02 00:53:16 -07:00
Yuri Tatishchev	7169bf0fb1	layout improvements	2024-11-02 00:34:21 -07:00
Yuri Tatishchev	31d23c5e87	improve layout, nav; add sign out on user page	2024-11-01 00:06:33 -07:00
Yuri Tatishchev	5fc9cf25c8	some more authentik stuff	2024-10-31 02:38:33 -07:00
Yuri Tatishchev	0901e242eb	add authentik login	2024-10-31 02:00:57 -07:00
Yuri Tatishchev	aab19fa6c7	basic auth ui	2024-10-31 01:15:18 -07:00
Yuri Tatishchev	1759f30358	minor db schema, auth changes (prep)	2024-10-31 00:23:35 -07:00