Implement the Transit Encryption page.

package.json

@@ -4,6 +4,7 @@
     "codejar": "^3.4.0",
     "css-loader": "^5.2.1",
     "date-fns": "^2.21.1",
+    "file-saver": "^2.0.5",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.4.1",
     "node-sass": "^5.0.0",
@@ -14,4 +15,4 @@
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   }
-}
+}

src/api.js

@@ -277,6 +277,26 @@ export async function getTransitKeys(baseMount) {
   });
 }
 
+export async function transitEncrypt(baseMount, name, data) {
+  const request = new Request(getAPIURL() + removeDoubleSlash(`/v1/${baseMount}/encrypt/${name}`), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Vault-Token': getToken()
+    },
+    body: JSON.stringify({plaintext: data})
+  });
+  let response = await fetch(request);
+  if (!response.ok) {
+    let json = await response.json();
+    throw new Error(json.errors[0]);
+  } else {
+    let json = await response.json();
+    return json.data;
+  }
+}
+
+
 export async function getTOTPKeys(baseMount) {
   const request = new Request(getAPIURL() + `/v1/${baseMount}/keys?list=true`, {
     headers: {

src/elements/CopyableModal.js

@@ -0,0 +1,87 @@
+import { makeElement } from "../htmlUtils.js";
+import ClipboardJS from "clipboard";
+import UIkit from 'uikit/dist/js/uikit.min.js';
+import FileSaver from 'file-saver';
+
+export function CopyableModal(name, contentString) {
+  return makeElement({
+    tag: "div",
+    class: "modal-sections",
+    attributes: {
+      "uk-modal": ""
+    },
+    children: makeElement({
+      tag: "div",
+      class: "uk-modal-dialog",
+      children: [
+        makeElement({
+          tag: "button",
+          class: "uk-modal-close-default",
+          attributes: {
+            "uk-close": "",
+            type: "button"
+          }
+        }),
+        makeElement({
+          tag: "div",
+          class: "uk-modal-header",
+          children: makeElement({
+            tag: "h2",
+            class: "uk-modal-title",
+            text: name
+          })
+        }),
+        makeElement({
+          tag: "div",
+          class: ["uk-modal-body"],
+          children: makeElement({
+            tag: "pre",
+            class: "wrap-pre",
+            text: contentString
+          })
+        }),
+        makeElement({
+          tag: "div",
+          class: ["uk-modal-footer", "uk-text-right"],
+          children: [
+            makeElement({
+              tag: "button",
+              class: ["uk-button", "uk-button-primary"],
+              attributes: {
+                type: "button",
+                "data-clipboard-text": contentString
+              },
+              text: "Download",
+              onclick: _ => {
+                var blob = new Blob([contentString], {type: "text/plain;charset=utf-8"});
+                FileSaver.saveAs(blob, "result.txt");
+              }
+            }),
+            makeElement({
+              tag: "button",
+              class: ["uk-button", "uk-button-primary"],
+              attributes: {
+                type: "button",
+                "data-clipboard-text": contentString
+              },
+              text: "Copy",
+              thenRun: (e) => {
+                let clipboard = new ClipboardJS(e);
+                clipboard.on('success', _ => {
+                  UIkit.notification("Copied to clipboard.", { status: 'success', timeout: 1000 });
+                });
+              }
+            }),
+            makeElement({
+              tag: "button",
+              class: ["uk-button", "uk-button-secondary", "uk-modal-close"],
+              attributes: { type: "button" },
+              text: "Close"
+            }),
+
+          ]
+        }),
+      ]
+    })
+  });
+}

src/pages/TransitEncrypt.js

@@ -1,14 +1,19 @@
 import { Page } from "../types/Page.js";
-import { setPageContent, setTitleElement } from "../pageUtils.js";
+import { transitEncrypt } from "../api.js";
+import { setPageContent, setTitleElement, setErrorText } from "../pageUtils.js";
 import { makeElement } from "../htmlUtils.js";
 import { Margin } from "../elements/Margin.js";
+import { CopyableModal } from "../elements/CopyableModal.js";
+import UIkit from 'uikit/dist/js/uikit.min.js';
+
 
 export class TransitEncryptPage extends Page {
   constructor() {
     super();
   }
   goBack() {
-    changePage(pages.HOME);
+    pageState.currentSecret = "";
+    changePage(pages.TRANSIT_VIEW);
   }
   async render() {
     setTitleElement(pageState);
@@ -64,12 +69,21 @@ export class TransitEncryptPage extends Page {
 
     this.transitEncryptForm.addEventListener("submit", function (e) {
       e.preventDefault();
-      this.newKVSecretHandleForm();
+      this.transitEncryptFormHandler();
     }.bind(this));
   }
 
   transitEncryptFormHandler() {
-    alert("Not Yet Implemented");
+    let formData = new FormData(this.transitEncryptForm);
+    let encodedData = formData.get("base64Checkbox") ? formData.get("plaintext") : btoa(formData.get("plaintext"));
+    transitEncrypt(pageState.currentBaseMount, pageState.currentSecret, encodedData).then(res => {
+      console.log(res);
+      let modal = CopyableModal("Encryption Result", res.ciphertext);
+      pageContent.appendChild(modal);
+      UIkit.modal(modal).show();
+    }).catch(e => {
+      setErrorText(`API Error: ${e.message}`);
+    });
   }
 
   get name() {

src/scss/uikit.scss

@@ -44,6 +44,7 @@ $button-primary-background: #5e81ac;
 @import "uikit/src/scss/components/alert.scss";
 
 // JavaScript
+@import "uikit/src/scss/components/modal.scss";
 @import "uikit/src/scss/components/slider.scss";
 @import "uikit/src/scss/components/switcher.scss";
 @import "uikit/src/scss/components/notification.scss";