mirrors/mCaptcha
1
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-03-14 13:08:27 +03:00
Code Issues Projects Releases Packages Wiki Activity

removelevelbutton tests

Browse source
This commit is contained in:
realaravinth 2021-05-07 17:55:42 +05:30
parent 7b3f910da7
commit 5b5a995f57
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
19 changed files with 1100 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/index.ts
View file

@ -21,6 +21,8 @@ import * as login from './auth/login/ts/';
import * as register from './auth/register/ts/';
import * as panel from './panel/ts/index';
import * as addSiteKey from './panel/sitekey/add/ts';
import {MODE} from './logger';
import log from './logger';
import VIEWS from './views/v1/routes';
@ -34,6 +36,8 @@ import './panel/sitekey/list/css/main.scss';
import './errors/main.scss';
log.setMode(MODE.production);
const router = new Router();
router.register(VIEWS.panelHome, panel.index);

26
templates/logger.ts
View file

@ -14,24 +14,44 @@
* 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 {mode, MODE} from './env';
/** Conditional logger singleton */
export const log = (function() {
const log = (function() {
let mode = MODE.production;
return {
/** get levels */
/** console.error() wrapper */
debug: (data: any) => {
if (mode == MODE.none) {
return;
}
if (mode == MODE.development) {
console.debug(data);
}
},
/** console.error() wrapper */
error: (data: any) => {
console.error(data);
},
/** console.log() wrapper */
log: (data: any) => {
if (mode == MODE.none) {
return;
}
console.log(data);
},
/** set logging mode */
setMode: (newMode: MODE) => (mode = newMode),
};
})();
export const enum MODE {
production,
development,
none,
}
export default log;

6
templates/panel/sitekey/add/add-level.html
View file

@ -7,8 +7,7 @@
<input
class="sitekey-form__level-input"
type="number"
name=""
value=""
name="visitor<.= level .>"
id="visitor<.= level .>"
/>
</label>
@ -17,9 +16,8 @@
Difficulty
<input
type="number"
name="difficulty"
name="difficulty<.= level .>"
class="sitekey-form__level-input"
value=""
id="difficulty<.= level .>"
/>
</label>

2
templates/panel/sitekey/add/form.html
View file

@ -10,7 +10,9 @@
name="description"
id="description"
required
<. if form_description.trim().len() > 0 { .>
value="<.= form_description .>"
<. } .>
/>
</label>

17
templates/panel/sitekey/add/ts/addLevelButton.test.ts
View file

@ -16,7 +16,7 @@
*/
import getNumLevels from './levels/getNumLevels';
import {getAddForm, addLevel} from './setupTests';
import {getAddForm, trim, addLevel} from './setupTests';
document.body.innerHTML = getAddForm();
@ -43,7 +43,6 @@ it('addLevelButton works', () => {
expect(trim(a)).toBe(trim(finalHtml()));
});
const trim = (s: string) => s.replace(/\s/g, '');
const finalHtml = () => {
return `
@ -59,7 +58,7 @@ const finalHtml = () => {
name="description"
id="description"
required=""
value=""
>
</label>
@ -86,7 +85,7 @@ const finalHtml = () => {
class="sitekey-form__level-input"
type="number"
name="visitor1"
value=""
id="visitor1"
>
</label>
@ -97,7 +96,7 @@ const finalHtml = () => {
type="number"
name="difficulty1"
class="sitekey-form__level-input"
value=""
id="difficulty1"
>
</label>
@ -122,7 +121,7 @@ const finalHtml = () => {
class="sitekey-form__level-input"
type="number"
name="visitor2"
value=""
id="visitor2"
>
</label>
@ -133,7 +132,7 @@ const finalHtml = () => {
type="number"
name="difficulty2"
class="sitekey-form__level-input"
value=""
id="difficulty2"
>
</label>
@ -158,7 +157,7 @@ const finalHtml = () => {
class="sitekey-form__level-input"
type="number"
name="visitor3"
value=""
id="visitor3"
>
</label>
@ -169,7 +168,7 @@ const finalHtml = () => {
type="number"
name="difficulty3"
class="sitekey-form__level-input"
value=""
id="difficulty3"
>
</label>

12
templates/panel/sitekey/add/ts/addLevelButton.ts
View file

@ -23,6 +23,8 @@ import {
} from './removeLevelButton';
import CONST from './const';
import log from '../../../../logger';
/**
* Gets executed when 'Add' Button is clicked to add levels
@ -36,16 +38,15 @@ const addLevel = (e: Event) => {
const onScreenLevel = getNumLevels();
const isValid = validateLevel(onScreenLevel);
console.log(`[addLevelButton] isValid: ${isValid}`);
log.debug(`[addLevelButton] isValid: ${isValid}`);
if (!isValid) {
return console.error('Aborting level addition');
return log.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();
@ -53,6 +54,7 @@ const addLevel = (e: Event) => {
FIELDSET.insertAdjacentHTML('afterend', newLevelHTML);
UpdateLevel.register(onScreenLevel);
addRemoveLevelButtonEventListener(onScreenLevel);
addLevelButtonAddEventListener();
};
@ -69,7 +71,7 @@ const addLevelButtonAddEventListener = () => {
* Check if './add-level.html` to see if this is up to date
*/
const getHtml = (level: number) => {
console.debug(`[generating HTML getHtml]level: ${level}`);
log.debug(`[generating HTML getHtml]level: ${level}`);
const HTML = `
<fieldset class="sitekey__level-container" id="level-group-${level}">
@ -82,7 +84,6 @@ const getHtml = (level: number) => {
class="sitekey-form__level-input"
type="number"
name="visitor${level}"
value=""
id="visitor${level}"
/>
</label>
@ -93,7 +94,6 @@ const getHtml = (level: number) => {
type="number"
name="difficulty${level}"
class="sitekey-form__level-input"
value=""
id="difficulty${level}"
/>
</label>

6
templates/panel/sitekey/add/ts/levels/getLevelFields.ts
View file

@ -18,9 +18,11 @@
import {Level} from './index';
import CONST from '../const';
import log from '../../../../../logger';
/** Fetches level from DOM using the ID passesd and validates */
const getLevelFields = (id: number) => {
console.log(`[getLevelFields]: id: ${id}`);
log.debug(`[getLevelFields]: id: ${id}`);
const visitorID = CONST.VISITOR_WITHOUT_LEVEL + id.toString();
const difficultyID = CONST.DIFFICULTY_WITHOUT_LEVEL + id.toString();
@ -45,7 +47,7 @@ const getLevelFields = (id: number) => {
visitor_threshold,
};
console.debug(
log.debug(
`[getLevelFields.ts] visitor: ${visitor_threshold} difficulty: ${difficulty_factor}`,
);

4
templates/panel/sitekey/add/ts/levels/getNumLevels.ts
View file

@ -17,13 +17,15 @@
import CONST from '../const';
import log from '../../../../../logger';
/** returns number of level input fields currently in DOM */
const getNumLevels = () => {
let numLevels = 0;
document
.querySelectorAll(`.${CONST.LEVEL_CONTAINER_CLASS}`)
.forEach(_ => numLevels++);
console.debug(`[getNumLevels]: numLevels: ${numLevels}`);
log.debug(`[getNumLevels]: numLevels: ${numLevels}`);
return numLevels;
};

21
templates/panel/sitekey/add/ts/levels/index.ts
View file

@ -15,6 +15,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import log from '../../../../../logger';
/** Datatype represenging an mCaptcha level */
export type Level = {
difficulty_factor: number;
@ -30,7 +32,7 @@ class Levels {
}
add = (newLevel: Level) => {
console.debug(`[levels/index.ts] levels lenght: ${this.levels.length}`);
log.debug(`[levels/index.ts] levels lenght: ${this.levels.length}`);
if (newLevel.difficulty_factor <= 0) {
throw new Error('Difficulty must be greater than zero');
}
@ -44,7 +46,6 @@ class Levels {
return true;
}
let msg;
let count = 1;
this.levels.forEach(level => {
@ -90,25 +91,25 @@ export const LEVELS = (function() {
}
}
levels.levels = tmpLevel.levels;
console.log(`post update:`);
log.debug(`post update:`);
LEVELS.print();
return true;
} catch (e) {
console.log(e);
log.debug(e);
return false;
}
},
print: () =>
levels.levels.forEach(level =>
console.debug(
log.debug(
`difficulty_factor: ${level.difficulty_factor} visitor ${level.visitor_threshold}`,
),
),
/** remove level */
remove: (id: number) => {
console.debug(`[LEVELS] received order to remove ${id} element`);
log.debug(`[LEVELS] received order to remove ${id} element`);
const tmpLevel = new Levels();
@ -118,9 +119,9 @@ export const LEVELS = (function() {
if (id != i) {
tmpLevel.add(levels.levels[i]);
} else {
console.debug(`[LEVELS] removing ${i} element`);
log.debug(`[LEVELS] removing ${i} element`);
const rmElement = levels.levels[i];
console.debug(
log.debug(
`[LEVELS] removing element:
difficulty_factor: ${rmElement.difficulty_factor}
visitor_threshold: ${rmElement.visitor_threshold}`,
@ -128,11 +129,11 @@ export const LEVELS = (function() {
}
}
levels.levels = tmpLevel.levels;
console.debug('Post remove:');
log.debug('Post remove:');
LEVELS.print();
return true;
} catch (e) {
console.log(e);
log.debug(e);
return false;
}
},

160
templates/panel/sitekey/add/ts/removeLevelButton.ts
View file

@ -1,160 +0,0 @@
/*
* 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 getNumLevels from './levels/getNumLevels';
import CONST from './const';
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';
//console.error(msg);
throw new Error(msg);
}
updateLevelNumbersOnDOM(levelNum);
LEVELS.remove(levelNum);
FIELDSET.remove();
};
/** update level number on fieldset legends and their ids too */
const updateLevelNumbersOnDOM = (id: number) => {
const numLevels = getNumLevels();
if (id + 1 == numLevels) {
// this is the first elemet so have to remove fist element
// and downgrade the add thingy
}
// 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`;
//console.error(msg);
throw new Error(msg);
}
// rename legend
levelGroup.getElementsByTagName(
'legend',
)[0].innerText = `Level ${newLevel}`;
// rename labels
const labels = <NodeListOf<HTMLLabelElement>>(
levelGroup.querySelectorAll(`.${CONST.LABEL_CLASS}`)
);
//console.log(labels);
labels.forEach(label => {
//console.log(`${label.htmlFor}`);
if (label.htmlFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
}
if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
}
});
// rename inputs
const inputs = <NodeListOf<HTMLInputElement>>(
levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`)
);
//console.log(inputs);
inputs.forEach(input => {
if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
//console.log(`${input.id}`);
//console.log('changing visitor_threshold input');
input.id = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
}
if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
//console.log('changing difficulty input');
input.id = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
}
});
levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`;
/* 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
*/
}
};
/** adds onclick event listener */
export const addRemoveLevelButtonEventListener = (level: number) => {
const removeButton = <HTMLElement>(
document.querySelector(
`#${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`,
)
);
removeButton.addEventListener('click', removeLevel);
};
/** adds onclick event listener to all remove buttons */
export const addRemoveLevelButtonEventListenerAll = () => {
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) => {
//console.debug(`[generating HTML getHtml]level: ${level}`);
const HTML = `
${CONST.REMOVE_LEVEL_LABEL_TEXT}
<input
class="sitekey-form__level-remove-level-button"
type="button"
name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
value="x"
/>
</fieldset>
`;
return HTML;
};

84
templates/panel/sitekey/add/ts/removeLevelButton/index.ts Normal file
View file

@ -0,0 +1,84 @@
/*
* 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) => {
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 = () => {
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) => {
log.log(`[generating HTML getHtml]level: ${level}`);
const HTML = `
${CONST.REMOVE_LEVEL_LABEL_TEXT}
<input
class="sitekey-form__level-remove-level-button"
type="button"
name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
value="x"
/>
</fieldset>
`;
return HTML;
};

92
templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts Normal file
View file

@ -0,0 +1,92 @@
/*
* 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,
getRemoveButtonHTMLForm,
trim,
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('addLevelButton 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;
// const currentLevels = getNumLevels();
// log.log(
// `current iteration: ${i}. expecting val: ${expecting} got: ${currentLevels}`,
// );
//
// l1.click();
// expect(currentLevels).toBe(expecting);
//
//
// }
let a = document.body.innerHTML;
expect(trim(a)).toBe(trim(getRemoveButtonHTMLForm()));
const l1 = <HTMLButtonElement>(
document.getElementById(`${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`)
);
const expecting = 4 - 1;
const currentLevels = getNumLevels();
log.log(
`current iteration: ${1}. expecting val: ${expecting} got: ${currentLevels}`,
);
l1.click();
a = document.body.innerHTML;
//console.log(a);
// expect(currentLevels).toBe(expecting);
//document.body.innerHTML;
// expect(trim(a)).toBe(trim(getRemoveButtonHTMLForm()));
//
});

79
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts Normal file
View file

@ -0,0 +1,79 @@
/*
* 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 updateLabel from './updateLabel';
import updateInputs from './updateInputs';
/**
* 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) => {
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
levelGroup.getElementsByTagName(
'legend',
)[0].innerText = `Level ${newLevel}`;
// rename labels
updateLabel(levelGroup, newLevel);
// rename inputs
updateInputs(levelGroup, newLevel);
// TODO change remove button ID as well
levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`;
/* 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;

23
templates/env.ts → templates/panel/sitekey/add/ts/removeLevelButton/updateDom/setupTests.ts
View file

@ -15,9 +15,22 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
export enum MODE {
production,
development,
}
import getNumLevels from '../../levels/getNumLevels';
import {getAddForm, addLevel} from '../../setupTests';
export const mode = MODE.development;
document.body.innerHTML = getAddForm();
export const setupAddlevels = () => {
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);
};

242
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts Normal file
View file

@ -0,0 +1,242 @@
/*
* 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, 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('addLevelButton 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 = () => {
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>
`;
};

43
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts Normal file
View file

@ -0,0 +1,43 @@
/*
* 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';
const updateInput = (levelGroup: Element, newLevel: number) => {
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;
}
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;
}
});
};
export default updateInput;

38
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts Normal file
View file

@ -0,0 +1,38 @@
/*
* 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';
const updateLabel = (levelGroup: Element, newLevel: number) => {
// rename labels
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)) {
label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`;
}
if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`;
}
});
};
export default updateLabel;

197
templates/panel/sitekey/add/ts/setupTests.ts
View file

@ -19,6 +19,9 @@ import {Level} from './levels/index';
import CONST from './const';
import addLevelButtonAddEventListener from './addLevelButton';
/** get rid of all whitespaces, useful when comparing DOM states */
export const trim = (s: string) => s.replace(/\s/g, '');
export const level1: Level = {
difficulty_factor: 200,
visitor_threshold: 500,
@ -49,7 +52,10 @@ export const addLevel = (visitor: number, diff: number) => {
};
/** Fill add level form without clicking add button */
export const fillAddLevel = (visitor: number|string, diff: number|string) => {
export const fillAddLevel = (
visitor: number | string,
diff: number | string,
) => {
addLevelButtonAddEventListener();
const level = getNumLevels();
@ -106,7 +112,7 @@ export const getAddForm = () => `
name="description"
id="description"
required=""
value=""
/>
</label>
@ -133,7 +139,7 @@ export const getAddForm = () => `
class="sitekey-form__level-input"
type="number"
name="visitor1"
value=""
id="visitor1"
/>
</label>
@ -144,7 +150,7 @@ export const getAddForm = () => `
type="number"
name="difficulty1"
class="sitekey-form__level-input"
value=""
id="difficulty1"
/>
</label>
@ -163,3 +169,186 @@ export const getAddForm = () => `
<button class="sitekey-form__submit" type="submit">Submit</button>
</form>
`;
/** get initial form to test remove button functionality */
export const getRemoveButtonHTMLForm = () => {
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="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="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>
`;
};

248
templates/panel/sitekey/add/ts/t.html Normal file
View file

@ -0,0 +1,248 @@
<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>