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

dom manipulations uses elements

Browse Source
This commit is contained in:
realaravinth
2021-05-09 16:39:52 +05:30
parent cd729effb9
commit 686774a182
30 changed files with 262 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.github/workflows/coverage.yml vendored
View File

@@ -1,4 +1,4 @@
name: CI (Linux) name: Coverage
on: on:
pull_request: pull_request:
@@ -52,6 +52,9 @@ jobs:
- name: Install JavaScript Dependencies - name: Install JavaScript Dependencies
run: yarn install run: yarn install
- name: Build frontend
run: yarn build
- name: Run the tests - name: Run the tests
run: yarn test run: yarn test

2
.github/workflows/linux.yml vendored
View File

@@ -1,4 +1,4 @@
name: CI (Linux) name: Check Build
on: on:
pull_request: pull_request:

4
templates/_reset.scss
View File

@@ -19,6 +19,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
// check all layouts
box-sizing: border-box;
} }
a { a {
@@ -31,6 +34,7 @@ li {
html { html {
height: 100%; height: 100%;
box-sizing: border-box;
} }
body { body {

2
templates/auth/css/main.scss
View File

@@ -27,7 +27,7 @@ body {
.auth-inner-container { .auth-inner-container {
@include inner-container; @include inner-container;
flex-direction: column; flex-direction: column;
margin: 0px, auto; margin: auto;
width: $auth-content-width; width: $auth-content-width;
top: 50%; top: 50%;
left: 50%; left: 50%;

2
templates/components/_box.scss
View File

@@ -33,7 +33,7 @@
width: 90%; width: 90%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: content-box; // box-sizing: content-box;
background-color: $white; background-color: $white;
margin: auto; margin: auto;
padding-bottom: 30px; padding-bottom: 30px;

38
templates/components/details-footers.html
View File

@@ -1,19 +1,19 @@
<ul class="details"> <footer role="contentinfo">
<li class="details__item">&copy; 2021 mCAptcha Developers</li> <ul class="details">
<li class="details__dummy-filler"></li> <li class="details__item">
<li class="details__item"> <a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a>
<a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a> </li>
</li> <li class="details__item">
<li class="details__item"> <a class="details__link" href="<.= crate::PAGES.about .>">About</a>
<a class="details__link" href="<.= crate::PAGES.about .>">About</a> </li>
</li> <li class="details__item">
<li class="details__item"> <a class="details__link" href="<.= crate::PAGES.thanks .>">Thanks</a>
<a class="details__link" href="<.= crate::PAGES.thanks .>">Thanks</a> </li>
</li> <li class="details__item">
<li class="details__item"> <a class="details__link" href="<.= crate::PAGES.donate .>">Donate</a>
<a class="details__link" href="<.= crate::PAGES.donate .>">Donate</a> </li>
</li> <li class="details__item">
<li class="details__item"> v<.= crate::VERSION .>-<.= crate::GIT_COMMIT_HASH[0..8] .>
v<.= crate::VERSION .>-<.= crate::GIT_COMMIT_HASH[0..8] .> </li>
</li> </ul>
</ul> </footer>

11
templates/components/details.scss
View File

@@ -18,27 +18,20 @@
.details { .details {
list-style: none; list-style: none;
position: absolute; position: relative;
bottom: 0px; bottom: 0px;
box-sizing: border-box; box-sizing: border-box;
width: 95%; width: 95%;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
margin: auto; margin: auto;
} background-color: $backdrop;
.details__dummy-filler {
flex: 10;
} }
.details__item { .details__item {
margin: auto 10px; margin: auto 10px;
} }
.details__item:first-child {
flex: 4;
}
.details__link { .details__link {
color: $blue-link; color: $blue-link;
} }

2
templates/components/footers.html
View File

@@ -1,5 +1,5 @@
<. include!("./details-footers.html"); .>
</main> </main>
<. include!("./details-footers.html"); .>
</body> </body>
<link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all"> <link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
<script src="<.= &*crate::JS .>"></script> <script src="<.= &*crate::JS .>"></script>

38
templates/components/headers.html
View File

@@ -2,7 +2,41 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><.= PAGE .> | <.= crate::pages::NAME .></title> <title><.= PAGE .> | <.= crate::pages::NAME .></title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box"
/>
<meta name="author" content="Aravinth Manivannan" />
<meta name="twitter:card" value="summary_large_image" />
<meta name="twitter:site" content="@realaravinth" />
<meta
name="twitter:title"
content="<.= PAGE .> | <.= crate::pages::NAME .>"
/>
<meta
name="twitter:description"
content="mCaptcha is an AGPL'd, privacy focued, proof-of-work based CAPTCHA System"
/>
<meta name="twitter:creator" content="@realaravinth" />
<meta name="twitter:image" content="https://mcaptcaha.org/icon-trans.png" />
<meta
property="og:title"
content="<.= PAGE .> | <.= crate::pages::NAME .>"
/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://mcaptcaha.org" />
<meta property="og:image" content="https://mcaptcaha.org/icon-trans.png" />
<meta
property="og:description"
content="mCaptcha is an AGPL'd, privacy focued, proof-of-work based CAPTCHA System"
/>
<meta property="og:site_name" content="Responsible Web Applications" />
</head> </head>
<body> <body class="layout"></body>
</html>

11
templates/index.ts
View File

@@ -26,11 +26,12 @@ import log from './logger';
import VIEWS from './views/v1/routes'; import VIEWS from './views/v1/routes';
import './main.scss';
import './auth/css/main.scss'; import './auth/css/main.scss';
import './components/details.scss'; import './components/details.scss';
import './panel/css/main.scss'; import './panel/css/main.scss';
import './panel/header/sidebar/main.scss'; import './panel/navbar/main.scss';
import './panel/taskbar/main.scss'; import './panel/header/taskbar/main.scss';
import './panel/help-banner/main.scss'; import './panel/help-banner/main.scss';
import './panel/sitekey/add/css/main.scss'; import './panel/sitekey/add/css/main.scss';
import './panel/sitekey/list/css/main.scss'; import './panel/sitekey/list/css/main.scss';
@@ -46,4 +47,8 @@ router.register(VIEWS.registerUser, register.index);
router.register(VIEWS.loginUser, login.index); router.register(VIEWS.loginUser, login.index);
router.register(VIEWS.addSiteKey, addSiteKey.index); router.register(VIEWS.addSiteKey, addSiteKey.index);
router.route(); try {
router.route();
} catch (e) {
console.log(e);
}

64
templates/main.scss 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/>.
*/
// creadits: https://codepen.io/rachelandrew/pen/MmOvPr/?editors=1100
.layout {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 1fr 6fr 1fr;
}
h1,
p {
margin: 0 0 1em 0;
}
/* no grid support? check this out later */
/*
.sidebar {
float: left;
width: 19.1489%;
}
.content {
float: right;
width: 79.7872%;
}
*/
/* make a grid */
header,
footer {
grid-column: 2 / 5;
/* needed for the floated layout */
clear: both;
}
nav {
grid-row: 1/ 4;
/* needed for the floated layout */
clear: both;
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps.
* @supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
*/

1
templates/panel/css/main.scss
View File

@@ -23,7 +23,6 @@
.panel-main { .panel-main {
@include main; @include main;
margin-left: 14%;
} }
.inner-container { .inner-container {

2
templates/panel/header/index.html
View File

@@ -1,3 +1,3 @@
<header> <header>
<. include!("./sidebar/index.html"); .> <. include!("./taskbar/index.html"); .>
</header> </header>

0
templates/panel/taskbar/index.html → templates/panel/header/taskbar/index.html
View File

6
templates/panel/taskbar/main.scss → templates/panel/header/taskbar/main.scss
View File

@@ -15,9 +15,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
@import '../../reset'; @import '../../../reset';
@import '../../vars'; @import '../../../vars';
@import '../../components/button'; @import '../../../components/button';
.taskbar { .taskbar {
display: flex; display: flex;

2
templates/panel/index.html
View File

@@ -1,7 +1,7 @@
<. include!("../components/headers.html"); .> <. include!("../components/headers.html"); .>
<. include!("./navbar/index.html"); .>
<. include!("./header/index.html"); .> <. include!("./header/index.html"); .>
<main class="panel-main"> <main class="panel-main">
<. include!("./taskbar/index.html"); .>
<. include!("./help-banner/index.html"); .> <. include!("./help-banner/index.html"); .>
<div class="inner-container"> <div class="inner-container">

0
templates/panel/header/sidebar/index.html → templates/panel/navbar/index.html
View File

0
templates/panel/header/sidebar/index.ts → templates/panel/navbar/index.ts
View File

17
templates/panel/header/sidebar/main.scss → templates/panel/navbar/main.scss
View File

@@ -15,16 +15,17 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
@import '../../../reset'; @import '../../reset';
@import '../../../vars'; @import '../../vars';
.secondary-menu { .secondary-menu {
position: fixed; // position: fixed;
width: 14%; // width: 14%;
left: 0; // left: 0;
bottom: 0; // bottom: 0;
top: 0; // top: 0;
right: 0; // right: 0;
height: 100%; height: 100%;
overflow: auto; overflow: auto;

2
templates/panel/sitekey/add/css/main.scss
View File

@@ -26,7 +26,7 @@
width: 90%; width: 90%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: content-box; // box-sizing: content-box;
background-color: $white; background-color: $white;
margin: auto; margin: auto;
padding-bottom: 30px; padding-bottom: 30px;

8
templates/panel/sitekey/add/index.html
View File

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

109
templates/panel/sitekey/add/ts/addLevelButton.ts
View File

@@ -25,7 +25,6 @@ import CONST from './const';
import log from '../../../../logger'; import log from '../../../../logger';
/** /**
* Gets executed when 'Add' Button is clicked to add levels * Gets executed when 'Add' Button is clicked to add levels
* Used to validate levels per m_captcha::defense::Defense's * Used to validate levels per m_captcha::defense::Defense's
@@ -43,19 +42,24 @@ const addLevel = (e: Event) => {
return log.error('Aborting level addition'); return log.error('Aborting level addition');
} }
eventTarget.remove(); // eventTarget.remove();
PARENT.innerHTML = getRemoveButtonHTML(onScreenLevel); FIELDSET.replaceChild(getRemoveButtonHTML(onScreenLevel), PARENT);
PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
// PARENT.appendChild( PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
//FIELDSET.innerHTML += getRemoveButtonHTML(numLevels); //FIELDSET.innerHTML += getRemoveButtonHTML(numLevels);
//PARENT.remove(); //PARENT.remove();
const newLevelHTML = getHtml(onScreenLevel + 1); const newLevelElement = getHtml(onScreenLevel + 1);
FIELDSET.insertAdjacentHTML('afterend', newLevelHTML); FIELDSET.insertAdjacentElement('afterend', newLevelElement);
UpdateLevel.register(onScreenLevel); UpdateLevel.register(onScreenLevel);
addRemoveLevelButtonEventListener(onScreenLevel); addRemoveLevelButtonEventListener(onScreenLevel);
addLevelButtonAddEventListener(); addLevelButtonAddEventListener();
const main = document.querySelector('body');
const style = main.style.display;
main.style.display = 'none';
main.style.display = style;
}; };
/** adds onclick event listener */ /** adds onclick event listener */
@@ -73,43 +77,64 @@ const addLevelButtonAddEventListener = () => {
const getHtml = (level: number) => { const getHtml = (level: number) => {
log.debug(`[generating HTML getHtml]level: ${level}`); log.debug(`[generating HTML getHtml]level: ${level}`);
const HTML = ` const fieldset = document.createElement('fieldset'); // new HTMLFieldSetElement();
<fieldset class="sitekey__level-container" id="level-group-${level}"> fieldset.className = CONST.LEVEL_CONTAINER_CLASS;
<legend class="sitekey__level-title"> fieldset.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`;
Level ${level}
</legend>
<label class="sitekey-form__level-label" for="visitor${level}"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name="visitor${level}"
id="visitor${level}"
/>
</label>
<label class="sitekey-form__level-label" for="difficulty${level}"> const legend = document.createElement('legend'); // new HTMLLegendElement();
Difficulty legend.className = CONST.LEGEND_CLASS;
<input const legendText = document.createTextNode(`Level ${level}`);
type="number" legend.appendChild(legendText);
name="difficulty${level}"
class="sitekey-form__level-input" fieldset.appendChild(legend);
id="difficulty${level}"
/> const vistitorLabel = document.createElement('label'); //document.createElement('label');
</label> vistitorLabel.className = CONST.LABEL_CLASS;
<label class="sitekey-form__level-label--hidden" for="add"> const visitorText = document.createTextNode('Visitor');
Add level vistitorLabel.appendChild(visitorText);
<input const visitor = document.createElement('input'); //document.createElement('input');
class="sitekey-form__level-add-level-button" const visitorId = `${CONST.VISITOR_WITHOUT_LEVEL}${level}`;
type="button" visitor.className = CONST.LEVEL_INPUT_CLASS;
name="add" visitor.type = 'number';
id="add" visitor.name = visitorId;
value="Add" visitor.id = visitorId;
/> vistitorLabel.htmlFor = visitorId;
</label> vistitorLabel.appendChild(visitor);
</fieldset>
`; fieldset.appendChild(vistitorLabel);
return HTML;
const difficultyLabel = document.createElement('label');
difficultyLabel.className = CONST.LABEL_CLASS;
const difficultyText = document.createTextNode('Difficulty');
difficultyLabel.appendChild(difficultyText);
const difficulty = document.createElement('input');
const difficultyID = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${level}`;
difficulty.type = 'number';
difficulty.name = difficultyID;
difficulty.className = CONST.LEVEL_INPUT_CLASS;
difficulty.id = difficultyID;
difficultyLabel.htmlFor = difficultyID;
difficultyLabel.appendChild(difficulty);
fieldset.appendChild(difficultyLabel);
const addLevelLabel = document.createElement('label');
addLevelLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
const addLevel = document.createElement('input');
addLevel.className = CONST.ADD_LEVEL_BUTTON;
addLevel.type = 'button';
const addLevelButtonID = 'add';
addLevel.name = addLevelButtonID;
addLevel.id = addLevelButtonID;
addLevelLabel.htmlFor = addLevelButtonID;
const addText = document.createTextNode('Add level');
addLevelLabel.appendChild(addText);
addLevel.value = 'Add';
addLevelLabel.appendChild(addLevel);
fieldset.appendChild(addLevelLabel);
return fieldset;
}; };
export default addLevelButtonAddEventListener; export default addLevelButtonAddEventListener;

29
templates/panel/sitekey/add/ts/removeLevelButton/index.ts
View File

@@ -69,16 +69,21 @@ export const addRemoveLevelButtonEventListenerAll = () => {
*/ */
export const getRemoveButtonHTML = (level: number) => { export const getRemoveButtonHTML = (level: number) => {
log.log(`[generating HTML getHtml]level: ${level}`); log.log(`[generating HTML getHtml]level: ${level}`);
const HTML = `
${CONST.REMOVE_LEVEL_LABEL_TEXT} const btn = document.createElement('input');
<input btn.className = CONST.REMOVE_LEVEL_BUTTON_CLASS;
class="${CONST.REMOVE_LEVEL_BUTTON_CLASS}" btn.type = 'button';
type="button" const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`;
name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}" btn.name = id;
id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}" btn.id = id;
value="x" btn.value = 'x';
/>
</fieldset> const removeLabel = document.createElement('label');
`; removeLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
return HTML; const removeLabelText = document.createTextNode('RemoveLevel');
removeLabel.appendChild(removeLabelText);
removeLabel.appendChild(btn);
removeLabel.htmlFor = id;
return removeLabel;
}; };

2
templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts
View File

@@ -46,7 +46,7 @@ const setUp = () => {
log.setMode(MODE.none); log.setMode(MODE.none);
it('addLevelButton works', () => { it('removeLevelButton works', () => {
setUp(); setUp();
for (let i = 1; i < 4; i++) { for (let i = 1; i < 4; i++) {

4
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts
View File

@@ -53,9 +53,11 @@ const updateLevelNumbersOnDOM = (id: number) => {
} }
// rename legend // rename legend
const legendText = document.createTextNode(`Level ${newLevel}`);
levelGroup.getElementsByTagName( levelGroup.getElementsByTagName(
'legend', 'legend',
)[0].innerText = `Level ${newLevel}`; )[0].appendChild(legendText);
// rename labels // rename labels
updateLabels(levelGroup, newLevel); updateLabels(levelGroup, newLevel);

3
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts
View File

@@ -15,7 +15,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import getNumLevels from '../../levels/getNumLevels';
import {getAddForm, trim} from '../../setupTests'; import {getAddForm, trim} from '../../setupTests';
import updateInputs from './updateInputs'; import updateInputs from './updateInputs';
import CONST from '../../const'; import CONST from '../../const';
@@ -29,7 +28,7 @@ document.body.innerHTML = getAddForm();
log.setMode(MODE.none); log.setMode(MODE.none);
it('addLevelButton works', () => { it('updateInputs works', () => {
setupAddlevels(); setupAddlevels();
// removing level 2 // removing level 2
const level = 2; const level = 2;

4
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts
View File

@@ -36,7 +36,9 @@ const updateInput = (levelGroup: Element, newLevel: number) => {
input.id = id; input.id = id;
input.name = id; input.name = id;
} else { } else {
throw new Error('Did you add an extra input to DOM?'); if (input.id != 'add') {
throw new Error(`Did you add an extra input to DOM? ${input.id} ${input.className} ${input.name}`);
}
} }
}); });
}; };

9
templates/panel/sitekey/list/index.html
View File

@@ -1,9 +1,8 @@
<. include!("../../../components/headers.html"); .> <. <. include!("../../../components/headers.html"); .>
include!("../../header/index.html"); .> <. include!("../../navbar/index.html"); .>
<. include!("../../header/index.html"); .>
<main class="panel-main"> <main class="panel-main">
<. include!("../../taskbar/index.html"); .> <. <.include!("../../help-banner/index.html"); .>
include!("../../help-banner/index.html"); .>
<!-- Main content container --> <!-- Main content container -->
<div class="inner-container"> <div class="inner-container">
<!-- Main menu/ important actions roaster --> <!-- Main menu/ important actions roaster -->

7
templates/panel/sitekey/view/index.html
View File

@@ -1,8 +1,7 @@
<. include!("../../../components/headers.html"); .> <. <. include!("../../../components/headers.html"); .>
include!("../../header/index.html"); .> <. include!("../../navbar/index.html"); .>
<. include!("../../header/index.html"); .>
<main class="panel-main"> <main class="panel-main">
<. include!("../../taskbar/index.html"); .> <.
include!("../../help-banner/index.html"); .> include!("../../help-banner/index.html"); .>
<!-- Main content container --> <!-- Main content container -->
<div class="inner-container"> <div class="inner-container">

6
webpack.config.js
View File

@@ -4,9 +4,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = { module.exports = {
//devtool: 'inline-source-map', devtool: 'inline-source-map',
//mode: ''development, mode: 'development',
mode: 'production', //mode: 'production',
entry: './templates/index.ts', entry: './templates/index.ts',
output: { output: {
filename: 'bundle.js', filename: 'bundle.js',