Compare commits
5 Commits
5fc9cf25c8
...
cffeade642
Author | SHA1 | Date | |
---|---|---|---|
cffeade642 | |||
2368fa4a1c | |||
3b2ed4ddea | |||
7169bf0fb1 | |||
31d23c5e87 |
@ -3,3 +3,6 @@ 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=
|
||||
|
9
bruno/bruno.json
Normal file
9
bruno/bruno.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": "1",
|
||||
"name": "vpgen",
|
||||
"type": "collection",
|
||||
"ignore": [
|
||||
"node_modules",
|
||||
".git"
|
||||
]
|
||||
}
|
8
bruno/collection.bru
Normal file
8
bruno/collection.bru
Normal file
@ -0,0 +1,8 @@
|
||||
auth {
|
||||
mode: basic
|
||||
}
|
||||
|
||||
auth:basic {
|
||||
username: {{opnsense_key}}
|
||||
password: {{opnsense_secret}}
|
||||
}
|
6
bruno/environments/dev.bru
Normal file
6
bruno/environments/dev.bru
Normal file
@ -0,0 +1,6 @@
|
||||
vars {
|
||||
opnsense_key: 33NhXqaJwrWy1T4Qi60GK90RXJuS3PWIYwlwYPnQ8f5YPe/J1q/g6/l4bZ2/kJk71MFhwP+9mr+IiQPi
|
||||
}
|
||||
vars:secret [
|
||||
opnsense_secret
|
||||
]
|
28
bruno/opnsense-api/Get Interfaces.bru
Normal file
28
bruno/opnsense-api/Get Interfaces.bru
Normal file
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
28
bruno/opnsense-api/Get Peers.bru
Normal file
28
bruno/opnsense-api/Get Peers.bru
Normal file
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
@ -7,6 +7,6 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents" class="flex flex-col min-h-screen">%sveltekit.body%</div>
|
||||
<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -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';
|
||||
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);
|
||||
|
@ -6,25 +6,17 @@
|
||||
let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props();
|
||||
|
||||
let isLoading = $state(false);
|
||||
async function onSubmit() {
|
||||
// event.preventDefault();
|
||||
isLoading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
isLoading = false;
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={cn("grid gap-6", className)} {...rest}>
|
||||
<a href="/auth/authentik">
|
||||
<Button disabled={isLoading} onclick={onSubmit}>
|
||||
<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}
|
||||
Authentik
|
||||
Sign in with Authentik
|
||||
</Button>
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
|
35
src/lib/components/ui/checkbox/checkbox.svelte
Normal file
35
src/lib/components/ui/checkbox/checkbox.svelte
Normal file
@ -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>
|
6
src/lib/components/ui/checkbox/index.ts
Normal file
6
src/lib/components/ui/checkbox/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import Root from "./checkbox.svelte";
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Checkbox,
|
||||
};
|
28
src/lib/components/ui/table/index.ts
Normal file
28
src/lib/components/ui/table/index.ts
Normal file
@ -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,
|
||||
};
|
13
src/lib/components/ui/table/table-body.svelte
Normal file
13
src/lib/components/ui/table/table-body.svelte
Normal file
@ -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>
|
13
src/lib/components/ui/table/table-caption.svelte
Normal file
13
src/lib/components/ui/table/table-caption.svelte
Normal file
@ -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>
|
18
src/lib/components/ui/table/table-cell.svelte
Normal file
18
src/lib/components/ui/table/table-cell.svelte
Normal file
@ -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>
|
13
src/lib/components/ui/table/table-footer.svelte
Normal file
13
src/lib/components/ui/table/table-footer.svelte
Normal file
@ -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>
|
19
src/lib/components/ui/table/table-head.svelte
Normal file
19
src/lib/components/ui/table/table-head.svelte
Normal file
@ -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>
|
14
src/lib/components/ui/table/table-header.svelte
Normal file
14
src/lib/components/ui/table/table-header.svelte
Normal file
@ -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>
|
23
src/lib/components/ui/table/table-row.svelte
Normal file
23
src/lib/components/ui/table/table-row.svelte
Normal file
@ -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>
|
15
src/lib/components/ui/table/table.svelte
Normal file
15
src/lib/components/ui/table/table.svelte
Normal file
@ -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>
|
56
src/lib/opnsense/wg.ts
Normal file
56
src/lib/opnsense/wg.ts
Normal file
@ -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"
|
||||
// }
|
||||
// ]
|
||||
// }
|
@ -41,6 +41,10 @@ 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({
|
||||
|
9
src/routes/+layout.server.ts
Normal file
9
src/routes/+layout.server.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { LayoutServerLoad } from "./$types";
|
||||
|
||||
export const load: LayoutServerLoad = async (event) => {
|
||||
const { user } = event.locals;
|
||||
|
||||
return {
|
||||
user
|
||||
};
|
||||
};
|
@ -1,19 +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>
|
||||
|
||||
<header class="p-4">
|
||||
<h1 class="text-2xl font-bold">My App</h1>
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
<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>
|
||||
|
||||
<footer class="p-4 text-center">
|
||||
<!--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>© 2024</p>
|
||||
</footer>
|
||||
|
@ -1,9 +0,0 @@
|
||||
import type { PageServerLoad } from "./$types";
|
||||
|
||||
export const load: PageServerLoad = async (event) => {
|
||||
const { user } = event.locals;
|
||||
|
||||
return {
|
||||
user
|
||||
};
|
||||
};
|
@ -5,6 +5,10 @@
|
||||
const { user } = data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>VpGen</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
|
||||
{#if user }
|
||||
|
32
src/routes/api/connections/+server.ts
Normal file
32
src/routes/api/connections/+server.ts
Normal file
@ -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));
|
||||
};
|
14
src/routes/auth/+page.server.ts
Normal file
14
src/routes/auth/+page.server.ts
Normal file
@ -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, "/");
|
||||
}
|
||||
};
|
79
src/routes/connections/+page.svelte
Normal file
79
src/routes/connections/+page.svelte
Normal file
@ -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}
|
9
src/routes/connections/+page.ts
Normal file
9
src/routes/connections/+page.ts
Normal file
@ -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 };
|
||||
};
|
@ -1,14 +0,0 @@
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
|
||||
import type { PageServerLoad } from "./$types";
|
||||
|
||||
export const load: PageServerLoad = async (event) => {
|
||||
const { user } = event.locals;
|
||||
if (!user) {
|
||||
return redirect(302, "/");
|
||||
}
|
||||
|
||||
return {
|
||||
user
|
||||
};
|
||||
};
|
@ -1,8 +1,10 @@
|
||||
<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");
|
||||
@ -14,10 +16,25 @@
|
||||
}
|
||||
</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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user