ITStudioMainSite/plugins/itstudio-recruitment/assets/otp.js

(function () {
  'use strict';

  const config = window.itstudioJoinOtp;
  if (!config) {
    return;
  }

  function getLanguage() {
    return document.documentElement.lang === 'en' ? 'en' : 'cn';
  }

  function getMessage(payload, fallback) {
    const key = getLanguage() === 'en' ? 'message_en' : 'message_cn';
    return payload && payload[key] ? payload[key] : fallback;
  }

  function findField(form, fieldId) {
    return form.querySelector('[name="item_meta[' + fieldId + ']"]');
  }

  function findTargetForm() {
    const candidates = document.querySelectorAll('.join-form-content .frm_forms form');
    for (const form of candidates) {
      const formIdInput = form.querySelector('input[name="form_id"]');
      if (!formIdInput || Number(formIdInput.value) === Number(config.formId)) {
        if (findField(form, config.emailFieldId) && findField(form, config.codeFieldId)) {
          return form;
        }
      }
    }
    return null;
  }

  function setStatus(status, message, tone) {
    if (!message) {
      status.textContent = '';
      status.className = 'itstudio-otp-status';
      status.style.display = 'none';
      return;
    }
    status.style.display = 'flex';
    status.textContent = message;
    status.className = 'itstudio-otp-status' + (tone ? ' is-' + tone : '');
  }

  function startCooldown(button, seconds) {
    let remaining = Math.max(1, Number(seconds) || Number(config.cooldown) || 60);
    button.disabled = true;
    button.classList.add('is-countdown');

    const update = function () {
      button.textContent = String(config.labels.resend || '重新发送 (%s秒)').replace('%s', remaining);
      remaining -= 1;
      if (remaining < 0) {
        window.clearInterval(button.itstudioOtpTimer);
        button.itstudioOtpTimer = null;
        button.classList.remove('is-countdown');
        button.textContent = config.labels.send || '发送验证码';
        button.disabled = false;
      }
    };

    update();
    button.itstudioOtpTimer = window.setInterval(update, 1000);
  }

  async function sendCode(form, button, status) {
    const emailInput = findField(form, config.emailFieldId);
    const email = emailInput ? emailInput.value.trim() : '';
    if (!email) {
      setStatus(status, config.labels.emailRequired || '请先填写邮箱地址。', 'error');
      emailInput?.focus();
      return;
    }
    if (emailInput && !emailInput.checkValidity()) {
      setStatus(status, config.labels.invalidEmail || '请输入有效的邮箱地址。', 'error');
      emailInput.focus();
      return;
    }

    button.disabled = true;
    button.classList.add('is-loading');
    button.textContent = config.labels.sending || '发送中…';
    setStatus(status, config.labels.sending || '正在发送验证码…', 'info');

    try {
      const response = await window.fetch(config.ajaxUrl, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        body: new URLSearchParams({
          action: 'itstudio_join_otp_send',
          email: email,
          nonce: config.nonce
        }).toString()
      });
      const result = await response.json();
      const payload = result && result.data ? result.data : {};
      button.classList.remove('is-loading');

      if (!result.success) {
        setStatus(status, getMessage(payload, config.labels.networkError || '发送失败，请稍后重试。'), 'error');
        if (payload.wait) {
          startCooldown(button, payload.wait);
        } else {
          button.textContent = config.labels.send || '发送验证码';
          button.disabled = false;
        }
        return;
      }

      setStatus(status, getMessage(payload, '验证码已发送，请检查邮箱及垃圾箱。'), 'success');
      startCooldown(button, payload.cooldown || config.cooldown);
    } catch (error) {
      button.classList.remove('is-loading');
      setStatus(status, config.labels.networkError || '网络错误，请稍后重试。', 'error');
      button.textContent = config.labels.send || '发送验证码';
      button.disabled = false;
    }
  }

  function mount() {
    const form = findTargetForm();
    if (!form || form.querySelector('.itstudio-otp-wrap')) {
      return;
    }

    const codeInput = findField(form, config.codeFieldId);
    if (!codeInput) {
      return;
    }

    codeInput.setAttribute('inputmode', 'numeric');
    codeInput.setAttribute('pattern', '[0-9]{6}');
    codeInput.setAttribute('maxlength', '6');
    codeInput.setAttribute('autocomplete', 'one-time-code');
    if (!codeInput.getAttribute('placeholder')) {
      codeInput.setAttribute('placeholder', '请输入 6 位验证码');
    }
    codeInput.classList.add('itstudio-otp-input');

    const wrapper = document.createElement('div');
    wrapper.className = 'itstudio-otp-wrap';

    const group = document.createElement('div');
    group.className = 'itstudio-otp-group';

    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'itstudio-otp-send';
    button.textContent = config.labels.send || '发送验证码';

    const status = document.createElement('div');
    status.className = 'itstudio-otp-status';
    status.setAttribute('role', 'status');
    status.setAttribute('aria-live', 'polite');
    status.style.display = 'none';

    if (codeInput.parentNode) {
      codeInput.parentNode.insertBefore(wrapper, codeInput);
      group.appendChild(codeInput);
      group.appendChild(button);
      wrapper.appendChild(group);
      wrapper.appendChild(status);
    }

    button.addEventListener('click', function (e) {
      e.preventDefault();
      sendCode(form, button, status);
    });
  }

  mount();
  const observer = new MutationObserver(mount);
  observer.observe(document.body, {childList: true, subtree: true});
})();