VaultUI/src/pages/PwGen.ts

import { CopyableInputBox, CopyableInputBoxType } from "../elements/CopyableInputBox";
import { Margin } from "../elements/Margin";
import { Page } from "../types/Page";
import { makeElement } from "../htmlUtils";
import { setPageContent } from "../pageUtils";
import i18next from 'i18next';
import { Option } from "../elements/Option";

const passwordLengthMin = 1;
const passwordLengthMax = 64;
const passwordLengthDefault = 24;

function random() {
  if (typeof window.crypto?.getRandomValues === 'function' && typeof window.Uint32Array === 'function') {
    return window.crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295;
  }

  return Math.random();
}

const lowerCase = 'abcdefghijklmnopqrstuvwxyz';
const upperCase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const numbers = '1234567890';
const special = '!#$%&()*+,-./:;<=>?@[]^_{|}~';

const alphabets = {
  SECURE: lowerCase + upperCase + numbers + special,
  SMOL: lowerCase + numbers,
  HEX: '123456789ABCDEF',
}

const passwordOptionsDefault = {
  length: passwordLengthDefault,
  alphabet: alphabets.SECURE,
}

function genPassword(options = passwordOptionsDefault) {
  let pw = "";
  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)]);
  }
  return pw;
}

export class PwGenPage extends Page {
  constructor() {
    super();
  }

  passwordBox: CopyableInputBoxType;
  passwordLengthTitle: HTMLTitleElement;
  passwordLengthRange: HTMLInputElement;
  passwordAlphabet: HTMLSelectElement;
  passwordForm: HTMLFormElement;

  async render(): Promise<void> {
    setPageContent("");
    this.passwordBox = CopyableInputBox(genPassword(passwordOptionsDefault)) ;

    this.passwordLengthTitle = makeElement({
      tag: "h4",
      text: this.getPasswordLengthText()
    }) as HTMLTitleElement;

    this.passwordLengthRange = makeElement({
      tag: "input",
      name: "length",
      class: ["uk-range", "uk-width-1-2"],
      attributes: {
        type: "range",
        value: passwordLengthDefault,
        max: passwordLengthMax,
        min: passwordLengthMin,
      },
    }) as HTMLInputElement;

    this.passwordLengthRange.addEventListener('input', this.updatePassword.bind(this));

    this.passwordAlphabet = makeElement({
      tag: "select",
      class: ["uk-select", "uk-width-1-2"],
      children: [
        Option("a-z a-Z 0-9 specials", alphabets.SECURE),
        Option("a-z 0-9", alphabets.SMOL),
        Option("A-F 1-9", alphabets.HEX),
      ]
    }) as HTMLSelectElement;

    this.passwordForm = makeElement({
      tag: "form",
      children: [
        this.passwordLengthTitle,
        Margin(this.passwordLengthRange),
        Margin(this.passwordAlphabet),
        Margin(this.passwordBox),
        Margin(makeElement({
          tag: "button",
          text: i18next.t("gen_password_btn"),
          class: ["uk-button", "uk-button-primary", "uk-margin-bottom"],
          attributes: { type: "submit" },
        }))
      ]
    }) as HTMLFormElement;

    this.passwordForm.addEventListener("submit", (e) => this.formEvent(e));
    setPageContent(this.passwordForm);
  }

  getPasswordLengthText(): string {
    return i18next.t("password_length_title", {
      min: this?.passwordLengthRange?.value || 24,
      max: passwordLengthMax
    });
  }

  formEvent(e: Event): void {
    e.preventDefault();
    this.updatePassword();
  }

  updatePassword(): void {
    this.passwordLengthTitle.innerText = this.getPasswordLengthText();
    this.passwordBox.setText(genPassword({
      length: (this.passwordLengthRange.value as unknown) as number,
      alphabet: this.passwordAlphabet.value as string,
    }));
  }

  cleanup(): void {
    this.passwordBox = undefined;
    this.passwordLengthTitle = undefined;
    this.passwordLengthRange = undefined;
    this.passwordAlphabet = undefined;
    this.passwordForm = undefined;
  }

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