`; for (let index = 1; index <= this.quantity; index++) { inputsHTML += `` ; } inputsHTML += '
'; document.querySelector('#pin-boxes').innerHTML = inputsHTML; }, focus: function (element) { const hasValue = element.value !== ""; const hasSibling = element.nextElementSibling; const hasPreviousSibling = element.previousElementSibling; const hasSiblingInput = hasSibling && element.nextElementSibling.nodeName === "INPUT"; if (hasValue && hasSiblingInput) { element.nextElementSibling.focus(); } else if (!hasValue && hasPreviousSibling) { element.previousElementSibling.focus(); } else if (!hasPreviousSibling) { element.focus(); } else { document.querySelector('#hideKeyboard').focus(); } }, setValue: function (sendVpv=true) { let pinValue = ''; const boxes = document.querySelectorAll(".digits input"); boxes.forEach((element) => { pinValue += element.value; }); if (pinValue.length === boxes.length) { this.inputPin.value = pinValue; this.inputPin.setAttribute('value', pinValue); if (this.submitButton) { this.submitButton.disabled = false; this.submitButton.classList.remove('cta_disabled'); this.submitButton.classList.add('cta'); if (sendVpv){ vpv_send("billing_checkpin/webotp/pin_complete", true); } } } else { if (this.submitButton) { this.submitButton.disabled = true; this.submitButton.classList.add('cta_disabled'); } } }, addEvents: function () { const boxes = document.querySelectorAll(".digits input"); boxes.forEach((element) => { element.addEventListener('paste', pinBoxes.handlePaste); element.addEventListener('keydown', function (event) { const key = event.key; const hasValue = this.value !== ""; const hasSibling = this.previousElementSibling; const hasSiblingInput = hasSibling && this.previousElementSibling.nodeName === "INPUT"; if (key === "Backspace") { if (!hasValue && hasSiblingInput) { this.previousElementSibling.focus(); } } }); }); document.querySelector(".digits").addEventListener("input", function ({target, data}) { data && (target.value = data.replace(/[^0-9]/g, '')); pinBoxes.setValue(false); if (target.value.length === 0) { return; } if (data && data.length > 1) { data.split('').forEach((number, key) => { if (boxes[key]) { boxes[key].value = number; } }); } pinBoxes.setValue(); pinBoxes.focus(target); }); }, showOtpValue: function (inputs, value) { if (inputs) { value.split('').forEach((number, key) => { if (inputs[key]) { inputs[key].value = number; inputs[key].focus(); } }); } }, handlePaste: function (e) { const boxes = document.querySelectorAll(".digits input"); let clipboardData, pastedData; e.stopPropagation(); e.preventDefault(); clipboardData = e.clipboardData || window.clipboardData; pastedData = clipboardData.getData('Text').replace(/[^0-9]/g, ''); if (pastedData) { if (pastedData.length === 1) { boxes[0].value = pastedData; } pastedData.split('').forEach((number, key) => { if (boxes[key]) { boxes[key].value = number; pinBoxes.focus(boxes[key]); } }); pinBoxes.setValue(true); } }, optAutocomplete: function () { console.log('Boxes OTP Autocomplete activated!'); if ((!lp_conf.user_maybe_robot) && (/android/i.test(lp_conf.user_uamob_OS)) && ('OTPCredential' in window)) { vpv_send("billing_checkpin/webotp/autocomplete/available", "billing_checkpin/webotp/autocomplete/available", true); var ac = new AbortController(); if (pinBoxes.form) { pinBoxes.form.addEventListener('submit', function (e) { ac.abort(); }); } navigator.credentials.get({otp: {transport: ['sms']}, signal: ac.signal}) .then(otp => { vpv_send("billing_checkpin/webotp/click", "billing_checkpin/webotp/click", true); pinBoxes.inputPin.value = otp.code; const boxes = document.querySelectorAll(".digits input"); pinBoxes.showOtpValue(boxes, pinBoxes.inputPin.value); pinBoxes.setValue(true); if (pinBoxes.form && typeof (send_flow_event) === "function") send_flow_event({ type: "webotp", status: "autocomplete", elem_form: pinBoxes.form, code: otp.code }); }).catch(err => { console.log(err); vpv_send("billing_checkpin/webotp/error/" + err, "billing_checkpin/webotp/error/" + err, true); }); } else { vpv_send("billing_checkpin/webotp/autocomplete/not_available", "billing_checkpin/webotp/autocomplete/not_available", true); console.log("OTPCredential not available on this device"); } } }; let firstCheckPinLoad = true; addEvent(document, "flow_event", function (fkevent) { const event = fkevent.result; if (event.step === '.msisdnrequest_flow.step_checkpin') { document.querySelector(".digits input").focus(); const submitButton = document.querySelector('.step_checkpin #botonEnviar'); if (submitButton && firstCheckPinLoad){ submitButton.disabled = true; submitButton.classList.add('cta_disabled'); firstCheckPinLoad = false; } if ((lp_conf["pin_boxes_otp_autocomplete"])) { pinBoxes.optAutocomplete(); } } }); addEvent(document, "DOMContentLoaded", function () { const pinBoxesQuantity = lp_conf.pin_boxes_quantity ? lp_conf.pin_boxes_quantity : 4; const pin_boxes_otp_autocomplete = !!(lp_conf.pin_boxes_otp_autocomplete); lp_conf.pin_boxes_quantity = pinBoxesQuantity; lp_conf.pin_boxes_otp_autocomplete = pin_boxes_otp_autocomplete; console.log('lp_conf.pin_boxes_quantity => ' + lp_conf.pin_boxes_quantity); console.log('lp_conf.pin_boxes_otp_autocomplete => ' + (lp_conf.pin_boxes_otp_autocomplete)); console.log('PIN BOXES CONFIGURATION:'); const pin_boxes_conf = { 'lp_conf.pin_boxes_quantity': lp_conf.pin_boxes_quantity, 'lp_conf.pin_boxes_otp_autocomplete': (lp_conf.pin_boxes_otp_autocomplete) }; console.table(pin_boxes_conf); pinBoxes.quantity = lp_conf.pin_boxes_quantity; pinBoxes.init(); });