adding API Token Management

alex

2025-06-03 499dd1b3076a5ce171730f89f327eb2428921218

adding API Token Management

 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

 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>

 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()
}