Follow changes of oidc-test: move all resources to json; use buttons

public/styles.css

@@ -170,11 +170,12 @@ hr {
   gap: 0.5em;
   flex-flow: wrap;
 }
-.content .links-to-check a {
+.content .links-to-check button {
   color: black;
   padding: 5px 10px;
   text-decoration: none;
   border-radius: 8px;
+  border: none;
 }
 
 .token {
@@ -182,12 +183,6 @@ hr {
   font-family: monospace;
 }
 
-.actions {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-}
-
 .resource {
   padding: 0.5em;
   display: flex;

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { authServer, resourceServer, settings } from '@/main'
+import { resourceServer, settings } from '@/main'
 import { ref } from 'vue'
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 
@@ -12,6 +12,7 @@ function manuallyRefreshAccessToken() {
   keycloak.keycloak && keycloak.keycloak.updateToken(5000)
 }
 
+/*
 async function doAuthenticatedRequest() {
   // Doesn't really go anywhere, but as you see from the headers in the request
   // it contains the latest access token at all times
@@ -21,6 +22,7 @@ async function doAuthenticatedRequest() {
 function getResourceUrl(url: string): string {
   return settings.resourceServerUrl + "/" + url
 }
+*/
 
 function logout() {
   keycloak.logoutFn && keycloak.logoutFn()
@@ -30,8 +32,11 @@ function accountManagemnt() {
   keycloak.accountManagement && keycloak.accountManagement()
 }
 
-async function get_resource(id: string) {
-  if (!keycloak.keycloak) { return }
+async function get_resource(evt: MouseEvent) {
+  if (!keycloak.keycloak) return
+  if (!evt.target) return
+  const id: string | null = (<Element>evt.target).getAttribute("resource-id")
+  if (!id) return
   await resourceServer.get(id).then(
     resp => {
       resource.value = resp['data']
@@ -78,40 +83,39 @@ async function get_resource(id: string) {
       <button @click="logout" class="logout">Logout</button>
     </div>
     <hr>
-    <p class="center">
-      Fetch resources from a resource server (at {{ settings.resourceServerUrl }})
-      with your authentication token:
-    </p>
-    <div class="actions">
-      <button @click="get_resource('time')">Time</button>
-      <button @click="get_resource('bs')">BS</button>
-    </div>
-    <div class="resources">
-      <div v-if="Object.entries(resource).length > 0" class="resource">
-        <div v-for="(value, key) in resource">
-          <div class="key">{{ key }}</div>
-          <div v-if="key == 'sorry' || key == 'error'" class="error">{{ value }}</div>
-          <div v-else class="value">{{ value }}</div>
+    <div class="content">
+      <p>Resources (at {{ settings.resourceServerUrl }}) validated by scope:</p>
+      <div class="links-to-check">
+        <button resource-id="time" @click="get_resource($event)">Time</button>
+        <button resource-id="bs" @click="get_resource($event)">BS</button>
+      </div>
+      <p>Resources (at {{ settings.resourceServerUrl }}) validated by role:</p>
+      <div class="links-to-check">
+        <button resource-id="public" @click="get_resource($event)">Public</button>
+        <button resource-id="protected" @click="get_resource($event)">Auth protected content</button>
+        <button resource-id="protected-by-foorole" @click="get_resource($event)">Auth + foorole protected
+          content</button>
+        <button resource-id="protected-by-foorole-or-barrole" @click="get_resource($event)">Auth + foorole or barrole
+          protected
+          content</button>
+        <button resource-id="protected-by-barrole" @click="get_resource($event)">Auth + barrole protected
+          content</button>
+        <button resource-id="protected-by-foorole-and-barrole" @click="get_resource($event)">Auth + foorole and barrole
+          protected
+          content</button>
+        <button resource-id="fast_api_depends" @click="get_resource($event)" class="hidden">Using FastAPI
+          Depends</button>
+        <!--<button resource-id="introspect" @click="get_resource($event)">Introspect token (401 expected)</button>-->
+      </div>
+      <div class="resources">
+        <div v-if="Object.entries(resource).length > 0" class="resource">
+          <div v-for="(value, key) in resource">
+            <div class="key">{{ key }}</div>
+            <div class="value">{{ value }}</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div v-if="msg" class="msg resource error">{{ msg }}</div>
-    <div class="content">
-      <p>
-        These links should get different response codes depending on the authorization:
-      </p>
-      <div class="links-to-check">
-        <a v-bind:href="getResourceUrl('public')">Public</a>
-        <a v-bind:href="getResourceUrl('protected')">Auth protected content</a>
-        <a v-bind:href="getResourceUrl('protected-by-foorole')">Auth + foorole protected content</a>
-        <a v-bind:href="getResourceUrl('protected-by-foorole-or-barrole')">Auth + foorole or barrole protected
-          content</a>
-        <a v-bind:href="getResourceUrl('protected-by-barrole')">Auth + barrole protected content</a>
-        <a v-bind:href="getResourceUrl('protected-by-foorole-and-barrole')">Auth + foorole and barrole protected
-          content</a>
-        <a v-bind:href="getResourceUrl('fast_api_depends')" class="hidden">Using FastAPI Depends</a>
-        <a v-bind:href="getResourceUrl('introspect')">Introspect token (401 expected)</a>
-      </div>
+      <div v-if="msg" class="msg resource error">{{ msg }}</div>
     </div>
     <div v-if="settings.tokenSandbox" class="token-info">
       <hr>

src/main.ts

@@ -74,7 +74,9 @@ function initializeTokenInterceptor(keycloak: Keycloak) {
 }
 
 async function checkHref(elem: HTMLLinkElement) {
-  await resourceServer.get(elem.href).then(
+  const url = elem.getAttribute("resource-id")
+  if (!url) return
+  await resourceServer.get(url).then(
     resp => {
       elem.classList.add("hasResponseStatus")
       elem.classList.add("status-" + resp.status)