From 499dd1b3076a5ce171730f89f327eb2428921218 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Tue, 03 Jun 2025 15:06:07 +0000
Subject: [PATCH] adding API Token Management

---
 vue/src/components/Header.vue |    5 +++++
 vue/src/App.vue               |   29 +++++++++++++++++++++++++----
 vue/src/lib/api.js            |   25 +++++++++++++++++++++----
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/vue/src/App.vue b/vue/src/App.vue
index f121a20..b9b76eb 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -1,8 +1,19 @@
 <script setup>
 
 import Header from "./components/Header.vue"
-
+import {apiTokenValid, setApiToken} from './lib/api.js'
 import "./assets/styles.styl"
+import {ref, watch} from "vue"
+import {useDebounceFn} from '@vueuse/core'
+
+const apiToken = ref("")
+
+function updateApiToken (evt) {
+   console.log("update apiToken ", apiToken.value)
+   console.log(evt)
+   setApiToken(apiToken.value)
+}
+
 
 </script>
 
@@ -13,10 +24,16 @@
    </header>
 
    <main>
-      <RouterView />
+      <RouterView v-if="apiTokenValid" />
+      <div v-if="!apiTokenValid">
+         <form @submit.prevent="updateApiToken" style="display:flex; gap: .33em">
+            Enter API Token: <input v-model="apiToken" name="apiToken" size="32" />
+            <input type="submit" value="Save" autofocus />
+         </form>
+      </div>
    </main>
 
-   <footer> </footer>
+   <footer></footer>
 
 </template>
 
@@ -42,16 +59,20 @@
 
 footer
    padding 1.5em 0
-   //border 1px solid orange
+
+//border 1px solid orange
 
 table
    border 1px solid
    border-collapse collapse
+
    thead
       background-color #ccc;
+
    tbody
       tr:nth-child(even)
          background-color #eee;
+
    td, th
       margin 0
       padding .33em .66em
diff --git a/vue/src/components/Header.vue b/vue/src/components/Header.vue
index 538d86d..4889214 100644
--- a/vue/src/components/Header.vue
+++ b/vue/src/components/Header.vue
@@ -1,5 +1,6 @@
 <script setup>
 
+import {apiTokenValid, deleteApiToken} from "../lib/api"
 </script>
 
 <template>
@@ -9,6 +10,10 @@
       <div>|</div>
       <RouterLink :to="`/ui/user`">Users</RouterLink>
       <RouterLink :to="`/ui/kurs`">Courses</RouterLink>
+      <div style="flex-grow: 1" />
+      <div v-if="apiTokenValid">
+         <button type="button" @click="deleteApiToken()">logout</button>
+      </div>
    </div>
 
 </template>
diff --git a/vue/src/lib/api.js b/vue/src/lib/api.js
index 3a88ee8..ece15f9 100644
--- a/vue/src/lib/api.js
+++ b/vue/src/lib/api.js
@@ -1,19 +1,36 @@
-const apiToken = "jiuGfr432898D90290kjfsldkfn3hh8F"
+import {computed, ref} from "vue"
+import {useSessionStorage} from "@vueuse/core"
+
+/////// API TOKEN ////////////////////////////////////////////////////////////////
+
+let apiToken = useSessionStorage("apiToken", "")
+export const apiTokenValid = computed(() => apiToken.value !== null && apiToken.value !== "")
+export function setApiToken(token) {
+   apiToken.value = token
+}
+export function deleteApiToken() {
+   apiToken.value = null
+}
+
+/////// CONSTANTS ////////////////////////////////////////////////////////////////
+
 export const apiBase = "/api/"
 export const iliasBase = "http://localhost:8060"
 
+/////// KURS ////////////////////////////////////////////////////////////////
+
 export async function getKurs (kursId) {
-   let resKurs = await fetch(`${apiBase}/kurs/${kursId}?token=${apiToken}`)
+   let resKurs = await fetch(`${apiBase}/kurs/${kursId}?token=${apiToken.value}`)
    return await resKurs.json()
 }
 
 export async function getKursItems (kursId) {
-   let resKurs = await fetch(`${apiBase}/kurs/items/${kursId}?token=${apiToken}`)
+   let resKurs = await fetch(`${apiBase}/kurs/items/${kursId}?token=${apiToken.value}`)
    return await resKurs.json()
 }
 
 export async function getKursTn (kursId) {
-   let resKurs = await fetch(`${apiBase}/kurs/teilnehmer/${kursId}?token=${apiToken}`)
+   let resKurs = await fetch(`${apiBase}/kurs/teilnehmer/${kursId}?token=${apiToken.value}`)
    return await resKurs.json()
 }
 

--
Gitblit v1.8.0