lazy element, settings: account delete and secret update

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);
 };