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>