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>
+</template>
-
-<style scoped>
-textarea {
-  width: 100%;
-  height: 30vh;
-}
-</style>

src/assets/styles.css

@@ -0,0 +1,169 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: floralwhite;
+  margin: 0;
+}
+h1 {
+  text-align: center;
+  background-color: #f7c7867d;
+  margin: 0 0 0.2em 0;
+}
+p {
+  margin: 0.2em;
+}
+hr {
+  margin: 0.2em;
+}
+.hidden {
+  display: none;
+}
+.center {
+  text-align: center;
+}
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.user-info {
+  padding: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  flex-direction: column;
+  width: fit-content;
+  align-items: center;
+  margin: 5px auto;
+  box-shadow: 0px 0px 10px lightgreen;
+  background-color: lightgreen;
+  border-radius: 8px;
+}
+.user-info * {
+  flex: 2 1 auto;
+  margin: 0;
+}
+.user-info .picture {
+  max-width: 3em;
+  max-height: 3em
+}
+.user-info a.logout {
+  border: 2px solid darkkhaki;
+  padding: 3px 6px;
+  text-decoration: none;
+  text-align: center;
+  color: black;
+}
+.user-info a.logout:hover {
+  background-color: orange;
+}
+.debug-auth {
+  font-size: 90%;
+  background-color: #d8bebc75;
+  padding: 6px;
+}
+.debug-auth * {
+  margin: 0;
+}
+.debug-auth p {
+  text-align: center;
+  border-bottom: 1px solid black;
+}
+.debug-auth ul {
+  padding: 0;
+  list-style: none;
+}
+.debug-auth p, .debug-auth .key {
+  font-weight: bold;
+}
+.content {
+  text-align: left;
+}
+.hasResponseStatus {
+  background-color: #88888840;
+}
+.hasResponseStatus.status-200 {
+  background-color: #00ff0040;
+}
+.hasResponseStatus.status-401 {
+  background-color: #ff000040;
+}
+.hasResponseStatus.status-403 {
+  background-color: #ff990040;
+}
+.hasResponseStatus.status-404 {
+  background-color: #ffCC0040;
+}
+.hasResponseStatus.status-503 {
+  background-color: #ffA88050;
+}
+.role {
+  padding: 3px 6px;
+  background-color: #44228840;
+}
+
+/* For home */
+
+.login-box {
+  text-align: center;
+  background-color: antiquewhite;
+  margin: 0.5em auto;
+  width: fit-content;
+  box-shadow: 0 0 10px #49759b88;
+  border-radius: 8px;
+}
+.login-box .description {
+  font-style: italic;
+  font-weight: bold;
+  background-color: #f7c7867d;
+  padding: 6px;
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+.providers {
+  justify-content: center;
+  padding: 0.8em;
+}
+.providers .provider {
+  min-height: 2em;
+}
+.providers .provider a.link {
+  text-decoration: none;
+  max-height: 2em;
+}
+.providers .provider .link div {
+  text-align: center;
+  background-color: #f7c7867d;
+  border-radius: 8px;
+  padding: 6px;
+  text-align: center;
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+}
+.providers .provider .hint {
+  font-size: 80%;
+  max-width: 13em;
+}
+.providers .error {
+  color: darkred;
+  padding: 3px 6px;
+  text-align: center;
+  font-weight: bold;
+  flex: 1 1 auto;
+}
+.content .links-to-check {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: wrap;
+}
+.content .links-to-check a {
+  color: black;
+  padding: 5px 10px;
+  text-decoration: none;
+  border-radius: 8px;
+}
+
+