client page ui improvements, refactor code-snippet into separate component
This commit is contained in:
parent
ea11bf8a72
commit
62daabcd4c
GPG Key ID:
E0EBF441EA424369
@ -26,6 +26,7 @@
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 26% 86%;
|
||||
--accent-light: 210 26% 86%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
|
||||
67
src/lib/components/app/code-snippet/code-snippet.svelte
Normal file
67
src/lib/components/app/code-snippet/code-snippet.svelte
Normal file
@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
|
||||
|
||||
const {
|
||||
data,
|
||||
filename,
|
||||
copy,
|
||||
download,
|
||||
}: {
|
||||
data: string;
|
||||
filename?: string;
|
||||
copy?: boolean;
|
||||
download?: boolean;
|
||||
} = $props();
|
||||
|
||||
let wasCopied = $state(false);
|
||||
|
||||
async function copyToClipboard() {
|
||||
await navigator.clipboard.writeText(data);
|
||||
wasCopied = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent">
|
||||
<div class="flex items-start overflow-x-auto p-2">
|
||||
<pre><code>{data}</code></pre>
|
||||
|
||||
{#if copy || download}
|
||||
<!--Copy button-->
|
||||
<!--Flex reverse for peer hover to work properly-->
|
||||
<div class="absolute right-2 flex flex-col gap-2">
|
||||
{#if copy}
|
||||
<div class="flex flex-row-reverse items-center gap-1">
|
||||
<Button
|
||||
class="peer size-10 p-2"
|
||||
onclick={copyToClipboard}
|
||||
onmouseleave={() => (wasCopied = false)}
|
||||
>
|
||||
<LucideClipboardCopy />
|
||||
</Button>
|
||||
<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
|
||||
{wasCopied ? 'Copied' : 'Copy to clipboard'}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if download}
|
||||
<div class="flex flex-row-reverse items-center gap-1">
|
||||
<a
|
||||
class="peer contents"
|
||||
href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data)}`}
|
||||
download={filename}
|
||||
>
|
||||
<Button class="size-10 p-2">
|
||||
<LucideDownload />
|
||||
</Button>
|
||||
</a>
|
||||
<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
|
||||
Download
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
7
src/lib/components/app/code-snippet/index.ts
Normal file
7
src/lib/components/app/code-snippet/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import Root from "./code-snippet.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as CodeSnippet,
|
||||
};
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user