Add tsx syntax to TOTPNew and rename TOTP page IDs.

src/allPages.ts

@@ -18,7 +18,6 @@ import { MePage } from "./pages/Me";
 import { NewKVEnginePage } from "./pages/Secrets/NewEngines/NewKVEngine";
 import { NewSecretsEnginePage } from "./pages/Secrets/NewSecretsEngine";
 import { NewTOTPEnginePage } from "./pages/Secrets/NewEngines/NewTOTPEngine";
-import { NewTOTPPage } from "./pages/Secrets/TOTP/NewTOTP";
 import { NewTransitEnginePage } from "./pages/Secrets/NewEngines/NewTransitEngine";
 import { NewTransitKeyPage } from "./pages/Secrets/Transit/NewTransitKey";
 import { Page } from "./types/Page";
@@ -27,6 +26,7 @@ import { SecretsHomePage } from "./pages/Secrets/SecretsHome";
 import { SetLanguagePage } from "./pages/SetLanguage";
 import { SetVaultURLPage } from "./pages/SetVaultURL";
 import { TOTPDeletePage } from "./pages/Secrets/TOTP/TOTPDelete";
+import { TOTPNewPage } from "./pages/Secrets/TOTP/TOTPNew";
 import { TOTPViewPage } from "./pages/Secrets/TOTP/TOTPView";
 import { TransitDecryptPage } from "./pages/Secrets/Transit/TransitDecrypt";
 import { TransitEncryptPage } from "./pages/Secrets/Transit/TransitEncrypt";
@@ -57,8 +57,8 @@ export const allPages: pagesList = {
   USERPASS_USER_NEW: new UserPassUserNewPage(),
   USERPASS_USER_DELETE: new UserPassUserDeletePage(),
   ME: new MePage(),
-  TOTP: new TOTPViewPage(),
+  TOTP_VIEW: new TOTPViewPage(),
-  NEW_TOTP: new NewTOTPPage(),
+  TOTP_NEW: new TOTPNewPage(),
   TOTP_DELETE: new TOTPDeletePage(),
   LOGIN: new LoginPage(),
   SET_VAULT_URL: new SetVaultURLPage(),

src/pages/Secrets/NewEngines/NewTOTPEngine.ts

@@ -55,7 +55,7 @@ export class NewTOTPEnginePage extends Page {
             });
             this.state.secretMountType = "totp";
             this.state.baseMount = name + "/";
-            await this.router.changePage("TOTP");
+            await this.router.changePage("TOTP_VIEW");
           } catch (e) {
             const error = e as Error;
             setErrorText(error.message);

src/pages/Secrets/SecretTitleElement.ts

@@ -2,9 +2,8 @@ import { PageRouter } from "z-pagerouter";
 import { PageState } from "../../PageState";
 import { makeElement } from "z-makeelement";
 
-function currentTitleSecretText(state: PageState, suffix = ""): string {
+function currentTitleSecretText(state: PageState): string {
   let secretItemText = state.secretItem;
-  secretItemText += suffix;
   if (state.secretVersion !== null) secretItemText += ` (v${state.secretVersion})`;
   return secretItemText;
 }
@@ -25,7 +24,7 @@ export async function SecretTitleElement(router: PageRouter, suffix = ""): Promi
           if (state.secretMountType.startsWith("kv") || state.secretMountType == "cubbyhole") {
             await router.changePage("KEY_VALUE_VIEW");
           } else if (state.secretMountType == "totp") {
-            await router.changePage("TOTP");
+            await router.changePage("TOTP_VIEW");
           } else if (state.secretMountType == "transit") {
             await router.changePage("TRANSIT_VIEW");
           }
@@ -47,7 +46,12 @@ export async function SecretTitleElement(router: PageRouter, suffix = ""): Promi
       makeElement({
         tag: "span",
         condition: state.secretItem.length != 0,
-        text: currentTitleSecretText(state, suffix),
+        text: currentTitleSecretText(state),
+      }),
+      makeElement({
+        tag: "span",
+        condition: suffix.length != 0,
+        text: suffix,
       }),
     ],
   });

src/pages/Secrets/SecretsHome.ts

