connections page overhaul

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/badge/index.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];

src/lib/opnsense/wg.ts

@@ -12,6 +12,31 @@ export interface PeerRow {
 	ifname: string;
 }
 
+/**
+ * Sample response from OPNsense WireGuard API
+ * ```json
+ * {
+ *   "total": 17,
+ *     "rowCount": 7,
+ *     "current": 1,
+ *     "rows": [
+ *   {
+ *     "if": "wg0",
+ *     "type": "peer",
+ *     "public-key": "iJa5JmJbMHNlbEluNwoB2Q8LyrPAfb7S/mluanMcI08=",
+ *     "endpoint": "10.17.20.107:42516",
+ *     "allowed-ips": "fd00::1/112,10.6.0.3/32",
+ *     "latest-handshake": 1729319339,
+ *     "transfer-rx": 1052194743,
+ *     "transfer-tx": 25203263456,
+ *     "persistent-keepalive": "off",
+ *     "name": "Yura-TPX13",
+ *     "ifname": "wg0"
+ *   }
+ * ]
+ * }
+ * ```
+ */
 export interface OpnsenseWgPeers {
 	total: number;
 	rowCount: number;
@@ -19,38 +44,18 @@ export interface OpnsenseWgPeers {
 	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": "fd00::1/112,10.6.0.3/32",
-//     "latest-handshake": 1729319339,
-//     "transfer-rx": 1052194743,
-//     "transfer-tx": 25203263456,
-//     "persistent-keepalive": "off",
-//     "name": "Yura-TPX13",
-//     "ifname": "wg0"
-//   }
-// ]
-// }
+/**
+ * Sample request to OPNsense WireGuard API
+ * ```js
+ * const url = 'https://opnsense.home/api/wireguard/service/show';
+ * const options = {
+ *   method: 'POST',
+ *   headers: {
+ *     Authorization: 'Basic ...',
+ *     'Content-Type': 'application/json',
+ *     Accept: 'application/json',
+ *   },
+ *   body: '{"current":1,"rowCount":7,"sort":{},"searchPhrase":"","type":["peer"]}'
+ * };
+ * ```
+ */

src/lib/server/opnsense.ts

@@ -0,0 +1,16 @@
+import { env } from '$env/dynamic/private';
+import assert from 'node:assert';
+import { encodeBasicCredentials } from 'arctic/dist/request';
+import { dev } from '$app/environment';
+
+assert(env.OPNSENSE_API_URL, 'OPNSENSE_API_URL is not set');
+assert(env.OPNSENSE_API_KEY, 'OPNSENSE_API_KEY is not set');
+assert(env.OPNSENSE_API_SECRET, 'OPNSENSE_API_SECRET is not set');
+assert(env.OPNSENSE_WG_IFNAME, 'OPNSENSE_WG_IFNAME is not set');
+
+export const opnsenseUrl = env.OPNSENSE_API_URL;
+export const opnsenseAuth = "Basic " + encodeBasicCredentials(env.OPNSENSE_API_KEY, env.OPNSENSE_API_SECRET);
+export const opnsenseIfname = env.OPNSENSE_WG_IFNAME;
+
+// unset secret for security
+if (!dev) env.OPNSENSE_API_SECRET = "";