From 7c22230efd0fc5e3cca2161bebc0631007d6d108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20K=C3=BCttner?=
 <4376726+hanneskuettner@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:16:05 +0200
Subject: [PATCH] Add Copy button to `system-token` interface (#22323)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/rude-brooms-cry.md                 |  5 ++++
 .../_system/system-token/system-token.vue     | 24 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 .changeset/rude-brooms-cry.md

diff --git a/.changeset/rude-brooms-cry.md b/.changeset/rude-brooms-cry.md
new file mode 100644
index 0000000000..a7dfb5ec0f
--- /dev/null
+++ b/.changeset/rude-brooms-cry.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Added a copy to clipboard button to token interface
diff --git a/app/src/interfaces/_system/system-token/system-token.vue b/app/src/interfaces/_system/system-token/system-token.vue
index 97df6066a4..8e0f17a57c 100644
--- a/app/src/interfaces/_system/system-token/system-token.vue
+++ b/app/src/interfaces/_system/system-token/system-token.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useClipboard } from '@/composables/use-clipboard';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '@/api';
@@ -17,6 +18,7 @@ const props = withDefaults(
 const emit = defineEmits(['input']);
 
 const { t } = useI18n();
+const { isCopySupported, copyToClipboard } = useClipboard();
 
 const placeholder = computed(() => {
 	if (props.disabled && !props.value) return null;
@@ -62,6 +64,14 @@ function emitValue(newValue: string | null) {
 	emit('input', newValue);
 	localValue.value = newValue;
 }
+
+function select(event: FocusEvent) {
+	if (localValue.value) (event.target as HTMLInputElement | null)?.select();
+}
+
+function deselect() {
+	window.getSelection()?.removeAllRanges();
+}
 </script>
 
 <template>
@@ -74,8 +84,18 @@ function emitValue(newValue: string | null) {
 			readonly
 			:class="{ saved: value && !localValue }"
 			@update:model-value="emitValue"
+			@focus="select"
+			@blur="deselect"
 		>
 			<template #append>
+				<v-icon
+					v-if="localValue && isCopySupported"
+					v-tooltip="t('copy')"
+					name="content_copy"
+					clickable
+					class="clipboard-icon"
+					@click="copyToClipboard(value)"
+				/>
 				<v-icon
 					v-if="!disabled"
 					v-tooltip="value ? t('interfaces.system-token.regenerate') : t('interfaces.system-token.generate')"
@@ -115,6 +135,10 @@ function emitValue(newValue: string | null) {
 	margin-top: 12px;
 }
 
+.clipboard-icon {
+	margin-right: 4px;
+}
+
 .regenerate-icon {
 	margin-right: 4px;
 }