CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

client page ui improvements, refactor code-snippet into separate component

Browse Source
This commit is contained in:
Yuri Tatishchev
2024-12-25 13:15:36 -08:00
parent ea11bf8a72
commit 62daabcd4c
5 changed files with 105 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/clients/[id]/+page.svelte
View File

@@ -1,71 +1,33 @@
<script lang="ts">
import type { PageData } from './$types';
import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
import { Button } from '$lib/components/ui/button';
import QRCode from 'qrcode-svg';
import { CodeSnippet } from '$lib/components/app/code-snippet';
const { data }: { data: PageData } = $props();
// Clean the client name for the file name,
// things can break otherwise (too long or invalid characters)
// https://github.com/pirate/wireguard-docs
const clientWgCleanedName = data.client.name.slice(0, 15).replace(/[^a-zA-Z0-9_=+.-]/g, '_') + '.conf';
const clientWgCleanedName =
data.client.name.slice(0, 15).replace(/[^a-zA-Z0-9_=+.-]/g, '_') + '.conf';
let configWasCopied = $state(false);
let qrCode = new QRCode({
content: data.config,
join: true,
background: 'hsl(var(--accent-light))',
});
async function copyToClipboard() {
await navigator.clipboard.writeText(data.config);
configWasCopied = true;
}
</script>
<svelte:head>
<title></title>
</svelte:head>
<h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1>
<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
<div class="flex flex-wrap gap-4">
<div class="relative bg-accent rounded-lg max-w-fit overflow-x-hidden">
<div class="flex items-start p-2 overflow-x-auto">
<pre><code>{data.config}</code></pre>
<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
<!--Copy button for the configuration-->
<!--Flex reverse for peer hover to work properly-->
<div class="absolute flex flex-col gap-2 right-2">
<div class="group flex flex-row-reverse items-center gap-1">
<Button class="peer size-10 p-2"
onclick={copyToClipboard}
onmouseleave={() => configWasCopied = false}
>
<LucideClipboardCopy />
</Button>
<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
{configWasCopied ? 'Copied' : 'Copy config to clipboard'}
</span>
</div>
<div class="group flex flex-row-reverse items-center gap-1">
<a class="peer contents" href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data.config)}`}
download={clientWgCleanedName}>
<Button class="size-10 p-2">
<LucideDownload />
</Button>
</a>
<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
Download config file
</span>
</div>
</div>
</div>
</div>
<div class="rounded-lg overflow-hidden">
<div class="overflow-hidden rounded-lg">
{@html qrCode.svg()}
</div>
</div>

42
src/routes/user/+page.svelte
View File

@@ -2,6 +2,7 @@
import { invalidate, invalidateAll } from '$app/navigation';
import { Button } from '$lib/components/ui/button';
import { LucideLoaderCircle, LucideLogOut, LucideRefreshCw } from 'lucide-svelte';
import { CodeSnippet } from '$lib/components/app/code-snippet/index.js';
let { data } = $props();
let isLoadingSignOut = $state(false);
@@ -16,25 +17,28 @@
}
</script>
<svelte:head>
<title>User Profile</title>
</svelte:head>
<div class="flex flex-col gap-2">
<CodeSnippet data={JSON.stringify(data.user, null, 2)} />
<pre>{JSON.stringify(data.user, null, 2)}</pre>
<div class="flex gap-2">
<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
<div class="flex gap-2">
<Button onclick={refetch}>
<LucideRefreshCw class="mr-2 h-4 w-4" />
Invalidate Data
</Button>
</form>
<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>
</div>
</div>