changed layout of captcha plugin
All checks were successful
Build and Deploy Hugo Site / buildAndDeploy (push) Successful in 51s

This commit is contained in:
Andreas Hnida 2024-04-26 23:19:09 +02:00
commit 0917adccba
2 changed files with 115 additions and 116 deletions

View file

@ -3,65 +3,70 @@
* Date: 2021-11-26
* Description: This is the main Javascript file for Captcha.
*/
document.onload = getCaptcha();
document.onload = getCaptcha()
function getCaptcha() {
var form = document.getElementsByClassName("captcha-container");
var captcha = document.createElement("div");
captcha.className = "captcha";
var captchaTxt = generateCaptcha();
captcha.innerHTML = "<div class='captcha-image-container'><div class='captcha-image' data-captcha = '"+captchaTxt+"'>"+captchaTxt+"</div></div><br><input type='text' class='captcha-input' placeholder='Enter Captcha Shown' required/><button type='button' class='captcha-refresh' onclick='generateCaptcha2()'>⟳</button><br /><button type='button' class='captcha-verify' onclick='captchaValidate();'>✔</button><br /><h4 id='captcha-response'></h4>";
form[0].appendChild(captcha);
var submit = document.getElementsByClassName('submit-after-valid-captcha');
submit[0].disabled = true;
var form = document.getElementsByClassName('captcha-container')
var captcha = document.createElement('div')
captcha.className = 'captcha'
var captchaTxt = generateCaptcha()
captcha.innerHTML =
"<div class='captcha-image-container'><div class='captcha-image' data-captcha = '" +
captchaTxt +
"'>" +
captchaTxt +
"</div></div><input type='text' class='captcha-input' placeholder='Enter Captcha Shown' required/><div class='captcha-buttons'><button type='button' class='captcha-refresh' onclick='generateCaptcha2()'>⟳</button>&nbsp;<button type='button' class='captcha-verify' onclick='captchaValidate();'></button></div><h4 id='captcha-response'></h4>"
form[0].appendChild(captcha)
var submit = document.getElementsByClassName('submit-after-valid-captcha')
submit[0].disabled = true
}
function captchaValidate() {
var captcha = document.getElementsByClassName("captcha-input");
var captchaText = captcha[0].value;
var originalCaptchaImg = document.getElementsByClassName("captcha-image");
originalCaptcha = originalCaptchaImg[0].getAttribute("data-captcha");
if(captchaText == originalCaptcha) {
console.log("Captcha Matched");
var submit = document.getElementsByClassName('submit-after-valid-captcha');
submit[0].disabled = false;
var verify = document.getElementsByClassName('captcha-verify');
verify[0].disabled = true;
verify[0].style.cursor = "not-allowed";
var captchaResponse = document.getElementById('captcha-response');
captchaResponse.innerHTML = "<p style='color: green; text-align: center;'>✔</p>";
} else {
var submit = document.getElementsByClassName('submit-after-valid-captcha');
submit[0].disabled = true;
var verify = document.getElementsByClassName('captcha-verify');
verify[0].disabled = false;
var captchaResponse = document.getElementById('captcha-response');
captchaResponse.innerHTML = "<p style='color: red; text-align: center;'>X</p>";
generateCaptcha2();
}
var captcha = document.getElementsByClassName('captcha-input')
var captchaText = captcha[0].value
var originalCaptchaImg = document.getElementsByClassName('captcha-image')
originalCaptcha = originalCaptchaImg[0].getAttribute('data-captcha')
if (captchaText == originalCaptcha) {
console.log('Captcha Matched')
var submit = document.getElementsByClassName('submit-after-valid-captcha')
submit[0].disabled = false
var verify = document.getElementsByClassName('captcha-verify')
verify[0].disabled = true
verify[0].style.cursor = 'not-allowed'
var captchaResponse = document.getElementById('captcha-response')
captchaResponse.innerHTML = "<p style='color: green; text-align: center;'>✔</p>"
} else {
var submit = document.getElementsByClassName('submit-after-valid-captcha')
submit[0].disabled = true
var verify = document.getElementsByClassName('captcha-verify')
verify[0].disabled = false
var captchaResponse = document.getElementById('captcha-response')
captchaResponse.innerHTML = "<p style='color: red; text-align: center;'>X</p>"
generateCaptcha2()
}
}
// Function to generate captcha without changing the data and content of the captcha-image div
// Function to generate captcha without changing the data and content of the captcha-image div
// For 1st time generation of captcha
function generateCaptcha() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
{ text += possible.charAt(Math.floor(Math.random() * possible.length));}
return text;
var text = ''
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length))
}
return text
}
// Function to generate captcha without changing the data and content of the captcha-image div
// For rest of the time generation of captcha
function generateCaptcha2() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
{ text += possible.charAt(Math.floor(Math.random() * possible.length));}
var captcha = document.getElementsByClassName("captcha-image");
captcha[0].innerHTML = text;
captcha[0].setAttribute("data-captcha", text);
}
var text = ''
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length))
}
var captcha = document.getElementsByClassName('captcha-image')
captcha[0].innerHTML = text
captcha[0].setAttribute('data-captcha', text)
}