Cosmetic

src/oidc_test/static/styles.css

@@ -21,6 +21,12 @@ hr {
 .hidden {
   display: none;
 }
+.center {
+  text-align: center;
+}
+.error {
+  color: darkred;
+}
 .content {
   width: 100%;
   display: flex;
@@ -111,6 +117,7 @@ hr {
   background-color: #8888FF80;
 }
 
+
 /* For home */
 
 .login-box {
@@ -170,6 +177,17 @@ hr {
   border-radius: 8px;
 }
 
+.token {
+  overflow-wrap: anywhere;
+  font-family: monospace;
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+}
+
 .resource {
   padding: 0.5em;
   display: flex;
@@ -187,6 +205,26 @@ hr {
   display: flex;
 }
 
+.resource {
+  text-align: center;
+}
+
+.token-info {
+  margin: 0 1em;
+}
+
 .key {
   font-weight: bold;
 }
+
+.token .key, .token .value {
+  display: inline;
+}
+.token .value {
+  padding-left: 1em;
+}
+
+.msg {
+  text-align: center;
+  font-weight: bold;
+}

src/oidc_test/static/utils.js

@@ -48,6 +48,9 @@ async function get_resource(id, token, authProvider) {
       let vElem = document.createElement('div')
       vElem.innerText = v
       vElem.className = "value"
+      if (k == "sorry") {
+        vElem.classList.add("error")
+      }
       r.appendChild(kElem)
       r.appendChild(vElem)
       rootElem.appendChild(r)