Add typing to PageState.ts.

.eslintrc.json

@@ -0,0 +1,61 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": [
+    "sort-imports-es6-autofix",
+    "@typescript-eslint"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "experimentalObjectRestSpread": true
+  },
+  "globals": {
+    "pageContent": "writable",
+    "module": "writable",
+    "process": "writable"
+  },
+  "rules": {
+    "no-unused-vars": [
+      "off"
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-empty-function": [
+      "error",
+      {
+        "allow": ["arrowFunctions"]
+      }
+    ],
+    "sort-imports-es6-autofix/sort-imports-es6": [
+      2
+    ],
+    "@typescript-eslint/no-explicit-any": [
+      0
+    ]
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".ts"
+        ]
+      }
+    }
+  }
+}

.eslintrc.yml

@@ -1,30 +0,0 @@
----
-extends:
-  - eslint:recommended
-  - plugin:import/errors
-  - plugin:import/warnings
-
-plugins:
-  - sort-imports-es6-autofix
-
-parserOptions:
-  ecmaVersion: 12
-  sourceType: module
-  experimentalObjectRestSpread: true
-
-globals:
-  pageContent: writable
-  module: writable
-  process: writable
-
-
-rules: 
-  no-unused-vars:
-    - 2
-    - argsIgnorePattern: ^_
-  sort-imports-es6-autofix/sort-imports-es6: 
-    - 2
-
-env:
-  browser: true
-  es6: true

package.json

