registration tests

templates/panel/sitekey/add/ts/addLevelButton.ts

@@ -0,0 +1,117 @@
+/*
+ * 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 validateLevel from './levels/validateLevel';
+import getNumLevels from './levels/getNumLevels';
+import  {LEVELS} from './levels/';
+import * as UpdateLevel from './levels/updateLevel';
+import {
+  getRemoveButtonHTML,
+  addRemoveLevelButtonEventListener,
+} from './removeLevelButton';
+import CONST from './const';
+
+const ADD_LEVEL_BUTTON = 'sitekey-form__level-add-level-button';
+
+/**
+ * Gets executed when 'Add' Button is clicked to add levels
+ * Used to validate levels per m_captcha::defense::Defense's
+ * specifications
+ */
+const addLevel = (e: Event) => {
+  const eventTarget = <HTMLElement>e.target;
+  const PARENT = <HTMLLabelElement>eventTarget.parentElement;
+  const FIELDSET = <HTMLElement>PARENT.parentElement;
+  const onScreenLevel = getNumLevels();
+
+  const isValid = validateLevel(onScreenLevel);
+  console.log(`[addLevelButton] isValid: ${isValid}`);
+  if (!isValid) {
+    return console.error('Aborting level addition');
+  }
+
+  eventTarget.remove();
+  PARENT.innerHTML = getRemoveButtonHTML(onScreenLevel);
+  PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
+  //FIELDSET.innerHTML += getRemoveButtonHTML(numLevels);
+  addRemoveLevelButtonEventListener(onScreenLevel);
+
+  //PARENT.remove();
+
+  const newLevelHTML = getHtml(onScreenLevel + 1);
+  FIELDSET.insertAdjacentHTML('afterend', newLevelHTML);
+  UpdateLevel.register(onScreenLevel);
+
+  addLevelButtonAddEventListener();
+};
+
+/** adds onclick event listener */
+const addLevelButtonAddEventListener = () => {
+  let addLevelButton = <HTMLElement>(
+    document.querySelector(`.${ADD_LEVEL_BUTTON}`)
+  );
+  addLevelButton.addEventListener('click', addLevel);
+};
+
+/**
+ * Generate HTML to be added when 'Add Level' button is clicked
+ * Check if './add-level.html` to see if this is up to date
+ */
+const getHtml = (level: number) => {
+  console.debug(`[generating HTML getHtml]level: ${level}`);
+
+  const HTML = `
+<fieldset class="sitekey__level-container" id="level-group-${level}">
+  <legend class="sitekey__level-title">
+	  Level ${level}
+  </legend>
+  <label class="sitekey-form__level-label" for="visitor${level}"
+    >Visitor
+    <input
+      class="sitekey-form__level-input"
+      type="number"
+      name=""
+      value=""
+      id="visitor${level}"
+    />
+  </label>
+
+  <label class="sitekey-form__level-label" for="difficulty${level}">
+    Difficulty
+    <input
+      type="number"
+      name="difficulty"
+      class="sitekey-form__level-input"
+      value=""
+      id="difficulty${level}"
+    />
+  </label>
+  <label class="sitekey-form__level-label--hidden" for="add">
+	  Add level
+  <input
+    class="sitekey-form__level-add-level-button"
+    type="button"
+    name="add"
+    id="add"
+    value="Add"
+  />
+  </label>
+</fieldset>
+`;
+  return HTML;
+};
+
+export default addLevelButtonAddEventListener;