src/components/ApiKey.vue

@@ -1,60 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-<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,61 +17,30 @@
         v-model="sessions[index]"
         @delete="removeSession(session)"
       />
-      <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-btn label="List Widgets" @click="listWidgets" />
     </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,
-  useApiKeyStore,
-} from '@flaschengeist/api';
+import { useMainStore, useUserStore, useSessionStore, hasPermissions } 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, ApiKeyForm, ApiKey },
+  components: { MainUserSettings, UserSession },
   setup() {
     const mainStore = useMainStore();
     const sessionStore = useSessionStore();
     const userStore = useUserStore();
-    const apiKeyStore = useApiKeyStore();
 
-    onBeforeMount(() => {
-      sessionStore.getSessions().then((s) => (sessions.value = s));
-      apiKeyStore.getApiKeys();
-    });
+    onBeforeMount(() => sessionStore.getSessions().then((s) => (sessions.value = s)));
     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);
@@ -99,13 +68,6 @@ 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,
@@ -113,9 +75,6 @@ export default defineComponent({
       removeSession,
       widgets,
       listWidgets,
-      showApiKeyForm,
-      apiKeys,
-      deleteApiKey,
     };
   },
 });