mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2026-02-14 03:25:40 +00:00
typescript migration
This commit is contained in:
@@ -6,9 +6,11 @@
|
||||
<input
|
||||
class="sitekey-form__input--add-level"
|
||||
type="number"
|
||||
id="level2"
|
||||
id="level<.= level .>"
|
||||
name="level<.= level .>"
|
||||
<. if level == 1 { .>
|
||||
<.= "required" .>
|
||||
<. } .>
|
||||
value=""
|
||||
/>
|
||||
<button class="sitekey-form__add-level-button">Add Level</button>
|
||||
|
||||
@@ -14,21 +14,53 @@
|
||||
* 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';
|
||||
|
||||
const LABEL_CONTAINER_CLASS = 'sitekey-form__add-level-flex-container';
|
||||
const ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
|
||||
const LABEL_CLASS = 'sitekey-form__label';
|
||||
const INPUT_ID_WITHOUT_LEVEL = 'level';
|
||||
const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
|
||||
export const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
|
||||
|
||||
export const INPUT_ID_WITHOUT_LEVEL = 'level';
|
||||
const INPUT_CLASS = 'sitekey-form__input--add-level';
|
||||
|
||||
const ADD_LEVEL_BUTTON_INNER_TEXT = 'Add Level';
|
||||
const ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
|
||||
|
||||
const addLevelButtonEventHandler = e => {
|
||||
const PREV_LEVEL_CONTAINER = e.target.parentElement;
|
||||
e.target.remove();
|
||||
|
||||
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;
|
||||
let e = null;
|
||||
isBlankString(e, val, filed);
|
||||
let isValid = VALIDATE_LEVELS.add(parseInt(val));
|
||||
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);
|
||||
console.log(`[addLevelButton] isValid: ${isValid}`);
|
||||
|
||||
if (!isValid) {
|
||||
return console.log('Aborting level addition');
|
||||
}
|
||||
|
||||
eventTarget.remove();
|
||||
|
||||
numLevels = numLevels.toString();
|
||||
|
||||
let labelContainer = document.createElement('div');
|
||||
@@ -63,12 +95,11 @@ const addLevelButtonEventHandler = e => {
|
||||
|
||||
labelContainer.insertAdjacentElement('afterend', inputContainer);
|
||||
|
||||
|
||||
addLevelButtonAddEventListener();
|
||||
};
|
||||
|
||||
export const addLevelButtonAddEventListener = () => {
|
||||
let addLevelButton = document.querySelector(`.${ADD_LEVEL_BUTTON}`);
|
||||
let addLevelButton = <HTMLElement>document.querySelector(`.${ADD_LEVEL_BUTTON}`);
|
||||
addLevelButton.addEventListener('click', addLevelButtonEventHandler);
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
type="text"
|
||||
name="description"
|
||||
id="description"
|
||||
required
|
||||
value="<.= form_description .>"
|
||||
/>
|
||||
|
||||
|
||||
57
templates/panel/add-site-key/form.ts
Normal file
57
templates/panel/add-site-key/form.ts
Normal 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/>.
|
||||
*/
|
||||
|
||||
const SITE_KEY_FORM_CLASS = 'sitekey-form';
|
||||
const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
|
||||
|
||||
import * as addLevelButton from './addLevelButton';
|
||||
import isBlankString from '../../utils/isBlankString';
|
||||
|
||||
export 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 validateDescription = (e: Event) => {
|
||||
let inputElement = <HTMLInputElement>document.getElementById("description");
|
||||
let val = inputElement.value;
|
||||
let filed = "Description";
|
||||
isBlankString(e, val, filed);
|
||||
}
|
||||
|
||||
const submit = async (e: Event) => {
|
||||
validateDescription(e);
|
||||
validateLevels(e);
|
||||
// get values
|
||||
// check validate levels
|
||||
// submit
|
||||
// handle erros
|
||||
};
|
||||
61
templates/panel/add-site-key/levels.ts
Normal file
61
templates/panel/add-site-key/levels.ts
Normal 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/>.
|
||||
*/
|
||||
|
||||
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;
|
||||
@@ -82,5 +82,5 @@ export const index = () => {
|
||||
// }
|
||||
// });
|
||||
//
|
||||
let a;
|
||||
// let a;
|
||||
};
|
||||
@@ -1,53 +0,0 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Login|mCaptcha</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<img src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.png" class="form__logo" alt="" />
|
||||
<h2 class="form__brand">Sign in to mCaptcha</h2>
|
||||
|
||||
<form class="form__box" id="form">
|
||||
<label class="form__in-group" for="username"
|
||||
>Username
|
||||
<input
|
||||
class="form__in-field"
|
||||
id="username"
|
||||
type="text"
|
||||
name="username"
|
||||
required=""
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="password" class="form__in-group"
|
||||
>Password
|
||||
<input
|
||||
class="form__in-field"
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required=""
|
||||
/>
|
||||
<!--
|
||||
<a class="form__pw-recovery" -href="/recovert/password"
|
||||
>Forgot password?</a
|
||||
>
|
||||
-->
|
||||
</label>
|
||||
<button class="form__submit-button" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
<div class="form__secondary-action">
|
||||
<p class="form__secondary-action__banner">
|
||||
New to mCaptcha?
|
||||
<a href="/register" class="form__secondary-action__link"
|
||||
>Create account</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,72 +0,0 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Join|mCaptcha</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<img src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.png" class="form__logo" alt="" />
|
||||
<h2 class="form__brand">Join mCaptcha</h2>
|
||||
|
||||
<form class="form__box" id="form">
|
||||
<label class="form__in-group" for="username"
|
||||
>Username
|
||||
<input
|
||||
class="form__in-field"
|
||||
id="username"
|
||||
type="text"
|
||||
name="username"
|
||||
id="username"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="form__in-group" for="username"
|
||||
>Email
|
||||
<input
|
||||
class="form__in-field"
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="password" class="form__in-group"
|
||||
>Password
|
||||
<input
|
||||
class="form__in-field"
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
id="password"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="password" class="form__in-group"
|
||||
>Re-enter Password
|
||||
<input
|
||||
class="form__in-field"
|
||||
type="password"
|
||||
id="password-check"
|
||||
name="password-check"
|
||||
id="password-check"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<button class="form__submit-button" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
<div class="form__secondary-action">
|
||||
<p class="form__secondary-action__banner">
|
||||
New to mCaptcha?
|
||||
<a href="/" class="form__secondary-action__link">Create account</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,21 +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/>.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
export const index = () => {
|
||||
};
|
||||
@@ -15,17 +15,4 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
const SITE_KEY_FORM_CLASS = 'sitekey-form';
|
||||
const FORM = document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
|
||||
|
||||
export const addSubmitEventListener = () => {
|
||||
FORM.addEventListener('submit', submit, true);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
alert('submited');
|
||||
// get values
|
||||
// check validate levels
|
||||
// submit
|
||||
// handle erros
|
||||
}
|
||||
export const index = () => {};
|
||||
Reference in New Issue
Block a user