VaultUI/src/pages/TOTP/NewTOTP.ts

import { Margin } from "../../elements/Margin";
import { MarginInline } from "../../elements/MarginInline";
import { Page } from "../../types/Page";
import { addNewTOTP } from "../../api/totp/addNewTOTP";
import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils";
import { makeElement } from "../../htmlUtils";
import { pageState } from "../../globalPageState";
import i18next from "i18next";

function replaceAll(str: string, replace: string, replaceWith: string): string {
  return str.replace(new RegExp(replace, "g"), replaceWith);
}
function removeDashSpaces(str: string): string {
  str = replaceAll(str, "-", "");
  str = replaceAll(str, " ", "");
  return str;
}

export class NewTOTPPage extends Page {
  constructor() {
    super();
  }
  async goBack(): Promise<void> {
    await changePage("TOTP");
  }
  async render(): Promise<void> {
    setTitleElement(pageState);

    const totpForm = makeElement({
      tag: "form",
      children: [
        Margin(
          makeElement({
            tag: "input",
            class: ["uk-input", "uk-form-width-medium"],
            attributes: {
              required: "true",
              type: "text",
              placeholder: i18next.t("totp_new_name_text"),
              name: "name",
            },
          }),
        ),
        makeElement({
          tag: "p",
          text: i18next.t("totp_new_info"),
        }),
        Margin(
          makeElement({
            tag: "input",
            class: ["uk-input", "uk-form-width-medium"],
            attributes: {
              type: "text",
              placeholder: i18next.t("totp_new_uri_input"),
              name: "uri",
            },
          }),
        ),
        Margin(
          makeElement({
            tag: "input",
            class: ["uk-input", "uk-form-width-medium"],
            attributes: {
              type: "text",
              placeholder: i18next.t("totp_new_key_input"),
              name: "key",
            },
          }),
        ),
        makeElement({
          tag: "p",
          id: "errorText",
          class: "uk-text-danger",
        }),
        MarginInline(
          makeElement({
            tag: "button",
            class: ["uk-button", "uk-button-primary"],
            text: i18next.t("totp_new_add_btn"),
            attributes: {
              type: "submit",
            },
          }),
        ),
      ],
    }) as HTMLFormElement;
    setPageContent(totpForm);

    totpForm.addEventListener("submit", async function (e) {
      e.preventDefault();

      const formData = new FormData(totpForm);

      const parms = {
        url: formData.get("uri") as string,
        key: removeDashSpaces(formData.get("key") as string).toUpperCase(),
        name: formData.get("name") as string,
        generate: false,
      };

      try {
        await addNewTOTP(pageState.currentBaseMount, parms);
        await changePage("TOTP");
      } catch (e: unknown) {
        const error = e as Error;
        setErrorText(`API Error: ${error.message}`);
      }
    });
  }

  get titleSuffix(): string {
    return i18next.t("totp_new_suffix");
  }

  get name(): string {
    return i18next.t("totp_new_title");
  }
}