mCaptcha/templates/panel/settings/index.ts

/*
 * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import registerShowPassword from "../../components/showPassword/";
import CopyIcon from "../../components/clipboard/";
import createError from "../../components/error/";

import emailExists from "../../auth/register/ts/emailExists";
import userExists from "../../auth/register/ts/userExists";

import LazyElement from "../../utils/lazyElement";
import isBlankString from "../../utils/isBlankString";
import getFormUrl from "../../utils/getFormUrl";
import genJsonPayload from "../../utils/genJsonPayload";

import VIEWS from "../../views/v1/routes";

const SECRET_COPY_ICON = "settings__secret-copy";
const SECRET_COPY_DONE_ICON = "settings__secret-copy-done";

// form IDs
const DELETE_FORM = "settings__delete-form";
const EMAIL_FORM = "settings__email-form";
const USERNAME_FORM = "settings__username-form";
const SECRET_FORM = "settings__secret-form";

// form elements
const deleteForm = new LazyElement(DELETE_FORM);
const emailForm = new LazyElement(EMAIL_FORM);
const usernameForm = new LazyElement(USERNAME_FORM);
const secretForm = new LazyElement(SECRET_FORM);

// field IDs
const EMAIL = "email";
const USERNAME = "username";

// field elements
const emailField = new LazyElement(EMAIL);
const usernameField = new LazyElement(USERNAME);

// form event handlers
const updateEmail = async (e: Event) => {
  e.preventDefault();
  const emailElement = <HTMLInputElement>emailField.get();
  const email = emailElement.value;
  isBlankString(email, "email", e);
  if (await emailExists(emailElement)) {
    return;
  } else {
    const url = getFormUrl(<HTMLFormElement>emailForm.get());
    const payload = {
      email,
    };

    const res = await fetch(url, genJsonPayload(payload));
    if (res.ok) {
      window.location.reload();
    } else {
      const err = await res.json();
      createError(err.error);
    }
  }
};

const updateUsername = async (e: Event) => {
  e.preventDefault();
  const usernameElement = <HTMLInputElement>usernameField.get();
  const username = usernameElement.value;
  isBlankString(username, "username", e);
  if (await userExists(usernameElement)) {
    return;
  } else {
    const url = getFormUrl(<HTMLFormElement>usernameForm.get());
    const payload = {
      username,
    };
    const res = await fetch(url, genJsonPayload(payload));
    if (res.ok) {
      window.location.reload();
    } else {
      const err = await res.json();
      createError(err.error);
    }
  }
};

const updateSecret = (e: Event) => {
  e.preventDefault();
  const msg =
    "WARNING: updating secret will cause service disruption if old secret is still in use post update";
  if (confirm(msg)) {
    window.location.assign(VIEWS.updateSecret);
  }
};

const deleteAccount = (e: Event) => {
  e.preventDefault();
  const msg =
    "WARNING: all CAPTCHA configurations will be lost. This action can't be undone";
  if (confirm(msg)) {
    window.location.assign(VIEWS.deleteAccount);
  }
};

// regist form event handlers
const registerForms = () => {
  deleteForm.get().addEventListener("submit", (e) => deleteAccount(e), true);
  emailForm.get().addEventListener("submit", (e) => updateEmail(e), true);
  usernameForm.get().addEventListener("submit", (e) => updateUsername(e), true);
  console.log(usernameField.get());
  usernameField
    .get()
    .addEventListener("input", async () => await userExists(), false);
  secretForm.get().addEventListener("submit", (e) => updateSecret(e), true);
};

// set up copying account secret to clipboard
const initCopySecret = () => {
  const secretElement = <HTMLElement>(
    document.querySelector(`.${SECRET_COPY_ICON}`)
  );
  const writeText = secretElement.dataset.secret;
  new CopyIcon(writeText, secretElement, SECRET_COPY_DONE_ICON);
};

/// TODO email update button should only change if email value has been changed
const index = (): void => {
  registerShowPassword();
  initCopySecret();
  registerForms();
};

export default index;