Style user info (css from fastapi version)

src/App.vue

@@ -1,3 +1,4 @@
+<style src="./assets/styles.css"></style>
 <script setup lang="ts">
 import { HTTP } from '@/main'
 import type { AxiosResponseHeaders } from 'axios'
@@ -18,10 +19,51 @@ async function doAuthenticatedRequest() {
   const response = await HTTP.get('/oidc-test-web')
   requestHeaders.value = response.config.headers
 }
+
+/*
+class User {
+  public sub: string
+  public name: string
+  public picture: string
+  public email: string
+}
+
+function createUser(): User {
+  return new User(
+    keycloak.sub,
+    keycloak.fullName,
+    keycloak.picture,
+    keycloak.email,
+  )
+}
+
+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>
+      <img v-if="keycloak.idTokenParsed.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
+      <div>{{ keycloak.idTokenParsed.email }}</div>
+      <!-- 
+      <div v-if="keycloak.idTokenParsed.roles">
+        <span>Roles:</span>
+        {% for role in user.roles %}
+          <span class="role">{{ .name }}</span>
+        {% endfor %}
+        </div>
+      -->
+      <div v-if="keycloak.idTokenParsed.oidc_provider">>
+        <span>Provider:</span>
+        {{ keycloak.idTokenParsed.oidc_provider }} 
+      </div>
+      <a href="logout" class="logout">Logout</a>
+    </div>
   <div>
     <div>Hey {{ keycloak?.fullName }}</div>
     <button @click="doAuthenticatedRequest">Trigger request</button>
@@ -30,11 +72,4 @@ async function doAuthenticatedRequest() {
     <textarea :value="requestHeaders?.toString()" readonly></textarea>
     </div>
   </div>
-</template>
-
-<style scoped>
-textarea {
-  width: 100%;
-  height: 30vh;
-}
-</style>
+</template>