@@ -1,11 +1,13 @@
 {
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
     "clipboard": "^2.0.8",
     "codejar": "^3.4.0",
     "css-loader": "^5.2.1",
     "date-fns": "^2.21.1",
-    "eslint": "^7.24.0",
+    "eslint": "^7.25.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "file-saver": "^2.0.5",
@@ -18,6 +20,7 @@
     "raw-loader": "^4.0.2",
     "sass-loader": "^11.0.1",
     "ts-loader": "^9.1.2",
+    "typescript": "^4.2.4",
     "uikit": "^3.6.19",
     "webpack": "^5.32.0",
     "webpack-cli": "^4.6.0",

runLinter.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-npx eslint -c .eslintrc.yml src
+npx eslint -c .eslintrc.json "$@" --fix src/ --ext .js,.ts

src/PageState.ts

@@ -4,10 +4,9 @@ import {
   getKeyByObjectPropertyValue,
 } from "./utils";
 
-export class PageState extends Page {
+export class PageState {
   constructor() {
-    super();
-    this._currentPage = new Page();
+    // Do Nothing
   }
 
   // NOTE: When a item in the page state isn't a string (e.g it is a array or object),
@@ -19,40 +18,40 @@ export class PageState extends Page {
   // by using a bunch of functions and modifying localStorage in order to remove some of
   // the clunkyness of this approach, but for now, this works.
 
-  get apiURL() {
-    let apiurl = localStorage.getItem('apiURL') || "";
+  get apiURL(): string | null {
+    const apiurl = localStorage.getItem('apiURL') || "";
     return apiurl.length > 0 ? apiurl : null;
   }
-  set apiURL(value) {
+  set apiURL(value: string) {
     localStorage.setItem('apiURL', value);
   }
 
-  get token() {
-    let tok = localStorage.getItem('token') || "";
+  get token(): string | null {
+    const tok = localStorage.getItem('token') || "";
     return tok.length > 0 ? tok : null;
   }
-  set token(value) {
+  set token(value: string) {
     localStorage.setItem('token', value);
   }
 
-  get pageDirection() {
+  get pageDirection(): string {
     return localStorage.getItem('pageDirection') || "ltr";
   }
-  set pageDirection(value) {
+  set pageDirection(value: string) {
     localStorage.setItem('pageDirection', value);
   }
 
-  get language() {
+  get language(): string {
     return localStorage.getItem('language') || "";
   }
-  set language(value) {
+  set language(value: string) {
     localStorage.setItem('language', value);
   }
 
-  get currentBaseMount() {
+  get currentBaseMount(): string {
     return localStorage.getItem('currentBaseMount') || "";
   }
-  set currentBaseMount(value) {
+  set currentBaseMount(value: string) {
     localStorage.setItem('currentBaseMount', value);
   }
 
@@ -60,59 +59,59 @@ export class PageState extends Page {
   // Since this is a array we can't act directly on it so we need
   // functions to do the same modifications.
   // See the note at the start o
-  popCurrentSecretPath() {
-    let secPath = this.currentSecretPath;
+  popCurrentSecretPath(): void {
+    const secPath = this.currentSecretPath;
     secPath.pop();
     this.currentSecretPath = secPath;
   }
-  pushCurrentSecretPath(...args) {
-    let secPath = this.currentSecretPath;
+  pushCurrentSecretPath(...args: string[]): void {
+    const secPath = this.currentSecretPath;
     secPath.push(...args);
     this.currentSecretPath = secPath;
   }
-  get currentSecretPath() {
+
+  get currentSecretPath(): string[] {
     return JSON.parse(localStorage.getItem('currentSecretPath') || "[]");
   }
-  set currentSecretPath(value) {
+  set currentSecretPath(value: string[]) {
     localStorage.setItem('currentSecretPath', JSON.stringify(value));
   }
 
-  get currentSecretVersion() {
-    let result = localStorage.getItem('currentSecretVersion')
-
+  get currentSecretVersion(): string | null {
+    const result = localStorage.getItem('currentSecretVersion')
     return result != "null" ? result || null : null;
   }
-  set currentSecretVersion(value) {
+  set currentSecretVersion(value: string) {
     localStorage.setItem('currentSecretVersion', String(value));
   }
 
-  get currentSecret() {
+  get currentSecret(): string {
     return localStorage.getItem('currentSecret') || "";
   }
-  set currentSecret(value) {
+  set currentSecret(value: string) {
     localStorage.setItem('currentSecret', value);
   }
 
-  get currentMountType() {
+  get currentMountType(): string {
     return localStorage.getItem('currentMountType') || "";
   }
-  set currentMountType(value) {
+  set currentMountType(value: string) {
     localStorage.setItem('currentMountType', value);
   }
-  get currentPage() {
-    let curPage = localStorage.getItem('currentPage') || "HOME";
-    return allPages[curPage];
-  }
-  get currentPageString() {
-    let key = getKeyByObjectPropertyValue(allPages, this.currentPage);
+  get currentPageString(): string {
+    const key = getKeyByObjectPropertyValue(allPages, this.currentPage);
     return key;
   }
-  set currentPage(value) {
-    if (typeof page == 'object') {
-      let key = getKeyByObjectPropertyValue(allPages, value);
+  get currentPage(): Page | string {
+    const curPage = localStorage.getItem('currentPage') || "HOME";
+    return (allPages as any)[curPage];
+  }
+  set currentPage(value: Page | string) {
+    if (typeof value == 'object') {
+      const key = getKeyByObjectPropertyValue(allPages, value);
       localStorage.setItem('currentPage', key);
     } else {
-      localStorage.setItem('currentPage', value);
+      localStorage.setItem('currentPage', (value as string));
     }
   }
 }

src/api/apiUtils.js

@@ -1,4 +1,4 @@
-import { pageState } from "../globalPageState.js";
+import { pageState } from "../globalPageState.ts";
 
 export function getHeaders() {
   return {

src/formatDistance.js

@@ -1,6 +1,6 @@
 import { de, enGB, fr, it, nl, ru } from 'date-fns/locale'
 import { formatDistance as formatDistanceReal} from 'date-fns';
-import { pageState } from "./globalPageState.js";
+import { pageState } from "./globalPageState.ts";
 
 function getLocale() {
   return {

src/globalPageState.js

@@ -1,3 +0,0 @@
-import { PageState } from "./PageState.js";
-
-export const pageState = new PageState();

src/globalPageState.ts

@@ -0,0 +1,2 @@
+import { PageState } from "./PageState";
+export const pageState = new PageState();

src/htmlUtils.ts

@@ -30,7 +30,7 @@ const optionsFunctions: optionsFunctionsObject = {
 }
 
 interface ElementInfo {
-  condition?: Boolean;
+  condition?: boolean;
   tag: string;
   class?: string | string[];
   id?: string;
@@ -45,9 +45,9 @@ interface ElementInfo {
 
 export function makeElement(elementInfo: ElementInfo) {
   if ("condition" in elementInfo) { if (!elementInfo.condition) { return null; } }
-  let element = document.createElement(elementInfo.tag);
+  const element = document.createElement(elementInfo.tag);
 
-  for (let key of Object.getOwnPropertyNames(elementInfo)) {
+  for (const key of Object.getOwnPropertyNames(elementInfo)) {
     if (getObjectKeys(optionsFunctions).includes(key)) {
       (optionsFunctions as any)[key](element, elementInfo[key]);
     }
@@ -57,7 +57,7 @@ export function makeElement(elementInfo: ElementInfo) {
 }
 
 export function setElementAttributes(element: Element, attributes: {[propName: string]: any}) {
-  for (let key of Object.getOwnPropertyNames(attributes)) {
+  for (const key of Object.getOwnPropertyNames(attributes)) {
     element.setAttribute(key, attributes[key]);
   }
 }

src/main.js

@@ -19,7 +19,7 @@ import {
 } from "./pageUtils.js";
 import { getSealStatus } from "./api/getSealStatus";
 import { makeElement } from "./htmlUtils";
-import { pageState } from "./globalPageState.js";
+import { pageState } from "./globalPageState.ts";
 
 // Translations
 import { formatDistance } from './formatDistance.js';

src/pageUtils.js

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

src/pages/Home.js

@@ -3,7 +3,7 @@ import { changePage, prePageChecks, setErrorText } from "../pageUtils.js";
 import { getMounts } from "../api/getMounts";
 import { lookupSelf } from "../api/lookupSelf";
 import { makeElement } from "../htmlUtils";
-import { pageState } from "../globalPageState.js";
+import { pageState } from "../globalPageState.ts";
 import { sortedObjectMap } from "../utils";
 import i18next from 'i18next';
 

src/pages/KeyValue/KeyValueDelete.js

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

src/pages/KeyValue/KeyValueNew.js

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

src/pages/KeyValue/KeyValueSecret.js

@@ -4,7 +4,7 @@ import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js"
 import { getCapabilities } from "../../api/getCapabilities";
 import { getSecret } from "../../api/getSecret";
 import { makeElement } from "../../htmlUtils";
-import { pageState } from "../../globalPageState.js";
+import { pageState } from "../../globalPageState.ts";
 import { sortedObjectMap } from "../../utils";
 import { undeleteSecret } from "../../api/undeleteSecret";
 import Prism from "prismjs";

src/pages/KeyValue/KeyValueSecretsEdit.js

@@ -4,7 +4,7 @@ import { changePage, setErrorText, setPageContent, setTitleElement } from "../..
 import { createOrUpdateSecret } from "../../api/createOrUpdateSecret.js";
 import { getSecret } from "../../api/getSecret.js";
 import { makeElement } from "../../htmlUtils";
-import { pageState } from "../../globalPageState.js";
+import { pageState } from "../../globalPageState.ts";
 import { verifyJSONString } from "../../utils";
 import i18next from 'i18next';
 

src/pages/KeyValue/KeyValueVersions.js

@@ -3,7 +3,7 @@ import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js"
 import { getSecretMetadata } from "../../api/getSecretMetadata.js";
 import { makeElement } from "../../htmlUtils";
 import { objectToMap } from "../../utils";
-import { pageState } from "../../globalPageState.js";
+import { pageState } from "../../globalPageState.ts";
 import i18next from 'i18next';
 
 

src/pages/KeyValue/KeyValueView.js

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

src/pages/Login.js

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

src/pages/Me.js

@@ -2,7 +2,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";
-import { pageState } from "../globalPageState.js";
+import { pageState } from "../globalPageState.ts";
 import { renewSelf } from "../api/renewSelf.js";
 import { sealVault } from "../api/sealVault.js";
 import ClipboardJS from "clipboard";

src/pages/SetLanguage.js

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

src/pages/SetVaultURL.js

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

src/pages/TOTP/NewTOTP.js

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

src/pages/TOTP/TOTPView.js

@@ -6,7 +6,7 @@ import { getTOTPCode } from "../../api/getTOTPCode";
 import { getTOTPKeys } from "../../api/getTOTPKeys";
 import { makeElement } from "../../htmlUtils";
 import { objectToMap } from "../../utils";
-import { pageState } from "../../globalPageState.js";
+import { pageState } from "../../globalPageState.ts";
 import i18next from 'i18next';
 
 export class TOTPViewPage extends Page {

src/pages/Template.js

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

src/pages/Transit/TransitDecrypt.js

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

src/pages/Transit/TransitEncrypt.js

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

src/pages/Transit/TransitView.js

@@ -3,7 +3,7 @@ import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setTitleElement } from "../../pageUtils.js";
 import { getTransitKeys } from "../../api/getTransitKeys";
 import { makeElement } from "../../htmlUtils";
-import { pageState } from "../../globalPageState.js";
+import { pageState } from "../../globalPageState.ts";
 import i18next from 'i18next';
 
 export class TransitViewPage extends Page {

src/pages/Transit/TransitViewSecret.js

@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { makeElement } from "../../htmlUtils";
-import { pageState } from "../../globalPageState.js";
+import { pageState } from "../../globalPageState.ts";
 import i18next from 'i18next';
 
 export class TransitViewSecretPage extends Page {

src/pages/Unseal.js

@@ -27,7 +27,7 @@ export class UnsealPage extends Page {
     try {
       this.qrScanner.deinit();
     } catch (_) {
-      ()=>{};
+      // Do Nothing
     }
   }
 

src/playground.js

@@ -1,4 +1,4 @@
-import { pageState } from "./globalPageState.js";
+import { pageState } from "./globalPageState.ts";
 import i18next from 'i18next';
 
 // Playground is a way to debug and test things.

src/types/Page.js

@@ -1,8 +1,11 @@
 import { changePage } from "../pageUtils.js";
 
 export class Page {
-  constructor() { }
+  constructor() {
+    // Do Nothing
+  }
   render() {
+    // Do Nothing
   }
   get name() {
     return "Page";
@@ -14,5 +17,6 @@ export class Page {
     changePage("HOME");
   }
   cleanup() {
+    // Do Nothing
   }
 }

src/utils.ts

@@ -2,18 +2,18 @@ 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 const getObjectKeys = (obj: Record<string, unknown>) => Object.getOwnPropertyNames(obj);
+export const objectToMap = (obj: Record<string, unknown>) => new Map(Object.entries(obj));
+export const sortedObjectMap = (obj: Record<string, unknown>) => new Map(Object.entries(obj).sort());
 
-export function getKeyByObjectPropertyValue(map: object, searchValue: any) {
-  for (let key of getObjectKeys(map)) {
+export function getKeyByObjectPropertyValue(map: Record<string, unknown>, searchValue: any) {
+  for (const key of getObjectKeys(map)) {
     if ((map as any)[key] === searchValue)
       return key;
   }
 }
 
-export function verifyJSONString(str: string): Boolean {
+export function verifyJSONString(str: string): boolean {
   try {
     JSON.parse(str);
   } catch (e) {