mv add form into advance

templates/panel/sitekey/add/advance/ts/removeLevelButton/index.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 { LEVELS } from "../levels/index";
+import updateLevelNumbersOnDOM from "./updateDom";
+import CONST from "../const";
+
+import log from "../../../../../../logger";
+
+const REMOVE_LEVEL_BUTTON = "sitekey-form__level-remove-level-button";
+
+/**
+ * Gets executed when 'Remove' Button is clicked to remove levels
+ */
+const removeLevel = (e: Event) => {
+  const eventTarget = <HTMLElement>e.target;
+  const PARENT = <HTMLElement>eventTarget.parentElement;
+  const FIELDSET = <HTMLElement>PARENT.parentElement;
+
+  const levelNum = parseInt(
+    eventTarget.id.slice(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL.length)
+  );
+
+  if (Number.isNaN(levelNum)) {
+    const msg =
+      "[removeLevelButton.ts] error in parsing level number from remove button ID";
+    //log.error(msg);
+    throw new Error(msg);
+  }
+  updateLevelNumbersOnDOM(levelNum);
+
+  LEVELS.remove(levelNum);
+  FIELDSET.remove();
+};
+
+/** adds onclick event listener */
+export const addRemoveLevelButtonEventListener = (level: number): void => {
+  const removeButton = document.getElementById(
+    `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`
+  );
+
+  removeButton.addEventListener("click", removeLevel);
+};
+
+/** adds onclick event listener to all remove buttons */
+export const addRemoveLevelButtonEventListenerAll = (): void => {
+  const removeButtons = document.querySelectorAll(`.${REMOVE_LEVEL_BUTTON}`);
+  removeButtons.forEach((button) =>
+    button.addEventListener("click", removeLevel)
+  );
+};
+
+/**
+ * Generate Remove button HTML. On-click handler should be added
+ * seprately
+ */
+export const getRemoveButtonHTML = (level: number): HTMLLabelElement => {
+  log.log(`[generating HTML getHtml]level: ${level}`);
+
+  const btn = document.createElement("input");
+  btn.className = CONST.REMOVE_LEVEL_BUTTON_CLASS;
+  btn.type = "button";
+  const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`;
+  btn.name = id;
+  btn.id = id;
+  btn.value = "x";
+
+  const removeLabel = document.createElement("label");
+  removeLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
+  const removeLabelText = document.createTextNode("RemoveLevel");
+  removeLabel.appendChild(removeLabelText);
+  removeLabel.appendChild(btn);
+  removeLabel.htmlFor = id;
+
+  return removeLabel;
+};

templates/panel/sitekey/add/advance/ts/removeLevelButton/removeLevelButton.test.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 getNumLevels from "../levels/getNumLevels";
+import { getAddForm, addLevel } from "../setupTests";
+import CONST from "../const";
+
+import log from "../../../../../../logger";
+import { MODE } from "../../../../../../logger";
+
+document.body.innerHTML = getAddForm();
+
+const setUp = () => {
+  expect(getNumLevels()).toBe(1);
+  // add a level
+  addLevel(2, 2);
+  expect(getNumLevels()).toBe(2);
+
+  // add second level
+  addLevel(4, 4);
+  expect(getNumLevels()).toBe(3);
+
+  // add thrid level
+  addLevel(5, 5);
+  expect(getNumLevels()).toBe(4);
+};
+
+log.setMode(MODE.none);
+
+it("removeLevelButton works", () => {
+  setUp();
+
+  for (let i = 1; i < 4; i++) {
+    const l1 = <HTMLButtonElement>(
+      document.getElementById(
+        `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`
+      )
+    );
+
+    const expecting = 4 - i;
+
+    l1.click();
+    const currentLevels = getNumLevels();
+    expect(currentLevels).toBe(expecting);
+  }
+});

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/index.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 getNumLevels from "../../levels/getNumLevels";
+import CONST from "../../const";
+import log from "../../../../../../../logger";
+
+import updateLabels from "./updateLabel";
+import updateInputs from "./updateInputs";
+import updateRemoveButton from "./updateRemoveButton";
+import updateLevelGroup from "./updateLevelGroup";
+
+/**
+ * update level number on fieldset legends and their ids too
+ * @param {number} id - level number that was ordered to remove.
+ * All updates are made relative to id
+ * */
+const updateLevelNumbersOnDOM = (id: number): void => {
+  const numLevels = getNumLevels();
+  if (id == numLevels) {
+    throw new Error(
+      "Can't remove the very fist element, it has to be first added to DOM"
+    );
+  }
+
+  // since I'm doing id+1, I have to remove id after I'm done
+  // with inclreasing level numbers
+  for (let i = id + 1; i <= numLevels; i++) {
+    const newLevel = i - 1;
+
+    const levelGroup = document.querySelector(
+      `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${i}`
+    );
+
+    if (levelGroup === null) {
+      const msg = `[removeLevelButton.ts]:
+      error when trying to fetch level group field set ${i}. got null`;
+      log.error(msg);
+      throw new Error(msg);
+    }
+
+    // rename legend
+    const legend = levelGroup.getElementsByTagName("legend")[0];
+    const legendText = document.createTextNode(`Level ${newLevel}`);
+    const newLegend = document.createElement("legend");
+    newLegend.className = legend.className;
+    newLegend.appendChild(legendText);
+    legend.replaceWith(newLegend);
+
+    // rename labels
+    updateLabels(levelGroup, newLevel);
+
+    // rename inputs
+    updateInputs(levelGroup, newLevel);
+
+    if (i != numLevels) {
+      // update remove button
+      updateRemoveButton(levelGroup, newLevel);
+    }
+
+    // update levelGroup's ID
+    updateLevelGroup(levelGroup, newLevel);
+    // TODO change remove button ID as well
+
+    /* TODO
+     * change field set ID
+     * change legend inner Text
+     * change visitor lable for value
+     * change visitor input id
+     * change difficulty for value
+     * change difficulty input id
+     */
+  }
+};
+
+export default updateLevelNumbersOnDOM;

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/setupTests.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 getNumLevels from "../../levels/getNumLevels";
+import { getAddForm, addLevel } from "../../setupTests";
+
+document.body.innerHTML = getAddForm();
+
+export const setupAddlevels = (): void => {
+  expect(getNumLevels()).toBe(1);
+  // add a level
+  addLevel(2, 2);
+  expect(getNumLevels()).toBe(2);
+
+  // add second level
+  addLevel(4, 4);
+  expect(getNumLevels()).toBe(3);
+
+  // add thrid level
+  addLevel(5, 5);
+  expect(getNumLevels()).toBe(4);
+};

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateInputs.test.ts

@@ -0,0 +1,241 @@
+/*
+ * 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 {getAddForm, trim} from "../../setupTests";
+import updateInputs from "./updateInputs";
+import CONST from "../../const";
+
+import log from "../../../../../../../logger";
+import {MODE} from "../../../../../../../logger";
+
+import {setupAddlevels} from "./setupTests";
+
+document.body.innerHTML = getAddForm();
+
+log.setMode(MODE.none);
+
+it("updateInputs works", () => {
+  setupAddlevels();
+  // removing level  2
+  const level = 2;
+  const levelGroup = document.querySelector(
+    `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`,
+  );
+
+  const newLevel = 20;
+
+  updateInputs(levelGroup, newLevel);
+
+  const inputs = <NodeListOf<HTMLInputElement>>(
+    levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`)
+  );
+  inputs.forEach(input => {
+    if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
+      expect(input.id).toBe(`${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`);
+      console.log("checking visitor");
+    } else {
+      //    if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
+      console.log("checking difficulty");
+      expect(input.id).toBe(`${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`);
+    }
+  });
+
+  expect(trim(document.body.innerHTML)).toBe(trim(update()));
+});
+
+/** get initial form to test remove button functionality */
+export const update = (): string => {
+  return `
+<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=""
+      
+    >
+  </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"
+        
+        id="visitor1"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty1">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty1"
+        class="sitekey-form__level-input"
+        
+        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="visitor20"
+        
+        id="visitor20"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty2">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty20"
+        class="sitekey-form__level-input"
+        
+        id="difficulty20"
+      >
+    </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"
+        
+        id="visitor3"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty3">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty3"
+        class="sitekey-form__level-input"
+        
+        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"
+        
+        id="visitor4"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty4">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty4"
+        class="sitekey-form__level-input"
+        
+        id="difficulty4"
+      >
+    </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>
+`;
+};

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateInputs.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 CONST from "../../const";
+import log from "../../../../../../../logger";
+
+/** update input IDs with new level */
+const updateInput = (levelGroup: Element, newLevel: number): void => {
+  const inputs = <NodeListOf<HTMLInputElement>>(
+    levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`)
+  );
+  log.log(inputs);
+  inputs.forEach(input => {
+    if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
+      log.log(`${input.id}`);
+      log.log("changing visitor_threshold input");
+      const id = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
+      input.id = id;
+      input.name = id;
+    } else if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
+      log.log("changing difficulty input");
+      const id = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
+      input.id = id;
+      input.name = id;
+    } else {
+      if (input.id != "add") {
+        throw new Error(`Did you add an extra input to DOM? ${input.id} ${input.className} ${input.name}`);
+      }
+    }
+  });
+};
+
+export default updateInput;

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateLabel.test.ts

@@ -0,0 +1,120 @@
+/*
+ * Copyright (C) 221  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 { trim } from "../../setupTests";
+import updateLabels from "./updateLabel";
+import CONST from "../../const";
+
+import log from "../../../../../../../logger";
+import { MODE } from "../../../../../../../logger";
+
+/** get initial form to test remove button functionality */
+export const labelLevel = (level: number): string => {
+  return `
+<form class="sitekey-form" action="/api/v1/mcaptcha/levels/add" method="post">
+  <fieldset class="sitekey__level-container" id="level-group-2">
+    <legend class="sitekey__level-title">
+      Level 2
+    </legend>
+    <label class="sitekey-form__level-label" for="visitor${level}"
+      >Visitor
+      <input
+        class="sitekey-form__level-input"
+        type="number"
+        name="visitor2"
+        
+        id="visitor2"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty${level}">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        
+        id="difficulty2"
+      >
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove-level${level}">
+      Remove Level
+      <input
+        class="sitekey-form__level-remove-level-button"
+        type="button"
+        name="remove-level2"
+        id="remove-level2"
+        value="x"
+      >
+    </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>
+</form>
+`;
+};
+
+document.body.innerHTML = labelLevel(2);
+
+log.setMode(MODE.none);
+
+it("addLevelButton works", () => {
+  // removing level  2
+  const level = 2;
+  const levelGroup = document.querySelector(
+    `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`
+  );
+
+  const newLevel = 20;
+
+  updateLabels(levelGroup, newLevel);
+
+  const labels = <NodeListOf<HTMLLabelElement>>(
+    levelGroup.querySelectorAll(`.${CONST.LABEL_CLASS}`)
+  );
+  log.log(labels);
+  labels.forEach((label) => {
+    log.log(`${label.htmlFor}`);
+    if (label.htmlFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
+      expect(label.htmlFor).toBe(`${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`);
+    } else if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
+      expect(label.htmlFor).toBe(
+        `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`
+      );
+    } else if (
+      label.htmlFor.includes(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL)
+    ) {
+      expect(label.htmlFor).toBe(
+        `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`
+      );
+    } else {
+      throw new Error("Did you add an extra label to DOM?");
+    }
+  });
+
+  expect(trim(document.body.innerHTML)).toBe(trim(labelLevel(newLevel)));
+});

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateLabel.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 CONST from "../../const";
+import log from "../../../../../../../logger";
+
+/** update level lables to match new level */
+const updateLabels = (levelGroup: Element, newLevel: number): void => {
+  // rename labels
+  const labels = <NodeListOf<HTMLLabelElement>>(
+    levelGroup.querySelectorAll("label")
+  );
+  log.log(labels);
+  labels.forEach((label) => {
+    log.log(`${label.htmlFor}`);
+    const currentFor = label.htmlFor;
+    if (currentFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
+      label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
+    } else if (currentFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
+      label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
+    } else if (
+      currentFor.includes(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL)
+    ) {
+      label.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`;
+    } else {
+      if (currentFor != "add") {
+        throw new Error(
+          `Did you add an extra label to DOM? Found label with for: ${currentFor}`
+        );
+      }
+    }
+  });
+};
+
+export default updateLabels;

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateLevelGroup.test.ts

