text-classify-ui/static/js/register.js

// 注册页面特定的JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const userInfoForm = document.getElementById('userInfoForm');
  const codeForm = document.getElementById('codeForm');
  const alertBox = document.getElementById('alertBox');
  const passwordInput = document.getElementById('password');
  const confirmPasswordInput = document.getElementById('confirmPassword');
  const togglePassword = document.getElementById('togglePassword');
  const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');

  let registeredEmail = '';

  // 显示/隐藏密码
  if (togglePassword) {
    togglePassword.addEventListener('click', function() {
      const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
      passwordInput.setAttribute('type', type);

      // 切换图标
      togglePassword.classList.toggle('fa-eye');
      togglePassword.classList.toggle('fa-eye-slash');
    });
  }

  if (toggleConfirmPassword) {
    toggleConfirmPassword.addEventListener('click', function() {
      const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
      confirmPasswordInput.setAttribute('type', type);

      // 切换图标
      toggleConfirmPassword.classList.toggle('fa-eye');
      toggleConfirmPassword.classList.toggle('fa-eye-slash');
    });
  }

  // 密码一致性检查
  if (confirmPasswordInput) {
    confirmPasswordInput.addEventListener('input', function() {
      const password = passwordInput.value;
      const confirmPassword = confirmPasswordInput.value;

      if (password !== confirmPassword) {
        confirmPasswordInput.classList.add('is-invalid');
        document.getElementById('passwordMismatch').style.display = 'block';
      } else {
        confirmPasswordInput.classList.remove('is-invalid');
        document.getElementById('passwordMismatch').style.display = 'none';
      }
    });
  }

  // 注册表单提交
  if (userInfoForm) {
    userInfoForm.addEventListener('submit', function(e) {
      e.preventDefault();

      const email = document.getElementById('email').value;
      const password = passwordInput.value;
      const confirmPassword = confirmPasswordInput.value;
      const name = document.getElementById('name').value;
      const gender = document.querySelector('input[name="gender"]:checked')?.value;
      const birthDate = document.getElementById('birthDate').value;
      const registerBtn = document.getElementById('registerBtn');
      const currentLang = localStorage.getItem('language') || 'zh';

      // 表单验证
      if (!email || !password || !confirmPassword || !name) {
        showAlert('danger', currentLang === 'zh' ? '请填写所有必填字段' : 'Please fill in all required fields');
        return;
      }

      if (password !== confirmPassword) {
        showAlert('danger', currentLang === 'zh' ? '两次输入的密码不一致' : 'Passwords do not match');
        return;
      }

      if (password.length < 8) {
        showAlert('danger', currentLang === 'zh' ? '密码长度至少为8个字符' : 'Password must be at least 8 characters long');
        return;
      }

      // 显示加载状态
      const loadingText = currentLang === 'zh' ? '发送验证码...' : 'Sending verification code...';
      registerBtn.disabled = true;
      registerBtn.innerHTML = `<span class="spinner"></span>${loadingText}`;

      // 收集表单数据
      const formData = {
        email: email,
        password: password,
        name: name,
        gender: gender || '其他',
        birth_date: birthDate
      };

      registeredEmail = email;

      // 发送注册请求
      $.ajax({
        url: '/auth/register',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
          if (response.success) {
            // 显示验证码输入表单
            showAlert('success', response.message);
            document.getElementById('registrationForm').classList.add('d-none');
            document.getElementById('verificationForm').classList.remove('d-none');
          } else {
            // 显示错误信息
            showAlert('danger', response.message);
            registerBtn.disabled = false;
            registerBtn.innerHTML = currentLang === 'zh' ? '注册' : 'Register';
          }
        },
        error: function(xhr) {
          let errorMsg = currentLang === 'zh' ? '注册失败，请稍后再试' : 'Registration failed, please try again later';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMsg = xhr.responseJSON.message;
          }
          showAlert('danger', errorMsg);
          registerBtn.disabled = false;
          registerBtn.innerHTML = currentLang === 'zh' ? '注册' : 'Register';
        }
      });
    });
  }

  // 验证码表单提交
  if (codeForm) {
    codeForm.addEventListener('submit', function(e) {
      e.preventDefault();

      const verificationCode = document.getElementById('verificationCode').value;
      const verifyBtn = document.getElementById('verifyBtn');
      const currentLang = localStorage.getItem('language') || 'zh';

      // 表单验证
      if (!verificationCode) {
        showAlert('danger', currentLang === 'zh' ? '请输入验证码' : 'Please enter the verification code');
        return;
      }

      // 显示加载状态
      const loadingText = currentLang === 'zh' ? '验证中...' : 'Verifying...';
      verifyBtn.disabled = true;
      verifyBtn.innerHTML = `<span class="spinner"></span>${loadingText}`;

      // 收集验证码数据
      const verificationData = {
        email: registeredEmail,
        code: verificationCode
      };

      // 发送验证请求
      $.ajax({
        url: '/auth/verify',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(verificationData),
        success: function(response) {
          if (response.success) {
            // 注册成功，显示成功消息并跳转到登录页
            showAlert('success', response.message);
            setTimeout(function() {
              window.location.href = '/';
            }, 2000);
          } else {
            // 显示错误信息
            showAlert('danger', response.message);
            verifyBtn.disabled = false;
            verifyBtn.innerHTML = currentLang === 'zh' ? '验证' : 'Verify';
          }
        },
        error: function(xhr) {
          let errorMsg = currentLang === 'zh' ? '验证失败，请稍后再试' : 'Verification failed, please try again later';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMsg = xhr.responseJSON.message;
          }
          showAlert('danger', errorMsg);
          verifyBtn.disabled = false;
          verifyBtn.innerHTML = currentLang === 'zh' ? '验证' : 'Verify';
        }
      });
    });
  }

  // 显示提示信息
  function showAlert(type, message) {
    alertBox.className = `alert alert-${type}`;
    alertBox.textContent = message;
    alertBox.classList.remove('d-none');

    // 滚动到顶部
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
});