Addition to include interface for API keys.

src/components/GenerateToken.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { generate_api_token, api_token_store } from '@/ts/apitoken.ts'
+const api_token_name = defineModel('name')
+</script>
+
+<template>
+  <div v-if="api_token_store.api_token.secret != ''" class="flex flex-col space-y-2 text-md">
+    <div class="w-full h-full p-2 bg-primary">
+      <p class="drop-shadow-accent drop-shadow-md">> {{ api_token_store.api_token.secret }}</p>
+    </div>
+    <div class="flex flex-col space-y-2 text-md">
+      <p class="drop-shadow-accent drop-shadow-md text-lg">> Claims:</p>
+      <div class="flex flex-col space-y-2">
+        <p class="drop-shadow-accent drop-shadow-md">
+          > iss: {{ api_token_store.api_token.claims.iss }}
+        </p>
+        <p class="drop-shadow-accent drop-shadow-md">
+          > sub: {{ api_token_store.api_token.claims.sub }}
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Name:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="api_token_name"
+        type="text"
+      />
+    </div>
+    <div
+      class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
+      @click="generate_api_token(String(api_token_name))"
+    >
+      > SUBMIT
+    </div>
+  </div>
+</template>

src/ts/apitoken.ts

@@ -0,0 +1,30 @@
+import { reactive, ref } from 'vue'
+
+export const api_token_store = reactive({
+  api_token: ref({
+    secret: '',
+    claims: {
+      iss: '',
+      sub: '',
+    },
+  }),
+})
+
+export function generate_api_token(key_name: string): Promise<boolean> {
+  const get_url = new URL('http://192.168.50.91:31337/user/token/generate')
+  const search_params = new URLSearchParams()
+  search_params.append('name', key_name)
+  get_url.search = search_params.toString()
+  return fetch(get_url, {
+    credentials: 'include',
+    method: 'GET',
+  })
+    .then((res) => {
+      return res.json().then((res_json) => {
+        console.log(res_json)
+        api_token_store.api_token = res_json
+        return res_json
+      })
+    })
+    .catch(() => {})
+}

src/views/UserDashboard.vue

@@ -12,6 +12,7 @@ import { update_info } from '@/ts/user_info'
 import { update_groups } from '@/ts/groups'
 import { get_functions } from '@/ts/functions'
 import { update_function_tags } from '@/ts/function_tags'
+import GenerateToken from '@/components/GenerateToken.vue'
 import UpdateFunction from '@/components/UpdateFunction.vue'
 
 onMounted(update_info)
@@ -38,6 +39,11 @@ onMounted(update_function_tags)
         <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
           <UserInfo></UserInfo>
         </div>
+        <div class="flex flex-col p-2 space-y-2 bg-secondary/50 ring-2 ring-secondary/30">
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <GenerateToken></GenerateToken>
+          </div>
+        </div>
         <div class="flex flex-col p-2 space-y-2 bg-secondary/50 ring-2 ring-secondary/30">
           <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
             <div class="bg-primary ring-2 ring-primary/80">