@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 221  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 { trim} from "../../setupTests";
+import updateLevelGroup from "./updateLevelGroup";
+import CONST from "../../const";
+
+import log from "../../../../../../../logger";
+import {MODE} from "../../../../../../../logger";
+
+
+/** get initial form to test remove button functionality */
+export const labelLevel = (level: number): string => {
+  return `
+<form class="sitekey-form" action="/api/v1/mcaptcha/levels/add" method="post">
+  <fieldset class="sitekey__level-container" id="level-group-${level}">
+    <legend class="sitekey__level-title">
+      Level 2
+    </legend>
+    <label class="sitekey-form__level-label" for="visitor"
+      >Visitor
+      <input
+        class="sitekey-form__level-input"
+        type="number"
+        name="visitor2"
+        
+        id="visitor2"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        
+        id="difficulty2"
+      >
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove-level">
+      Remove Level
+      <input
+        class="sitekey-form__level-remove-level-button"
+        type="button"
+        name="remove-level2"
+        id="remove-level2"
+        value="x"
+      >
+    </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>
+</form>
+`;
+};
+
+document.body.innerHTML = labelLevel(2);
+
+log.setMode(MODE.none);
+
+it("update levelGroup works", () => {
+  // removing level  2
+  const level = 2;
+  const levelGroup = document.querySelector(
+    `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`,
+  );
+
+  const newLevel = 20;
+
+  updateLevelGroup(levelGroup, newLevel);
+  expect(levelGroup.id).toBe(
+    `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`,
+  );
+
+  expect(trim(document.body.innerHTML)).toBe(trim(labelLevel(newLevel)));
+});

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateLevelGroup.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 CONST from "../../const";
+
+/** update level grup to match new level */
+const updateLevelGroup = (levelGroup: Element, newLevel: number): string =>
+  (levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`);
+
+export default updateLevelGroup;

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateRemoveButton.test.ts

@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 221  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 {trim} from "../../setupTests";
+import updateRemoveButton from "./updateRemoveButton";
+import CONST from "../../const";
+
+import log from "../../../../../../../logger";
+import {MODE} from "../../../../../../../logger";
+
+/** get initial form to test remove button functionality */
+export const labelLevel = (level: number): string => {
+  return `
+<form class="sitekey-form" action="/api/v1/mcaptcha/levels/add" method="post">
+  <fieldset class="sitekey__level-container" id="level-group-">
+    <legend class="sitekey__level-title">
+      Level 2
+    </legend>
+    <label class="sitekey-form__level-label" for="visitor"
+      >Visitor
+      <input
+        class="sitekey-form__level-input"
+        type="number"
+        name="visitor2"
+        
+        id="visitor2"
+      >
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        
+        id="difficulty2"
+      >
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove-level">
+      Remove Level
+      <input
+        class="sitekey-form__level-remove-level-button"
+        type="button"
+        name="remove-level${level}"
+        id="remove-level${level}"
+        value="x"
+      >
+    </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>
+</form>
+`;
+};
+
+const level = 2;
+document.body.innerHTML = labelLevel(level);
+
+log.setMode(MODE.none);
+
+it("update remove button works", () => {
+  // removing level  2
+
+  const levelGroup = document.getElementById(
+    `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}`,
+  );
+
+  const newLevel = 20;
+  updateRemoveButton(levelGroup, newLevel);
+
+  const button = <HTMLInputElement>(
+    levelGroup.querySelector(`.${CONST.REMOVE_LEVEL_BUTTON_CLASS}`)
+  );
+  expect(button.id).toBe(
+    `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`,
+  );
+  expect(button.name).toBe(
+    `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`,
+  );
+
+  expect(trim(document.body.innerHTML)).toBe(trim(labelLevel(newLevel)));
+});

templates/panel/sitekey/add/advance/ts/removeLevelButton/updateDom/updateRemoveButton.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 CONST from "../../const";
+
+/** update remove level button's ID */
+const updateRemoveButton = (levelGroup: Element, newLevel: number): void => {
+  // rename button
+  const button = <HTMLInputElement>(
+    levelGroup.querySelector(`.${CONST.REMOVE_LEVEL_BUTTON_CLASS}`)
+  );
+  const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${newLevel}`;
+  button.id = id;
+  button.name = id;
+};
+
+export default updateRemoveButton;