[feat][apiKey] apiKey only on create is shown. Can be copied

src/components/ApiKey.vue

@@ -0,0 +1,60 @@
+<template>
+  <q-card class="col-12">
+    <q-card-section class="fit row justify-start content-center items-center">
+      <div class="col-12 text-center text-h6">{{ apiKey.name }}</div>
+      <q-btn
+        class="absolute-top-right q-ma-sm"
+        color="negative"
+        icon="mdi-delete"
+        round
+        @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
+        :model-value="apiKey.description"
+      />
+    </q-card-section>
+  </q-card>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+export default defineComponent({
+  name: 'ApiKey',
+  props: {
+    apiKey: {
+      type: Object as PropType<FG.ApiKey>,
+      required: true,
+    },
+  },
+  emits: {
+    delete: (apiKey: FG.ApiKey) => !!apiKey,
+  },
+  setup(props) {
+    async function copyApiKey() {
+      await navigator.clipboard.writeText(<string>props.apiKey.token);
+      console.log('copying api key', props.apiKey.token);
+    }
+    return {
+      copyApiKey,
+    };
+  },
+});
+</script>

src/components/ApiKeyForm.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-card>
+    <q-card-section class="fit row justify-start content-center items-center">
+      <div class="col-12 text-center text-h6">API Key</div>
+    </q-card-section>
+    <q-card-section class="fit row justify-start content-center items-center q-gutter-sm">
+      <q-input
+        v-model="name"
+        outlined
+        label="API Key Name"
+        :rules="[(val) => !!val || 'API Key is required']"
+      />
+      <q-input v-model="description" type="textarea" outlined label="Description" />
+    </q-card-section>
+    <q-card-actions align="right">
+      <q-btn color="secondary" label="Abbrechen" @click="$emit('close')" />
+      <q-btn color="primary" label="Erstellen" @click="createApiKey" />
+    </q-card-actions>
+  </q-card>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { useApiKeyStore } from '@flaschengeist/api';
+export default defineComponent({
+  name: 'ApiKeyForm',
+  emits: ['close'],
+  setup(_, { emit }) {
+    const apiKeyStore = useApiKeyStore();
+    const name = ref('');
+    const description = ref('');
+
+    async function createApiKey() {
+      await apiKeyStore.createApiKey({ id: -1, name: name.value, description: description.value });
+      name.value = '';
+      description.value = '';
+      emit('close');
+    }
+    return { name, description, createApiKey };
+  },
+});
+</script>

src/pages/Settings.vue

@@ -17,30 +17,61 @@
         v-model="sessions[index]"
         @delete="removeSession(session)"
       />
-      <q-btn label="List Widgets" @click="listWidgets" />
+      <div class="col-12 text-left text-h6">API Keys</div>
+      <api-key
+        v-for="apiKey in apiKeys"
+        :key="apiKey.id"
+        :api-key="apiKey"
+        @delete="deleteApiKey"
+      />
+      <div class="fit row justify-end content-end items-end">
+        <q-btn
+          @click="showApiKeyForm = true"
+          class="q-mb-md"
+          color="primary"
+          icon="mdi-plus"
+          round
+        />
+      </div>
     </q-page>
+    <q-dialog v-model="showApiKeyForm" persistent>
+      <api-key-form @close="showApiKeyForm = false" />
+    </q-dialog>
   </div>
 </template>
 
 <script lang="ts">
-import { useMainStore, useUserStore, useSessionStore, hasPermissions } from '@flaschengeist/api';
+import {
+  useMainStore,
+  useUserStore,
+  useSessionStore,
+  hasPermissions,
+  useApiKeyStore,
+} from '@flaschengeist/api';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
 import { defineComponent, onBeforeMount, ref, computed, inject } from 'vue';
 import UserSession from '../components/settings/UserSession.vue';
 import { FG_Plugin } from '@flaschengeist/types';
 import { Notify } from 'quasar';
+import ApiKeyForm from '../components/ApiKeyForm.vue';
+import ApiKey from '../components/ApiKey.vue';
 
 export default defineComponent({
   name: 'UserSettings',
-  components: { MainUserSettings, UserSession },
+  components: { MainUserSettings, UserSession, ApiKeyForm, ApiKey },
   setup() {
     const mainStore = useMainStore();
     const sessionStore = useSessionStore();
     const userStore = useUserStore();
+    const apiKeyStore = useApiKeyStore();
 
-    onBeforeMount(() => sessionStore.getSessions().then((s) => (sessions.value = s)));
+    onBeforeMount(() => {
+      sessionStore.getSessions().then((s) => (sessions.value = s));
+      apiKeyStore.getApiKeys();
+    });
     const currentUser = ref(mainStore.currentUser);
     const sessions = ref([] as FG.Session[]);
+    const apiKeys = computed(() => apiKeyStore.apiKeys);
 
     async function updateUser(value: FG.User) {
       await userStore.updateUser(value);
@@ -68,6 +99,13 @@ export default defineComponent({
       console.log(widgets);
     }
 
+    const showApiKeyForm = ref(false);
+
+    async function deleteApiKey(apiKey: FG.ApiKey) {
+      console.log('deleteApiKey', apiKey);
+      await apiKeyStore.deleteApiKey(apiKey.id);
+    }
+
     return {
       currentUser,
       sessions,
@@ -75,6 +113,9 @@ export default defineComponent({
       removeSession,
       widgets,
       listWidgets,
+      showApiKeyForm,
+      apiKeys,
+      deleteApiKey,
     };
   },
 });