From 5249b2ab97dc5408f429e57782afc6b42804fc29 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 19 Jan 2024 17:06:16 +0100
Subject: [PATCH] Move the copy button to a standalone component

---
 resources/js/components/CopyButton.vue | 21 +++++++++++++++++++++
 resources/js/views/About.vue           | 21 ++++-----------------
 2 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 resources/js/components/CopyButton.vue

diff --git a/resources/js/components/CopyButton.vue b/resources/js/components/CopyButton.vue
new file mode 100644
index 00000000..11097c72
--- /dev/null
+++ b/resources/js/components/CopyButton.vue
@@ -0,0 +1,21 @@
+<script setup>
+    import { useNotifyStore } from '@/stores/notify'
+
+    const notify = useNotifyStore()
+    const { copy } = useClipboard({ legacy: true })
+
+    const props = defineProps({
+        token: String,
+    })
+
+    function copyToClipboard() {
+        copy(props.token)
+        notify.success({ text: trans('commons.copied_to_clipboard') })
+    }
+</script>
+
+<template>
+    <button :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard()">
+        <FontAwesomeIcon :icon="['fas', 'copy']" />
+    </button>
+</template>
\ No newline at end of file
diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
index ec3b514d..0d94494a 100644
--- a/resources/js/views/About.vue
+++ b/resources/js/views/About.vue
@@ -1,12 +1,10 @@
 <script setup>
     import systemService from '@/services/systemService'
-    import { useNotifyStore } from '@/stores/notify'
     import { UseColorMode } from '@vueuse/components'
+    import CopyButton from '@/components/CopyButton.vue'
 
     const $2fauth = inject('2fauth')
     const router = useRouter()
-    const notify = useNotifyStore()
-    const { copy } = useClipboard({ legacy: true })
 
     const returnTo = router.options.history.state.back
     const infos = ref()
@@ -32,11 +30,6 @@
             infos.value = null
         })
     })
-
-    function copyToClipboard(data) {
-        copy(data)
-        notify.success({ text: trans('commons.copied_to_clipboard') })
-    }
 </script>
 
 <template>
@@ -98,9 +91,7 @@
             {{ $t('commons.environment') }}
         </h2>
         <div v-if="infos" class="about-debug box is-family-monospace is-size-7">
-            <button id="btnCopyEnvVars" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listInfos.innerText)">
-                <FontAwesomeIcon :icon="['fas', 'copy']" />
-            </button>
+            <CopyButton id="btnCopyEnvVars" :token="listInfos?.innerText" />
             <ul ref="listInfos" id="listInfos">
                 <li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li>
             </ul>
@@ -112,9 +103,7 @@
             {{ $t('settings.admin_settings') }}
         </h2>
         <div v-if="adminSettings" class="about-debug box is-family-monospace is-size-7">
-            <button id="btnCopyAdminSettings" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listAdminSettings.innerText)">
-                <FontAwesomeIcon :icon="['fas', 'copy']" />
-            </button>
+            <CopyButton id="btnCopyAdminSettings" :token="listAdminSettings?.innerText" />
             <ul ref="listAdminSettings" id="listAdminSettings">
                 <li v-for="(value, setting) in adminSettings" :value="value" :key="setting"><b>{{setting}}</b>: {{value}}</li>
             </ul>
@@ -123,9 +112,7 @@
             {{ $t('settings.user_preferences') }}
         </h2>
         <div v-if="userPreferences" class="about-debug box is-family-monospace is-size-7">
-            <button id="btnCopyUserPreferences" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listUserPreferences.innerText)">
-                <FontAwesomeIcon :icon="['fas', 'copy']" />
-            </button>
+            <CopyButton id="btnCopyUserPreferences" :token="listUserPreferences?.innerText" />
             <ul ref="listUserPreferences" id="listUserPreferences">
                 <li v-for="(value, preference) in userPreferences" :value="value" :key="preference"><b>{{preference}}</b>: {{value}}</li>
             </ul>