mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-11 10:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

add site key form

Browse Source
This commit is contained in:
realaravinth
2021-05-03 20:24:03 +05:30
parent 0531a26274
commit 812b0ff2c9
49 changed files with 1253 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
templates/panel/add-site-key/add-level.html
View File

@@ -1,17 +1,31 @@
<div class="sitekey-form__add-level-flex-container">
<label class="sitekey-form__label" for="level2">Level <.= level .></label>
</div>
<fieldset class="sitekey-form__level">
<legend>Level <.= level .></legend>
<label class="sitekey-form__level-fieldname" for="visitor<.= level .>"
>Visitor
<input
class="sitekey-form__number-filed"
type="number"
name=""
value=""
id="visitor<.= level .>"
/>
</label>
<div class="sitekey-form__add-level-flex-container">
<label class="sitekey-form__level-fieldname" for="difficulty<.= level .>">
Difficulty
<input
type="number"
name="difficulty"
class="sitekey-form__number-filed"
value=""
id="difficulty<.= level .>"
/>
</label>
<input
class="sitekey-form__input--add-level"
type="number"
id="level<.= level .>"
name="level<.= level .>"
<. if level == 1 { .>
<.= "required" .>
<. } .>
value=""
class="sitekey-form__add-level-button"
type="button"
name="add"
id="add"
value="Add"
/>
<button class="sitekey-form__add-level-button">Add Level</button>
</div>
</fieldset>

173
templates/panel/add-site-key/addLevelButton.ts
View File

