From f82020ccfb0d4fbaa1dd98182188149d8085252a Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Wed, 2 Oct 2024 11:03:30 +0200
Subject: [PATCH] feat: add copy to clipboard option for OIDC client
 information

---
 .../lib/components/copy-to-clipboard.svelte   | 41 +++++++++++++++++++
 .../src/lib/components/ui/tooltip/index.ts    | 15 +++++++
 .../ui/tooltip/tooltip-content.svelte         | 28 +++++++++++++
 .../admin/oidc-clients/[id]/+page.svelte      |  9 +++-
 4 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/copy-to-clipboard.svelte
 create mode 100644 frontend/src/lib/components/ui/tooltip/index.ts
 create mode 100644 frontend/src/lib/components/ui/tooltip/tooltip-content.svelte

diff --git a/frontend/src/lib/components/copy-to-clipboard.svelte b/frontend/src/lib/components/copy-to-clipboard.svelte
new file mode 100644
index 0000000..1e21b1c
--- /dev/null
+++ b/frontend/src/lib/components/copy-to-clipboard.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { LucideCheck } from 'lucide-svelte';
+	import type { Snippet } from 'svelte';
+
+	let { value, children }: { value: string; children: Snippet } = $props();
+
+	let open = $state(false);
+	let copied = $state(false);
+
+	function onClick() {
+		open = true;
+		copyToClipboard();
+	}
+
+	function onOpenChange(state: boolean) {
+		open = state;
+		if (!state) {
+			copied = false;
+		}
+	}
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(value);
+		copied = true;
+		setTimeout(() => onOpenChange(false), 1000);
+	}
+</script>
+
+<button onclick={onClick}>
+	<Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
+		<Tooltip.Trigger>{@render children()}</Tooltip.Trigger>
+		<Tooltip.Content onclick={copyToClipboard}>
+			{#if copied}
+				<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> Copied</span>
+			{:else}
+				<span>Click to copy</span>
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+</button>
diff --git a/frontend/src/lib/components/ui/tooltip/index.ts b/frontend/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..7d0444d
--- /dev/null
+++ b/frontend/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..59ce6ee
--- /dev/null
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils/style.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>
diff --git a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
index d431f03..87b163f 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import { beforeNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
+	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import Label from '$lib/components/ui/label/label.svelte';
@@ -89,7 +90,9 @@
 		<div class="flex flex-col">
 			<div class="mb-2 flex">
 				<Label class="mb-0 w-44">Client ID</Label>
-				<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
+				<CopyToClipboard value={client.id}>
+					<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
+				</CopyToClipboard>
 			</div>
 			<div class="mb-2 mt-1 flex items-center">
 				<Label class="w-44">Client secret</Label>
@@ -111,7 +114,9 @@
 					{#each Object.entries(setupDetails) as [key, value]}
 						<div class="mb-5 flex">
 							<Label class="mb-0 w-44">{key}</Label>
-							<span class="text-muted-foreground text-sm">{value}</span>
+							<CopyToClipboard {value}>
+								<span class="text-muted-foreground text-sm">{value}</span>
+							</CopyToClipboard>
 						</div>
 					{/each}
 				</div>