function getControlsCAPTCHA(sIDPanelControl, fontName = "Roboto, Condensed", languageToSpeech = "", bAlertError = false) { var lbResult = false; var loPanelCaptcha = (typeof sIDPanelControl == "string") ? document.getElementById(sIDPanelControl.trim()) : (sIDPanelControl.classList.contains("Captcha-center") == true) ? sIDPanelControl : sIDPanelControl.closest(".Captcha-center"); if (loPanelCaptcha != undefined) { var loUserTextControl = loPanelCaptcha.querySelector("input.Captcha-text-user"); var loRefreshButton = loPanelCaptcha.querySelector("input.Captcha-text-button"); var loSpeechButton = loPanelCaptcha.querySelector("input.Captcha-sound-button"); var loCheckControl = loPanelCaptcha.querySelector("input.Captcha-check-container"); if (refreshCaptcha(loPanelCaptcha, fontName, bAlertError) == true) { if (loRefreshButton != null) { loRefreshButton.addEventListener('click', function() { refreshCaptcha(this, fontName); }); } if (loUserTextControl != null) { loUserTextControl.addEventListener('keyup', function(e) { checkCaptchaReturnKey(e,this); }); loUserTextControl.addEventListener('blur', function() { checkCaptcha(this); }); } if (loSpeechButton != null) { loSpeechButton.addEventListener('click', function() { speechText(this, languageToSpeech); }); } if (loCheckControl != null) { loCheckControl.addEventListener('change', function() { this.parentNode.querySelector("input.Captcha-text-user").focus(); }); } } } else if (bAlertError) alert ("No " + sIDControl + " CAPTCHA panel control found."); return lbResult; } function speechText(sIDPanelControl, languageToSpeech = "", bAlertError = false) { var lbResult = false; var loPanelCaptcha = (typeof sIDPanelControl == "string") ? document.getElementById(sIDPanelControl.trim()) : (sIDPanelControl.classList.contains("Captcha-center") == true) ? sIDPanelControl : sIDPanelControl.closest(".Captcha-center"); if (loPanelCaptcha != undefined) { var textCtrlToSpeech = loPanelCaptcha.querySelector("input.Captcha-text-user") if ((captchaValue = atob(textCtrlToSpeech.defaultValue)).length > 0) { let lsText = ""; let lsUpper = ""; switch(((languageToSpeech.length > 0) ? languageToSpeech : navigator.language).toLowerCase()) { case "es": lsUpper = "may\u00FAscula"; break; default: lsUpper = "Upper case"; break; } lArrayCaptcha = captchaValue.split(''); for(let sCaracter of lArrayCaptcha) lsText = lsText + ((sCaracter == sCaracter.toLowerCase()) ? sCaracter : sCaracter + " " + lsUpper) + "!, "; var captchaUtterance = new SpeechSynthesisUtterance(lsText); captchaUtterance.lang = languageToSpeech; captchaUtterance.rate = 0.7; speechSynthesis.speak(captchaUtterance); } } else if (bAlertError) alert ("No CAPTCHA panel control found."); return lbResult; } function checkCaptchaReturnKey(eventData, sIDPanelControl, bAlertError = false) { var lbResult = false; var loPanelCaptcha = (typeof sIDPanelControl == "string") ? document.getElementById(sIDPanelControl.trim()) : (sIDPanelControl.classList.contains("Captcha-center") == true) ? sIDPanelControl : sIDPanelControl.closest(".Captcha-center"); if (loPanelCaptcha != undefined) { loPanelCaptcha.querySelector("input.Captcha-text-button").disabled = (loPanelCaptcha.querySelector("input.Captcha-text-user").value.length == 0); if (eventData.keyCode === 13) lbResult = checkCaptcha(loPanelCaptcha); else lbResult = true; } else if (bAlertError) alert ("No CAPTCHA panel control found."); return lbResult; } function checkCaptcha(sIDPanelControl, successFunction = undefined, sSuccessText = "Correct!", sErrorText = "Incorrect, please try again", bAlertError = false) { var lbResult = false; var loPanelCaptcha = (typeof sIDPanelControl == "string") ? document.getElementById(sIDPanelControl.trim()) : (sIDPanelControl.classList.contains("Captcha-center") == true) ? sIDPanelControl : sIDPanelControl.closest(".Captcha-center"); if (loPanelCaptcha != undefined) { var outputCtrl = loPanelCaptcha.querySelector("p.Captcha-messages"); var userCtrl = loPanelCaptcha.querySelector("input.Captcha-text-user"); var checkCtrl = loPanelCaptcha.querySelector("input.Captcha-check-container"); if (outputCtrl != null && userCtrl != null && checkCtrl != null) { if (userCtrl != null && userCtrl.value === atob(userCtrl.defaultValue)){ if (outputCtrl != null) { outputCtrl.style.color = "green"; outputCtrl.innerHTML = sSuccessText; userCtrl.setCustomValidity(''); } if (successFunction != undefined) successFunction.call(); lbResult = true; } else { if (checkCtrl.checked == false && document.querySelector("input.Captcha-text-button").disabled == false) checkCtrl.checked = true; if (outputCtrl != null ) { outputCtrl.style.color = "red"; outputCtrl.innerHTML = sErrorText; userCtrl.setCustomValidity(sErrorText); } lbResult = false; } } else if (bAlertError) alert ("CAPTCHA panel haven´t the correct controls."); } else if (bAlertError) alert ("No CAPTCHA panel control found."); return lbResult; } function refreshCaptcha(sIDPanelControl, fontName = "Roboto, Condensed", bAlertError = false) { var lbResult = false; var loPanelCaptcha = (typeof sIDPanelControl == "string") ? document.getElementById(sIDPanelControl.trim()) : (sIDPanelControl.classList.contains("Captcha-center") == true) ? sIDPanelControl : sIDPanelControl.closest(".Captcha-center"); if (loPanelCaptcha != null) { var captchaTextCtrl =loPanelCaptcha.querySelector(".Captcha-canvas-container"); var userCtrl =loPanelCaptcha.querySelector(".Captcha-text-user"); var outputCtrl =loPanelCaptcha.querySelector(".Captcha-messages"); if (captchaTextCtrl != null && userCtrl != null && outputCtrl != null) { var textCtrl = captchaTextCtrl.getContext("2d"); textCtrl.translate(0,0); userCtrl.value = ""; var alphaNumsArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; var colorNumsArr = ['#FAC900', '#2E2E3B' ,'#174A63','#5F425E','#33957D', "#FF8626"]; var anglesNumArr = [0.3,0.2,0.1,0,-0.1,-0.2,-0.3]; var fontsSizeNumsArr = [-1,50,52.48,50,50]; var heigthNums = [20,0,-20]; var alphaRefreshArr = []; var colorRefreshArr = []; var anglesRefreshArr = []; var fontsSizeRefreshArr = []; var heigthRefreshArr = []; var metrics = null; var totalWidth = captchaTextCtrl.width; textCtrl.font = "50px " + fontName; for (let j = 1; j <= 7; j++) { alphaRefreshArr.push(alphaNumsArr[Math.floor(Math.random() * alphaNumsArr.length)]); colorRefreshArr.push(colorNumsArr[Math.floor(Math.random() * colorNumsArr.length)]); anglesRefreshArr.push(anglesNumArr[Math.floor(Math.random() * anglesNumArr.length)]); fontsSizeRefreshArr.push(fontsSizeNumsArr[Math.floor(Math.random() * fontsSizeNumsArr.length)]); heigthRefreshArr.push(heigthNums[Math.floor(Math.random() * heigthNums.length)]); textCtrl.fillStyle = colorRefreshArr[j-1]; metrics = textCtrl.measureText(alphaRefreshArr[j-1]); totalWidth = totalWidth - metrics.width; } var textCAPTCHA = alphaRefreshArr.join(''); var spaceWidth = totalWidth/(alphaRefreshArr.length + 2); textCtrl.fillStyle = "white"; textCtrl.fillRect(0, 0, captchaTextCtrl.width, captchaTextCtrl.height); var mediumHeight = captchaTextCtrl.height/1.55; var widthPosition = 0; var heightPosition = 0; for (let j = 7; j >= 1; j--) { textCtrl.fillStyle = colorRefreshArr[j-1]; textCAPTCHA = textCAPTCHA.substring(0,textCAPTCHA.length - 1); metrics = textCtrl.measureText(textCAPTCHA); widthPosition = (metrics.actualBoundingBoxRight - metrics.actualBoundingBoxLeft) + ( (j+1) * spaceWidth); heightPosition = mediumHeight + heigthRefreshArr[j-1]; textCtrl.translate(widthPosition, heightPosition); textCtrl.rotate(anglesRefreshArr[j-1]); if (fontsSizeRefreshArr[j-1] == -1) { textCtrl.font = "50px " + fontName; textCtrl.strokeText(alphaRefreshArr[j-1], 0, 0); } else { textCtrl.font = fontsSizeRefreshArr[j-1] + "px " + fontName; textCtrl.fillText(alphaRefreshArr[j-1], 0, 0); } textCtrl.rotate(-1 * anglesRefreshArr[j-1]); textCtrl.translate(-widthPosition, -heightPosition); } userCtrl.defaultValue = btoa(alphaRefreshArr.join('')); userCtrl.setCustomValidity('Type the exact text'); if (outputCtrl != null) outputCtrl.innerHTML = ""; lbResult = true; } else if (bAlertError) alert ("CAPTCHA panel haven´t the correct controls."); } else if (bAlertError) alert ("No CAPTCHA panel control found."); return lbResult; }