Start work on adding typescript to codebase.

src/PageState.js

@@ -2,7 +2,7 @@ import { Page } from "./types/Page.js";
 import { allPages } from "./allPages.js"
 import {
   getKeyByObjectPropertyValue,
-} from "./utils.js";
+} from "./utils";
 
 export class PageState extends Page {
   constructor() {

src/api/addNewTOTP.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function addNewTOTP(baseMount, parms) {

src/api/createOrUpdateSecret.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function createOrUpdateSecret(baseMount, mountType, secretPath, name, data) {

src/api/deleteSecret.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function deleteSecret(baseMount, mountType, secretPath, name, version = null) {

src/api/getCapabilities.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function getCapabilitiesPath(path) {

src/api/transitDecrypt.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function transitDecrypt(baseMount, name, data) {

src/api/transitEncrypt.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function transitEncrypt(baseMount, name, data) {

src/api/undeleteSecret.js

@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { getObjectKeys, removeDoubleSlash } from "../utils.js";
+import { getObjectKeys, removeDoubleSlash } from "../utils";
 import { getSecretMetadata } from "./getSecretMetadata";
 
 

src/elements/CopyableInputBox.js

@@ -1,6 +1,6 @@
 import { MarginInline } from "./MarginInline.js";
 import { addClipboardNotifications } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import ClipboardJS from "clipboard";
 import i18next from "i18next";
 

src/elements/CopyableModal.js

@@ -1,5 +1,5 @@
 import { addClipboardNotifications } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import ClipboardJS from "clipboard";
 import FileSaver from 'file-saver';
 import i18next from 'i18next';

src/elements/Margin.js

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 
 export function Margin(children, options = {}) {
   return makeElement({

src/elements/MarginInline.js

@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 
 export function MarginInline(children, marginOptions = {}, inlineOptions = {}) {
   return makeElement({

src/elements/QRScanner.js

@@ -1,5 +1,5 @@
 import { Margin } from "./Margin.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import QrScanner from 'qr-scanner';
 
 /* eslint-disable import/no-unresolved */ 

src/htmlUtils.js

@@ -1,45 +0,0 @@
-import {getObjectKeys} from "./utils.js";
-
-const optionsFunctions = {
-  class: (e, arg) => {
-    if (Array.isArray(arg)) {
-      e.classList.add(...arg);
-    } else {
-      e.classList.add(arg);
-    }
-  },
-  id: (e, arg) => e.id = arg,
-  html: (e, arg) => e.innerHTML = arg,
-  onclick: (e, arg) => e.onclick = arg,
-  attributes: setElementAttributes,
-  text: (e, arg) => e.innerText = arg,
-  children: (e, arg) => {
-    if (Array.isArray(arg)) {
-      arg.forEach(child => {
-        if (child != null) e.appendChild(child);
-      });
-    } else {
-      if (arg != null) e.appendChild(arg);
-    }
-  },
-  thenRun: (e, arg) => arg(e),
-}
-
-export function makeElement(elementInfo) {
-  if ("condition" in elementInfo) { if (!elementInfo.condition) { return null; } }
-  let element = document.createElement(elementInfo.tag);
-
-  for (let key of Object.getOwnPropertyNames(elementInfo)) {
-    if (getObjectKeys(optionsFunctions).includes(key)) {
-      optionsFunctions[key](element, elementInfo[key]);
-    }
-  }
-
-  return element;
-}
-
-export function setElementAttributes(element, attributes) {
-  for (let key of Object.getOwnPropertyNames(attributes)) {
-    element.setAttribute(key, attributes[key]);
-  }
-}

src/htmlUtils.ts

@@ -0,0 +1,63 @@
+import { getObjectKeys } from "./utils";
+
+type optionsFunctionsObject = {
+  [key: string]: (e: any, arg: any) => void
+}
+
+const optionsFunctions: optionsFunctionsObject = {
+  "class": (e: Element, arg: string | string[]) => {
+    if (Array.isArray(arg)) {
+      e.classList.add(...arg);
+    } else {
+      e.classList.add(arg);
+    }
+  },
+  "id": (e: Element, arg: string) => e.id = arg,
+  "html": (e: Element, arg: string) => e.innerHTML = arg,
+  "onclick": (e: HTMLButtonElement, arg: any) => e.onclick = arg,
+  "attributes": setElementAttributes,
+  "text": (e: HTMLParagraphElement, arg: string) => e.innerText = arg,
+  "children": (e: Element, arg: null | Element | (Element | null[])) => {
+    if (Array.isArray(arg)) {
+      arg.forEach(child => {
+        if (child != null) e.appendChild(child);
+      });
+    } else {
+      if (arg != null) e.appendChild(arg);
+    }
+  },
+  "thenRun": (e: Element, arg: (e: Element) => void) => arg(e),
+}
+
+interface ElementInfo {
+  condition?: Boolean;
+  tag: string;
+  class?: string | string[];
+  id?: string;
+  html?: string;
+  attributes?: {
+    [propName: string]: any
+  };
+  text?: string;
+  thenRun?: (e: Element) => void;
+  [propName: string]: any;
+}
+
+export function makeElement(elementInfo: ElementInfo) {
+  if ("condition" in elementInfo) { if (!elementInfo.condition) { return null; } }
+  let element = document.createElement(elementInfo.tag);
+
+  for (let key of Object.getOwnPropertyNames(elementInfo)) {
+    if (getObjectKeys(optionsFunctions).includes(key)) {
+      (optionsFunctions as any)[key](element, elementInfo[key]);
+    }
+  }
+
+  return element;
+}
+
+export function setElementAttributes(element: Element, attributes: {[propName: string]: any}) {
+  for (let key of Object.getOwnPropertyNames(attributes)) {
+    element.setAttribute(key, attributes[key]);
+  }
+}

src/main.js

@@ -18,7 +18,7 @@ import {
   renderPage,
 } from "./pageUtils.js";
 import { getSealStatus } from "./api/getSealStatus";
-import { makeElement } from "./htmlUtils.js";
+import { makeElement } from "./htmlUtils";
 import { pageState } from "./globalPageState.js";
 
 // Translations

src/pageUtils.js

@@ -1,6 +1,6 @@
 import { getSealStatus } from "./api/getSealStatus";
 import { lookupSelf } from "./api/lookupSelf";
-import { makeElement } from "./htmlUtils.js";
+import { makeElement } from "./htmlUtils";
 import { pageState } from "./globalPageState.js";
 import UIkit from 'uikit/dist/js/uikit.min.js';
 import i18next from 'i18next';

src/pages/Home.js

@@ -2,9 +2,9 @@ import { Page } from "../types/Page.js";
 import { changePage, prePageChecks, setErrorText } from "../pageUtils.js";
 import { getMounts } from "../api/getMounts";
 import { lookupSelf } from "../api/lookupSelf";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
-import { sortedObjectMap } from "../utils.js";
+import { sortedObjectMap } from "../utils";
 import i18next from 'i18next';
 
 export class HomePage extends Page {

src/pages/KeyValue/KeyValueDelete.js

@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { deleteSecret } from "../../api/deleteSecret";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/KeyValue/KeyValueNew.js

@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { createOrUpdateSecret } from "../../api/createOrUpdateSecret";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/KeyValue/KeyValueSecret.js

@@ -3,9 +3,9 @@ import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { getCapabilities } from "../../api/getCapabilities";
 import { getSecret } from "../../api/getSecret";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
-import { sortedObjectMap } from "../../utils.js";
+import { sortedObjectMap } from "../../utils";
 import { undeleteSecret } from "../../api/undeleteSecret";
 import Prism from "prismjs";
 import i18next from 'i18next';

src/pages/KeyValue/KeyValueSecretsEdit.js

@@ -3,9 +3,9 @@ import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { createOrUpdateSecret } from "../../api/createOrUpdateSecret.js";
 import { getSecret } from "../../api/getSecret.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
-import { verifyJSONString } from "../../utils.js";
+import { verifyJSONString } from "../../utils";
 import i18next from 'i18next';
 
 export class KeyValueSecretEditPage extends Page {

src/pages/KeyValue/KeyValueVersions.js

@@ -1,8 +1,8 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { getSecretMetadata } from "../../api/getSecretMetadata.js";
-import { makeElement } from "../../htmlUtils.js";
-import { objectToMap } from "../../utils.js";
+import { makeElement } from "../../htmlUtils";
+import { objectToMap } from "../../utils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/KeyValue/KeyValueView.js

@@ -2,7 +2,7 @@ import { DoesNotExistError } from "../../types/internalErrors.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setTitleElement } from "../../pageUtils.js";
 import { getSecrets } from "../../api/getSecrets";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/Login.js

@@ -3,7 +3,7 @@ import { MarginInline } from "../elements/MarginInline.js";
 import { Page } from "../types/Page.js";
 import { changePage, setErrorText, setPageContent } from "../pageUtils.js";
 import { lookupSelf } from "../api/lookupSelf";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 import { usernameLogin } from "../api/usernameLogin";
 import i18next from 'i18next';

src/pages/Me.js

@@ -1,7 +1,7 @@
 import { Page } from "../types/Page.js";
 import { addClipboardNotifications, changePage, prePageChecks, setErrorText, setPageContent } from "../pageUtils.js";
 import { getCapabilitiesPath } from "../api/getCapabilities.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 import { renewSelf } from "../api/renewSelf.js";
 import { sealVault } from "../api/sealVault.js";

src/pages/PwGen.js

@@ -1,7 +1,7 @@
 import { CopyableInputBox } from "../elements/CopyableInputBox.js";
 import { Margin } from "../elements/Margin.js";
 import { Page } from "../types/Page.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { setPageContent } from "../pageUtils.js";
 import i18next from 'i18next';
 

src/pages/SetLanguage.js

@@ -1,7 +1,7 @@
 import { Margin } from "../elements/Margin.js";
 import { Page } from "../types/Page.js";
 import { changePage, setPageContent } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 import i18next from 'i18next';
 import translations from "../translations/index.mjs";

src/pages/SetVaultURL.js

@@ -1,6 +1,6 @@
 import { Page } from "../types/Page.js";
 import { changePage, setPageContent } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 
 export class SetVaultURLPage extends Page {

src/pages/TOTP/NewTOTP.js

@@ -3,7 +3,7 @@ import { MarginInline } from "../../elements/MarginInline.js";
 import { Page } from "../../types/Page.js";
 import { addNewTOTP } from "../../api/addNewTOTP";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/TOTP/TOTPView.js

@@ -4,8 +4,8 @@ import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { getTOTPCode } from "../../api/getTOTPCode";
 import { getTOTPKeys } from "../../api/getTOTPKeys";
-import { makeElement } from "../../htmlUtils.js";
-import { objectToMap } from "../../utils.js";
+import { makeElement } from "../../htmlUtils";
+import { objectToMap } from "../../utils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/Template.js

@@ -1,6 +1,6 @@
 import { Page } from "../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 
 export class TemplatePage extends Page {

src/pages/Transit/TransitDecrypt.js

@@ -2,7 +2,7 @@ import { CopyableModal } from "../../elements/CopyableModal.js";
 import { Margin } from "../../elements/Margin.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import { transitDecrypt } from "../../api/transitDecrypt";
 import UIkit from 'uikit/dist/js/uikit.min.js';

src/pages/Transit/TransitEncrypt.js

@@ -2,7 +2,7 @@ import { CopyableModal } from "../../elements/CopyableModal.js";
 import { Margin } from "../../elements/Margin.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import { transitEncrypt } from "../../api/transitEncrypt";
 import UIkit from 'uikit/dist/js/uikit.min.js';

src/pages/Transit/TransitView.js

@@ -2,7 +2,7 @@ import { DoesNotExistError } from "../../types/internalErrors.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setTitleElement } from "../../pageUtils.js";
 import { getTransitKeys } from "../../api/getTransitKeys";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/Transit/TransitViewSecret.js

@@ -1,6 +1,6 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 

src/pages/Unseal.js

@@ -3,7 +3,7 @@ import { Page } from "../types/Page.js";
 import { QRScanner } from "../elements/QRScanner.js";
 import { changePage, setErrorText, setPageContent } from "../pageUtils.js";
 import { getSealStatus } from "../api/getSealStatus.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { submitUnsealKey } from "../api/submitUnsealKey.js";
 import i18next from 'i18next';
 

src/utils.js

@@ -1,23 +0,0 @@
-export function removeDoubleSlash(str) {
-  return str.replace(/\/\/+/g, "/");
-}
-
-export const getObjectKeys = (obj) => Object.getOwnPropertyNames(obj);
-export const objectToMap = (obj) => new Map(Object.entries(obj));
-export const sortedObjectMap = (obj) => new Map(Object.entries(obj).sort());
-
-export function getKeyByObjectPropertyValue(map, searchValue) {
-  for (let key of getObjectKeys(map)) {
-    if (map[key] === searchValue)
-      return key;
-  }
-}
-
-export function verifyJSONString(str) {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}

src/utils.ts

@@ -0,0 +1,23 @@
+export function removeDoubleSlash(str: string): string {
+  return str.replace(/\/\/+/g, "/");
+}
+
+export const getObjectKeys = (obj: Object) => Object.getOwnPropertyNames(obj);
+export const objectToMap = (obj: Object) => new Map(Object.entries(obj));
+export const sortedObjectMap = (obj: Object) => new Map(Object.entries(obj).sort());
+
+export function getKeyByObjectPropertyValue(map: object, searchValue: any) {
+  for (let key of getObjectKeys(map)) {
+    if ((map as any)[key] === searchValue)
+      return key;
+  }
+}
+
+export function verifyJSONString(str: string): Boolean {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+  }
+}

webpack.config.js

@@ -26,7 +26,9 @@ module.exports = {
   },
   resolve: {
     modules: ['node_modules'],
+    extensions: ['.tsx', '.ts', '.js'],
   },
+
   module: {
     rules: [
       {
@@ -37,6 +39,7 @@ module.exports = {
           "sass-loader"
         ],
       },
+      { test: /\.tsx?$/, loader: "ts-loader" }
     ],
   },
 };