typescript migration

This commit is contained in:
realaravinth
2021-05-01 19:22:44 +05:30
parent 90424219f5
commit 9c6398a7c5
55 changed files with 857 additions and 921 deletions

View File

@@ -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>

View File

@@ -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);
};

View File

@@ -10,6 +10,7 @@
type="text"
name="description"
id="description"
required
value="<.= form_description .>"
/>

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/>.
*/
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
};

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/>.
*/
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;

View File

@@ -82,5 +82,5 @@ export const index = () => {
// }
// });
//
let a;
// let a;
};

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 = () => {
};

View File

@@ -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 = () => {};