Add roles, logout, cleanup

src/App.vue

@@ -20,56 +20,36 @@ async function doAuthenticatedRequest() {
   requestHeaders.value = response.config.headers
 }
 
-/*
-class User {
-  public sub: string
-  public name: string
-  public picture: string
-  public email: string
+function logout() {
+  keycloak.logoutFn()
 }
 
-function createUser(): User {
-  return new User(
-    keycloak.sub,
-    keycloak.fullName,
-    keycloak.picture,
-    keycloak.email,
-  )
+function accountManagemnt() {
+  keycloak.accountManagement()
 }
-
-let user: User
-keycloak.onAuthSuccess = () => {
-  user: User = createUser()
-}
-*/
 </script>
 
 <template>
   <h1>OIDC pure web client test</h1>
     <div v-if="keycloak.authenticated" class="user-info">
-      <p>Hey, {{ keycloak.idTokenParsed.fullName }}</p>
+      <p>Hey, {{ keycloak.idTokenParsed.name }}</p>
       <img v-if="keycloak.idTokenParsed.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
       <div>{{ keycloak.idTokenParsed.email }}</div>
-      <!-- 
-      <div v-if="keycloak.idTokenParsed.roles">
+      <div v-if="keycloak.resourceAccess['oidc-test-web']">
         <span>Roles:</span>
-        {% for role in user.roles %}
-          <span class="role">{{ .name }}</span>
-        {% endfor %}
+          <span v-for="role in keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{ role }}</span>
         </div>
-      -->
-      <div v-if="keycloak.idTokenParsed.oidc_provider">>
+      <div v-if="keycloak.idTokenParsed.oidc_provider">
         <span>Provider:</span>
         {{ keycloak.idTokenParsed.oidc_provider }} 
       </div>
-      <a href="logout" class="logout">Logout</a>
+      <button @click="logout" class="logout">Logout</button>
+      <button @click="accountManagemnt">Account management</button>
     </div>
-  <div>
-    <div>Hey {{ keycloak?.fullName }}</div>
+  <div class="from-keycloak-vue">
     <button @click="doAuthenticatedRequest">Trigger request</button>
     <button @click="manuallyRefreshAccessToken">Refresh access token</button>
-    <div>
-    <textarea :value="requestHeaders?.toString()" readonly></textarea>
+    <div class="token" :innerText="requestHeaders?.toString()">
     </div>
   </div>
-</template>
+</template>

src/assets/styles.css

@@ -166,4 +166,11 @@ hr {
   border-radius: 8px;
 }
 
+.token {
+  overflow-wrap: anywhere;
+  font-family: monospace;
+}
 
+.from-keycloak-vue {
+  display: none;
+}

src/main.ts

@@ -6,7 +6,7 @@ import App from './App.vue'
 
 export const HTTP = axios.create({
   baseURL: '/',
-  timeout: 10_000
+  timeout: 10.000
 })
 
 function initializeTokenInterceptor() {
@@ -28,9 +28,8 @@ createApp(App)
       realm: 'test',
       clientId: 'oidc-test-web',
     },
-    onReady(kk: Keycloak, vkk) {
-      //console.log(kk, vkk)
-      console.log(kk.idTokenParsed)
+    init: { onLoad: 'check-sso' },
+    onReady(keycloak: Keycloak, vkk) {
       initializeTokenInterceptor()
     },
   })