Move token renew, log out, etc to Me page, closes #17.

src/main.js

@@ -19,6 +19,7 @@ import { getSealStatus } from './api.js';
 
 import {
   HomePage,
+  MePage,
   TOTPViewPage,
   NewTOTPPage,
   LoginPage,
@@ -39,6 +40,7 @@ import {
 
 const pages = {
   HOME: new HomePage(),
+  ME: new MePage(),
   TOTP: new TOTPViewPage(),
   NEW_TOTP: new NewTOTPPage(),
   LOGIN: new LoginPage(),
@@ -73,7 +75,8 @@ document.addEventListener('DOMContentLoaded', function () {
   document.body.appendChild(makeElement({
     tag: "nav",
     class: ["uk-navbar", "uk-navbar-container"],
-    children: makeElement({
+    children: [ 
+      makeElement({
       tag: "div",
       class: "uk-navbar-left",
       children: makeElement({
@@ -97,7 +100,23 @@ document.addEventListener('DOMContentLoaded', function () {
           })),
         ]
       })
+    }),
+    makeElement({
+      tag: "div",
+      class: "uk-navbar-right",
+      children: makeElement({
+        tag: "ul",
+        class: "uk-navbar-nav",
+        children: [
+          ListItem(makeElement({
+            tag: "a",
+            text: "Me",
+            onclick: _ => { changePage("ME"); }
+          }))
+        ]
+      })
     })
+  ]
   }));
   document.body.appendChild(makeElement({
     tag: "div",

src/pages/Home.js

@@ -2,9 +2,8 @@ import { Page } from "../types/Page.js";
 import { setErrorText, changePage } from "../pageUtils.js";
 import { getAPIURL, getToken } from "../utils.js";
 import { makeElement } from "../htmlUtils.js";
-import { getSealStatus, lookupSelf, getMounts, renewSelf } from "../api.js";
+import { getSealStatus, lookupSelf, getMounts } from "../api.js";
 import formatDistance from 'date-fns/formatDistance';
-import ClipboardJS from "clipboard";
 
 export class HomePage extends Page {
   constructor() {
@@ -39,44 +38,6 @@ export class HomePage extends Page {
             text: `VaultURL: ${getAPIURL()}`
           })
         }),
-        makeElement({
-          tag: "li",
-          children: makeElement({
-            tag: "a",
-            text: "Log Out",
-            onclick: () => {
-              localStorage.removeItem("token");
-              changePage(pageState.currentPage);
-            }
-          })
-        }),
-        makeElement({
-          tag: "li",
-          children: makeElement({
-            tag: "a",
-            text: "Copy Token",
-            attributes: {
-              "data-clipboard-text": getToken(),
-            },
-            thenRun: (e) => {
-              new ClipboardJS(e);
-            }
-          })
-        }),
-        makeElement({
-          tag: "li",
-          children: makeElement({
-            tag: "a",
-            text: "Renew Lease",
-            onclick: () => {
-              renewSelf().then(() => {
-                changePage("HOME");
-              }).catch(e => {
-                setErrorText(e.message);
-              });
-            }
-          })
-        }),
         makeElement({
           tag: "li",
           children: makeElement({

src/pages/Me.js

@@ -0,0 +1,66 @@
+import { Page } from "../types/Page.js";
+import { setErrorText, setPageContent, changePage } from "../pageUtils.js";
+import { makeElement } from "../htmlUtils.js";
+import { getToken } from "../utils.js";
+import { renewSelf } from "../api.js";
+import ClipboardJS from "clipboard";
+
+
+export class MePage extends Page {
+  constructor() {
+    super();
+  }
+  goBack() {
+    changePage("HOME");
+  }
+  async render() {
+    setPageContent(makeElement({
+      tag: "ul",
+      class: "uk-nav",
+      children: [
+        makeElement({
+          tag: "li",
+          children: makeElement({
+            tag: "a",
+            text: "Log Out",
+            onclick: () => {
+              localStorage.removeItem("token");
+              changePage("HOME");
+            }
+          })
+        }),
+        makeElement({
+          tag: "li",
+          children: makeElement({
+            tag: "a",
+            text: "Copy Token",
+            attributes: {
+              "data-clipboard-text": getToken(),
+            },
+            thenRun: (e) => {
+              new ClipboardJS(e);
+            }
+          })
+        }),
+        makeElement({
+          tag: "li",
+          children: makeElement({
+            tag: "a",
+            text: "Renew Lease",
+            onclick: () => {
+              renewSelf().then(() => {
+                changePage("HOME");
+              }).catch(e => {
+                setErrorText(e.message);
+              });
+            }
+          })
+        })
+      ]
+    }));
+  }
+
+  get name() {
+    return "Me";
+  }
+}

src/pages/index.js

@@ -1,4 +1,5 @@
 export { HomePage } from "./Home.js";
+export { MePage } from "./Me.js";
 export { TOTPViewPage } from "./TOTP/TOTPView.js";
 export { NewTOTPPage } from "./TOTP/NewTOTP.js";
 export { LoginPage } from "./Login.js";