Compare commits
No commits in common. "cffeade64246a217d26dd185bad6549b947b5b24" and "25b2090961d4fadc24e63ac1b3e3950329c4c73b" have entirely different histories.
cffeade642
...
25b2090961
@ -1,8 +1 @@
|
|||||||
DATABASE_URL=local.db
|
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=
|
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "1",
|
|
||||||
"name": "vpgen",
|
|
||||||
"type": "collection",
|
|
||||||
"ignore": [
|
|
||||||
"node_modules",
|
|
||||||
".git"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
auth {
|
|
||||||
mode: basic
|
|
||||||
}
|
|
||||||
|
|
||||||
auth:basic {
|
|
||||||
username: {{opnsense_key}}
|
|
||||||
password: {{opnsense_secret}}
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
vars {
|
|
||||||
opnsense_key: 33NhXqaJwrWy1T4Qi60GK90RXJuS3PWIYwlwYPnQ8f5YPe/J1q/g6/l4bZ2/kJk71MFhwP+9mr+IiQPi
|
|
||||||
}
|
|
||||||
vars:secret [
|
|
||||||
opnsense_secret
|
|
||||||
]
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -24,7 +24,6 @@
|
|||||||
"@types/better-sqlite3": "^7.6.11",
|
"@types/better-sqlite3": "^7.6.11",
|
||||||
"@types/eslint": "^9.6.0",
|
"@types/eslint": "^9.6.0",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"bits-ui": "^0.21.16",
|
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"drizzle-kit": "^0.22.0",
|
"drizzle-kit": "^0.22.0",
|
||||||
"eslint": "^9.7.0",
|
"eslint": "^9.7.0",
|
||||||
@ -46,9 +45,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@oslojs/crypto": "^1.0.1",
|
"@oslojs/crypto": "^1.0.1",
|
||||||
"@oslojs/encoding": "^1.1.0",
|
"@oslojs/encoding": "^1.1.0",
|
||||||
"arctic": "^2.2.1",
|
|
||||||
"better-sqlite3": "^11.1.2",
|
"better-sqlite3": "^11.1.2",
|
||||||
"drizzle-orm": "^0.33.0",
|
"drizzle-orm": "^0.33.0"
|
||||||
"lucide-svelte": "^0.454.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,6 @@
|
|||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import { type Handle, redirect } from '@sveltejs/kit';
|
import type { Handle } from '@sveltejs/kit';
|
||||||
import { dev } from '$app/environment';
|
import { dev } from '$app/environment';
|
||||||
import * as auth from '$lib/server/auth';
|
import * as auth from '$lib/server/auth.js';
|
||||||
import { sequence } from '@sveltejs/kit/hooks';
|
|
||||||
|
|
||||||
const handleAuth: Handle = async ({ event, resolve }) => {
|
const handleAuth: Handle = async ({ event, resolve }) => {
|
||||||
const sessionId = event.cookies.get(auth.sessionCookieName);
|
const sessionId = event.cookies.get(auth.sessionCookieName);
|
||||||
@ -30,17 +29,4 @@ const handleAuth: Handle = async ({ event, resolve }) => {
|
|||||||
return resolve(event);
|
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);
|
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import Root from "./auth-form.svelte";
|
|
||||||
|
|
||||||
export {
|
|
||||||
Root,
|
|
||||||
//
|
|
||||||
Root as AuthForm,
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
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,
|
|
||||||
};
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import Root from "./checkbox.svelte";
|
|
||||||
export {
|
|
||||||
Root,
|
|
||||||
//
|
|
||||||
Root as Checkbox,
|
|
||||||
};
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
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,
|
|
||||||
};
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<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}
|
|
||||||
/>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import Root from "./label.svelte";
|
|
||||||
|
|
||||||
export {
|
|
||||||
Root,
|
|
||||||
//
|
|
||||||
Root as Label,
|
|
||||||
};
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
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,
|
|
||||||
};
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
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"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
@ -3,8 +3,6 @@ import { sha256 } from '@oslojs/crypto/sha2';
|
|||||||
import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
|
import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
|
||||||
import { db } from '$lib/server/db';
|
import { db } from '$lib/server/db';
|
||||||
import * as table from '$lib/server/db/schema';
|
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;
|
const DAY_IN_MS = 1000 * 60 * 60 * 24;
|
||||||
|
|
||||||
@ -12,7 +10,8 @@ export const sessionCookieName = 'auth-session';
|
|||||||
|
|
||||||
function generateSessionToken(): string {
|
function generateSessionToken(): string {
|
||||||
const bytes = crypto.getRandomValues(new Uint8Array(20));
|
const bytes = crypto.getRandomValues(new Uint8Array(20));
|
||||||
return encodeBase32LowerCaseNoPadding(bytes);
|
const token = encodeBase32LowerCaseNoPadding(bytes);
|
||||||
|
return token;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function createSession(userId: string): Promise<table.Session> {
|
export async function createSession(userId: string): Promise<table.Session> {
|
||||||
@ -27,29 +26,15 @@ export async function createSession(userId: string): Promise<table.Session> {
|
|||||||
return 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> {
|
export async function invalidateSession(sessionId: string): Promise<void> {
|
||||||
await db.delete(table.session).where(eq(table.session.id, sessionId));
|
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) {
|
export async function validateSession(sessionId: string) {
|
||||||
const [result] = await db
|
const [result] = await db
|
||||||
.select({
|
.select({
|
||||||
// Adjust user table here to tweak returned data
|
// Adjust user table here to tweak returned data
|
||||||
user: { id: table.user.id, username: table.user.username, name: table.user.name },
|
user: { id: table.user.id, username: table.user.username },
|
||||||
session: table.session
|
session: table.session
|
||||||
})
|
})
|
||||||
.from(table.session)
|
.from(table.session)
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
import { drizzle } from 'drizzle-orm/better-sqlite3';
|
import { drizzle } from 'drizzle-orm/better-sqlite3';
|
||||||
import Database from 'better-sqlite3';
|
import Database from 'better-sqlite3';
|
||||||
import { env } from '$env/dynamic/private';
|
import { env } from '$env/dynamic/private';
|
||||||
import assert from 'node:assert';
|
if (!env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
|
||||||
|
|
||||||
assert(env.DATABASE_URL, 'DATABASE_URL is not set');
|
|
||||||
const client = new Database(env.DATABASE_URL);
|
const client = new Database(env.DATABASE_URL);
|
||||||
export const db = drizzle(client);
|
export const db = drizzle(client);
|
||||||
|
|||||||
@ -2,8 +2,7 @@ import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
|
|||||||
|
|
||||||
export const user = sqliteTable('user', {
|
export const user = sqliteTable('user', {
|
||||||
id: text('id').primaryKey(),
|
id: text('id').primaryKey(),
|
||||||
username: text('username').notNull(),
|
age: integer('age')
|
||||||
name: text('name').notNull(),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const session = sqliteTable('session', {
|
export const session = sqliteTable('session', {
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
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
|
|
||||||
);
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import type { LayoutServerLoad } from "./$types";
|
|
||||||
|
|
||||||
export const load: LayoutServerLoad = async (event) => {
|
|
||||||
const { user } = event.locals;
|
|
||||||
|
|
||||||
return {
|
|
||||||
user
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,34 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
import { page } from '$app/stores';
|
let { children } = $props();
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<header class="p-4 sm:flex">
|
{@render children()}
|
||||||
<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>© 2024</p>
|
|
||||||
</footer>
|
|
||||||
|
|||||||
@ -1,18 +1,2 @@
|
|||||||
<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>
|
<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}
|
|
||||||
|
|||||||
@ -1,32 +0,0 @@
|
|||||||
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));
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
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, "/");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
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()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
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: "/"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<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}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
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,40 +0,0 @@
|
|||||||
<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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user