118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
import reloadSession from './helpers/reloadSession.js';
|
|
import getImage from './helpers/getImage.js';
|
|
import verifyImage from './helpers/verifyImage.js';
|
|
import {createElement as ce, querySelector as qs} from './util/document.js';
|
|
|
|
/**
|
|
* Create a uCaptcha box
|
|
* @param {string} websiteKey Website key
|
|
* @return {HTMLElement} uCaptcha box
|
|
*/
|
|
function uCaptchaBox(websiteKey) {
|
|
const styles = `
|
|
#ucaptcha-container {
|
|
font-family: Arial;
|
|
}
|
|
#ucaptcha-next {
|
|
border: none;
|
|
background-color: royalblue;
|
|
color: #FFF;
|
|
padding: 10px 20px;
|
|
text-transform: uppercase;
|
|
border-radius: 3px;
|
|
}
|
|
#ucaptcha-grid {
|
|
width: 384px;
|
|
height: 384px;
|
|
transition: .2s ease;
|
|
}
|
|
#ucaptcha-grid.blurred {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
#ucaptcha-grid td {
|
|
transition: .1s ease;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
}
|
|
|
|
#ucaptcha-grid td.selected {
|
|
padding: 0;
|
|
border: 10px solid white;
|
|
}
|
|
`;
|
|
const styleTag = ce('style');
|
|
styleTag.innerHTML = styles;
|
|
document.head.appendChild(styleTag);
|
|
|
|
const checkbox = ce('div', {
|
|
style: 'height:25px;display:inline-block',
|
|
});
|
|
checkbox.style.cursor = 'pointer';
|
|
checkbox.style.borderRadius = '3px';
|
|
checkbox.style.border = '2px solid #888';
|
|
checkbox.style.width = '25px';
|
|
|
|
const captchaBox = ce('div');
|
|
captchaBox.appendChild(checkbox);
|
|
|
|
const captchaContainer = ce('div', {id: 'ucaptcha-container'});
|
|
|
|
const imageTagTitle = ce('h3', {id: 'ucaptcha-caption'});
|
|
captchaContainer.appendChild(imageTagTitle);
|
|
|
|
const image = ce('img', {id: 'ucaptcha-img', style: 'position:absolute;display:block;z-index:-999'});
|
|
captchaContainer.appendChild(image);
|
|
|
|
const btn = ce('button', {id: 'ucaptcha-next'});
|
|
btn.textContent = 'Next';
|
|
|
|
captchaBox.appendChild(captchaContainer);
|
|
captchaBox.appendChild(btn);
|
|
|
|
checkbox.onclick = async function() {
|
|
/** @type {import('../shared/models/UserSession.js').UserSession} */
|
|
const session = await reloadSession(websiteKey);
|
|
|
|
qs('#ucaptcha-caption').innerHTML = `Select all squares with <b>${session.getImageTag()}s</b>`;
|
|
|
|
const imageGrid = ce('table', {id: 'ucaptcha-grid'});
|
|
for (let i = 0; i < 4; i++) {
|
|
const tr = ce('tr');
|
|
for (let ii = 0; ii < 4; ii++) {
|
|
const td = ce('td',
|
|
{'style': 'cursor:pointer'});
|
|
td.addEventListener('click', (e)=>{
|
|
e.target.classList.toggle('selected');
|
|
});
|
|
tr.appendChild(td);
|
|
}
|
|
imageGrid.appendChild(tr);
|
|
}
|
|
|
|
btn.addEventListener('click', (e)=>{
|
|
verifyImage(session, imageGrid);
|
|
getImage(session, captchaBox);
|
|
});
|
|
|
|
captchaContainer.appendChild(imageGrid);
|
|
|
|
getImage(session, captchaBox);
|
|
|
|
checkbox.setAttribute('style',
|
|
checkbox.getAttribute('style') + 'background-color:royalblue;');
|
|
};
|
|
return captchaBox;
|
|
}
|
|
|
|
/**
|
|
* Instantiate a uCaptcha box
|
|
* @param {string} websiteKey
|
|
* @param {string} selector
|
|
*/
|
|
export function create(websiteKey, selector) {
|
|
// const iframe = ce("iframe");
|
|
// iframe.setAttribute("src", "https://localhost:444/?k="+websiteKey)
|
|
|
|
qs(selector).appendChild(uCaptchaBox(websiteKey));
|
|
}
|