style: otp 验证码样式

2026-08-31 22:58:35 +08:00
parent 092f89b2a8
commit d8f4f8c321
2 changed files with 322 additions and 0 deletions
@@ -0,0 +1,177 @@
+(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});
+})();