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>

templates/panel/sitekey/edit/edit.test.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 '../add/ts/levels/getNumLevels';
+import {addLevel} from '../add/ts/setupTests';
+import setup from '../../../components/error/setUpTests';
+import * as SETUP from './setupTest';
+
+document.body.innerHTML = SETUP.EDIT_FORM;
+document.body.appendChild(setup());
+
+jest.useFakeTimers();
+
+it('edit sitekey works', () => {
+  expect(getNumLevels()).toBe(2);
+  // add a level
+  addLevel(5, 6);
+  expect(getNumLevels()).toBe(3);
+
+  // add second level
+  addLevel(8, 9);
+  expect(getNumLevels()).toBe(4);
+
+  jest.runAllTimers();
+
+  //  expect(trim(a)).toBe(trim(finalHtml()));
+
+  // try to add negative parameters
+  addLevel(-4, -9);
+  expect(getNumLevels()).toBe(4);
+
+  // try to add duplicate level
+  addLevel(6, 7);
+  expect(getNumLevels()).toBe(4);
+
+});

templates/panel/sitekey/edit/existing-level.html

@@ -0,0 +1,36 @@
+<. let num = count + 1; .>
+<fieldset class="sitekey__level-container" id="level-group-<.= num .>">
+  <legend class="sitekey__level-title">
+    Level <.= num .>
+  </legend>
+
+  <label class="sitekey-form__level-label" for="visitor<.= num .>"
+    >Visitor
+    <input
+      class="sitekey-form__level-input"
+      type="number"
+      name="visitor<.= num .>"
+      value="<.= level.visitor_threshold .>"
+      id="visitor<.= num .>"
+    />
+  </label>
+  <label class="sitekey-form__level-label" for="difficulty<.= num .>">
+    Difficulty
+    <input
+      type="number"
+      id="difficulty<.= num .>"
+      class="sitekey-form__level-input"
+      value="<.= level.difficulty_factor .>"
+      id="difficulty<.= num .>"
+    />
+  </label>
+  <label class="sitekey-form__level-label--hidden" for="remove<.= num .>">
+    RemoveLevel
+    <input
+      class="sitekey-form__level-remove-level-button"
+      type="button"
+      id="remove-level<.= num .>"
+      id="remove-level1"
+      value="x"
+  /></label>
+</fieldset>

templates/panel/sitekey/edit/index.html

@@ -0,0 +1,12 @@
+<. const URL: &str = crate::V1_API_ROUTES.levels.update; .>
+<. const READONLY: bool = false; .>
+<. include!("../view/__form-top.html"); .>
+    <. for (count, level) in levels.iter().enumerate() { .>
+           <. include!("./existing-level.html"); .>  
+    <. } .>
+	<. let level = levels.len() + 1; .>
+	<. include!("../add/add-level.html"); .>
+  <button data-sitekey="<.= key .>" class="sitekey-form__submit" type="submit">
+    Submit
+  </button>
+<. include!("../view/__form-bottom.html"); .>

