kor-elf/service-captcha-gui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust style.css path.

Browse Source 
Adjusted the path to style.css to be dynamically set using 'data-static-path' attribute. This change allows stylesheets to be fetched from the correct path based on the consumed API.
This commit is contained in:
Leonid Nikitin 2023-12-02 01:44:21 +06:00
parent 04eacf66cd
commit 4bac5c10a0
Signed by: kor-elf
GPG Key ID: 604A019EB118CAC4
2 changed files with 64 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exmplate/index.html
View File

@ -6,7 +6,7 @@
<title>Title</title> <title>Title</title>
</head> </head>
<body> <body>
<div class="captcha-service-kor-elf" data-domain="http://captcha.localhost:9008" data-token=""></div> <div class="captcha-service-kor-elf" data-domain="" data-static-path="./" data-token=""></div>
<script src="script.js" async></script> <script src="script.js" async></script>
</body> </body>
</html> </html>

125
exmplate/script.js
View File

@ -6,12 +6,13 @@
const style = document.createElement('link'); const style = document.createElement('link');
const domain = element.getAttribute('data-domain'); const domain = element.getAttribute('data-domain');
const token = element.getAttribute('data-token'); const token = element.getAttribute('data-token');
const staticPath = element.getAttribute('data-static-path');
let windowCaptcha = null; let windowCaptcha = null;
style.rel = 'stylesheet'; style.rel = 'stylesheet';
style.type = 'text/css'; style.type = 'text/css';
style.href = 'style.css'; style.href = staticPath + '/style.css';
shadow.appendChild(style); shadow.appendChild(style);
button.textContent = 'Я не робот!'; button.textContent = 'Я не робот!';
@ -44,7 +45,7 @@
}); });
windowCaptcha.querySelector('button.window-captcha__close').addEventListener('click', function () { windowCaptcha.querySelector('button.window-captcha__close').addEventListener('click', function () {
actionClose(windowCaptcha); actionClose(windowCaptcha);
}); });
windowCaptcha.querySelector('button.window-captcha__reload').addEventListener('click', function () { windowCaptcha.querySelector('button.window-captcha__reload').addEventListener('click', function () {
@ -73,11 +74,11 @@
'public-token': token 'public-token': token
} }
}) })
.then(response => response.json()) .then(response => response.json())
.then(function (data) { .then(function (data) {
let originalWidth = data.image_body.width; let originalWidth = data.image_body.width;
let originalHeight = data.image_body.height; let originalHeight = data.image_body.height;
bodyBlock.innerHTML = ` bodyBlock.innerHTML = `
<form method="post"> <form method="post">
<div class="window-captcha__content__body__head"><img src="${ data.image_head.base64 }" width="100%"></div> <div class="window-captcha__content__body__head"><img src="${ data.image_head.base64 }" width="100%"></div>
<p>Выберите значение в том порядке, на котором на картинке выше:</p> <p>Выберите значение в том порядке, на котором на картинке выше:</p>
@ -86,41 +87,41 @@
<button type="button" class="window-captcha__content__body__button">Я не робот!</button> <button type="button" class="window-captcha__content__body__button">Я не робот!</button>
</form> </form>
`; `;
let blockCoordinator = bodyBlock.querySelector('div.window-captcha__content__body__coordinator'); let blockCoordinator = bodyBlock.querySelector('div.window-captcha__content__body__coordinator');
let blockCoordinatorImg = blockCoordinator.querySelector('img'); let blockCoordinatorImg = blockCoordinator.querySelector('img');
blockCoordinatorImg.addEventListener('click', function (event) { blockCoordinatorImg.addEventListener('click', function (event) {
let pointer = document.createElement('div'); let pointer = document.createElement('div');
pointer.style.left = ( event.offsetX / blockCoordinatorImg.width * 100 ) + '%'; pointer.style.left = ( event.offsetX / blockCoordinatorImg.width * 100 ) + '%';
pointer.style.top = ( event.offsetY / blockCoordinatorImg.height * 100 ) + '%'; pointer.style.top = ( event.offsetY / blockCoordinatorImg.height * 100 ) + '%';
pointer.classList.add('pointer'); pointer.classList.add('pointer');
let coordinatorX = event.offsetX * (originalWidth / blockCoordinatorImg.width) let coordinatorX = event.offsetX * (originalWidth / blockCoordinatorImg.width)
let coordinatorY = event.offsetY * (originalHeight / blockCoordinatorImg.height) let coordinatorY = event.offsetY * (originalHeight / blockCoordinatorImg.height)
let pointerNumber = blockCoordinator.querySelectorAll('.pointer').length + 1 let pointerNumber = blockCoordinator.querySelectorAll('.pointer').length + 1
pointer.innerHTML = ` pointer.innerHTML = `
<span class="pounter__number">${ pointerNumber }</span> <span class="pounter__number">${ pointerNumber }</span>
<input type="hidden" class="x" name="pointer[][x]" value="${ Math.round(coordinatorX) }" /> <input type="hidden" class="x" name="pointer[][x]" value="${ Math.round(coordinatorX) }" />
<input type="hidden" class="y" name="pointer[][y]" value="${ Math.round(coordinatorY) }" /> <input type="hidden" class="y" name="pointer[][y]" value="${ Math.round(coordinatorY) }" />
`; `;
pointer.addEventListener('click', function () { pointer.addEventListener('click', function () {
pointer.remove(); pointer.remove();
blockCoordinator.querySelectorAll('.pointer').forEach(function (elementPointer, pointIndex) { blockCoordinator.querySelectorAll('.pointer').forEach(function (elementPointer, pointIndex) {
elementPointer.querySelector('span.pounter__number').textContent = pointIndex + 1; elementPointer.querySelector('span.pounter__number').textContent = pointIndex + 1;
});
}); });
blockCoordinator.appendChild(pointer);
}); });
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>`;
}); });
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) { function checkingCaptcha (bodyBlock, domain, token, shadow) {
@ -152,38 +153,38 @@
}, },
body: JSON.stringify(data) body: JSON.stringify(data)
}) })
.then(response => { .then(response => {
if (response.status === 429) { if (response.status === 429) {
setError('Вы превысили количество попыток. Обновите каптчу.', button); setError('Вы превысили количество попыток. Обновите каптчу.', button);
return return
}
return response.json();
})
.then(function (data) {
if (typeof data.errors !== 'undefined') {
let errorMessage = '';
for (let key in data.errors) {
errorMessage += data.errors[key] + '<br>';
} }
if (errorMessage === '') { return response.json();
errorMessage = data.message; })
.then(function (data) {
if (typeof data.errors !== 'undefined') {
let errorMessage = '';
for (let key in data.errors) {
errorMessage += data.errors[key] + '<br>';
}
if (errorMessage === '') {
errorMessage = data.message;
}
setError(errorMessage, button);
return
} }
setError(errorMessage, button); if (typeof data.captcha_key === 'undefined') {
return setError('Произошла ошибка!', button);
} return
if (typeof data.captcha_key === 'undefined') { }
setError('Произошла ошибка!', button); shadow.querySelector('button.button-open-window-captcha').remove();
return let captchaVerified = document.createElement('div');
} captchaVerified.innerHTML = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${ data.captcha_key }">`;
shadow.querySelector('button.button-open-window-captcha').remove(); shadow.appendChild(captchaVerified);
let captchaVerified = document.createElement('div'); shadow.querySelector('.window-captcha').remove();
captchaVerified.innerHTML = `<span class="captcha-verified">Ура!!! Проверку прошли!</span><input type="hidden" name="captcha-verified" value="${ data.captcha_key }">`; })
shadow.appendChild(captchaVerified); .catch(error => {
shadow.querySelector('.window-captcha').remove(); setError('Произошла ошибка!', button)
}) }).finally(function () {
.catch(error => {
setError('Произошла ошибка!', button)
}).finally(function () {
loadingSpan.remove(); loadingSpan.remove();
}); });
} }
@ -199,4 +200,4 @@
}, 3000); }, 3000);
} }
})(document); })(document);