Add the ability to create new transit keys.

src/allPages.ts

@@ -12,6 +12,7 @@ import { NewSecretsEnginePage } from "./pages/NewSecretsEngine";
 import { NewTOTPEnginePage } from "./pages/NewEngines/NewTOTPEngine";
 import { NewTOTPPage } from "./pages/TOTP/NewTOTP";
 import { NewTransitEnginePage } from "./pages/NewEngines/NewTransitEngine";
+import { NewTransitKeyPage } from "./pages/Transit/NewTransitKey";
 import { Page } from "./types/Page";
 import { PwGenPage } from "./pages/PwGen";
 import { SetLanguagePage } from "./pages/SetLanguage";
@@ -37,6 +38,7 @@ export const allPages: pagesList = {
   SET_VAULT_URL: new SetVaultURLPage(),
   UNSEAL: new UnsealPage(),
   SET_LANGUAGE: new SetLanguagePage(),
+  TRANSIT_NEW_KEY: new NewTransitKeyPage(),
   TRANSIT_VIEW: new TransitViewPage(),
   TRANSIT_VIEW_SECRET: new TransitViewSecretPage(),
   TRANSIT_ENCRYPT: new TransitEncryptPage(),

src/api/transit/getTransitKeys.ts

@@ -9,6 +9,6 @@ export async function getTransitKeys(baseMount: string): Promise<string[]> {
   if (resp.status == 404) {
     throw DoesNotExistError;
   }
-  const data = (await resp.json()) as { data: string[] };
-  return data.data;
+  const data = (await resp.json()) as { data: { keys: string[] } };
+  return data.data.keys;
 }

src/api/transit/newTransitKey.ts

@@ -0,0 +1,26 @@
+import { appendAPIURL, getHeaders } from "../apiUtils";
+import { removeDoubleSlash } from "../../utils";
+
+export async function newTransitKey(
+  baseMount: string,
+  parms: { name: string; type: string },
+): Promise<void> {
+  const request = new Request(
+    appendAPIURL(removeDoubleSlash(`/v1/${baseMount}/keys/${parms.name}`)),
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...getHeaders(),
+      },
+      body: JSON.stringify(parms),
+    },
+  );
+  const resp = await fetch(request);
+  if (!resp.ok) {
+    const data = (await resp.json()) as { errors?: string[] };
+    if ("errors" in data) {
+      throw new Error(data.errors[0]);
+    }
+  }
+}

src/elements/Tile.ts

@@ -10,7 +10,6 @@ type TileParams = {
 };
 
 export function Tile(params: TileParams): HTMLElement {
-  console.log(params.condition == undefined, params.condition);
   if (params.condition == false) return;
   return makeElement({
     tag: "a",

src/pages/Transit/NewTransitKey.ts

@@ -0,0 +1,99 @@
+import { Margin } from "../../elements/Margin";
+import { Option } from "../../elements/Option";
+import { Page } from "../../types/Page";
+import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils";
+import { makeElement } from "../../htmlUtils";
+import { newTransitKey } from "../../api/transit/newTransitKey";
+import { pageState } from "../../globalPageState";
+import i18next from "i18next";
+
+export class NewTransitKeyPage extends Page {
+  constructor() {
+    super();
+  }
+  async render(): Promise<void> {
+    setTitleElement(pageState);
+
+    const newTransitKeyForm = makeElement({
+      tag: "form",
+      children: [
+        Margin(
+          makeElement({
+            tag: "input",
+            class: ["uk-input", "uk-form-width-medium"],
+            attributes: {
+              required: "true",
+              type: "text",
+              placeholder: i18next.t("transit_new_key_name_input"),
+              name: "name",
+            },
+          }),
+        ),
+        Margin(
+          makeElement({
+            tag: "select",
+            class: ["uk-select", "uk-form-width-medium"],
+            attributes: {
+              name: "type",
+            },
+            children: [
+              "aes128-gcm96",
+              "aes256-gcm96",
+              "chacha20-poly1305",
+              "ed25519",
+              "ecdsa-p256",
+              "ecdsa-p384",
+              "ecdsa-p521",
+              "rsa-2048",
+              "rsa-3072",
+              "rsa-4096",
+            ].map((type): HTMLElement => Option(type, type)),
+          }),
+        ),
+        makeElement({
+          tag: "p",
+          id: "errorText",
+          class: "uk-text-danger",
+        }),
+        makeElement({
+          tag: "button",
+          class: ["uk-button", "uk-button-primary"],
+          text: i18next.t("transit_new_key_create_btn"),
+          attributes: {
+            type: "submit",
+          },
+        }),
+      ],
+    }) as HTMLFormElement;
+
+    setPageContent(newTransitKeyForm);
+
+    newTransitKeyForm.addEventListener("submit", async function (e) {
+      e.preventDefault();
+      const formData = new FormData(newTransitKeyForm);
+
+      const name = formData.get("name") as string;
+      const type = formData.get("type") as string;
+
+      try {
+        await newTransitKey(pageState.currentBaseMount, {
+          name: name,
+          type: type,
+        });
+        pageState.currentSecret = name;
+        await changePage("TRANSIT_VIEW_SECRET");
+      } catch (e) {
+        const error = e as Error;
+        setErrorText(error.message);
+      }
+    });
+  }
+
+  get titleSuffix(): string {
+    return i18next.t("transit_new_key_suffix");
+  }
+
+  get name(): string {
+    return i18next.t("transit_new_key_title");
+  }
+}

src/translations/en.js

@@ -157,6 +157,11 @@ module.exports = {
   transit_view_none_here_text:
     "You seem to have no transit keys here, would you like to create one?",
 
+  transit_new_key_title: "New Transit Key",
+  transit_new_key_name_input: "Name",
+  transit_new_key_create_btn: "Create",
+  transit_new_key_suffix: " (new)",
+
   // Transit View Secret Page
   transit_view_secret_title: "Transit Secret View",
   transit_view_encrypt_text: "Encrypt",