Start work on TransitEncryptPage.

package.json

@@ -14,4 +14,4 @@
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   }
-}
+}

src/main.js

@@ -25,6 +25,7 @@ import {
   UnsealPage,
   TransitViewPage,
   TransitViewSecretPage,
+  TransitEncryptPage,
   KeyValueViewPage,
   KeyValueSecretsPage,
   KeyValueVersionsPage,
@@ -45,6 +46,7 @@ const pages = {
   UNSEAL: new UnsealPage(),
   TRANSIT_VIEW: new TransitViewPage(),
   TRANSIT_VIEW_SECRET: new TransitViewSecretPage(),
+  TRANSIT_ENCRYPT: new TransitEncryptPage(),
   KEY_VALUE_VIEW: new KeyValueViewPage(),
   KEY_VALUE_SECRETS: new KeyValueSecretsPage(),
   KEY_VALUE_VERSIONS: new KeyValueVersionsPage(),

src/pageUtils.js

@@ -41,12 +41,13 @@ export function setPageTitle(title) {
 }
 
 function currentTitleSecretText() {
-  let currentSecretText = pageState.currentSecret + " ";
+  let currentSecretText = pageState.currentSecret;
-  if (pageState.currentPage == pages.KEY_VALUE_SECRETS_EDIT) currentSecretText += "(edit)";
+  if (pageState.currentPage == pages.KEY_VALUE_SECRETS_EDIT) currentSecretText += " (edit)";
-  if (pageState.currentPage == pages.KEY_VALUE_DELETE) currentSecretText += "(delete)";
+  if (pageState.currentPage == pages.KEY_VALUE_DELETE) currentSecretText += " (delete)";
-  if (pageState.currentPage == pages.KEY_VALUE_VERSIONS) currentSecretText += "(versions)";
+  if (pageState.currentPage == pages.KEY_VALUE_VERSIONS) currentSecretText += " (versions)";
-  if (pageState.currentPage == pages.NEW_TOTP) currentSecretText += "(new)";
+  if (pageState.currentPage == pages.NEW_TOTP) currentSecretText += " (new)";
-  if (pageState.currentSecretVersion != "0") currentSecretText += `(v${pageState.currentSecretVersion})`;
+  if (pageState.currentPage == pages.TRANSIT_ENCRYPT) currentSecretText += " (encrypt)";
+  if (pageState.currentSecretVersion != "0") currentSecretText += ` (v${pageState.currentSecretVersion})`;
   return currentSecretText;
 }
 

src/pages/Template.js

@@ -0,0 +1,23 @@
+import { Page } from "../types/Page.js";
+import { setPageContent, setTitleElement } from "../pageUtils.js";
+import { makeElement } from "../htmlUtils.js";
+
+export class TemplatePage extends Page {
+  constructor() {
+    super();
+  }
+  goBack() {
+    changePage(pages.HOME);
+  }
+  async render() {
+    setTitleElement(pageState);
+    setPageContent(makeElement({
+      tag: "p",
+      text: "[PLACEHOLDER]"
+    }));
+  }
+
+  get name() {
+    return "Template";
+  }
+}

src/pages/TransitEncrypt.js

@@ -0,0 +1,78 @@
+import { Page } from "../types/Page.js";
+import { setPageContent, setTitleElement } from "../pageUtils.js";
+import { makeElement } from "../htmlUtils.js";
+import { Margin } from "../elements/Margin.js";
+
+export class TransitEncryptPage extends Page {
+  constructor() {
+    super();
+  }
+  goBack() {
+    changePage(pages.HOME);
+  }
+  async render() {
+    setTitleElement(pageState);
+    setPageContent(makeElement({
+      tag: "div"
+    }));
+    this.transitEncryptForm = makeElement({
+      tag: "form",
+      children: [
+        Margin(makeElement({
+          tag: "textarea",
+          class: ["uk-textarea", "uk-form-width-medium"],
+          attributes: {
+            placeholder: "Plaintext or base64",
+            name: "plaintext",
+          }
+        })),
+        Margin([
+          makeElement({
+            tag: "div",
+            class: "uk-form-label",
+            text: "Is the data already encoded in base64?",
+          }),
+          makeElement({
+            tag: "div",
+            class: ["uk-form-controls", "uk-form-controls-text"],
+            children: makeElement({
+              tag: "input",
+              class: ["uk-checkbox"],
+              attributes: {
+                type: "checkbox",
+                name: "base64Checkbox",
+              }
+            }),
+          }),
+        ]),
+        makeElement({
+          tag: "p",
+          id: "errorText",
+          class: "uk-text-danger"
+        }),
+        makeElement({
+          tag: "button",
+          class: ["uk-button", "uk-button-primary"],
+          text: "Encrypt",
+          attributes: {
+            type: "submit",
+          }
+        })
+      ]
+    });
+    setPageContent(this.transitEncryptForm);
+
+    this.transitEncryptForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      this.newKVSecretHandleForm();
+    }.bind(this));
+  }
+
+  transitEncryptFormHandler() {
+    alert("Not Yet Implemented");
+  }
+
+  get name() {
+    return "Transit Encrypt";
+  }
+}

