1 files changed, 43 insertions, 38 deletions

diff --git a/cmd/ui/index.html b/cmd/ui/index.html
index bc88357..1b69784 100644
--- a/cmd/ui/index.html
+++ b/cmd/ui/index.html
@@ -12,41 +12,45 @@
       <p>{{message}}</p>
       <p>
         <button type="button" @click="fetchPublicData">Public</button>
-        <button type="button" @click="fetchPrivateData">Private</button>
-        <button type="button" @click="fetchPrivateScopedData">Private Scoped</button>
+        <button type="button" @click="fetchUsers">Users</button>
+        <button type="button" @click="fetchIncidents">Incidents</button>
         <a href="/logout">Logout</a>
       </p>
 
-      <h1>Access Token</h1>
-      <textarea rows="4" cols="200" disabled=disabled><%= .Token.AccessToken %></textarea>
-      <%= range $key, $value := .AccessTokenClaims %>
-      <li><strong><%= $key %></strong>: <%= $value %></li>
-      <%= end %>
+      <details>
+        <summary>Tokens</summary>
 
-      <h1>Id Token</h1>
-      <ul>
-        <li>issuer: <%=.IdToken.Issuer%></li>
-        <li>audience: <%=.IdToken.Audience%></li>
-        <li>subject: <%=.IdToken.Subject%></li>
-        <li>expire: <%=.IdToken.Expiry%></li>
-        <li>issued at: <%=.IdToken.IssuedAt%></li>
-        <li>nonce: <%=.IdToken.Nonce%></li>
-      </ul>
-      <textarea rows="4" cols="200" disabled=disabled><%= .IdToken %></textarea>
+        <h1>Access Token</h1>
+        <textarea rows="4" cols="200" disabled=disabled><%= .Token.AccessToken %></textarea>
+        <%= range $key, $value := .AccessTokenClaims %>
+        <li><strong><%= $key %></strong>: <%= $value %></li>
+        <%= end %>
 
-      <h1>Id Token Claims</h1>
-      <%= range $key, $value := .Profile %>
-      <li><strong><%= $key %></strong>: <%= $value %></li>
-      <%= end %>
+        <h1>Id Token</h1>
+        <ul>
+          <li>issuer: <%=.IdToken.Issuer%></li>
+          <li>audience: <%=.IdToken.Audience%></li>
+          <li>subject: <%=.IdToken.Subject%></li>
+          <li>expire: <%=.IdToken.Expiry%></li>
+          <li>issued at: <%=.IdToken.IssuedAt%></li>
+          <li>nonce: <%=.IdToken.Nonce%></li>
+        </ul>
+        <textarea rows="4" cols="200" disabled=disabled><%= .IdToken %></textarea>
 
-      <textarea rows="4" cols="200" disabled=disabled><%=.IdTokenRaw%></textarea>
+        <h1>Id Token Claims</h1>
+        <%= range $key, $value := .Profile %>
+        <li><strong><%= $key %></strong>: <%= $value %></li>
+        <%= end %>
+
+        <textarea rows="4" cols="200" disabled=disabled><%=.IdTokenRaw%></textarea>
+      </details>
     </div>
     <script>
       const { createApp } = Vue;
       createApp({
         data() {
           return {
-            message: "hello vue!"
+            message: "hello, world!"
           }
         },
         methods: {
@@ -54,27 +58,28 @@
             let element = document.querySelector('#app');
             return `Bearer ${element.dataset['token']}`;
           },
-          fetchPublicData() {
-            fetch("http://localhost:3000/api/public")
-              .then((x) => x.json())
-              .then((x) => this.message = x.message)
-              .catch((error) => this.message = error.message)
-          },
-          fetchPrivateData() {
+          defaultHeaders() {
             let headers = new Headers();
             headers.append("Authorization", this.accessToken())
-            fetch("http://localhost:3000/api/private", { headers: headers })
-              .then((x) => x.json())
-              .then((x) => this.message = x.message)
-              .catch((error) => this.message = error.message)
+            return headers;
           },
-          fetchPrivateScopedData() {
-            let headers = new Headers();
-            headers.append("Authorization", this.accessToken())
-            fetch("http://localhost:3000/api/private-scoped", { headers: headers })
+          get(path, headers) {
+            const url = "http://localhost:3000" + path;
+            console.log("fetching " + url);
+            fetch(url, { headers: headers })
               .then((x) => x.json())
+              .then((x) => { console.log(x); return x; })
               .then((x) => this.message = x.message)
               .catch((error) => this.message = error.message)
+          },
+          fetchPublicData() {
+            this.get("/api/public", new Headers())
+          },
+          fetchUsers() {
+            this.get("/api/users", this.defaultHeaders())
+          },
+          fetchIncidents() {
+            this.get("/api/incidents", this.defaultHeaders())
           }
         }
       }).mount('#app')