@@ -65,7 +65,7 @@ export class SecretsHomePage extends Page {
         linkPage = "KEY_VALUE_VIEW";
       } else if (mount.type == "totp") {
         linkText = `TOTP - ${baseMount}`;
-        linkPage = "TOTP";
+        linkPage = "TOTP_VIEW";
       } else if (mount.type == "transit") {
         linkText = `Transit - ${baseMount}`;
         linkPage = "TRANSIT_VIEW";

src/pages/Secrets/TOTP/NewTOTP.ts

@@ -1,114 +0,0 @@
-import { Form } from "../../../elements/Form";
-import { Margin } from "../../../elements/Margin";
-import { MarginInline } from "../../../elements/MarginInline";
-import { Page } from "../../../types/Page";
-import { SecretTitleElement } from "../SecretTitleElement";
-import { addNewTOTP } from "../../../api/totp/addNewTOTP";
-import { makeElement } from "z-makeelement";
-import { setErrorText } from "../../../pageUtils";
-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 this.router.changePage("TOTP");
-  }
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          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",
-              },
-            }),
-          ),
-        ],
-        async (form: HTMLFormElement) => {
-          const formData = new FormData(form);
-
-          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(this.state.baseMount, parms);
-            await this.router.changePage("TOTP");
-          } catch (e: unknown) {
-            const error = e as Error;
-            setErrorText(`API Error: ${error.message}`);
-          }
-        },
-      ),
-    );
-  }
-
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("totp_new_suffix"));
-  }
-
-  get name(): string {
-    return i18next.t("totp_new_title");
-  }
-}

src/pages/Secrets/TOTP/TOTPDelete.tsx

@@ -15,7 +15,7 @@ export class TOTPDeletePage extends Page {
 
   async goBack(): Promise<void> {
     this.state.secretItem = "";
-    await this.router.changePage("TOTP");
+    await this.router.changePage("TOTP_VIEW");
   }
   async render(): Promise<void> {
     render(

src/pages/Secrets/TOTP/TOTPNew.tsx

@@ -0,0 +1,91 @@
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
+import { MarginInline } from "../../../elements/ReactMarginInline";
+import { Page } from "../../../types/Page";
+import { SecretTitleElement } from "../SecretTitleElement";
+import { addNewTOTP } from "../../../api/totp/addNewTOTP";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+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 TOTPNewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("TOTP_VIEW");
+  }
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={(data) => this.onSubmit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="name"
+            type="text"
+            placeholder={i18next.t("totp_new_name_text")}
+            required
+          />
+        </Margin>
+        <p>{i18next.t("totp_new_info")}</p>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="uri"
+            type="text"
+            placeholder={i18next.t("totp_new_uri_input")}
+          />
+        </Margin>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="key"
+            type="text"
+            placeholder={i18next.t("totp_new_key_input")}
+          />
+        </Margin>
+        <p id="errorText" class="uk-text-danger" />
+        <MarginInline>
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("totp_new_add_btn")}
+          </button>
+        </MarginInline>
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    const parms = {
+      url: data.get("uri") as string,
+      key: removeDashSpaces(data.get("key") as string).toUpperCase(),
+      name: data.get("name") as string,
+      generate: false,
+    };
+
+    try {
+      await addNewTOTP(this.state.baseMount, parms);
+      await this.router.changePage("TOTP_VIEW");
+    } catch (e: unknown) {
+      const error = e as Error;
+      setErrorText(`API Error: ${error.message}`);
+    }
+  }
+
+  async getPageTitle(): Promise<Element | string> {
+    return await SecretTitleElement(this.router, i18next.t("totp_new_suffix"));
+  }
+
+  get name(): string {
+    return i18next.t("totp_new_title");
+  }
+}

src/pages/Secrets/TOTP/TOTPView.tsx

@@ -77,7 +77,7 @@ export class TOTPViewPage extends Page {
         <button
           class="uk-button uk-button-primary uk-margin-bottom"
           onClick={async () => {
-            await this.router.changePage("NEW_TOTP");
+            await this.router.changePage("TOTP_NEW");
           }}
         >
           {i18next.t("totp_view_new_btn")}