src/pages/TransitViewSecret.js

@@ -1,11 +1,14 @@
 import { Page } from "../types/Page.js";
-import { setPageContent, setTitleElement } from "../pageUtils.js";
+import { changePage, setPageContent, setTitleElement } from "../pageUtils.js";
 import { makeElement } from "../htmlUtils.js";
 
 export class TransitViewSecretPage extends Page {
   constructor() {
     super();
   }
+  goBack(){
+    changePage(pages.TRANSIT_VIEW);
+  }
 
   makeTile(title, description, icon = "code", onclick = _ => { }) {
     return makeElement({
@@ -50,7 +53,12 @@ export class TransitViewSecretPage extends Page {
         makeElement({
           tag: "div",
           children: [
-            this.makeTile("Encrypt", "Encrypt some plaintext or base64 encoded binary.", "lock"),
+            this.makeTile(
+              "Encrypt",
+              "Encrypt some plaintext or base64 encoded binary.",
+              "lock",
+              _ => { changePage(pages.TRANSIT_ENCRYPT); }
+            ),
             this.makeTile("Decrypt", "Decrypt some cyphertext.", "mail"),
           ]
         }),

src/pages/index.js

@@ -12,4 +12,5 @@ export { KeyValueDeletePage } from "./KeyValueDelete.js";
 export { KeyValueSecretsEditPage } from "./KeyValueSecretsEdit.js";
 export { PwGenPage } from "./PwGen.js";
 export { TransitViewPage } from "./TransitView.js";
-export { TransitViewSecretPage } from "./TransitViewSecret.js";
+export { TransitViewSecretPage } from "./TransitViewSecret.js";
+export { TransitEncryptPage } from "./TransitEncrypt.js";

src/scss/uikit.scss

@@ -1,24 +1,23 @@
-$global-color:                                   #D8DEE9 !default;
+$global-color: #d8dee9;
-$global-emphasis-color:                          #E5E9F0 !default;
+$global-emphasis-color: #e5e9f0;
-$global-muted-color:                             #E5E9F0 !default;
+$global-muted-color: #e5e9f0;
 
-$global-link-color:                              #5E81AC !default;
+$global-link-color: #5e81ac;
-$global-link-hover-color:                        #88C0D0 !default;
+$global-link-hover-color: #88c0d0;
 
-$global-inverse-color:                           #fff !default;
+$global-inverse-color: #fff;
 
-$global-background:                              #2E3440 !default;
+$global-background: #2e3440;
 
-$global-muted-background:                        #3B4252 !default;
+$global-muted-background: #3b4252;
-$global-primary-background:                      #434C5E !default;
+$global-primary-background: #434c5e;
-$global-secondary-background:                    #4C566A !default;
+$global-secondary-background: #4c566a;
 
-$global-success-background:                      #A3BE8C !default;
+$global-success-background: #a3be8c;
-$global-warning-background:                      #D08770 !default;
+$global-warning-background: #d08770;
-$global-danger-background:                       #BF616A !default;
+$global-danger-background: #bf616a;
 
-
+$button-primary-background: #5e81ac;
-$button-primary-background: #5E81AC;
 
 // Keep these in same order as https://github.com/uikit/uikit/blob/develop/src/less/components/_import.less
 @import "uikit/src/scss/variables.scss";
@@ -49,7 +48,6 @@ $button-primary-background: #5E81AC;
 @import "uikit/src/scss/components/switcher.scss";
 @import "uikit/src/scss/components/notification.scss";
 
-
 // Other
 @import "uikit/src/scss/components/grid.scss";
 
@@ -73,4 +71,4 @@ $button-primary-background: #5E81AC;
 @import "uikit/src/scss/components/margin.scss";
 @import "uikit/src/scss/components/padding.scss";
 @import "uikit/src/scss/components/position.scss";
-@import "uikit/src/scss/components/inverse.scss";
+@import "uikit/src/scss/components/inverse.scss";