From 0b4c0adf8adf67b3cb6d4562fa38722f27caee60 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Tue, 24 Dec 2024 23:10:38 -0800
Subject: [PATCH] client page: fix config overflow, add download button

---
 src/routes/clients/[id]/+page.svelte | 50 ++++++++++++++++++----------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/routes/clients/[id]/+page.svelte b/src/routes/clients/[id]/+page.svelte
index cd38a11..0d35333 100644
--- a/src/routes/clients/[id]/+page.svelte
+++ b/src/routes/clients/[id]/+page.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { LucideClipboardCopy } from 'lucide-svelte';
+	import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
 	import QRCode from 'qrcode-svg';
 
 	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({
 		content: data.config,
 		join: true,
@@ -14,12 +19,9 @@
 
 	async function copyToClipboard() {
 		await navigator.clipboard.writeText(data.config);
-		tooltipText = 'Copied!';
+		configWasCopied = true;
 	}
 
-	function onMouseLeave() {
-		tooltipText = 'Copy to clipboard';
-	}
 </script>
 
 <svelte:head>
@@ -29,22 +31,36 @@
 <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="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">
 			<pre><code>{data.config}</code></pre>
 
 			<!--Copy button for the configuration-->
 			<!--Flex reverse for peer hover to work properly-->
-			<div class="absolute group flex flex-row-reverse items-center gap-1 right-2">
-				<Button class="peer size-10 p-2"
-								onclick={copyToClipboard}
-								onmouseleave={onMouseLeave}
-				>
-					<LucideClipboardCopy />
-				</Button>
-				<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
-				{tooltipText}
-			</span>
+			<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:text/plain;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>