templates/panel/sitekey/edit/index.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 * as Add from '../add/ts/form/';
+import addLevelButtonAddEventListener from '../add/ts/addLevelButton';
+import {addRemoveLevelButtonEventListenerAll} from '../add/ts/removeLevelButton';
+import getNumLevels from '../add/ts/levels/getNumLevels';
+import validateLevel from '../add/ts/levels/validateLevel';
+import * as UpdateLevel from '../add/ts/levels/updateLevel';
+import validateDescription from '../add/ts/form/validateDescription';
+import validateDuration from '../add/ts/form/validateDuration';
+import {LEVELS} from '../add/ts/levels';
+
+import getFormUrl from '../../../utils/getFormUrl';
+import genJsonPayload from '../../../utils/genJsonPayload';
+import createError from '../../../components/error';
+
+import VIEWS from '../../../views/v1/routes';
+
+const BTN = <HTMLElement>document.querySelector('.sitekey-form__submit');
+const key = BTN.dataset.sitekey;
+
+const submit = async (e: Event) => {
+  e.preventDefault();
+
+  const description = validateDescription(e);
+  const duration = validateDuration(e);
+
+  const formUrl = getFormUrl(Add.FORM);
+
+  const levels = LEVELS.getLevels();
+  console.debug(`[form submition]: levels: ${levels}`);
+
+  const payload = {
+    levels,
+    duration,
+    description,
+    key,
+  };
+
+  console.debug(`[form submition] json payload: ${JSON.stringify(payload)}`);
+
+  const res = await fetch(formUrl, genJsonPayload(payload));
+  if (res.ok) {
+    window.location.assign(VIEWS.viewSitekey(key));
+  } else {
+    const err = await res.json();
+    createError(err.error);
+  }
+};
+
+const addSubmitEventListener = () => {
+  Add.FORM.addEventListener('submit', submit, true);
+};
+
+const bootstrapLevels = () => {
+  const levels = getNumLevels();
+  addRemoveLevelButtonEventListenerAll();
+  for (let i = 1; i <= levels - 1; i++) {
+    validateLevel(i);
+    UpdateLevel.register(i);
+  }
+};
+
+export const index = () => {
+  addSubmitEventListener();
+  addLevelButtonAddEventListener();
+  bootstrapLevels();
+};

templates/panel/sitekey/edit/setupTest.ts

@@ -0,0 +1,107 @@
+export const EDIT_FORM = `
+<form class="sitekey-form" action="/api/v1/mcaptcha/levels/update" method="post" >
+  <h1 class="form__title">
+    Sitekey: test
+  </h1>
+  <label class="sitekey-form__label" for="description">
+    Description
+    <input
+      class="sitekey-form__input"
+      type="text"
+      name="description"
+      id="description"
+      required=""
+      value="test"
+    />
+  </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="4"
+        id="visitor1"
+      />
+    </label>
+    <label class="sitekey-form__level-label" for="difficulty1">
+      Difficulty
+      <input
+        type="number"
+        id="difficulty1"
+        class="sitekey-form__level-input"
+        value="5"
+      />
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="remove1">
+      RemoveLevel
+      <input
+        class="sitekey-form__level-remove-level-button"
+        type="button"
+        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"
+        id="visitor2"
+      />
+    </label>
+
+    <label class="sitekey-form__level-label" for="difficulty2">
+      Difficulty
+      <input
+        type="number"
+        name="difficulty2"
+        class="sitekey-form__level-input"
+        id="difficulty2"
+      />
+    </label>
+    <label class="sitekey-form__level-label--hidden" for="add">
+      <span class="sitekey-form__add-level-btn-spacer">Add level</span>
+      <input
+        class="sitekey-form__level-add-level-button"
+        type="button"
+        name="add"
+        id="add"
+        value="Add"
+      />
+    </label>
+  </fieldset>
+  <button
+    data-sitekey="9FGkkukDRFDk7FgJmjXKxeHjFHUcxNez"
+    class="sitekey-form__submit"
+    type="submit"
+  >
+    Submit
+  </button>
+</form>
+<div id="err__container"></div>
+`;

templates/panel/sitekey/view/__edit-sitekey-icon.html

@@ -0,0 +1,5 @@
+<a href="./edit/">
+  <img class="sitekey-form__edit" src="<.=
+  crate::FILES.get("./static/cache/img/svg/edit.svg").unwrap() .>" alt="Edit
+  sitekey" />
+</a>

templates/panel/sitekey/view/__form-bottom.html

@@ -0,0 +1,4 @@
+    </form>
+  </div>
+  <!-- end of container -->
+<. include!("../../../components/footers.html"); .>

templates/panel/sitekey/view/__form-top.html

