Cosmetic

public/styles.css

@@ -146,7 +146,6 @@ hr {
   max-width: 13em;
 }
 .providers .error {
-  color: darkred;
   padding: 3px 6px;
   text-align: center;
   font-weight: bold;
@@ -198,6 +197,10 @@ hr {
   text-align: center;
 }
 
+.error {
+  color: darkred;
+}
+
 .from-keycloak-vue {
   margin: 0 1em;
 }
@@ -212,3 +215,8 @@ hr {
 .token .value {
   padding-left: 1em;
 }
+
+.msg {
+  text-align: center;
+  font-weight: bold;
+}

src/App.vue

@@ -5,6 +5,7 @@ import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 
 let resource = ref({})
 const keycloak = useKeycloak()
+let msg = ref("")
 
 function manuallyRefreshAccessToken() {
   // We set a high minValidity to force a token refresh
@@ -27,9 +28,13 @@ function accountManagemnt() {
 
 async function get_resource(id: string) {
   if (!keycloak.keycloak) { return }
-  await keycloak.keycloak.updateToken(5000)
   await resourceServer.get(id).then(
-    resp => resource.value = resp['data']
+    resp => {
+      resource.value = resp['data']
+      msg.value = ""
+    }
+  ).catch(
+    err => msg.value = err
   )
 }
 </script>
@@ -69,10 +74,12 @@ async function get_resource(id: string) {
       <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="key == 'sorry' || key == 'error'" class="error">{{ value }}</div>
+          <div v-else class="value">{{ value }}</div>
         </div>
       </div>
     </div>
+    <div v-if="msg" class="msg resource">{{ msg }}</div>
     <div v-if="settings.tokenSandbox" class="from-keycloak-vue">
       <hr>
       <button @click="manuallyRefreshAccessToken">Refresh access token</button>
@@ -80,7 +87,7 @@ async function get_resource(id: string) {
         <h2>idToken</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.idTokenParsed">
-            <div class=" key">{{ key }}</div>
+            <div class="key">{{ key }}</div>
             <div class="value">{{ value }}</div>
           </div>
         </div>

vite.config.ts

@@ -32,6 +32,7 @@ let baseSettings: UserConfig = {
 
 if (env.VITE_SSL_CERT && env.VITE_SSL_KEY) {
   baseSettings['server'] = {
+    hmr: false,
     https: {
       key: fs.readFileSync(path.resolve(env.VITE_SSL_KEY)),
       cert: fs.readFileSync(path.resolve(env.VITE_SSL_CERT))