Add typing to PwGen.ts.

src/allPages.ts

@@ -1,15 +1,15 @@
-import { HomePage } from "./pages/Home.js";
+import { HomePage } from "./pages/Home";
 import { KeyValueDeletePage } from "./pages/KeyValue/KeyValueDelete.js";
 import { KeyValueNewPage } from "./pages/KeyValue/KeyValueNew.js";
 import { KeyValueSecretEditPage } from "./pages/KeyValue/KeyValueSecretsEdit.js";
 import { KeyValueSecretPage } from "./pages/KeyValue/KeyValueSecret.js";
 import { KeyValueVersionsPage } from "./pages/KeyValue/KeyValueVersions.js";
 import { KeyValueViewPage } from "./pages/KeyValue/KeyValueView.js";
-import { LoginPage } from "./pages/Login.js";
+import { LoginPage } from "./pages/Login";
-import { MePage } from "./pages/Me.js";
+import { MePage } from "./pages/Me";
 import { NewTOTPPage } from "./pages/TOTP/NewTOTP.js";
 import { Page } from "./types/Page";
-import { PwGenPage } from "./pages/PwGen.js";
+import { PwGenPage } from "./pages/PwGen";
 import { SetLanguagePage } from "./pages/SetLanguage.js";
 import { SetVaultURLPage } from "./pages/SetVaultURL.js";
 import { TOTPViewPage } from "./pages/TOTP/TOTPView.js";

src/elements/CopyableInputBox.ts

@@ -4,7 +4,7 @@ import { makeElement } from "../htmlUtils";
 import ClipboardJS from "clipboard";
 import i18next from "i18next";
 
