edit sitekey, router pattern matching, sitekey update optimization, rm level delete and level err handling

templates/panel/sitekey/add/index.html

@@ -9,7 +9,7 @@
   <div class="inner-container">
     <!-- Main menu/ important actions roaster -->
 
-    <. include!("../add/form.html"); .>
+    <. include!("./form.html"); .>
   </div>
   <!-- end of container -->
 <. include!("../../../components/footers.html"); .>

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

@@ -17,8 +17,12 @@
 
 import getNumLevels from './levels/getNumLevels';
 import {getAddForm, trim, addLevel} from './setupTests';
+import setup from '../../../../components/error/setUpTests';
 
 document.body.innerHTML = getAddForm();
+document.body.appendChild(setup());
+
+jest.useFakeTimers();
 
 it('addLevelButton works', () => {
   expect(getNumLevels()).toBe(1);
@@ -26,23 +30,25 @@ it('addLevelButton works', () => {
   addLevel(2, 4);
   expect(getNumLevels()).toBe(2);
 
-  // try to add duplicate level
-  addLevel(2, 4);
-  expect(getNumLevels()).toBe(2);
-
-  // try to add negative parameters
-  addLevel(-4, -9);
-  expect(getNumLevels()).toBe(2);
 
+  
   // add second level
   addLevel(4, 9);
   expect(getNumLevels()).toBe(3);
 
   let a = document.body.innerHTML;
 
-  expect(trim(a)).toBe(trim(finalHtml()));
-});
 
+  expect(trim(a)).toBe(trim(finalHtml()));
+
+  // try to add duplicate level
+  addLevel(2, 4);
+  expect(getNumLevels()).toBe(3);
+
+  // try to add negative parameters
+  addLevel(-4, -9);
+  expect(getNumLevels()).toBe(3);
+});
 
 const finalHtml = () => {
   return `
@@ -186,5 +192,7 @@ const finalHtml = () => {
 
   <button class="sitekey-form__submit" type="submit">Submit</button>
 </form>
+<div id="err__container">
+  </div>
   `;
 };

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