@@ -0,0 +1,56 @@
+<. include!("../../../components/headers/widget-headers.html"); .> 
+<body class="layout">
+<. include!("../../navbar/index.html"); .>
+<div class="tmp-layout">
+<. include!("../../header/index.html"); .>
+<main class="panel-main">
+  <. include!("../../help-banner/index.html"); .>
+  <!-- Main content container -->
+  <div class="inner-container">
+    <!-- Main menu/ important actions roaster -->
+    <form class="sitekey-form" action="<.= URL .>" method="post">
+	  <h1 class="form__title">Sitekey: <.= name .> 
+        <a 
+          target="_blank"
+		  href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
+        >View deployment
+          <img class="sitekey-form__widget-link" 
+            src="<.= crate::FILES.get("./static/cache/img/svg/external-link.svg").unwrap() .>"
+            alt="View widget deployment" 
+          />
+        </a> 
+        <. if READONLY { .>
+          <. include!("./__edit-sitekey-icon.html"); .>
+        <. } .>
+	  </h1>
+      <label class="sitekey-form__label" for="description">
+          Description
+        <input
+          <. if READONLY { .>
+            <.= "readonly='readonly'" .>
+		  <. } .>
+          class="sitekey-form__input"
+          type="text"
+          name="description"
+          id="description"
+          required
+          <. if !name.trim().is_empty() { .>
+          value="<.= name .>"
+          <. } .>
+        />
+      </label>
+      <label class="sitekey-form__label" for="duration">
+          Cooldown Duratoin(in seconds)
+        <input
+		  <. if READONLY { .>
+		  <.= "readonly='readonly'" .>
+		  <. } .>
+          class="sitekey-form__input"
+          type="number"
+          name="duration"
+          id="duration"
+          min=0
+          required
+          value="<.= duration .>"
+        />
+      </label>

templates/panel/sitekey/view/index.html

@@ -1,58 +1,7 @@
-<. include!("../../../components/headers/widget-headers.html"); .> 
-<body class="layout">
-<. include!("../../navbar/index.html"); .>
-<div class="tmp-layout">
-<. include!("../../header/index.html"); .>
-<main class="panel-main">
-  <. include!("../../help-banner/index.html"); .>
-  <!-- Main content container -->
-  <div class="inner-container">
-    <!-- Main menu/ important actions roaster -->
-    <form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
-	  <h1 class="form__title">Sitekey: <.= name .> 
-        <a 
-          target="_blank"
-		  href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
-        >View widget
-          <img class="sitekey-form__widget-link" 
-            src="<.= crate::FILES.get("./static/cache/img/svg/external-link.svg").unwrap() .>"
-            alt="View widget deployment" 
-          />
-        </a> 
-	  </h1>
-      <label class="sitekey-form__label" for="description">
-          Description
-        <input
-          readonly="readonly"
-          class="sitekey-form__input"
-          type="text"
-          name="description"
-          id="description"
-          required
-          <. if !name.trim().is_empty() { .>
-          value="<.= name .>"
-          <. } .>
-        />
-      </label>
-      <label class="sitekey-form__label" for="duration">
-          Cooldown Duratoin(in seconds)
-        <input
-          readonly="readonly"
-          class="sitekey-form__input"
-          type="number"
-          name="duration"
-          id="duration"
-          min=0
-          required
-          value="<.= duration .>"
-        />
-      </label>
-
+<. const URL: &str = crate::V1_API_ROUTES.levels.add; .>
+<. const READONLY: bool = true; .>
+<. include!("./__form-top.html"); .>
       <. for (count, level) in levels.iter().enumerate() { .>
         <. include!("./existing-level.html"); .> 
       <. } .>
-
-    </form>
-  </div>
-  <!-- end of container -->
-<. include!("../../../components/footers.html"); .>
+<. include!("./__form-bottom.html"); .>

templates/panel/sitekey/view/ts/index.ts

@@ -14,5 +14,4 @@
  * 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/>.
  */
-
 export const index = () => {};