-interface CopyableInputBoxType extends HTMLElement {
+export interface CopyableInputBoxType extends HTMLElement {
   setText(text: string): void;
 }
 

src/pages/Home.ts

@@ -1,9 +1,9 @@
 import { Page } from "../types/Page";
-import { changePage, prePageChecks, setErrorText } from "../pageUtils";
+import { changePage, prePageChecks, setErrorText, setPageContent } from "../pageUtils";
 import { getMounts } from "../api/getMounts";
 import { lookupSelf } from "../api/lookupSelf";
 import { makeElement } from "../htmlUtils";
-import { pageState } from "../globalPageState.ts";
+import { pageState } from "../globalPageState";
 import { sortedObjectMap } from "../utils";
 import i18next from 'i18next';
 
@@ -11,10 +11,12 @@ export class HomePage extends Page {
   constructor() {
     super();
   }
-  async render() {
+  async render(): Promise<void> {
-    pageContent.innerHTML = "";
+    setPageContent("");
     if (!(await prePageChecks())) return;
 
+    const homePageContent = makeElement({tag: "div"});
+    setPageContent(homePageContent);
     const textList = makeElement({
       tag: "ul",
       class: "uk-nav",
@@ -38,10 +40,10 @@ export class HomePage extends Page {
         })
       ]
     });
-    pageContent.appendChild(textList);
+    homePageContent.appendChild(textList);
 
     try {
-      let selfTokenInfo = await lookupSelf();
+      const selfTokenInfo = await lookupSelf();
       textList.appendChild(makeElement({
         tag: "li",
         text: i18next.t("your_token_expires_in", {"date": new Date(selfTokenInfo.expire_time)})
@@ -60,9 +62,9 @@ export class HomePage extends Page {
     pageState.currentSecretVersion = null;
 
     const navList = makeElement({ tag: "ul", class: ["uk-nav", "uk-nav-default", "uk-margin-top"] });
-    pageContent.appendChild(navList);
+    homePageContent.appendChild(navList);
 
-    let mounts = await getMounts();
+    const mounts = await getMounts();
     // sort it by secretPath so it's in alphabetical order consistantly. 
     const mountsMap = sortedObjectMap(mounts);
 
@@ -72,7 +74,7 @@ export class HomePage extends Page {
       if (!("type" in mount)) return;
       if (!(["kv", "totp", "transit", "cubbyhole"].includes(mount.type))) return;
 
-      let mountType = mount.type == "kv" ? "kv-v" + String(mount.options.version) : mount.type;
+      const mountType = mount.type == "kv" ? "kv-v" + String(mount.options.version) : mount.type;
 
       let linkText = "";
       let linkPage;
@@ -104,7 +106,7 @@ export class HomePage extends Page {
       }));
     });
   }
-  get name() {
+  get name(): string {
     return i18next.t("home_page_title");
   }
 }

src/pages/Login.ts

@@ -4,7 +4,7 @@ import { Page } from "../types/Page";
 import { changePage, setErrorText, setPageContent } from "../pageUtils";
 import { lookupSelf } from "../api/lookupSelf";
 import { makeElement } from "../htmlUtils";
-import { pageState } from "../globalPageState.ts";
+import { pageState } from "../globalPageState";
 import { usernameLogin } from "../api/usernameLogin";
 import i18next from 'i18next';
 
@@ -12,8 +12,8 @@ export class LoginPage extends Page {
   constructor() {
     super();
   }
-  render() {
+  render(): void {
-    let tokenLoginForm = makeElement({
+    const tokenLoginForm = makeElement({
       tag: "form",
       children: [
         Margin(makeElement({
@@ -35,9 +35,9 @@ export class LoginPage extends Page {
           }
         }))
       ]
-    });
+    }) as HTMLFormElement;
 
-    let usernameLoginForm = makeElement({
+    const usernameLoginForm = makeElement({
       tag: "form",
       children: [
         Margin(makeElement({
@@ -71,7 +71,7 @@ export class LoginPage extends Page {
           }
         }))
       ]
-    });
+    }) as HTMLFormElement;
 
     setPageContent(makeElement({
       tag: "div",
@@ -122,9 +122,9 @@ export class LoginPage extends Page {
 
     tokenLoginForm.addEventListener("submit", function (e) {
       e.preventDefault();
-      let formData = new FormData(tokenLoginForm);
+      const formData = new FormData(tokenLoginForm);
       const token = formData.get("token");
-      pageState.token = token;
+      pageState.token = token as string;
       lookupSelf().then(_ => {
         changePage("HOME");
       }).catch(e => {
@@ -134,8 +134,11 @@ export class LoginPage extends Page {
     });
     usernameLoginForm.addEventListener("submit", function (e) {
       e.preventDefault();
-      let formData = new FormData(usernameLoginForm);
+      const formData = new FormData(usernameLoginForm);
-      usernameLogin(formData.get("username"), formData.get("password")).then(res => {
+      usernameLogin(
+        formData.get("username") as string,
+        formData.get("password") as string,
+      ).then(res => {
         pageState.token = res;
         changePage("HOME");
       }).catch(e => {
@@ -146,7 +149,7 @@ export class LoginPage extends Page {
     });
   }
 
-  get name() {
+  get name(): string {
     return i18next.t("log_in_title");
   }
 }

src/pages/Me.ts

@@ -2,7 +2,7 @@ import { Page } from "../types/Page";
 import { addClipboardNotifications, changePage, prePageChecks, setErrorText, setPageContent } from "../pageUtils";
 import { getCapabilitiesPath } from "../api/getCapabilities";
 import { makeElement } from "../htmlUtils";
-import { pageState } from "../globalPageState.ts";
+import { pageState } from "../globalPageState";
 import { renewSelf } from "../api/renewSelf";
 import { sealVault } from "../api/sealVault";
 import ClipboardJS from "clipboard";
@@ -14,7 +14,7 @@ export class MePage extends Page {
     super();
   }
 
-  async render() {
+  async render(): Promise<void> {
     if (!(await prePageChecks())) return;
     setPageContent(makeElement({
       tag: "ul",
@@ -40,7 +40,7 @@ export class MePage extends Page {
               "data-clipboard-text": pageState.token,
             },
             thenRun: (e) => {
-              let clipboard = new ClipboardJS(e);
+              const clipboard = new ClipboardJS(e);
               addClipboardNotifications(clipboard);
             }
           })
@@ -65,7 +65,7 @@ export class MePage extends Page {
             tag: "a",
             condition: await (async () => {
               try {
-                let caps = await getCapabilitiesPath("sys/seal");
+                const caps = await getCapabilitiesPath("sys/seal");
                 return caps.includes("sudo") && caps.includes("update");
               } catch (e) {
                 return !true;
@@ -92,7 +92,7 @@ export class MePage extends Page {
     }));
   }
 
-  get name() {
+  get name(): string {
     return i18next.t("me_page_title");
   }
 }

src/pages/PwGen.ts

@@ -1,4 +1,4 @@
-import { CopyableInputBox } from "../elements/CopyableInputBox";
+import { CopyableInputBox, CopyableInputBoxType } from "../elements/CopyableInputBox";
 import { Margin } from "../elements/Margin";
 import { Page } from "../types/Page";
 import { makeElement } from "../htmlUtils";
@@ -35,7 +35,7 @@ const passwordOptionsDefault = {
 
 function genPassword(options = passwordOptionsDefault) {
   let pw = "";
-  options = {...passwordOptionsDefault, ...options}
+  options = { ...passwordOptionsDefault, ...options }
   const pwArray = options.alphabet.split('');
   for (let i = 0; i < options.length; i++) {
     pw = pw.concat(pwArray[Math.floor(random() * pwArray.length)]);
@@ -54,21 +54,25 @@ function Option(label, value) {
   })
 }
 
-
 export class PwGenPage extends Page {
   constructor() {
     super();
   }
 
+  passwordBox: CopyableInputBoxType;
+  passwordLengthTitle: HTMLTitleElement;
+  passwordLengthRange: HTMLInputElement;
+  passwordAlphabet: HTMLSelectElement;
+  passwordForm: HTMLFormElement;
 
-  async render() {
+  async render(): Promise<void> {
     setPageContent("");
-    this.passwordBox = CopyableInputBox(genPassword(passwordOptionsDefault));
+    this.passwordBox = CopyableInputBox(genPassword(passwordOptionsDefault)) ;
 
     this.passwordLengthTitle = makeElement({
       tag: "h4",
       text: this.getPasswordLengthText()
-    })
+    }) as HTMLTitleElement;
 
     this.passwordLengthRange = makeElement({
       tag: "input",
@@ -80,7 +84,8 @@ export class PwGenPage extends Page {
         max: passwordLengthMax,
         min: passwordLengthMin,
       },
-    })
+    }) as HTMLInputElement;
+
     this.passwordLengthRange.addEventListener('input', this.updatePassword.bind(this));
 
     this.passwordAlphabet = makeElement({
@@ -91,7 +96,7 @@ export class PwGenPage extends Page {
         Option("a-z 0-9", alphabets.SMOL),
         Option("A-F 1-9", alphabets.HEX),
       ]
-    })
+    }) as HTMLSelectElement;
 
     this.passwordForm = makeElement({
       tag: "form",
@@ -104,36 +109,36 @@ export class PwGenPage extends Page {
           tag: "button",
           text: i18next.t("gen_password_btn"),
           class: ["uk-button", "uk-button-primary", "uk-margin-bottom"],
-          attributes: {type: "submit"},
+          attributes: { type: "submit" },
         }))
       ]
-    });
+    }) as HTMLFormElement;
 
     this.passwordForm.addEventListener("submit", (e) => this.formEvent(e));
     setPageContent(this.passwordForm);
   }
 
-  getPasswordLengthText() {
+  getPasswordLengthText(): string {
     return i18next.t("password_length_title", {
       min: this?.passwordLengthRange?.value || 24,
       max: passwordLengthMax
     });
   }
 
-  formEvent(e) {
+  formEvent(e: Event): void {
     e.preventDefault();
     this.updatePassword();
   }
 
-  updatePassword() {
+  updatePassword(): void {
     this.passwordLengthTitle.innerText = this.getPasswordLengthText();
     this.passwordBox.setText(genPassword({
-      length: this.passwordLengthRange.value,
+      length: (this.passwordLengthRange.value as unknown) as number,
-      alphabet: this.passwordAlphabet.value,
+      alphabet: this.passwordAlphabet.value as string,
     }));
   }
 
-  cleanup() {
+  cleanup(): void {
     this.passwordBox = undefined;
     this.passwordLengthTitle = undefined;
     this.passwordLengthRange = undefined;
@@ -141,7 +146,7 @@ export class PwGenPage extends Page {
     this.passwordForm = undefined;
   }
 
-  get name() {
+  get name(): string {
     return i18next.t("password_generator_title");
   }
 }

src/types/Page.ts

@@ -15,8 +15,8 @@ export class Page {
   }
   goBack(): void {
     changePage("HOME");
-  }
+  };
   cleanup(): void {
     // Do Nothing
-  }
+  };
 }