From c03fa689ba3e267bcadd5954641a4040c05ce6f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 15 Oct 2024 08:27:14 +0200
Subject: [PATCH] [feat][apiKey] apiKey only on create is shown. Can be copied

---
 src/components/ApiKey.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/ApiKey.vue b/src/components/ApiKey.vue
index 362bf9d..fbe4381 100644
--- a/src/components/ApiKey.vue
+++ b/src/components/ApiKey.vue
@@ -10,8 +10,27 @@
         @click="$emit('delete', apiKey)"
       />
     </q-card-section>
+    <q-card-section
+      v-if="apiKey.token"
+      class="fit row justify-start content-center items-center q-gutter-sm"
+    >
+      <q-input class="col" outlined label="API Key" :model-value="apiKey.token" />
+      <div class="row justify-end content-end items-end">
+        <q-btn color="primary" icon="mdi-content-copy" round @click="copyApiKey" />
+      </div>
+      <q-banner class="fit bg-primary text-white" inline dense rounded>
+        ApiKey wird nur einmalig angezeigt. Bitte kopieren!
+      </q-banner>
+    </q-card-section>
     <q-card-section class="fit row justify-start content-center items-center q-gutter-sm">
-      <q-input class="fit" type="textarea" outlined label="Description" readonly />
+      <q-input
+        class="fit"
+        type="textarea"
+        outlined
+        label="Description"
+        readonly
+        :model-value="apiKey.description"
+      />
     </q-card-section>
   </q-card>
 </template>
@@ -28,8 +47,14 @@ export default defineComponent({
   emits: {
     delete: (apiKey: FG.ApiKey) => !!apiKey,
   },
-  setup() {
-    return {};
+  setup(props) {
+    async function copyApiKey() {
+      await navigator.clipboard.writeText(<string>props.apiKey.token);
+      console.log('copying api key', props.apiKey.token);
+    }
+    return {
+      copyApiKey,
+    };
   },
 });
 </script>