From a7646122d8e0a82cbf9c8b81451c28fbc650c8f6 Mon Sep 17 00:00:00 2001
From: Mike Crute <mike@crute.us>
Date: Wed, 24 Nov 2021 12:00:07 -0800
Subject: Cleanup index template

---
 templates/assets/site.css | 46 +++++++++++++++++++++++++++++++++++++++++-
 templates/assets/site.js  | 51 +++++++++++++++++++++++------------------------
 templates/index.tpl       | 17 ++++++++--------
 3 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/templates/assets/site.css b/templates/assets/site.css
index 65fb4ce..df1bab8 100644
--- a/templates/assets/site.css
+++ b/templates/assets/site.css
@@ -35,6 +35,15 @@ tt {
     border: 1px solid #999;
     padding: 0.25em;
 }
+#username {
+    font-weight: bolder;
+}
+#login-row {
+    text-align: right;
+}
+#api-key-block {
+    display: none;
+}
 #api-key {
     margin: auto;
 }
@@ -43,13 +52,26 @@ tt {
 }
 #api-error {
     border: 0.25em solid red;
-    color: white;
+    color: yellow;
     font-size: 2em;
     background-color: #ff8080;
     padding: 1em;
     text-align: center;
     display: none;
 }
+#api-error .sub-message {
+    font-size: 1rem;
+    color: white;
+}
+#api-success {
+    border: 0.25em solid green;
+    color: green;
+    font-size: 2em;
+    background-color: #00ff80;
+    padding: 1em;
+    text-align: center;
+    display: none;
+}
 #account-table tr td:nth-child(2),
 #account-table tr td:nth-child(3) {
     text-align: center;
