mi
104 lines
3.7 KiB
JavaScript
104 lines
3.7 KiB
JavaScript
(function () {
|
|
function initPhoneForm() {
|
|
var input = document.getElementById("phone");
|
|
var submit = document.getElementById("han-phone-submit");
|
|
if (!input || !submit) return;
|
|
|
|
function formatPhone(value) {
|
|
var digits = value.replace(/\D/g, "");
|
|
if (!digits) return "";
|
|
if (digits.indexOf("8") === 0) digits = "7" + digits.slice(1);
|
|
else if (digits.indexOf("7") !== 0) digits = "7" + digits;
|
|
digits = digits.slice(0, 11);
|
|
|
|
var result = "+7";
|
|
if (digits.length > 1) result += " (" + digits.slice(1, 4);
|
|
if (digits.length >= 4) result += ") " + digits.slice(4, 7);
|
|
if (digits.length >= 7) result += " " + digits.slice(7, 9);
|
|
if (digits.length >= 9) result += " " + digits.slice(9, 11);
|
|
return result;
|
|
}
|
|
|
|
function updatePhone() {
|
|
input.value = formatPhone(input.value);
|
|
submit.disabled = input.value.replace(/\D/g, "").length !== 11;
|
|
}
|
|
|
|
input.addEventListener("input", updatePhone);
|
|
updatePhone();
|
|
}
|
|
|
|
function initOtpForm() {
|
|
var fields = Array.prototype.slice.call(document.querySelectorAll(".han-otp-digit"));
|
|
var hidden = document.getElementById("otp");
|
|
var submit = document.getElementById("han-otp-submit");
|
|
if (!fields.length || !hidden || !submit) return;
|
|
|
|
function syncOtp() {
|
|
fields.forEach(function (field) {
|
|
field.classList.toggle("han-filled", Boolean(field.value));
|
|
});
|
|
hidden.value = fields.map(function (field) { return field.value; }).join("");
|
|
submit.disabled = hidden.value.length !== fields.length;
|
|
}
|
|
|
|
fields.forEach(function (field, index) {
|
|
field.addEventListener("input", function () {
|
|
var entered = field.value.replace(/\D/g, "");
|
|
if (entered.length > 1) {
|
|
entered.slice(0, fields.length).split("").forEach(function (digit, digitIndex) {
|
|
fields[digitIndex].value = digit;
|
|
});
|
|
fields[Math.min(entered.length, fields.length) - 1].focus();
|
|
} else {
|
|
field.value = entered.slice(-1);
|
|
if (field.value && index < fields.length - 1) fields[index + 1].focus();
|
|
}
|
|
syncOtp();
|
|
});
|
|
|
|
field.addEventListener("keydown", function (event) {
|
|
if (event.key === "Backspace" && !field.value && index > 0) {
|
|
fields[index - 1].value = "";
|
|
fields[index - 1].focus();
|
|
syncOtp();
|
|
}
|
|
if (event.key === "ArrowLeft" && index > 0) fields[index - 1].focus();
|
|
if (event.key === "ArrowRight" && index < fields.length - 1) fields[index + 1].focus();
|
|
});
|
|
|
|
field.addEventListener("paste", function (event) {
|
|
event.preventDefault();
|
|
var pasted = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, fields.length);
|
|
fields.forEach(function (otpField) { otpField.value = ""; });
|
|
pasted.split("").forEach(function (digit, digitIndex) {
|
|
fields[digitIndex].value = digit;
|
|
});
|
|
if (pasted.length) fields[Math.min(pasted.length, fields.length) - 1].focus();
|
|
syncOtp();
|
|
});
|
|
});
|
|
|
|
syncOtp();
|
|
|
|
var seconds = 59;
|
|
var countdown = document.getElementById("han-resend-countdown");
|
|
var countdownValue = countdown && countdown.querySelector("strong");
|
|
var resend = document.getElementById("han-resend-button");
|
|
if (!countdown || !countdownValue || !resend) return;
|
|
|
|
var timer = window.setInterval(function () {
|
|
seconds -= 1;
|
|
countdownValue.textContent = "0:" + String(seconds).padStart(2, "0");
|
|
if (seconds <= 0) {
|
|
window.clearInterval(timer);
|
|
countdown.hidden = true;
|
|
resend.hidden = false;
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
initPhoneForm();
|
|
initOtpForm();
|
|
})();
|