private_image/frontend/src/components/upload/ShareLinkField.vue

<template>
    <label class="flex flex-col gap-1.5 text-xs">
        <span class="font-medium text-muted-foreground">{{ label }}</span>
        <div class="flex gap-2">
            <input
                type="text"
                readonly
                class="min-w-0 flex-1 rounded-md border border-input bg-muted/40 px-3 py-2 font-mono text-xs text-foreground"
                :value="value"
            />
            <button
                type="button"
                class="shrink-0 rounded-md border border-border px-3 py-2 text-xs font-medium transition-colors hover:bg-muted/60"
                @click="onCopyClick"
            >
                {{ copied ? 'Copied' : 'Copy' }}
            </button>
        </div>
    </label>
</template>

<script setup lang="ts">
import { onUnmounted, ref, watch } from 'vue';

const COPIED_RESET_MS = 1000;

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    value: {
        type: String,
        required: true
    }
});

const copied = ref(false);

let copiedResetTimeout: ReturnType<typeof setTimeout> | undefined;

// component stay mounted when user switching between images so we need to reset the copied state when the value changes
watch(
    () => props.value,
    () => resetCopied()
);

onUnmounted(() => clearCopiedResetTimeout());

const clearCopiedResetTimeout = (): void => {
    if (copiedResetTimeout !== undefined) {
        clearTimeout(copiedResetTimeout);
        copiedResetTimeout = undefined;
    }
};

const resetCopied = (): void => {
    clearCopiedResetTimeout();
    copied.value = false;
};

const onCopyClick = async (): Promise<void> => {
    try {
        await navigator.clipboard.writeText(props.value);

        copied.value = true;

        clearCopiedResetTimeout();

        copiedResetTimeout = setTimeout(() => {
            copied.value = false;
        }, COPIED_RESET_MS);
    } catch (error) {
        console.error('[ShareLinkField] copy failed', error);
    }
};
</script>