ui-for-firebase-authentication/src/ui_manager/passwordUIClasses.ts

UI for Firebase Authentication (Firebase UI alternative supporting v9+)

//@ts-nocheck

import {wrapInputElement} from "./floatingInputWrapper";

class AutoCompleteValues {
  static CURRENT_PASSWORD = "current-password"
  static NEW_PASSWORD = "new-password"
}


class PasswordEntryBox {
  //A box for handling password entry for login, password changes, and account creation.
  //This box will not contain any validation whatsoever and is a building block for the forms.

  container = document.createElement("div")
  input = document.createElement("input")

  constructor({hidden, placeholder, minLength, autoComplete} = {}) {
    this.input.minLength = minLength
    this.input.placeholder = placeholder
    this.input.autocomplete = autoComplete
    this.input.setAttribute("required", "required")

    this.container.classList.add("passwordEntryContainer")


    //Checkbox to hide / show the password.
    let randomId = "passwordVisibilityToggle" + Math.random().toString(36).substring(2)
    this._hideShowButton = document.createElement("input")
    this._hideShowButton.type = "checkbox"
    this._hideShowButton.id = randomId
    this._hideShowButton.style.verticalAlign = "middle"
    this._hideShowButton.addEventListener("input", (function() {
      this.setHidden(!this._hideShowButton.checked)
    }).bind(this))

    this._hideShowLabel = document.createElement("label")
    this._hideShowLabel.htmlFor = randomId
    this._hideShowLabel.innerText = "Show"
    this._hideShowLabel.style.verticalAlign = "middle"

    this.container.appendChild(wrapInputElement(this.input))
    this.container.appendChild(this._hideShowButton)
    this.container.appendChild(this._hideShowLabel)

    this.setHidden(hidden)
    this._hideShowButton.checked = !hidden
  }

  setHidden(newHidden) {
    this.input.type = newHidden ? "password" : "text"
  }

  reset() {
    this.setValue("")
  }

  setValue(val: str) {
    this.input.value = val
  }

  getValue() {
    return this.input.value
  }
}


class PasswordConfirmingUnit {
  //Manages both a password entry and a password confirmation entry.
  //If the two do not match, a validity error will be raised on the form automatically.
  //getValue will return the value contained in both password entries, or null if the passwords do not match.

  constructor({hidden = true, minLength = 6, autoComplete = AutoCompleteValues.CURRENT_PASSWORD} = {}) {
    this.container = document.createElement("div")

    let isNewPassword = autoComplete === AutoCompleteValues.NEW_PASSWORD

    this._passwordEntry = new PasswordEntryBox({hidden, minLength, placeholder: `Enter ${isNewPassword?"New ": ""}Password`, autoComplete})
    this.container.appendChild(this._passwordEntry.container)

    this._passwordConfirm = new PasswordEntryBox({hidden, minLength, placeholder: `Confirm ${isNewPassword?"New ": ""}Password`, autoComplete})
    this.container.appendChild(this._passwordConfirm.container)

    this._passwordEntry.input.addEventListener("keyup", this._validate.bind(this))
    this._passwordConfirm.input.addEventListener("keyup", this._validate.bind(this))
  }

  passwordsMatch() {
    return this._passwordEntry.getValue() === this._passwordConfirm.getValue()
  }

  _validate() {
    if (!this.passwordsMatch()) {
      this._passwordConfirm.input.setCustomValidity("Passwords do not match")
    }
    else {
      this._passwordConfirm.input.setCustomValidity("")
    }
  }

  getValue() {
    if (!this.passwordsMatch()) {
      return null
    }
    return this._passwordEntry.getValue()
  }

  setValue(val: str) {
    this._passwordEntry.setValue(val)
    this._passwordConfirm.setValue(val)
  }
}


//Login: One field, no confirm, reset option
//Create: Two fields, confirm
//Change: Two fields, confirm



export {PasswordEntryBox, PasswordConfirmingUnit}