Add ResourceButton component; refactoring

src/App.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { resourceServer, settings } from '@/main'
+import { resourceServer, settings, Resources } from '@/main'
 import { ref } from 'vue'
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+import ResourceButton from './ResourceButton.vue'
 
-let resource = ref({})
+let resourceResponse = ref({})
+let plugins: Resources = ref({})
 const keycloak = useKeycloak()
 let msg = ref("")
 
@@ -12,18 +14,6 @@ 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
-  const response = await authServer.get('/oidc-test-web')
-}
-
-function getResourceUrl(url: string): string {
-  return settings.resourceServerUrl + "/" + url
-}
-*/
-
 function logout() {
   keycloak.logoutFn && keycloak.logoutFn()
 }
@@ -32,19 +22,25 @@ function accountManagemnt() {
   keycloak.accountManagement && keycloak.accountManagement()
 }
 
-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(
+async function getResources() {
+  await resourceServer.get("").then(
     resp => {
-      resource.value = resp['data']
+      plugins = resp.data["plugins"]
+    }
+  )
+}
+getResources()
+
+async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
+  const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName 
+  await resourceServer.get(url).then(
+    resp => {
+      resourceResponse.value = resp['data']
       msg.value = ""
     }
   ).catch(
     err => {
-      resource.value = []
+      resourceResponse.value = []
       if (err.response) {
         msg.value = `${err.message} (${err.response.statusText}): ${err.response.data["detail"]}`
       } else {
@@ -62,21 +58,22 @@ async function get_resource(evt: MouseEvent) {
       Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
     </p>
     <div v-if="keycloak.authenticated" class="user-info">
-      <p>Hey, {{ keycloak.idTokenParsed?.name }}</p>
+      <p>Hey, <span :innerText="keycloak.idTokenParsed?.name"></span></p>
       <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
-      <div>{{ keycloak.idTokenParsed?.email }}</div>
+      <div :innerText="keycloak.idTokenParsed?.email"></div>
       <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
         <span>Roles for oidc-test:</span>
-        <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']" class="role">{{
-          role }}</span>
+        <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']"
+              class="role" :innerText="role">
+        </span>
       </div>
       <div v-if="keycloak.idTokenParsed?.oidc_provider">
         <span>Provider:</span>
-        {{ keycloak.idTokenParsed.oidc_provider }}
+        <span :innerText="keycloak.idTokenParsed.oidc_provider"></span>
       </div>
       <div v-if="keycloak.tokenParsed?.scope">
         <span>Scopes</span>:
-        <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope">{{ scope }}</span>
+        <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope" :innerText="scope"></span>
       </div>
       <button @click="accountManagemnt">Account management</button>
       <button @click="manuallyRefreshAccessToken">Refresh access token</button>
@@ -84,38 +81,43 @@ async function get_resource(evt: MouseEvent) {
     </div>
     <hr>
     <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
+        <button resource-name="public" @click="getResource($event)">Public</button>
+        <button resource-name="protected" @click="getResource($event)">Auth protected content</button>
+        <button resource-name="protected-by-foorole" @click="getResource($event)">Auth + foorole protected
           content</button>
-        <button resource-id="protected-by-foorole-or-barrole" @click="get_resource($event)">Auth + foorole or barrole
+        <button resource-name="protected-by-foorole-or-barrole" @click="getResource($event)">Auth + foorole or barrole
           protected
           content</button>
-        <button resource-id="protected-by-barrole" @click="get_resource($event)">Auth + barrole protected
+        <button resource-name="protected-by-barrole" @click="getResource($event)">Auth + barrole protected
           content</button>
-        <button resource-id="protected-by-foorole-and-barrole" @click="get_resource($event)">Auth + foorole and barrole
+        <button resource-name="protected-by-foorole-and-barrole" @click="getResource($event)">Auth + foorole and barrole
           protected
           content</button>
-        <button resource-id="fast_api_depends" @click="get_resource($event)" class="hidden">Using FastAPI
+        <button resource-name="fast_api_depends" @click="getResource($event)" class="hidden">Using FastAPI
           Depends</button>
-        <!--<button resource-id="introspect" @click="get_resource($event)">Introspect token (401 expected)</button>-->
+        <!--<button resource-id="introspect" @click="getResource($event)">Introspect token (401 expected)</button>-->
+      </div>
+      <p>Resource providers (validated by scope):</p>
+      <div class="links-to-check">
+        <ResourceButton v-for="(value, key) in plugins"
+                :resourceName="key"
+                :resourceId="value.default_resource_id"
+                :innerText="key"
+                @getResource="getResource($event, key, value)"
+                >
+        </ResourceButton>
       </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 v-if="Object.entries(resourceResponse).length > 0" class="resource">
+          <div v-for="(value, key) in resourceResponse">
+            <div class="key" :innetText="key"></div>
+            <div class="value" :innerText="value"></div>
           </div>
         </div>
       </div>
-      <div v-if="msg" class="msg resource error">{{ msg }}</div>
+      <div v-if="msg" class="msg resource error" :innetText="msg"></div>
     </div>
     <div v-if="settings.tokenSandbox" class="token-info">
       <hr>
@@ -123,22 +125,22 @@ async function get_resource(evt: MouseEvent) {
         <h2>id token</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.idTokenParsed">
-            <div class="key">{{ key }}</div>
-            <div class="value">{{ value }}</div>
+            <div class="key" :innetText="key"></div>
+            <div class="value" :innerText="value"></div>
           </div>
         </div>
         <h2>access token</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.tokenParsed">
-            <div class="key">{{ key }}</div>
-            <div class="value">{{ value }}</div>
+            <div class="key" :innetText="key"></div>
+            <div class="value" :innerText="value"></div>
           </div>
         </div>
         <h2>refresh token</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.refreshTokenParsed">
-            <div class="key">{{ key }}</div>
-            <div class="value">{{ value }}</div>
+            <div class="key" :innetText="key"></div>
+            <div class="value" :innerText="value"></div>
           </div>
         </div>
       </div>

src/ResourceButton.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { resourceServer } from '@/main'
+
+const props = defineProps({
+  resourceName: String,
+  resourceId: String,
+})
+
+let _class: String = ref("")
+let _title: String = ref("")
+
+const init = async (props) => {
+  const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName 
+  await resourceServer.get(url).then(
+    resp => {
+      _class.value = `hasResponseStatus status-${resp.status}`
+      _title.value = `Response code: ${resp.status} - ${resp.statusText}`
+    }
+  ).catch(
+    err => {
+      _class.value = `hasResponseStatus status-${err.response.status}`
+      _title.value = `Response code: ${err.response.status} - ${err.response.statusText}`
+    }
+  )
+}
+
+init(props);
+
+</script>
+
+<template>
+  <button :class="_class" :title="_title" @click="$emit('getResource', $event)"></button>
+</template>

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 import Keycloak from "keycloak-js"
 import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
 import axios, { type AxiosInstance } from 'axios'
@@ -15,6 +15,14 @@ interface Settings {
   tokenSandbox: boolean
 }
 
+export interface Resource {
+  name: string
+}
+
+export interface Resources {
+  [name: string]: Resource
+}
+
 export let settings: Settings
 export let authServer: AxiosInstance
 export let resourceServer: AxiosInstance
@@ -72,8 +80,8 @@ function initializeTokenInterceptor(keycloak: Keycloak) {
   })
 }
 
-async function checkHref(elem: HTMLLinkElement) {
-  const url = elem.getAttribute("resource-id")
+export async function checkResource(elem: HTMLLinkElement) {
+  const url = elem.getAttribute("resource-name")
   if (!url) return
   await resourceServer.get(url).then(
     resp => {
@@ -88,11 +96,11 @@ async function checkHref(elem: HTMLLinkElement) {
 }
 
 function checkPerms(className: string) {
+  // Scan elements with className and check the respose
   var rootElems = document.getElementsByClassName(className)
   Array.from(rootElems).forEach(elem =>
-    Array.from(elem.children).forEach(elem => checkHref(<HTMLLinkElement>elem))
+    Array.from(elem.children).forEach(elem => checkResource(<HTMLLinkElement>elem))
   )
 }
 
-
 const app = createApp(App)