@@ -39,17 +39,12 @@ const addLevel = (e: Event) => {
   const isValid = validateLevel(onScreenLevel);
   log.debug(`[addLevelButton] isValid: ${isValid}`);
   if (!isValid) {
-    return log.error('Aborting level addition');
+    let error = `Aborting level ${onScreenLevel} addition`;
+    return log.error(error);
   }
 
-  // eventTarget.remove();
   FIELDSET.replaceChild(getRemoveButtonHTML(onScreenLevel), PARENT);
 
-  //  PARENT.appendChild(  PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
-  //FIELDSET.innerHTML += getRemoveButtonHTML(numLevels);
-
-  //PARENT.remove();
-
   const newLevelElement = getHtml(onScreenLevel + 1);
   FIELDSET.insertAdjacentElement('afterend', newLevelElement);
   UpdateLevel.register(onScreenLevel);

templates/panel/sitekey/add/ts/form/index.ts

@@ -27,10 +27,10 @@ import validateDuration from './validateDuration';
 
 import createError from '../../../../../components/error';
 
-const SITE_KEY_FORM_CLASS = 'sitekey-form';
-const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
+export const SITE_KEY_FORM_CLASS = 'sitekey-form';
+export const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
 
-const addSubmitEventListener = () => {
+export const addSubmitEventListener = () => {
   FORM.addEventListener('submit', submit, true);
 };
 

templates/panel/sitekey/add/ts/levels/index.ts

@@ -34,11 +34,15 @@ class Levels {
   add = (newLevel: Level) => {
     log.debug(`[levels/index.ts] levels lenght: ${this.levels.length}`);
     if (newLevel.difficulty_factor <= 0) {
-      throw new Error('Difficulty must be greater than zero');
+      throw new Error(
+        `Level ${this.levels.length}'s difficulty must be greater than zero`,
+      );
     }
 
     if (newLevel.visitor_threshold <= 0) {
-      throw new Error('Visitors must be greater than zero');
+      throw new Error(
+        `Level ${this.levels.length}'s visitors must be greater than zero`,
+      );
     }
 
     if (this.levels.length == 0) {
@@ -50,10 +54,10 @@ class Levels {
 
     this.levels.forEach(level => {
       if (level.visitor_threshold >= newLevel.visitor_threshold) {
-        const msg = `Level: ${newLevel} visitor count has to greater than previous levels. See ${count}`;
+        const msg = `Level ${this.levels.length}'s visitor count should be greater than previous levels(Level ${count} is greater)`;
         throw new Error(msg);
       } else if (level.difficulty_factor >= newLevel.difficulty_factor) {
-        const msg = `Level ${this.levels.length} difficulty has to greater than previous levels See ${count}`;
+        const msg = `Level ${this.levels.length} difficulty should be greater than previous levels(Level ${count} is greater)`;
         throw new Error(msg);
       } else {
         count++;

templates/panel/sitekey/add/ts/levels/levels.test.ts

@@ -18,11 +18,11 @@
 import {LEVELS, Level} from './index';
 import {level1, level1visErr, level1diffErr, level2} from '../setupTests';
 
-const visitorErr = 'visitor count has to greater than previous levels';
-const difficultyErr = 'difficulty has to greater than previous levels';
+const visitorErr = 'visitor count should be greater than previous levels';
+const difficultyErr = 'difficulty should be greater than previous levels';
 
-const zeroVisError = 'Visitors must be greater than zero';
-const zeroDiffError = 'Difficulty must be greater than zero';
+const zeroVisError = 'visitors must be greater than zero';
+const zeroDiffError = 'difficulty must be greater than zero';
 
 const zeroVis: Level = {
   difficulty_factor: 10,
@@ -71,12 +71,12 @@ it('LEVELS works', () => {
   try {
     LEVELS.add(zeroVis);
   } catch (e) {
-    expect(e.message).toEqual(zeroVisError);
+    expect(e.message).toContain(zeroVisError);
   }
   // difficulty is 0
   try {
     LEVELS.add(zeroDiff);
   } catch (e) {
-    expect(e.message).toEqual(zeroDiffError);
+    expect(e.message).toContain(zeroDiffError);
   }
 });

templates/panel/sitekey/add/ts/levels/updateLevel.ts

@@ -43,7 +43,7 @@ const updateLevel = (e: Event) => {
     const updatedLevel = getLevelFields(level);
     LEVELS.update(updatedLevel, level);
   } catch (e) {
-    createError(e);
+    createError(e.message);
   }
 };
 

templates/panel/sitekey/add/ts/levels/validateLevel.test.ts

@@ -17,9 +17,12 @@
 
 import validateLevel from './validateLevel';
 import {getAddForm, level1, fillAddLevel} from '../setupTests';
+import setup from '../../../../../components/error/setUpTests';
 
 document.body.innerHTML = getAddForm();
 
+document.body.appendChild(setup());
+
 it('validate levels fields works', () => {
   // null error
   expect(validateLevel(1)).toEqual(false);

templates/panel/sitekey/add/ts/levels/validateLevel.ts

@@ -17,6 +17,7 @@
 
 import {LEVELS} from './index';
 import getLevelFields from './getLevelFields';
+import createError from '../../../../../components/error/';
 
 /**
  * Fetches level from DOM using the ID passesd and validates
@@ -28,6 +29,7 @@ const validateLevel = (id: number) => {
     LEVELS.add(level);
     return true;
   } catch (e) {
+    createError(e.message);
     return false;
   }
 };

templates/panel/sitekey/add/ts/t.html

@@ -1,248 +0,0 @@
-<form class="sitekey-form" action="/api/v1/mcaptcha/levels/add" method="post">
-  <h1 class="form__title">
-    Add Sitekey
-  </h1>
-  <label class="sitekey-form__label" for="description">
-    Description
-    <input
-      class="sitekey-form__input"
-      type="text"
-      name="description"
-      id="description"
-      required=""
-      value=""
-    >
-  </label>
-
-  <label class="sitekey-form__label" for="duration">
-    Cooldown Duratoin(in seconds)
-    <input
-      class="sitekey-form__input"
-      type="number"
-      name="duration"
-      id="duration"
-      min="0"
-      required=""
-      value="30"
-    >
-  </label>
-
-  <fieldset class="sitekey__level-container" id="level-group-1">
-    <legend class="sitekey__level-title">
-      Level 1
-    </legend>
-    <label class="sitekey-form__level-label" for="visitor1"
-      >Visitor
-      <input
-        class="sitekey-form__level-input"
-        type="number"
-        name="visitor1"
-        value=""
-        id="visitor1"
-      >
-    </label>
-
-    <label class="sitekey-form__level-label" for="difficulty1">
-      Difficulty
-      <input
-        type="number"
-        name="difficulty1"
-        class="sitekey-form__level-input"
-        value=""
-        id="difficulty1"
-      >
-    </label>
-    <label class="sitekey-form__level-label--hidden" for="remove-level1">
-      Remove Level
-      <input
-        class="sitekey-form__level-remove-level-button"
-        type="button"
-        name="remove-level1"
-        id="remove-level1"
-        value="x"
-      >
-    </label>
-  </fieldset>
-  <fieldset class="sitekey__level-container" id="level-group-2">
-    <legend class="sitekey__level-title">
-      Level 2
-    </legend>
-    <label class="sitekey-form__level-label" for="visitor2"
-      >Visitor
-      <input
-        class="sitekey-form__level-input"
-        type="number"
-        name="visitor2"
-        value=""
-        id="visitor2"
-      >
-    </label>
-
-    <label class="sitekey-form__level-label" for="difficulty2">
-      Difficulty
-      <input
-        type="number"
-        name="difficulty2"
-        class="sitekey-form__level-input"
-        value=""
-        id="difficulty2"
-      >
-    </label>
-    <label class="sitekey-form__level-label--hidden" for="remove-level2">
-      Remove Level
-      <input
-        class="sitekey-form__level-remove-level-button"
-        type="button"
-        name="remove-level2"
-        id="remove-level2"
-        value="x"
-      >
-    </label>
-  </fieldset>
-  <fieldset class="sitekey__level-container" id="level-group-3">
-    <legend class="sitekey__level-title">
-      Level 3
-    </legend>
-    <label class="sitekey-form__level-label" for="visitor3"
-      >Visitor
-      <input
-        class="sitekey-form__level-input"
-        type="number"
-        name="visitor3"
-        value=""
-        id="visitor3"
-      >
-    </label>
-
-    <label class="sitekey-form__level-label" for="difficulty3">
-      Difficulty
-      <input
-        type="number"
-        name="difficulty3"
-        class="sitekey-form__level-input"
-        value=""
-        id="difficulty3"
-      >
-    </label>
-    <label class="sitekey-form__level-label--hidden" for="remove-level3">
-      Remove Level
-      <input
-        class="sitekey-form__level-remove-level-button"
-        type="button"
-        name="remove-level3"
-        id="remove-level3"
-        value="x"
-      >
-    </label>
-  </fieldset>
-  <fieldset class="sitekey__level-container" id="level-group-4">
-    <legend class="sitekey__level-title">
-      Level 4
-    </legend>
-    <label class="sitekey-form__level-label" for="visitor4"
-      >Visitor
-      <input
-        class="sitekey-form__level-input"
-        type="number"
-        name="visitor4"
-        value=""
-        id="visitor4"
-      >
-    </label>
-
-    <label class="sitekey-form__level-label" for="difficulty4">
-      Difficulty
-      <input
-        type="number"
-        name="difficulty4"
-        class="sitekey-form__level-input"
-        value=""
-        id="difficulty4"
-      >
-    </label>
-    <label class="sitekey-form__level-label--hidden" for="remove-level4">
-      Remove Level
-      <input
-        class="sitekey-form__level-remove-level-button"
-        type="button"
-        name="remove-level4"
-        id="remove-level4"
-        value="x"
-      >
-    </label>
-  </fieldset>
-  <fieldset class="sitekey__level-container" id="level-group-5">
-    <legend class="sitekey__level-title">
-      Level 5
-    </legend>
-    <label class="sitekey-form__level-label" for="visitor5"
-      >Visitor
-      <input
-        class="sitekey-form__level-input"
-        type="number"
-        name="visitor5"
-        value=""
-        id="visitor5"
-      >
-    </label>
-
-    <label class="sitekey-form__level-label" for="difficulty5">
-      Difficulty
-      <input
-        type="number"
-        name="difficulty5"
-        class="sitekey-form__level-input"
-        value=""
-        id="difficulty5"
-      >
-    </label>
-    <label class="sitekey-form__level-label--hidden" for="remove-level5">
-      Remove Level
-      <input
-        class="sitekey-form__level-remove-level-button"
-        type="button"
-        name="remove-level5"
-        id="remove-level5"
-        value="x"
-      >
-    </label>
-  </fieldset>
-  <fieldset class="sitekey__level-container" id="level-group-6">
-    <legend class="sitekey__level-title">
-      Level 6
-    </legend>
-    <label class="sitekey-form__level-label" for="visitor6"
-      >Visitor
-      <input
-        class="sitekey-form__level-input"
-        type="number"
-        name="visitor6"
-        value=""
-        id="visitor6"
-      >
-    </label>
-
-    <label class="sitekey-form__level-label" for="difficulty6">
-      Difficulty
-      <input
-        type="number"
-        name="difficulty6"
-        class="sitekey-form__level-input"
-        value=""
-        id="difficulty6"
-      >
-    </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>
-
-  <button class="sitekey-form__submit" type="submit">Submit</button>
-</form>