@@ -14,124 +14,91 @@
* 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 VALIDATE_LEVELS from './levels';
import isBlankString from '../../utils/isBlankString';
import isNumber from '../../utils/isNumber';
import getNumLevels from './levels/getNumLevels';
import validateLevel from './levels/validateLevel';
import * as UpdateLevel from './levels/updateLevel';
const LABEL_CONTAINER_CLASS = 'sitekey-form__add-level-flex-container';
const LABEL_CLASS = 'sitekey-form__label';
export const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
const ADD_LEVEL_BUTTON = 'sitekey-form__level-add-level-button';
export const INPUT_ID_WITHOUT_LEVEL = 'level';
const INPUT_CLASS = 'sitekey-form__input--add-level';
/**
* Gets executed when 'Add' Button is clicked to add levels
* Used to validate levels per m_captcha::defense::Defense's
* specifications
*/
const addLevel = (e: Event) => {
const eventTarget = <HTMLElement>e.target;
const PARENT = <HTMLElement>eventTarget.parentElement;
const FIELDSET = <HTMLElement>PARENT.parentElement;
const numLevels = getNumLevels();
const ADD_LEVEL_BUTTON_INNER_TEXT = 'Add Level';
const ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
export const getNumLevels = () => {
let numLevels = 0;
document.querySelectorAll(`.${LABEL_CLASS}`).forEach(_ => numLevels++);
return numLevels;
};
const validateLevel = (numLevels: number) => {
numLevels = numLevels - 1;
let inputID = INPUT_ID_WITHOUT_LEVEL + numLevels.toString();
let filed = LABEL_INNER_TEXT_WITHOUT_LEVEL + numLevels;
let inputElement = <HTMLInputElement>document.getElementById(inputID);
let val = inputElement.value;
if (!isNumber(val)) {
return false;
}
let level = parseInt(val);
if (Number.isNaN(level)) {
alert('Level can contain nubers only');
return false;
}
let e = null;
console.log(level);
isBlankString(e, val, filed);
let isValid = VALIDATE_LEVELS.add(level);
return isValid;
};
const addLevelButtonEventHandler = (e: Event) => {
let eventTarget = <HTMLElement>e.target;
// if (!eventTarget) {
// return;
// }
const PREV_LEVEL_CONTAINER = <HTMLElement>eventTarget.parentElement;
let numLevels: string | number = getNumLevels();
let isValid = validateLevel(numLevels);
const isValid = validateLevel(numLevels);
console.log(`[addLevelButton] isValid: ${isValid}`);
if (!isValid) {
return console.log('Aborting level addition');
return console.error('Aborting level addition');
}
eventTarget.remove();
PARENT.remove();
numLevels = numLevels.toString();
let labelContainer = document.createElement('div');
labelContainer.className = LABEL_CONTAINER_CLASS;
let inputID = INPUT_ID_WITHOUT_LEVEL + numLevels;
let label = document.createElement('label');
label.className = LABEL_CLASS;
label.htmlFor = inputID;
label.innerText = LABEL_INNER_TEXT_WITHOUT_LEVEL + numLevels;
labelContainer.appendChild(label);
PREV_LEVEL_CONTAINER.insertAdjacentElement('afterend', labelContainer);
let inputContainer = document.createElement('div');
inputContainer.className = LABEL_CONTAINER_CLASS;
let input = document.createElement('input');
input.id = inputID;
input.name = inputID;
input.type = 'text';
input.className = INPUT_CLASS;
inputContainer.appendChild(input);
let button = document.createElement('button');
button.className = ADD_LEVEL_BUTTON;
button.innerText = ADD_LEVEL_BUTTON_INNER_TEXT;
inputContainer.appendChild(button);
labelContainer.insertAdjacentElement('afterend', inputContainer);
const newLevelHTML = getHtml(numLevels + 1);
FIELDSET.insertAdjacentHTML('afterend', newLevelHTML);
UpdateLevel.register(numLevels);
addLevelButtonAddEventListener();
};
export const addLevelButtonAddEventListener = () => {
/** adds onclick event listener */
const addLevelButtonAddEventListener = () => {
let addLevelButton = <HTMLElement>(
document.querySelector(`.${ADD_LEVEL_BUTTON}`)
);
addLevelButton.addEventListener('click', addLevelButtonEventHandler);
addLevelButton.addEventListener('click', addLevel);
};
/*
<div class="sitekey-form__add-level-flex-container">
<label class="sitekey-form__label" for="level2">Level 2</label>
</div>
/**
* Generate HTML to be added when 'Add Level' button is clicked
* Check if './add-level.html` to see if this is up to date
*/
const getHtml = (level: number) => {
console.debug(`[generating HTML getHtml]level: ${level}`);
const HTML = `
<fieldset class="sitekey__level-container">
<legend class="sitekey__level-title">
Level ${level}
</legend>
<label class="sitekey-form__level-label" for="visitor${level}"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name=""
value=""
id="visitor${level}"
/>
</label>
<div class="sitekey-form__add-level-flex-container">
<input
class="sitekey-form__input--add-level"
type="text"
name="level2"
id="level2"
value=""
/>
<button class="sitekey-form__add-level-button">Add Level</button>
</div>
*/
<label class="sitekey-form__level-label" for="difficulty${level}">
Difficulty
<input
type="number"
name="difficulty"
class="sitekey-form__level-input"
value=""
id="difficulty${level}"
/>
</label>
<label class="sitekey-form__level-label--hidden" for="add">
Add level
<input
class="sitekey-form__level-add-level-button"
type="button"
name="add"
id="add"
value="Add"
/>
</label>
</fieldset>
`;
return HTML;
};
export default addLevelButtonAddEventListener;

35
templates/panel/add-site-key/const.ts Normal file
View File

@@ -0,0 +1,35 @@
/*
* 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/>.
*/
const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
const INPUT_ID_WITHOUT_LEVEL = 'level';
const LABEL_CLASS = 'sitekey-form__label';
const VISITOR_WITHOUT_LEVEL = 'visitor';
const DIFFICULTY_WITHOUT_LEVEL = 'difficulty';
const LEVEL_CONTAINER_CLASS = "sitekey__level-container";
const CONST = {
LABEL_CLASS,
INPUT_ID_WITHOUT_LEVEL,
LABEL_INNER_TEXT_WITHOUT_LEVEL,
VISITOR_WITHOUT_LEVEL,
DIFFICULTY_WITHOUT_LEVEL,
LEVEL_CONTAINER_CLASS,
}
export default CONST;

2
templates/panel/add-site-key/existing-level.html
View File

@@ -1,6 +1,6 @@
<div class="sitekey-form__add-level-flex-container">
<!-- insert Javascript for adding more levels as needed -->
<label class="sitekey-form__label" for="level1">Level <.= level .></label>
<label class="sitekey-form__label" for="level<.= level .>">Level <.= level .></label>
</div>
<input

32
templates/panel/add-site-key/form.html
View File

@@ -1,22 +1,22 @@
<form class="sitekey-form" action="/something" method="post">
<div class="sitekey-form__title-flex-container">
<b class="sitekey-form__title"><.= form_title .></b>
</div>
<div class="sitekey-form__add-level-flex-container">
<label class="sitekey-form__label" for="description">Description</label>
</div>
<input
class="sitekey-form__input"
type="text"
name="description"
id="description"
required
value="<.= form_description .>"
/>
<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
<h1 class="form__title">
<.= form_title .>
</h1>
<label class="sitekey-form__label" for="description">
Description
<input
class="sitekey-form__input"
type="text"
name="description"
id="description"
required
value="<.= form_description .>"
/>
</label>
<. for level in 1..=levels { .>
<. if level == levels { .>
<. include!("./add-level.html"); .>
<. include!("./new-add-level.html"); .>
<. } else { .>
<. include!("./existing-level.html"); .>
<. } .>

84
templates/panel/add-site-key/form.ts
View File

@@ -15,43 +15,71 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import CONST from './const';
import getNumLevels from './levels/getNumLevels';
import isBlankString from '../../utils/isBlankString';
import getFormUrl from '../../utils/getFormUrl';
import genJsonPayload from '../../utils/genJsonPayload';
import {LEVELS} from './levels';
import VIEWS from '../../views/v1/routes';
const SITE_KEY_FORM_CLASS = 'sitekey-form';
const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
//const FORM_SUBMIT_BUTTON_CLASS = "sitekey-form__submit";
//const FORM_SUBMIT_BUTTON = <HTMLButtonElement>document.querySelector(`.${FORM_SUBMIT_BUTTON_CLASS}`);
import * as addLevelButton from './addLevelButton';
import isBlankString from '../../utils/isBlankString';
export const addSubmitEventListener = () => {
const addSubmitEventListener = () => {
FORM.addEventListener('submit', submit, true);
};
const validateLevels = (e: Event) => {
let numLevels = addLevelButton.getNumLevels();
// check if levels are unique and are in increasing order;
// also if they are positive
// also if level input field is accompanied by a "Add Level" button,
// it shouldn't be used for validation
for (let levelNum = 1; levelNum < numLevels; levelNum++) {
let inputID = addLevelButton.INPUT_ID_WITHOUT_LEVEL + levelNum;
let inputElement = <HTMLInputElement>document.getElementById(inputID);
let val = inputElement.value;
let filed = addLevelButton.LABEL_INNER_TEXT_WITHOUT_LEVEL + levelNum;
isBlankString(e, val, filed);
}
}
//const validateLevels = (e: Event) => {
// const numLevels = getNumLevels();
// // check if levels are unique and are in increasing order;
// // also if they are positive
// // also if level input field is accompanied by a "Add Level" button,
// // it shouldn't be used for validation
// for (let levelNum = 1; levelNum < numLevels; levelNum++) {
// const inputID = CONST.INPUT_ID_WITHOUT_LEVEL + levelNum;
// const inputElement = <HTMLInputElement>document.getElementById(inputID);
// const val = inputElement.value;
// const filed = CONST.LABEL_INNER_TEXT_WITHOUT_LEVEL + levelNum;
// isBlankString(val, filed, e);
// }
//};
const validateDescription = (e: Event) => {
let inputElement = <HTMLInputElement>document.getElementById("description");
let val = inputElement.value;
let filed = "Description";
isBlankString(e, val, filed);
}
const inputElement = <HTMLInputElement>document.getElementById('description');
const val = inputElement.value;
const filed = 'Description';
isBlankString(val, filed, e);
};
const submit = async (e: Event) => {
e.preventDefault();
validateDescription(e);
validateLevels(e);
// get values
// check validate levels
// submit
// handle erros
// validateLevels(e);
const formUrl = getFormUrl(FORM);
const levels = LEVELS.getLevels();
console.debug(`[form submition]: levels: ${levels}`);
const payload = {
levels: levels,
};
console.debug(`[form submition] json payload: ${JSON.stringify(payload)}`);
const res = await fetch(formUrl, genJsonPayload(payload));
if (res.ok) {
alert('success');
window.location.assign(VIEWS.sitekey);
} else {
const err = await res.json();
alert(`error: ${err.error}`);
}
};
export default addSubmitEventListener;

8
templates/panel/add-site-key/index.ts
View File

@@ -15,10 +15,10 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import * as addLevelButton from './addLevelButton';
import * as addLevelForm from './form';
import addLevelButtonAddEventListener from './addLevelButton';
import addSubmitEventListener from './form';
export const index = () => {
addLevelButton.addLevelButtonAddEventListener();
addLevelForm.addSubmitEventListener();
addLevelButtonAddEventListener();
addSubmitEventListener();
};

61
templates/panel/add-site-key/levels.ts
View File

@@ -1,61 +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/>.
*/
const VALIDATE_LEVELS = (function() {
const levels: Array<number> = [];
const checkAscendingOrder = (newLevel: number) => {
if (levels.length == 0) {
return true;
}
let isValid = true;
levels.find(level => {
if (level > newLevel) {
alert(
`Level: ${newLevel} has to greater than previous levels ${level}`,
);
isValid = false;
return true;
}
return false;
});
return isValid;
};
return {
add: function(newLevel: number) {
console.log(`[levels.js]levels: ${levels} newLevel: ${newLevel}`);
if (levels.find(level => level == newLevel)) {
alert(`Level: ${newLevel} has to be unique`);
return false;
}
let isValid = checkAscendingOrder(newLevel);
if (isValid) {
levels.push(newLevel);
return true;
}
console.log(
`Ascending arder failure. Levels: ${levels}, levels length: ${levels.length}`,
);
return false;
},
}; })();
export default VALIDATE_LEVELS;

57
templates/panel/add-site-key/levels/getLevelFields.ts Normal file
View File

@@ -0,0 +1,57 @@
/*
* 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 {Level} from './index';
import CONST from '../const';
import isNumber from '../../../utils/isNumber';
/** Fetches level from DOM using the ID passesd and validates */
const getLevelFields = (id: number) => {
console.log(`[getLevelFields]: id: ${id}`);
const visitorID = CONST.VISITOR_WITHOUT_LEVEL + id.toString();
const difficultyID = CONST.DIFFICULTY_WITHOUT_LEVEL + id.toString();
const visitorElement = <HTMLInputElement>document.getElementById(visitorID);
const difficultyElement = <HTMLInputElement>(
document.getElementById(difficultyID)
);
const visitor_threshold = parseInt(visitorElement.value);
const difficulty_factor = parseInt(difficultyElement.value);
if (!isNumber(visitor_threshold) || Number.isNaN(visitor_threshold)) {
throw new Error('visitor can contain nubers only');
}
if (!isNumber(difficulty_factor) || Number.isNaN(difficulty_factor)) {
throw new Error('difficulty can contain nubers only');
}
const level: Level = {
difficulty_factor,
visitor_threshold,
};
console.debug(
`[getLevelFields.ts] visitor: ${visitor_threshold} difficulty: ${difficulty_factor}`,
);
return level;
};
export default getLevelFields;

29
templates/panel/add-site-key/levels/getNumLevels.ts Normal file
View File

@@ -0,0 +1,29 @@
/*
* 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';
/** 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}`);
return numLevels;
};
export default getNumLevels;

105
templates/panel/add-site-key/levels/index.ts Normal file
View File

@@ -0,0 +1,105 @@
/*
* 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/>.
*/
/** Datatype represenging an mCaptcha level */
export type Level = {
difficulty_factor: number;
visitor_threshold: number;
};
/** Datatype representing a collection of mCaptcha levels */
class Levels {
levels: Array<Level>;
constructor() {
this.levels = [];
}
add = (newLevel: Level) => {
console.debug(`[levels/index.ts] levels lenght: ${this.levels.length}`);
if (newLevel.difficulty_factor <= 0) {
throw new Error('Difficulty must be greater than zero');
}
if (newLevel.visitor_threshold <= 0) {
throw new Error('Visitors must be graeter than zero');
}
if (this.levels.length == 0) {
this.levels.push(newLevel);
return true;
}
let msg;
let count = 1;
const validate = (level: Level, newLevel: Level) => {
if (level.visitor_threshold >= newLevel.visitor_threshold) {
msg = `Level: ${newLevel} visitor count has to greater than previous levels. See ${count}`;
return true;
}
if (level.difficulty_factor >= newLevel.difficulty_factor) {
msg = `Level ${this.levels.length} difficulty has to greater than previous levels See ${count}`;
return true;
}
count++;
return false;
};
if (this.levels.find(level => validate(level, newLevel))) {
alert(msg);
throw new Error(msg);
} else {
this.levels.push(newLevel);
}
};
get = () => this.levels;
}
/** Singleton that does manipulations on Levels object */
export const LEVELS = (function() {
const levels = new Levels();
return {
/** get levels */
getLevels: () => levels.get(),
/** add new level */
add: (newLevel: Level) => levels.add(newLevel),
/** update levels */
update: (updateLevel: Level, id: number) => {
const tmpLevel = new Levels();
id -= 1;
try {
for (let i = 0; i < levels.levels.length; i++) {
if (id == i) {
tmpLevel.add(updateLevel);
} else {
tmpLevel.add(levels.levels[i]);
}
}
return true;
} catch (e) {
return false;
}
},
};
})();

64
templates/panel/add-site-key/levels/updateLevel.ts Normal file
View File

@@ -0,0 +1,64 @@
/*
* 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 getLevelFields from './getLevelFields';
import {LEVELS} from './index';
/** on-change event handler to update level */
const updateLevel = (e: Event) => {
const target = <HTMLInputElement>e.target;
const id = target.id;
let level;
if (id.includes(CONST.VISITOR_WITHOUT_LEVEL)) {
level = id.slice(CONST.VISITOR_WITHOUT_LEVEL.length);
} else if (id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) {
level = id.slice(CONST.DIFFICULTY_WITHOUT_LEVEL.length);
} else {
throw new Error(
'update event was triggered by some element other than difficulty or visitor',
);
}
level = parseInt(level);
if (Number.isNaN(level)) {
console.error(`[updateLevel.ts] level # computed is not correct, got NaN`);
}
try {
const updatedLevel = getLevelFields(level);
LEVELS.update(updatedLevel, level);
} catch (e) {
alert(e);
}
};
/** registers on-change event handlers to update levels */
export const register = (id: number) => {
const visitorID = CONST.VISITOR_WITHOUT_LEVEL + id.toString();
const difficultyID = CONST.DIFFICULTY_WITHOUT_LEVEL + id.toString();
const visitorElement = <HTMLInputElement>document.getElementById(visitorID);
const difficultyElement = <HTMLInputElement>(
document.getElementById(difficultyID)
);
visitorElement.addEventListener('input', updateLevel, false);
difficultyElement.addEventListener('input', updateLevel, false);
};

40
templates/panel/add-site-key/levels/validateLevel.ts Normal file
View File

@@ -0,0 +1,40 @@
/*
* 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 './index';
import getLevelFields from './getLevelFields';
/**
* Fetches level from DOM using the ID passesd and validates
* its contents
* */
const validateLevel = (id: number) => {
const level = getLevelFields(id);
if (level === null) {
return false;
}
try {
LEVELS.add(level);
return true;
} catch (e) {
return false;
}
};
export default validateLevel;

113
templates/panel/add-site-key/main.scss Normal file
View File

@@ -0,0 +1,113 @@
/*
* 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 '../../reset';
@import '../../vars';
@import '../../components/button';
@import '../../components/forms';
.sitekey-form {
display: flex;
flex-direction: column;
width: 90%;
justify-content: center;
align-items: center;
box-sizing: content-box;
background-color: $white;
margin: auto;
padding-bottom: 30px;
}
.form__title-flex-container {
display: flex;
width: 100%;
border-bottom: 0.1px solid $light-grey;
}
.form__title {
padding-left: 10px;
font-size: 1rem;
padding: 0.75rem 1.25rem;
box-sizing: border-box;
text-align: left;
width: 100%;
border-bottom: 0.1px solid $light-grey;
}
.sitekey-form__label {
@include form-label;
}
.sitekey-form__input {
@include form-input;
width: 100%;
}
// level styling
.sitekey__level-container {
width: $form-content-width;
box-sizing: border-box;
display: flex;
}
.sitekey__level-title {
margin-bottom: 10px;
margin-top: 5px;
}
.sitekey-form__level-label {
@include form-label;
font-size: 0.9rem;
}
.sitekey-form__level-name {
@include form-label;
display: block;
}
.sitekey-form__level-input {
@include form-input;
flex: 2;
}
.sitekey-form__level-add-level-button {
@include violet-button;
}
.sitekey-form__level-add-level-button:hover {
@include violet-button-hover;
}
.sitekey-form__level-label--hidden {
@include form-label;
color: $white;
flex: 1;
}
// level styling ends
.sitekey-form__submit {
@include violet-button;
display: block;
margin-top: 50px;
width: $form-content-width;
width: 90%;
}
.sitekey-form__submit:hover {
@include violet-button-hover;
}

36
templates/panel/add-site-key/new-add-level.html Normal file
View File

@@ -0,0 +1,36 @@
<fieldset class="sitekey__level-container">
<legend class="sitekey__level-title">
Level <.= level .>
</legend>
<label class="sitekey-form__level-label" for="visitor<.= level .>"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name=""
value=""
id="visitor<.= level .>"
/>
</label>
<label class="sitekey-form__level-label" for="difficulty<.= level .>">
Difficulty
<input
type="number"
name="difficulty"
class="sitekey-form__level-input"
value=""
id="difficulty<.= level .>"
/>
</label>
<label class="sitekey-form__level-label--hidden" for="add">
Add level
<input
class="sitekey-form__level-add-level-button"
type="button"
name="add"
id="add"
value="Add"
/>
</label>
</fieldset>

17
templates/panel/header/sidebar/index.ts Normal file
View File

@@ -0,0 +1,17 @@
/*
* 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 './main.scss';

88
templates/panel/header/sidebar/main.scss Normal file
View File

@@ -0,0 +1,88 @@
/*
* 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 '../../../reset';
@import '../../../vars';
.secondary-menu {
position: fixed;
width: 14%;
left: 0;
bottom: 0;
top: 0;
right: 0;
height: 100%;
overflow: auto;
background-color: $secondary-backdrop;
color: $light-text;
}
.secondary-menu__heading {
margin: auto;
padding: 20px 5px;
display: flex;
}
.secondary-menu__heading:hover {
color: $green;
cursor: grab;
}
.secondary-menu__logo {
width: 70px;
display: inline-block;
}
.secondary-menu__brand-name {
display: inline-block;
margin: auto;
font-size: 1.5rem;
}
.secondary-menu__item {
margin: auto;
padding: 20px 25px;
display: flex;
}
.secondary-menu__icon {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%)
contrast(103%);
opacity: 0.8;
width: 1rem;
margin: auto;
margin-right: 10px;
}
.secondary-menu__item-name {
display: inline-block;
margin: auto;
font-size: 1rem;
}
.secondary-menu__item-link:hover {
color: $green;
cursor: grab;
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
brightness(91%) contrast(92%);
}
.secondary-menu__item-link {
color: inherit;
width: 100%;
height: 100%;
}

50
templates/panel/help-banner/main.scss Normal file
View File

@@ -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 '../../reset';
@import '../../vars';
.help-text {
border-radius: 4px;
box-shadow: $secondary-backdrop 0px 2px 6px 0px;
min-width: 70%;
max-width: 80%;
min-height: 70px;
display: flex;
margin-left: 15px;
margin-top: 40px;
}
.help-text__serial-num {
display: inline-flex;
background-color: $violet;
color: $light-text;
width: 30px;
height: 30px;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.help-text__instructions {
display: inline-block;
list-style: none;
font-size: 19px;
font-weight: 500;
padding: 10px;
margin: auto;
}

296
templates/panel/main.scss
View File

@@ -1,206 +1,31 @@
/*
* 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 '../reset';
@import '../vars';
.secondary-menu {
position: fixed;
width: 14%;
left: 0;
bottom: 0;
top: 0;
right: 0;
height: 100%;
overflow: auto;
background-color: $secondary-backdrop;
color: $light-text;
}
.secondary-menu__heading {
margin: auto;
padding: 20px 5px;
display: flex;
}
.secondary-menu__heading:hover {
color: $green;
cursor: grab;
}
.secondary-menu__logo {
width: 70px;
display: inline-block;
}
.secondary-menu__brand-name {
display: inline-block;
margin: auto;
font-size: 1.5rem;
}
.secondary-menu__item {
margin: auto;
padding: 20px 25px;
display: flex;
}
.secondary-menu__icon {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%)
contrast(103%);
opacity: 0.8;
width: 1rem;
margin: auto;
margin-right: 10px;
}
.secondary-menu__item-name {
display: inline-block;
margin: auto;
font-size: 1rem;
}
.secondary-menu__item-link:hover {
color: $green;
cursor: grab;
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
brightness(91%) contrast(92%);
}
.secondary-menu__item-link {
color: inherit;
width: 100%;
height: 100%;
}
@import '../components/button';
main {
margin-left: 14%;
margin-left: 14%;
min-height: 100%;
background-color: $backdrop;
padding-bottom: 20px;
}
.task-bar {
display: flex;
padding: 0px;
margin: 0px;
background-color: #fff;
}
.task-bar__action {
display: inline-block;
padding: 10px 0px;
margin: auto;
}
.task-bar__spacer {
min-width: 250px;
flex: 6;
}
.task-bar__icon {
opacity: 0.8;
width: 1.5rem;
margin: auto 20px;
}
.task-bar__icon {
color: $light-text;
}
.task-bar__icon:hover {
cursor: grab;
}
.main-menu {
display: flex;
flex-grow: 0;
padding-top: 20px;
padding-left: 10px;
}
.main-menu__item {
list-style: none;
background-color: #c3c3c3;
flex: 2;
text-align: center;
vertical-align: middle;
margin: auto 20px;
padding: 10px 0;
}
.main-menu__item--spacer {
list-style: none;
flex: 3;
text-align: center;
}
.main-menu__item:hover {
background-color: grey;
cursor: grab;
}
.main-menu__item:last-child {
padding: 0;
display: flex;
flex: 2;
border: none;
background-color: unset;
}
.main-menu__item:last-child:hover {
cursor: unset;
background-color: unset;
}
.main-menu__add-site {
display: inline-block;
background-color: $violet;
color: white;
font-weight: 500;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
border: 1px grey solid;
min-height: 45px;
margin: auto;
}
.main-menu__add-site:hover {
background-color: $violet;
cursor: grab;
transform: translateY(-5px);
}
.help-text {
border-radius: 4px;
box-shadow: $secondary-backdrop 0px 2px 6px 0px;
min-width: 70%;
max-width: 80%;
min-height: 70px;
display: flex;
margin-left: 15px;
margin-top: 40px;
}
.help-text__serial-num {
display: inline-flex;
background-color: $violet;
color: $light-text;
width: 30px;
height: 30px;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.help-text__instructions {
display: inline-block;
list-style: none;
font-size: 19px;
font-weight: 500;
padding: 10px;
margin: auto;
}
.inner-container {
display: flex;
box-sizing: border-box;
@@ -209,86 +34,3 @@ main {
border-radius: 5px;
display: flex;
}
.sitekey-form {
display: flex;
flex-direction: column;
width: 90%;
justify-content: center;
align-items: center;
box-sizing: content-box;
background-color: #fff;
margin: auto;
padding-bottom: 30px;
}
.sitekey-form__title-flex-container {
display: flex;
width: 100%;
border-bottom: 0.1px solid $light-grey;
}
.sitekey-form__title {
padding-left: 10px;
font-size: 1rem;
padding: 0.75rem 1.25rem;
}
.sitekey-form__label {
display: block;
margin: 10px 0;
box-sizing: inherit;
justify-self: left;
}
.sitekey-form__input {
position: relative;
margin-top: 5px;
box-sizing: border-box;
height: 40px;
width: 90%;
}
.sitekey-form__input--add-level {
position: relative;
margin-top: 5px;
box-sizing: inherit;
flex: 3;
height: 40px;
margin-right: 20px;
}
.sitekey-form__add-level-flex-container {
display: flex;
box-sizing: border-box;
width: 90%;
margin-top: 10px;
}
.sitekey-form__add-level-button {
background-color: $violet;
color: white;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px $light-grey solid;
height: 40px;
min-width: 125px;
margin: auto;
}
.sitekey-form__submit {
margin-top: 50px;
display: block;
background-color: $violet;
color: white;
padding: 5px;
font-size: 20px;
border-radius: 5px;
border: 1px $light-grey solid;
min-height: 45px;
width: 125px;
width: 90%;
}

14
templates/panel/site-keys/index.html Normal file
View File

@@ -0,0 +1,14 @@
<. include!("../../components/headers.html"); .> <. include!("../header/index.html");
.>
<main>
<. include!("../taskbar/index.html"); .> <.
include!("../help-banner/index.html"); .>
<!-- Main content container -->
<div class="inner-container">
<!-- Main menu/ important actions roaster -->
</div>
<!-- end of container -->
</main>
<. include!("../../components/footers.html"); .>

24
templates/panel/taskbar/index.html
View File

@@ -1,29 +1,29 @@
<ul class="task-bar">
<ul class="taskbar">
<!--
<li class="task-bar__action">Brand Name</li>
<li class="taskbar__action">Brand Name</li>
-->
<li class="task-bar__spacer"></li>
<li class="task-bar__action">
<a class="task-bar__link" href="<.= crate::PAGES.panel.sitekey.add .>">
<button class="main-menu__add-site">
<li class="taskbar__spacer"></li>
<li class="taskbar__action">
<a class="taskbar__link" href="<.= crate::PAGES.panel.sitekey.add .>">
<button class="taskbar__add-site">
+ New Site
</button>
</a>
</li>
<li class="task-bar__action">
<img class="task-bar__icon" src="<.=
<li class="taskbar__action">
<img class="taskbar__icon" src="<.=
crate::FILES.get("./static-assets/img/svg/moon.svg").unwrap() .>" alt="Profile" />
</li>
<li class="task-bar__action">
<img class="task-bar__icon" src="<.=
<li class="taskbar__action">
<img class="taskbar__icon" src="<.=
crate::FILES.get("./static-assets/img/svg/bell.svg").unwrap() .>"
alt="Notifications" />
</li>
<li class="task-bar__action">
<li class="taskbar__action">
<a href="<.= crate::V1_API_ROUTES.auth.logout .>">
<img class="task-bar__icon" src="<.=
<img class="taskbar__icon" src="<.=
crate::FILES.get("./static-assets/img/svg/log-out.svg").unwrap() .>" alt="Profile"
/></a>
</li>

61
templates/panel/taskbar/main.scss Normal file
View File

@@ -0,0 +1,61 @@
/*
* 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 '../../reset';
@import '../../vars';
@import '../../components/button';
.taskbar {
display: flex;
padding: 0px;
margin: 0px;
background-color: $white;
}
.taskbar__action {
display: inline-block;
padding: 10px 0px;
margin: auto;
}
.taskbar__spacer {
min-width: 250px;
flex: 6;
}
.taskbar__icon {
opacity: 0.8;
width: 1.5rem;
margin: auto 20px;
}
.taskbar__icon {
color: $light-text;
}
.taskbar__icon:hover {
cursor: grab;
}
.taskbar__add-site {
display: inline-block;
@include violet-button;
}
.taskbar__add-site:hover {
@include violet-button-hover;
}