Fix some typings

src/App.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { resourceServer, settings, Resources } from '@/main'
+import { resourceServer, settings } from '@/main'
 import { ref } from 'vue'
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 import ResourceButton from './ResourceButton.vue'
 
+export interface Resource{
+  scope_required: string
+  default_resource_id: string
+}
+
+export interface ResourceProviders {
+  [name: string]: Resource
+}
+
 let resourceResponse = ref({})
-let plugins: Resources = ref({})
+let plugins = ref<ResourceProviders>({})
 const keycloak = useKeycloak()
 let msg = ref("")
 
@@ -18,7 +27,7 @@ function logout() {
   keycloak.logoutFn && keycloak.logoutFn()
 }
 
-function accountManagemnt() {
+function accountManagement() {
   keycloak.accountManagement && keycloak.accountManagement()
 }
 
@@ -31,7 +40,7 @@ async function getResources() {
 }
 getResources()
 
-async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
+async function getResource(evt: MouseEvent, resource: Resource, resourceName: string) {
   const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName 
   await resourceServer.get(url).then(
     resp => {
@@ -75,13 +84,13 @@ async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
         <span>Scopes</span>:
         <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope" :innerText="scope"></span>
       </div>
-      <button @click="accountManagemnt">Account management</button>
+      <button @click="accountManagement">Account management</button>
       <button @click="manuallyRefreshAccessToken">Refresh access token</button>
       <button @click="logout" class="logout">Logout</button>
     </div>
     <hr>
     <div class="content">
-      <p>Resources (at {{ settings.resourceServerUrl }}) validated by role:</p>
+      <p>Resources at {{ settings.resourceServerUrl }} (validated by role):</p>
       <div class="links-to-check">
         <button resource-name="public" @click="getResource($event)">Public</button>
         <button resource-name="protected" @click="getResource($event)">Auth protected content</button>
@@ -101,23 +110,23 @@ async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
       </div>
       <p>Resource providers (validated by scope):</p>
       <div class="links-to-check">
-        <ResourceButton v-for="(value, key) in plugins"
+        <ResourceButton v-for="(resource, resourceName) in plugins"
-                :resourceName="key"
+                :resourceName="<string>resourceName"
-                :resourceId="value.default_resource_id"
+                :resourceId="resource.default_resource_id"
-                :innerText="key"
+                :innerText="resourceName"
-                @getResource="getResource($event, key, value)"
+                @getResource="getResource($event, resource, <string>resourceName)"
                 >
         </ResourceButton>
       </div>
       <div class="resources">
         <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="key" :innerText="key"></div>
             <div class="value" :innerText="value"></div>
           </div>
         </div>
       </div>
-      <div v-if="msg" class="msg resource error" :innetText="msg"></div>
+      <div v-if="msg" class="msg resource error" :innerText="msg"></div>
     </div>
     <div v-if="settings.tokenSandbox" class="token-info">
       <hr>
@@ -125,21 +134,21 @@ async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
         <h2>id token</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.idTokenParsed">
-            <div class="key" :innetText="key"></div>
+            <div class="key" :innerText="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" :innetText="key"></div>
+            <div class="key" :innerText="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" :innetText="key"></div>
+            <div class="key" :innerText="key"></div>
             <div class="value" :innerText="value"></div>
           </div>
         </div>

src/ResourceButton.vue

@@ -1,16 +1,16 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { ref, type PropType } from 'vue'
 import { resourceServer } from '@/main'
 
-const props = defineProps({
+const props: { [key: string]: String} = defineProps({
   resourceName: String,
   resourceId: String,
 })
 
-let _class: String = ref("")
+let _class = ref<string>("")
-let _title: String = ref("")
+let _title = ref<string>("")
 
-const init = async (props) => {
+const init = async (props: { [id: string]: any}) => {
   const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName 
   await resourceServer.get(url).then(
     resp => {

src/main.ts

@@ -15,14 +15,6 @@ 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
@@ -96,7 +88,7 @@ export async function checkResource(elem: HTMLLinkElement) {
 }
 
 function checkPerms(className: string) {
-  // Scan elements with className and check the respose
+  // Scan elements with className and check the response
   var rootElems = document.getElementsByClassName(className)
   Array.from(rootElems).forEach(elem =>
     Array.from(elem.children).forEach(elem => checkResource(<HTMLLinkElement>elem))