From 5509ea2925137e1f25d9efc1478b02d563f74d41 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Fri, 25 Oct 2024 12:26:06 +0100
Subject: [PATCH 1/2] Add Copy button to broker client username

---
 frontend/src/pages/team/Broker/index.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/team/Broker/index.vue b/frontend/src/pages/team/Broker/index.vue
index 48cd9c52ac..af1f3b4546 100644
--- a/frontend/src/pages/team/Broker/index.vue
+++ b/frontend/src/pages/team/Broker/index.vue
@@ -69,8 +69,11 @@
                                 <li v-for="client in filteredClients" :key="client.id" class="client" data-el="client">
                                     <ff-accordion class="max-w-full w-full">
                                         <template #label>
-                                            <div class="username text-left">
-                                                {{ client.username }}<span class="italic">@{{ team.id }}</span>
+                                            <div class="username text-left flex">
+                                                <span class="mt-1 font-bold">{{ client.username }}</span><span class="italic mt-1">@{{ team.id }}</span>
+                                                <ff-button v-if="!!clipboardSupported" class="ml-2" kind="tertiary" size="small" @click.prevent.stop="copy(client)">
+                                                    <template #icon-right><ClipboardCopyIcon /></template>
+                                                </ff-button>
                                             </div>
                                             <div class="rules text-left">
                                                 <span>{{ client.acls.length }} Rule{{ client.acls.length > 1 ? 's' : '' }}</span>
@@ -174,12 +177,13 @@
 </template>
 
 <script>
-import { CheckIcon, PencilIcon, PlusSmIcon, SearchIcon, TrashIcon, XIcon } from '@heroicons/vue/outline'
+import { CheckIcon, ClipboardCopyIcon, PencilIcon, PlusSmIcon, SearchIcon, TrashIcon, XIcon } from '@heroicons/vue/outline'
 import { mapState } from 'vuex'
 
 import brokerApi from '../../../api/broker.js'
 import FfAccordion from '../../../components/Accordion.vue'
 import EmptyState from '../../../components/EmptyState.vue'
+import clipboardMixin from '../../../mixins/Clipboard.js'
 import featuresMixin from '../../../mixins/Features.js'
 import permissionsMixin from '../../../mixins/Permissions.js'
 import Alerts from '../../../services/alerts.js'
@@ -199,9 +203,10 @@ export default {
         CheckIcon,
         XIcon,
         EmptyState,
-        ClientDialog
+        ClientDialog,
+        ClipboardCopyIcon
     },
-    mixins: [permissionsMixin, featuresMixin],
+    mixins: [permissionsMixin, featuresMixin, clipboardMixin],
     data () {
         return {
             loading: false,
@@ -268,6 +273,15 @@ export default {
                 await this.fetchData()
                 Alerts.emit('Successfully deleted Client.', 'confirmation')
             })
+        },
+        copy (client) {
+            const username = `${client.username}@${this.team.id}`
+            this.copyToClipboard(username).then(() => {
+                Alerts.emit('Coppied to Clipboard.', 'confirmation')
+            }).catch((err) => {
+                console.warn('Clipboard write permission denied: ', err)
+                Alerts.emit('Clipboard write permission denied.', 'warning')
+            })
         }
     }
 }

From b54d7cb34cd619cba9aa1a7deabdce72efadc25c Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 25 Oct 2024 14:01:24 +0100
Subject: [PATCH 2/2] Update frontend/src/pages/team/Broker/index.vue

---
 frontend/src/pages/team/Broker/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/Broker/index.vue b/frontend/src/pages/team/Broker/index.vue
index af1f3b4546..6554506c47 100644
--- a/frontend/src/pages/team/Broker/index.vue
+++ b/frontend/src/pages/team/Broker/index.vue
@@ -277,7 +277,7 @@ export default {
         copy (client) {
             const username = `${client.username}@${this.team.id}`
             this.copyToClipboard(username).then(() => {
-                Alerts.emit('Coppied to Clipboard.', 'confirmation')
+                Alerts.emit('Copied to Clipboard.', 'confirmation')
             }).catch((err) => {
                 console.warn('Clipboard write permission denied: ', err)
                 Alerts.emit('Clipboard write permission denied.', 'warning')