han-app/codebase/backend/keycloak/themes/han-phone/login/resources/js/han-login.js

(function () {
  function randomId() {
    if (window.crypto && window.crypto.randomUUID) return window.crypto.randomUUID();
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (char) {
      var value = Math.random() * 16 | 0;
      return (char === "x" ? value : (value & 3 | 8)).toString(16);
    });
  }

  function initDeviceMetadata() {
    var deviceId = window.localStorage.getItem("han_device_id") || randomId();
    var fingerprint = window.localStorage.getItem("han_fingerprint") || randomId();
    window.localStorage.setItem("han_device_id", deviceId);
    window.localStorage.setItem("han_fingerprint", fingerprint);
    document.querySelectorAll(".han-device-id").forEach(function (input) {
      if (!input.value) input.value = deviceId;
    });
    document.querySelectorAll(".han-fingerprint").forEach(function (input) {
      if (!input.value) input.value = fingerprint;
    });
    document.querySelectorAll(".han-os-name").forEach(function (input) {
      if (!input.value) {
        input.value = (navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || "";
      }
    });
  }

  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 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 expiresAt = Number(countdown.getAttribute("data-expires-at"));
    if (!Number.isFinite(expiresAt)) expiresAt = Date.now();
    var timer;
    function updateCountdown() {
      var seconds = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000));
      countdownValue.textContent = Math.floor(seconds / 60) + ":" + String(seconds % 60).padStart(2, "0");
      if (seconds <= 0) {
        if (timer) window.clearInterval(timer);
        countdown.hidden = true;
        resend.hidden = false;
      }
    }
    updateCountdown();
    if (expiresAt > Date.now()) timer = window.setInterval(updateCountdown, 1000);
    resend.addEventListener("click", function () {
      window.setTimeout(function () { resend.disabled = true; }, 0);
    });
  }

  initDeviceMetadata();
  initPhoneForm();
  initOtpForm();
})();