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

client page: fix config overflow, add download button

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-12-24 23:10:38 -08:00
parent c734b445a8
commit bc2cf3c7ca
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
1 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,17 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'; import type { PageData } from './$types';
import { LucideClipboardCopy } from 'lucide-svelte'; import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import QRCode from 'qrcode-svg'; import QRCode from 'qrcode-svg';
const { data }: { data: PageData } = $props(); const { data }: { data: PageData } = $props();
let tooltipText = $state('Copy to clipboard'); // 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';
let configWasCopied = $state(false);
let qrCode = new QRCode({ let qrCode = new QRCode({
content: data.config, content: data.config,
join: true, join: true,
@ -14,12 +19,9 @@
async function copyToClipboard() { async function copyToClipboard() {
await navigator.clipboard.writeText(data.config); await navigator.clipboard.writeText(data.config);
tooltipText = 'Copied!'; configWasCopied = true;
} }
function onMouseLeave() {
tooltipText = 'Copy to clipboard';
}
</script> </script>
<svelte:head> <svelte:head>
@ -29,22 +31,36 @@
<h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1> <h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1>
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div class="relative bg-accent rounded-lg max-w-fit"> <div class="relative bg-accent rounded-lg max-w-fit overflow-x-hidden">
<div class="flex items-start p-2 overflow-x-auto"> <div class="flex items-start p-2 overflow-x-auto">
<pre><code>{data.config}</code></pre> <pre><code>{data.config}</code></pre>
<!--Copy button for the configuration--> <!--Copy button for the configuration-->
<!--Flex reverse for peer hover to work properly--> <!--Flex reverse for peer hover to work properly-->
<div class="absolute group flex flex-row-reverse items-center gap-1 right-2"> <div class="absolute flex flex-col gap-2 right-2">
<Button class="peer size-10 p-2" <div class="group flex flex-row-reverse items-center gap-1">
onclick={copyToClipboard} <Button class="peer size-10 p-2"
onmouseleave={onMouseLeave} onclick={copyToClipboard}
> onmouseleave={() => configWasCopied = false}
<LucideClipboardCopy /> >
</Button> <LucideClipboardCopy />
<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2"> </Button>
{tooltipText} <span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
</span> {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>
</div> </div>