mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2026-02-14 19:44:03 +00:00
site-key form made resulable
This commit is contained in:
realaravinth
15
templates/panel/add-site-key/add-level.html
Normal file
15
templates/panel/add-site-key/add-level.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<div class="sitekey-form__add-level-flex-container">
|
||||
<label class="sitekey-form__label" for="level2">Level <.= level .></label>
|
||||
</div>
|
||||
|
||||
<div class="sitekey-form__add-level-flex-container">
|
||||
<input
|
||||
class="sitekey-form__input--add-level"
|
||||
type="number"
|
||||
id="level2"
|
||||
id="level<.= level .>"
|
||||
name="level<.= level .>"
|
||||
value=""
|
||||
/>
|
||||
<button class="sitekey-form__add-level-button">Add Level</button>
|
||||
</div>
|
||||
90
templates/panel/add-site-key/addLevelButton.js
Normal file
90
templates/panel/add-site-key/addLevelButton.js
Normal file
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
* 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_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 ';
|
||||
const INPUT_CLASS = 'sitekey-form__input--add-level';
|
||||
const ADD_LEVEL_BUTTON_INNER_TEXT = 'Add Level';
|
||||
|
||||
const addLevelButtonEventHandler = e => {
|
||||
const PREV_LEVEL_CONTAINER = e.target.parentElement;
|
||||
e.target.remove();
|
||||
|
||||
let numLevels = 0;
|
||||
document.querySelectorAll(`.${LABEL_CLASS}`).forEach(_ => numLevels++);
|
||||
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);
|
||||
|
||||
|
||||
addLevelButtonAddEventListener();
|
||||
};
|
||||
|
||||
export const addLevelButtonAddEventListener = () => {
|
||||
let addLevelButton = document.querySelector(`.${ADD_LEVEL_BUTTON}`);
|
||||
addLevelButton.addEventListener('click', addLevelButtonEventHandler);
|
||||
};
|
||||
|
||||
/*
|
||||
<div class="sitekey-form__add-level-flex-container">
|
||||
<label class="sitekey-form__label" for="level2">Level 2</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
*/
|
||||
12
templates/panel/add-site-key/existing-level.html
Normal file
12
templates/panel/add-site-key/existing-level.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<input
|
||||
class="sitekey-form__input"
|
||||
type="number"
|
||||
name="level1"
|
||||
id="level<.= level .>"
|
||||
value=""
|
||||
/>
|
||||
@@ -1,48 +1,25 @@
|
||||
<form class="sitekey-form" action="/something" method="post">
|
||||
<div class="sitekey-form__title-flex-container">
|
||||
<b class="sitekey-form__title">Add Site Key</b>
|
||||
<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/"
|
||||
type="text"
|
||||
name="description"
|
||||
id="description"
|
||||
value=""
|
||||
value="<.= form_description .>"
|
||||
/>
|
||||
|
||||
<div class="sitekey-form__add-level-flex-container">
|
||||
<!-- insert Javascript for adding more levels as needed -->
|
||||
<label class="sitekey-form__label" for="level1">Level 1</label>
|
||||
</div>
|
||||
<. for level in 1..=levels { .>
|
||||
<. if level == levels { .>
|
||||
<. include!("./add-level.html"); .>
|
||||
<. } else { .>
|
||||
<. include!("./existing-level.html"); .>
|
||||
<. } .>
|
||||
<. } .>
|
||||
|
||||
<input
|
||||
class="sitekey-form__input"
|
||||
type="text/"
|
||||
name="level1"
|
||||
id="level1"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<div class="sitekey-form__add-level-flex-container">
|
||||
<label class="sitekey-form__label" for="level1">Level 2</label>
|
||||
</div>
|
||||
|
||||
<div class="sitekey-form__add-level-flex-container">
|
||||
<!--
|
||||
<div class="sitekey-form__add-level-spacer"></div>
|
||||
-->
|
||||
<input
|
||||
class="sitekey-form__input--add-level"
|
||||
type="text/"
|
||||
name="level2"
|
||||
id="level2"
|
||||
value=""
|
||||
/>
|
||||
|
||||
<button class="sitekey-form__add-level">Add Level</button>
|
||||
</div>
|
||||
<button class="sitekey-form__submit" type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
31
templates/panel/add-site-key/form.js
Normal file
31
templates/panel/add-site-key/form.js
Normal file
@@ -0,0 +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/>.
|
||||
*/
|
||||
|
||||
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
|
||||
}
|
||||
24
templates/panel/add-site-key/index.js
Normal file
24
templates/panel/add-site-key/index.js
Normal file
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import * as addLevelButton from './addLevelButton';
|
||||
import * as addLevelForm from './form';
|
||||
|
||||
export const index = () => {
|
||||
addLevelButton.addLevelButtonAddEventListener();
|
||||
addLevelForm.addSubmitEventListener();
|
||||
};
|
||||
Reference in New Issue
Block a user