The GUI for the Captcha service is ready.
This commit is contained in:
parent
e8c8cf7d6b
commit
fc7d1bd62f
GPG Key ID:
604A019EB118CAC4
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
.env
|
||||||
|
/node_modules
|
||||||
|
/.fleet
|
||||||
|
/.idea
|
||||||
|
/.vscode
|
||||||
BIN
exmplate/images/refresh.png
Normal file
BIN
exmplate/images/refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
12
exmplate/index.html
Normal file
12
exmplate/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="captcha-service-kor-elf" data-domain="http://captcha.localhost:9008" data-token=""></div>
|
||||||
|
<script src="script.js" async></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
189
exmplate/script.js
Normal file
189
exmplate/script.js
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
(function (document) {
|
||||||
|
const captchaBlocks = document.querySelectorAll('div.captcha-service-kor-elf');
|
||||||
|
captchaBlocks.forEach(function (element) {
|
||||||
|
const shadow = element.attachShadow({ mode: 'closed' });
|
||||||
|
const button = document.createElement("button");
|
||||||
|
const style = document.createElement('link');
|
||||||
|
const domain = element.getAttribute('data-domain');
|
||||||
|
const token = element.getAttribute('data-token');
|
||||||
|
|
||||||
|
let windowCaptcha = null;
|
||||||
|
|
||||||
|
style.rel = 'stylesheet';
|
||||||
|
style.type = 'text/css';
|
||||||
|
style.href = 'style.css';
|
||||||
|
shadow.appendChild(style);
|
||||||
|
|
||||||
|
button.textContent = 'Я не робот!';
|
||||||
|
button.type = 'button';
|
||||||
|
button.classList.add('button-open-window-captcha');
|
||||||
|
shadow.appendChild(button);
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
if (windowCaptcha === null) {
|
||||||
|
windowCaptcha = createWindowCaptcha(shadow, domain, token);
|
||||||
|
}
|
||||||
|
windowCaptcha.style.display = 'block';
|
||||||
|
actionGetCaptcha(windowCaptcha, domain, token, shadow);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function createWindowCaptcha (shadow, domain, token) {
|
||||||
|
const windowCaptcha = document.createElement('div');
|
||||||
|
windowCaptcha.classList.add('window-captcha');
|
||||||
|
windowCaptcha.innerHTML = `<div class="window-captcha__content">
|
||||||
|
<div class="window-captcha__content__header">Я не робот! <button type="button" class="window-captcha__reload"></button><button type="button" class="window-captcha__close">X</button></div>
|
||||||
|
<div class="window-captcha__content__body"></div>
|
||||||
|
</div>`;
|
||||||
|
shadow.appendChild(windowCaptcha);
|
||||||
|
|
||||||
|
windowCaptcha.addEventListener('click', function (event) {
|
||||||
|
if (event.target !== windowCaptcha) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
actionClose(windowCaptcha);
|
||||||
|
});
|
||||||
|
|
||||||
|
windowCaptcha.querySelector('button.window-captcha__close').addEventListener('click', function () {
|
||||||
|
actionClose(windowCaptcha);
|
||||||
|
});
|
||||||
|
|
||||||
|
windowCaptcha.querySelector('button.window-captcha__reload').addEventListener('click', function () {
|
||||||
|
actionGetCaptcha(windowCaptcha, domain, token);
|
||||||
|
});
|
||||||
|
|
||||||
|
return windowCaptcha;
|
||||||
|
}
|
||||||
|
|
||||||
|
function actionClose(windowCaptcha)
|
||||||
|
{
|
||||||
|
windowCaptcha.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function actionGetCaptcha(windowCaptcha, domain, token, shadow)
|
||||||
|
{
|
||||||
|
let bodyBlock = windowCaptcha.querySelector('div.window-captcha__content__body');
|
||||||
|
if (bodyBlock.querySelectorAll('.loading').length > 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
bodyBlock.innerHTML = '<div class="loading"></div>';
|
||||||
|
fetch(domain + '/api/v1/captcha', {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'public-token': token
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(function (data) {
|
||||||
|
let originalWidth = data.image_body.width;
|
||||||
|
let originalHeight = data.image_body.height;
|
||||||
|
bodyBlock.innerHTML = `
|
||||||
|
<form method="post">
|
||||||
|
<div class="window-captcha__content__body__head"><img src="${ data.image_head.base64 }" width="100%"></div>
|
||||||
|
<p>Выберите значение в том порядке, на котором на картинке выше:</p>
|
||||||
|
<div class="window-captcha__content__body__coordinator"><img src="${ data.image_body.base64 }" width="100%" /></div>
|
||||||
|
<input type="hidden" name="captcha_key" class="captcha_key" value="${ data.captcha_key }" />
|
||||||
|
<button type="button" class="window-captcha__content__body__button">Я не робот!</button>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
let blockCoordinator = bodyBlock.querySelector('div.window-captcha__content__body__coordinator');
|
||||||
|
let blockCoordinatorImg = blockCoordinator.querySelector('img');
|
||||||
|
blockCoordinatorImg.addEventListener('click', function (event) {
|
||||||
|
let pointer = document.createElement('div');
|
||||||
|
pointer.style.left = ( event.offsetX / blockCoordinatorImg.width * 100 ) + '%';
|
||||||
|
pointer.style.top = ( event.offsetY / blockCoordinatorImg.height * 100 ) + '%';
|
||||||
|
pointer.classList.add('pointer');
|
||||||
|
|
||||||
|
let coordinatorX = event.offsetX * (originalWidth / blockCoordinatorImg.width)
|
||||||
|
let coordinatorY = event.offsetY * (originalHeight / blockCoordinatorImg.height)
|
||||||
|
|
||||||
|
let pointerNumber = blockCoordinator.querySelectorAll('.pointer').length + 1
|
||||||
|
pointer.innerHTML = `
|
||||||
|
<span class="pounter__number">${ pointerNumber }</span>
|
||||||
|
<input type="hidden" class="x" name="pointer[][x]" value="${ Math.round(coordinatorX) }" />
|
||||||
|
<input type="hidden" class="y" name="pointer[][y]" value="${ Math.round(coordinatorY) }" />
|
||||||
|
`;
|
||||||
|
|
||||||
|
pointer.addEventListener('click', function () {
|
||||||
|
pointer.remove();
|
||||||
|
blockCoordinator.querySelectorAll('.pointer').forEach(function (elementPointer, pointIndex) {
|
||||||
|
elementPointer.querySelector('span.pounter__number').textContent = pointIndex + 1;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
blockCoordinator.appendChild(pointer);
|
||||||
|
});
|
||||||
|
|
||||||
|
bodyBlock.querySelector('.window-captcha__content__body__button').addEventListener('click', function () {
|
||||||
|
checkingCaptcha(bodyBlock, domain, token, shadow);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
bodyBlock.innerHTML = `<div class="window-captcha__content__body__error">Произошла ошибка, сервис с каптчей не ответил. Попробуйте ещё раз!</div>`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkingCaptcha (bodyBlock, domain, token, shadow) {
|
||||||
|
let button = bodyBlock.querySelector('button.window-captcha__content__body__button');
|
||||||
|
if (button.querySelectorAll('.loading').length > 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
let loadingSpan = document.createElement('span');
|
||||||
|
loadingSpan.classList.add('loading');
|
||||||
|
button.appendChild(loadingSpan);
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
captcha_key: bodyBlock.querySelector('.captcha_key').value,
|
||||||
|
verification: []
|
||||||
|
};
|
||||||
|
bodyBlock.querySelectorAll('.pointer').forEach(function (elementPointer) {
|
||||||
|
data["verification"].push({
|
||||||
|
x: elementPointer.querySelector('.x').value,
|
||||||
|
y: elementPointer.querySelector('.y').value
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(domain + '/api/v1/captcha', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'public-token': token
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(function (data) {
|
||||||
|
if (typeof data.errors !== 'undefined') {
|
||||||
|
let errorMessage = '';
|
||||||
|
for (let key in data.errors) {
|
||||||
|
errorMessage += data.errors[key] + '<br>';
|
||||||
|
}
|
||||||
|
setError(errorMessage, button);
|
||||||
|
return
|
||||||
|
}
|
||||||
|
shadow.querySelector('button.button-open-window-captcha').remove();
|
||||||
|
let captchaVerified = document.createElement('div');
|
||||||
|
captchaVerified.innerHTML = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${ data.captcha_key }">`;
|
||||||
|
shadow.appendChild(captchaVerified);
|
||||||
|
shadow.querySelector('.window-captcha').remove();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
setError('Произошла ошибка!', button)
|
||||||
|
}).finally(function () {
|
||||||
|
loadingSpan.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setError(message, button) {
|
||||||
|
let errorBlock = document.createElement('div');
|
||||||
|
errorBlock.classList.add("error-message");
|
||||||
|
errorBlock.innerHTML = message;
|
||||||
|
button.before(errorBlock);
|
||||||
|
|
||||||
|
setTimeout( function () {
|
||||||
|
errorBlock.remove();
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
})(document);
|
||||||
171
exmplate/style.css
Normal file
171
exmplate/style.css
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
.captcha-verified {
|
||||||
|
background: #1D8100;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 90px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: #000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: serif;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.button-open-window-captcha,
|
||||||
|
.window-captcha__content__body__button {
|
||||||
|
background: #68AAFF;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 90px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
.button-open-window-captcha:hover,
|
||||||
|
.window-captcha__content__body__button:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__button {
|
||||||
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 0;
|
||||||
|
border: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__button .loading {
|
||||||
|
background: rgba(255, 255, 255, 0.48);
|
||||||
|
}
|
||||||
|
.window-captcha {
|
||||||
|
background: rgba(0, 0, 0, 0.48);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.window-captcha__close {
|
||||||
|
background: #961b1b;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: serif;
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.window-captcha__close:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.window-captcha__content {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 20px auto;
|
||||||
|
max-width: 600px;
|
||||||
|
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.33);
|
||||||
|
}
|
||||||
|
.window-captcha__content__header {
|
||||||
|
position: relative;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
font-family: serif;
|
||||||
|
padding: 14px 40px 7px 20px;
|
||||||
|
border-bottom: 2px solid #ccc;
|
||||||
|
}
|
||||||
|
.window-captcha__reload {
|
||||||
|
background: url('images/refresh.png') center center no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 90px;
|
||||||
|
cursor: pointer;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.window-captcha__content__reload:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.window-captcha__content__body {
|
||||||
|
min-height: 400px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body .loading {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body .loading:before {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 4px #ddd solid;
|
||||||
|
border-top: 4px #2e93e6 solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: sp-anime 0.8s infinite linear;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
.window-captcha__content__body p {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 5px 20px;
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__coordinator {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__coordinator .pointer {
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 90px;
|
||||||
|
border: 1px solid #961b1b;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin: -15px 0 0 -15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: serif;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__coordinator .pointer:hover span {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__coordinator .pointer:hover span:after {
|
||||||
|
content: "X";
|
||||||
|
font-size: 16px;
|
||||||
|
color: #961b1b;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body__error {
|
||||||
|
border: 1px solid #961b1b;
|
||||||
|
color: #961b1b;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.window-captcha__content__body .error-message {
|
||||||
|
color: #961b1b;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
@keyframes sp-anime {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user