Update base.html and the token display page to newer style. Add logout text to token display.

NotChristianGarcia · NotChristianGarcia · commit f5a8fcc85a1e · 2025-07-19T20:27:35.000-07:00
diff --git a/service/templates/base.html b/service/templates/base.html
@@ -26,74 +26,6 @@
     </style>
   {% endblock %}
 </head>
-<!--<html>-->
-<!--<head>-->
-<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
-<!--<style>-->
-<!--body {font-family: Arial, Helvetica, sans-serif;}-->
-<!--form {border: 3px solid #f1f1f1;}-->
-
-<!--input[type=text], input[type=password] {-->
-<!--  width: 100%;-->
-<!--  padding: 12px 20px;-->
-<!--  margin: 8px 0;-->
-<!--  display: inline-block;-->
-<!--  border: 1px solid #ccc;-->
-<!--  box-sizing: border-box;-->
-<!--}-->
-
-<!--button {-->
-<!--  background-color: #000033;-->
-<!--  color: white;-->
-<!--  padding: 14px 20px;-->
-<!--  margin: 8px 0;-->
-<!--  border: none;-->
-<!--  cursor: pointer;-->
-<!--  width: 100%;-->
-<!--}-->
-
-<!--button:hover {-->
-<!--  opacity: 0.8;-->
-<!--}-->
-
-<!--.cancelbtn {-->
-<!--  width: auto;-->
-<!--  padding: 10px 18px;-->
-<!--  background-color: #f44336;-->
-<!--}-->
-
-<!--.imgcontainer {-->
-<!--  text-align: center;-->
-<!--  margin: 24px 0 12px 0;-->
-<!--}-->
-
-<!--img.avatar {-->
-<!--  width: 40%;-->
-<!--/*  border-radius: 50%; */-->
-<!--}-->
-
-<!--.container {-->
-<!--  padding: 16px;-->
-<!--}-->
-
-<!--span.psw {-->
-<!--  float: right;-->
-<!--  padding-top: 16px;-->
-<!--}-->
-
-<!--/* Change styles for span and cancel button on extra small screens */-->
-<!--@media screen and (max-width: 300px) {-->
-<!--  span.psw {-->
-<!--     display: block;-->
-<!--     float: none;-->
-<!--  }-->
-<!--  .cancelbtn {-->
-<!--     width: 100%;-->
-<!--  }-->
-<!--}-->
-<!--</style>-->
-<!--</head>-->
-<body>
 
 {% block banner %}
   {% with tenant_id=tenant_id, is_banner=true %}
@@ -105,11 +37,12 @@
 {% endblock %}
 
 {% block footer %}
-<footer>
-<div class="footer">
-  <p>Tapis project funded by NSF OAC grants #1931439, #1931575 and #2232259. </p>
-</div>
+<footer class="s-footer" style="top: 100vh; position: sticky;">
+  <p>Tapis project funded by NSF OAC grants
+    <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=1931439" rel="noreferrer" target="_blank">#1931439</a>,
+    <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=1931575" rel="noreferrer" target="_blank">#1931575</a>
+    and #2232259.
+  </p>
 </footer>
 {% endblock %}
 
-</body>
diff --git a/service/templates/token-display.html b/service/templates/token-display.html
@@ -16,13 +16,21 @@
 {% endblock %}
 {% block head_extra %}
 <style>
-body {
+body, html {
   background-color: var(--global-color-primary--light);
 
   /* So body is as tall as page, thus sticky footer sticks to bottom of page */
   /* FAQ: Replaces base.html fixed footer because it has a disadvantage—
           it covers the login form on screens shorter than the form */
   min-height: 100vh;
+  min-width: 100vw;
+  max-width: 100vw;
+  max-height: 100vh;
+  overflow: auto;
+}
+#details td.token-cell {
+  word-break: break-all;
+  white-space: pre-wrap;
 }
 </style>
 {% endblock %}
@@ -45,8 +53,8 @@ <h2> User Profile And Access Token</h2>
    <table id="details" class="table table-striped">
       <thead>
           <tr>
-            <th>Token Details</th>
-            <th width="200px"> </th>
+            <th width="130rem">Token Details</th>
+            <th><a href="/v3/oauth2/logout">Logout</a></th>
           </tr>
       </thead>
       <tbody>
@@ -60,7 +68,7 @@ <h2> User Profile And Access Token</h2>
           </tr>
           <tr>
               <td>Access Token</td>
-              <td>{{ token }}</td>
+              <td class="token-cell">{{ token }}</td>
           </tr>
       </tbody>
    </table>
