api settings component

vue3/src/apps/tandoor/main.ts

@@ -23,6 +23,7 @@ import MealPlanSettings from "@/components/settings/MealPlanSettings.vue";
 import SpaceSettings from "@/components/settings/SpaceSettings.vue";
 import SpaceMemberSettings from "@/components/settings/SpaceMemberSettings.vue";
 import UserSpaceSettings from "@/components/settings/UserSpaceSettings.vue";
+import ApiSettings from "@/components/settings/ApiSettings.vue";
 
 const routes = [
     {path: '/', component: StartPage, name: 'view_home'},
@@ -36,6 +37,7 @@ const routes = [
             {path: 'space', component: SpaceSettings, name: 'view_settings_space'},
             {path: 'space-members', component: SpaceMemberSettings, name: 'view_settings_space_member'},
             {path: 'user-space', component: UserSpaceSettings, name: 'view_settings_user_space'},
+            {path: 'api', component: ApiSettings, name: 'view_settings_api'},
         ]},
     //{path: '/settings/:page', component: SettingsPage, name: 'view_settings_page', props: true},
     {path: '/search', component: SearchPage, name: 'view_search'},

vue3/src/components/settings/ApiSettings.vue

@@ -0,0 +1,72 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('API') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+        <v-alert color="error" variant="tonal">
+            The API is made for developers to interact with the application.
+            It is possible to break things using the API so be careful and create a backup first.
+            The API definition can and will change in the future, make sure to read the changelog to spot changes early
+            on.
+        </v-alert>
+
+        Authentication works by proving the word <code>Bearer</code> followed by an API Token as a request Authorization
+        header as shown below. <br/>
+        <code>Authorization: Bearer TOKEN</code> -or-<br/>
+        <code>curl -X GET http://your.domain.com/api/recipes/ -H 'Authorization:
+            Bearer TOKEN'</code>
+
+        <br/>
+        <br/>
+        You can have multiple tokens and each token can have its own scope. Currently there is <code>read</code>, <code>write</code>
+        and <code>bookmarklet</code>.
+        Read and write do what the name says, the bookmarklet scope is only used for the bookmarklet to limit access to
+        it.
+
+        <v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards. </v-alert>
+
+        <v-list>
+            <v-list-item v-for="at in accessTokenList">
+                <v-list-item-title>{{at.token}}</v-list-item-title>
+                <v-list-item-subtitle>Scope {{at.scope}} Expires {{DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL)}}</v-list-item-subtitle>
+                <template #append>
+<!--                    <v-btn icon="$edit" color="edit"></v-btn>-->
+<!--                    <v-btn icon="$delete" color="delete"></v-btn>-->
+                </template>
+            </v-list-item>
+        </v-list>
+
+
+
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+import {onMounted, ref} from "vue";
+import {AccessToken, ApiApi} from "@/openapi";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {DateTime} from "luxon";
+
+const accessTokenList = ref([] as AccessToken[])
+const accessToken = ref({} as AccessToken)
+
+onMounted(() => {
+    loadAccessTokens()
+})
+
+function loadAccessTokens(){
+    const api = new ApiApi()
+    api.apiAccessTokenList().then(r => {
+        accessTokenList.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+}
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/pages/SettingsPage.vue

@@ -19,7 +19,7 @@
                     <v-list-item :to="{name: 'view_settings_space_member'}" prepend-icon="fa-solid fa-users">{{ $t('SpaceMembers') }}</v-list-item>
                     <v-divider></v-divider>
                     <v-list-subheader>Admin</v-list-subheader>
-                    <v-list-item prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
+                    <v-list-item :to="{name: 'view_settings_api'}" prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
                     <v-list-item prepend-icon="fa-solid fa-server">{{ $t('System') }}</v-list-item>
                 </v-list>