mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-02-15 21:00:06 +00:00
feat: add copy to clipboard option for OIDC client information
This commit is contained in:
41
frontend/src/lib/components/copy-to-clipboard.svelte
Normal file
41
frontend/src/lib/components/copy-to-clipboard.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user