@@ -60,3 +82,25 @@ tt {
 body.isAdmin .admin {
     display: initial;
 }
+.tag {
+    display: block;
+    float: right;
+    color: white;
+    font-size: 0.8em;
+    border-radius: 0.3em;
+    padding: 0.2em 0.5em;
+    cursor: default;
+}
+.vendor-aws {
+    background-color: orange;
+}
+.vendor-gcp {
+    background-color: blue;
+}
+.vendor-oci {
+    background-color: red;
+}
+.vendor-azure {
+    color: black;
+    background-color: lightblue;
+}
diff --git a/templates/assets/site.js b/templates/assets/site.js
index ebf9f5f..7ba4b15 100644
--- a/templates/assets/site.js
+++ b/templates/assets/site.js
@@ -1,12 +1,12 @@
 function fillTemplate(templateId, values) {
     var tpl = document.getElementById(templateId).text;
 
-    Object.keys(values).forEach(function(key) {
+    Object.keys(values).forEach(key => {
         tpl = tpl.replace(new RegExp("\\[\\[ \\." + key + " \\]\\]", "g"), values[key]);
     });
 
     var out = [];
-    tpl.split("\n").forEach(function(line) {
+    tpl.split("\n").forEach(line => {
         line = line.replace(/^\s+/, "").replace(/\s+$/, "");
         if (line !== "") {
             out.push(line);
@@ -43,7 +43,7 @@ function accountTableLinkClick(event) {
         "headers": {
             "Accept": event.target.dataset["contentType"]
         }
-    }).then(r => r.text()).then(function(text) {
+    }).then(r => r.text()).then(text => {
         var newTr = fillTemplate("credential_row_template", {
             "Account": account,
             "Content": text,
@@ -51,25 +51,19 @@ function accountTableLinkClick(event) {
 
         event.target.text = oldText;
         thisRow.insertAdjacentHTML("afterend", newTr);
-        thisRow.nextElementSibling.getElementsByTagName("button")[0].addEventListener("click", function(event) {
-            event.target.parentNode.parentNode.remove();
+        thisRow.nextElementSibling.getElementsByTagName("button")[0].addEventListener("click", e => {
+            e.target.parentNode.parentNode.remove();
         });
     });
 
     return false;
 }
 
-function populateAccountTable() {
-    fetch("/api/account").then(getJSON).then(function(response) {
-        response.forEach(populateAccountRow);
-    });
-}
-
 function populateAccountRow(row) {
-    var out = fillTemplate("account_row_template", row);
-    document.querySelector("#account-table tr").insertAdjacentHTML("afterend", out);
+    document.querySelector("#account-table tr").insertAdjacentHTML("afterend",
+        fillTemplate(row["vendor"] + "_account_row_template", row));
 
-    document.querySelectorAll(".account-row a[data-content-type]").forEach(function(e) {
+    document.querySelectorAll(".account-row a[data-content-type]").forEach(e => {
         e.addEventListener("click", accountTableLinkClick);
     });
 }
@@ -78,25 +72,30 @@ function getCookie(name) {
     return document.cookie.match(new RegExp(name + "=\"?([^;\"]*)\"?;?"))[1];
 }
 
-function parseJWT(token) {
-    return JSON.parse(atob(token.split(".")[1]));
+function parseJWT() {
+    return JSON.parse(atob(getCookie("github-token").split(".")[1]));
 }
 
-function parseJWTExpires(token) {
-    return new Date(parseJWT(token)["exp"] * 1000);
+function parseJWTExpires() {
+    return new Date(parseJWT()["exp"] * 1000);
 }
 
-function isAdmin(token) {
-    return parseJWT(token)["admin"];
+function isAdmin() {
+    return parseJWT()["admin"];
 }
 
-function populateAPIKey() {
-    document.querySelector("#api-key textarea").innerText = getCookie("github-token");
-    document.querySelector("#session-expires").innerText = parseJWTExpires(getCookie("github-token"));
-}
+function setupHomePage() {
+    fetch("/api/account").then(getJSON).then(r => r.forEach(populateAccountRow));
 
-function setAdminClass() {
-    if (isAdmin(getCookie("github-token"))) {
+    document.getElementById("username").innerText = parseJWT()["sub"];
+
+    if (isAdmin()) {
         document.body.classList.add("isAdmin");
     }
+
+    document.getElementById("show-api-key").addEventListener("click", _ => {
+        document.querySelector("#api-key textarea").innerText = getCookie("github-token");
+        document.querySelector("#session-expires").innerText = parseJWTExpires();
+        document.getElementById("api-key-block").style.display = "block";
+    });
 }
diff --git a/templates/index.tpl b/templates/index.tpl
index c8c95d4..9baef2a 100644
--- a/templates/index.tpl
+++ b/templates/index.tpl
@@ -12,10 +12,9 @@
                 </td>
             </tr>
         </script>
-        <script id="account_row_template" type="text/template">
+        <script id="aws_account_row_template" type="text/template">
             <tr id="account-row-[[ .short_name ]]" class="account-row" data-account-name="[[ .short_name ]]" data-global-credential-endpoint="[[ .global_credential_url ]]">
-                <td>[[ .name ]]</td>
-                <td>[[ .vendor ]]</td>
+                <td>[[ .name ]] <span class="vendor-tag vendor-[[ .vendor ]]" alt="[[ .vendor ]]" title="[[ .vendor ]]">[[ .vendor ]]</span></td>
                 <td>
                     <a href="[[ .console_redirect_url ]]">Console</a> |
                     <a data-content-type="application/vnd.broker.v2.credential.aws.ini" href="#/cli/[[ .short_name ]]">AWS CLI</a> |
@@ -27,29 +26,31 @@
         </script>
         <script type="text/javascript" src="/assets/site.js"></script>
         <script type="text/javascript">
-            window.addEventListener('load', populateAPIKey);
-            window.addEventListener('load', populateAccountTable);
-            window.addEventListener('load', setAdminClass);
+            window.addEventListener('load', setupHomePage);
         </script>
     </head>
     <body>
         <p id="api-error">Error communicating with the API.</p>
 
+        <div id="login-row">
+            Hello <span id="username"></span>! (<a href="/api">API</a> | <a href="#" id="show-api-key">API Key</a> | <a href="/logout">Logout</a>)
+        </div>
+
         <h1>Cloud Accounts</h1>
         <table id="account-table">
             <tr>
                 <th>Console Login</th>
-                <th>Vendor</th>
                 <th>Credentials</th>
             </tr>
         </table>
-        <p><button class="admin">Add Account</button></p>
 
+        <div id="api-key-block">
         <h1>API Key</h1>
         <div id="api-key">
             <p>To access <a href="/api/account">the API</a> set the header <tt>Authorization: Bearer {token}</tt> to the token below:</p>
             <textarea>Bearer {token}</textarea>
             <p><b>Token Expires:</b> <span id="session-expires"></span></p>
         </div>
+        </div>
     </body>
 </html>
-- 
cgit v1.2.3