lazy element, settings: account delete and secret update

templates/auth/register/ts/emailExists.ts

@@ -20,9 +20,15 @@ import ROUTES from '../../../api/v1/routes';
 import genJsonPayload from '../../../utils/genJsonPayload';
 import createError from '../../../components/error/index';
 
-const emailExists = async () => {
-  const email = <HTMLInputElement>document.getElementById('email');
+const emailExists = async (element?: HTMLInputElement) => {
+  let email;
+  if (element === undefined || element === null) {
+    email = <HTMLInputElement>document.getElementById('email');
+  } else {
+    email = element;
+  }
   const val = email.value;
+
   const payload = {
     val,
   };

templates/auth/sudo/index.ts

@@ -14,21 +14,9 @@
  * 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 LazyElement from '../../utils/lazyElement';
 
-const form = () => {
-  let element = null;
-  const ID = 'form';
+const ID = 'form';
+const FORM = new LazyElement(ID);
 
-  if (element === null) {
-    element = <HTMLFormElement>document.getElementById(ID);
-    if (element === undefined) {
-      throw new Error("Couldn't form element, is the component loaded?");
-    } else {
-      return element;
-    }
-  } else {
-    element;
-  }
-};
-
-export default form;
+export default FORM;

templates/index.ts

@@ -21,6 +21,8 @@ import * as login from './auth/login/ts/';
 import * as register from './auth/register/ts/';
 import * as panel from './panel/ts/index';
 import settings from './panel/settings/';
+import * as deleteAccount from './panel/settings/account/delete';
+import * as updateSecret from './panel/settings/secret/update';
 import * as addSiteKey from './panel/sitekey/add/ts';
 import * as editSitekey from './panel/sitekey/edit/';
 import * as deleteSitekey from './panel/sitekey/delete/';
@@ -53,6 +55,8 @@ const router = new Router();
 
 router.register(VIEWS.panelHome, panel.index);
 router.register(VIEWS.settings, settings);
+router.register(VIEWS.deleteAccount, deleteAccount.index);
+router.register(VIEWS.updateSecret, updateSecret.index);
 router.register(VIEWS.registerUser, register.index);
 router.register(VIEWS.loginUser, login.index);
 router.register(VIEWS.notifications, notidications.index);

templates/panel/navbar/index.html

@@ -35,7 +35,7 @@
     </li>
 
     <li class="secondary-menu__item">
-      <a class="secondary-menu__item-link" href="<.= crate::PAGES.panel.settings .>">
+      <a class="secondary-menu__item-link" href="<.= crate::PAGES.panel.settings.home .>">
         <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/cache/img/svg/settings.svg").unwrap() .>" alt="" />
         <div class="secondary-menu__item-name">
           Settings

templates/panel/settings/account/delete.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 {getPassword} from '../../../auth/login/ts/';
+import FORM from '../../../auth/sudo/';
+
+import getFormUrl from '../../../utils/getFormUrl';
+import genJsonPayload from '../../../utils/genJsonPayload';
+import createError from '../../../components/error';
+
+import VIEWS from '../../../views/v1/routes';
+
+const submit = async (e: Event) => {
+  e.preventDefault();
+  const password = getPassword();
+
+  const payload = {
+    password,
+  };
+
+  const formUrl = getFormUrl(<HTMLFormElement>FORM.get());
+
+  const res = await fetch(formUrl, genJsonPayload(payload));
+  if (res.ok) {
+    window.location.assign(VIEWS.panelHome);
+  } else {
+    const err = await res.json();
+    createError(err.error);
+  }
+};
+
+export const index = () => {
+  FORM.get().addEventListener('submit', submit, true);
+};

templates/panel/settings/index.html

@@ -17,7 +17,7 @@
 	<h1 class="form__title">
 		<.= PAGE .>
 	</h1>
-      <form class="settings__form "
+      <form class="settings__form" id="settings__email-form"
         action="<.= crate::V1_API_ROUTES.account.update_email .>" 
         method="post">
         <label class="settings-form__label" for="email">
@@ -38,7 +38,7 @@
       </form>
 
       <form 
-        class="settings__form"
+        class="settings__form" id="settings__secret-form"
         action="<.= crate::V1_API_ROUTES.account.update_secret .>"
         method="post"> 
         <label class="settings-form__label" for="secret">
@@ -67,7 +67,7 @@
 	</form>
 
 	<form 
-      class="settings__form"
+      class="settings__form" id="settings__delete-form"
       action="<.= crate::V1_API_ROUTES.account.update_secret .>"
       method="post">
         <label class="settings-form__label--danger" for="delete-account">

templates/panel/settings/index.ts

@@ -17,13 +17,87 @@
 
 import registerShowPassword from '../../components/showPassword/';
 import CopyIcon from '../../components/clipboard/';
+import createError from '../../components/error/';
+
+import emailExists from '../../auth/register/ts/emailExists';
+
+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';
 
-const index = () => {
-  registerShowPassword();
+// form IDs
+const DELETE_FORM = 'settings__delete-form';
+const EMAIL_FORM = 'settings__email-form';
+const SECRET_FORM = 'settings__secret-form';
 
+// form elements
+const deleteForm = new LazyElement(DELETE_FORM);
+const emailForm = new LazyElement(EMAIL_FORM);
+const secretForm = new LazyElement(SECRET_FORM);
+
+// field IDs
+const EMAIL = 'email';
+
+// field elements
+const emailField = new LazyElement(EMAIL);
+
+// 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 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);
+  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}`)
   );
@@ -31,4 +105,12 @@ const index = () => {
   new CopyIcon(writeText, secretElement, SECRET_COPY_DONE_ICON);
 };
 
+/// TODO email update button should only change if email value has been changed
+
+const index = () => {
+  registerShowPassword();
+  initCopySecret();
+  registerForms();
+};
+
 export default index;

templates/panel/settings/main.scss

@@ -97,7 +97,8 @@
   margin-top: 20px;
 }
 
-.settings__submit-btn:hover {
+.settings__submit-btn:hover,
+.settings__submit-btn--danger:hover {
   cursor: pointer;
 }
 

templates/panel/settings/secret/update.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 {getPassword} from '../../../auth/login/ts/';
+import FORM from '../../../auth/sudo/';
+
+import getFormUrl from '../../../utils/getFormUrl';
+import genJsonPayload from '../../../utils/genJsonPayload';
+import createError from '../../../components/error';
+
+import VIEWS from '../../../views/v1/routes';
+
+const submit = async (e: Event) => {
+  e.preventDefault();
+  const password = getPassword();
+
+  const payload = {
+    password,
+  };
+
+  const formUrl = getFormUrl(<HTMLFormElement>FORM.get());
+
+  const res = await fetch(formUrl, genJsonPayload(payload));
+  if (res.ok) {
+    window.location.assign(VIEWS.settings);
+  } else {
+    const err = await res.json();
+    createError(err.error);
+  }
+};
+
+export const index = () => {
+  FORM.get().addEventListener('submit', submit, true);
+};

templates/panel/sitekey/delete/index.ts

@@ -16,7 +16,7 @@
  */
 
 import {getPassword} from '../../../auth/login/ts/';
-import form from '../../../auth/sudo/';
+import FORM from '../../../auth/sudo/';
 import additionalData from '../../../components/additional-data';
 
 import getFormUrl from '../../../utils/getFormUrl';
@@ -35,7 +35,7 @@ const submit = async (e: Event) => {
     key,
   };
 
-  const formUrl = getFormUrl(form());
+  const formUrl = getFormUrl(<HTMLFormElement>FORM.get());
 
   const res = await fetch(formUrl, genJsonPayload(payload));
   if (res.ok) {
@@ -47,5 +47,5 @@ const submit = async (e: Event) => {
 };
 
 export const index = () => {
-  form().addEventListener('submit', submit, true);
+  FORM.get().addEventListener('submit', submit, true);
 };

templates/utils/lazyElement.ts

@@ -0,0 +1,38 @@
+/*
+ * 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/>.
+ */
+
+class LazyElement {
+  id: string;
+  element: HTMLElement;
+  constructor(id: string) {
+    this.id = id;
+  }
+
+  get() {
+    if (this.element === null || this.element === undefined) {
+      const element = document.getElementById(this.id);
+      if (element === null || element === undefined) {
+        throw new Error(`Element ${this.id} is undefined`);
+      } else {
+        this.element = element;
+      }
+    }
+    return this.element;
+  }
+}
+
+export default LazyElement;

templates/views/v1/routes.ts

@@ -21,6 +21,8 @@ const ROUTES = {
   signoutUser: '/api/v1/signout',
   panelHome: '/',
   settings: '/settings/',
+  updateSecret: '/settings/secret/update/',
+  deleteAccount: '/settings/account/delete/',
   docsHome: '/docs/',
   notifications: '/notifications',
   listSitekey: '/sitekeys/',