等待后端更新接口

public/js/auth-pages.js

@@ -229,6 +229,33 @@
     button.setAttribute('aria-busy', busy ? 'true' : 'false');
   }
 
+  function getApiStateType(error) {
+    return Number(error && (error.status || error.code)) === 403 ? 'forbidden' : 'error';
+  }
+
+  function setFormStatus(form, message, type) {
+    var status = query('[data-auth-form-status]', form);
+
+    if (!status) return;
+    if (!message) {
+      status.innerHTML = '';
+      return;
+    }
+    if (root.ProfileUI && root.ProfileUI.setApiState) {
+      root.ProfileUI.setApiState(status, type || 'error', message);
+      return;
+    }
+    status.textContent = message;
+  }
+
+  function setSubmitPending(button, pending, pendingLabel) {
+    if (!button) return;
+    if (!button.dataset.defaultLabel) button.dataset.defaultLabel = button.textContent;
+    button.disabled = Boolean(pending);
+    button.textContent = pending ? pendingLabel : button.dataset.defaultLabel;
+    button.setAttribute('aria-busy', pending ? 'true' : 'false');
+  }
+
   function showMessage(message) {
     if (root.MessageUtil && root.MessageUtil.show) {
       root.MessageUtil.show(message);
@@ -292,14 +319,6 @@
     return '';
   }
 
-  function validateBeforeSubmit(formType, values) {
-    var message = validateAuthValues(formType, values);
-
-    if (!message) return true;
-    showMessage(message);
-    return false;
-  }
-
   function validatePhoneOnly(values) {
     var data = values || {};
 
@@ -308,11 +327,13 @@
     return '';
   }
 
-  function validateBeforeSendCode(values) {
-    var message = validatePhoneOnly(values);
+  function validateForm(form, formType, values) {
+    var message = formType === 'send-code'
+      ? validatePhoneOnly(values)
+      : validateAuthValues(formType, values);
 
     if (!message) return true;
-    showMessage(message);
+    setFormStatus(form, message, 'error');
     return false;
   }
 
@@ -350,21 +371,25 @@
     var values = readForm(form);
 
     if (!api) {
-      showMessage('接口初始化失败，请刷新后重试');
+      setFormStatus(form, '接口初始化失败，请刷新后重试', 'error');
+      return;
+    }
+    if (!validateForm(form, 'login', values)) return;
+    if (!await ensureCaptcha(form, getFormCaptchaOperation(form, 'login'), values.phone)) {
+      setFormStatus(form, '请完成验证后再提交登录。', 'error');
       return;
     }
-    if (!validateBeforeSubmit('login', values)) return;
-    if (!await ensureCaptcha(form, getFormCaptchaOperation(form, 'login'), values.phone)) return;
     values = readForm(form);
     values.validToken = takeCaptchaToken(form);
-    setBusy(button, true);
+    setSubmitPending(button, true, '正在登录…');
+    setFormStatus(form, '正在验证账号…', 'loading');
     try {
       await api.login(buildLoginBody(values));
       root.location.href = await resolvePostLoginUrl(api, 'login');
     } catch (error) {
-      showMessage(error.message || '登录失败');
+      setFormStatus(form, error.message || '登录失败', getApiStateType(error));
     } finally {
-      setBusy(button, false);
+      setSubmitPending(button, false, '正在登录…');
     }
   }
 
@@ -374,18 +399,19 @@
     var values = readForm(form);
 
     if (!api) {
-      showMessage('接口初始化失败，请刷新后重试');
+      setFormStatus(form, '接口初始化失败，请刷新后重试', 'error');
       return;
     }
-    if (!validateBeforeSubmit('sms-login', values)) return;
-    setBusy(button, true);
+    if (!validateForm(form, 'sms-login', values)) return;
+    setSubmitPending(button, true, '正在登录…');
+    setFormStatus(form, '正在验证短信验证码…', 'loading');
     try {
       await api.loginBySms(buildSmsLoginBody(values));
       root.location.href = await resolvePostLoginUrl(api, 'sms-login');
     } catch (error) {
-      showMessage(error.message || '短信登录失败');
+      setFormStatus(form, error.message || '短信登录失败', getApiStateType(error));
     } finally {
-      setBusy(button, false);
+      setSubmitPending(button, false, '正在登录…');
     }
   }
 
@@ -395,18 +421,19 @@
     var values = readForm(form);
 
     if (!api) {
-      showMessage('接口初始化失败，请刷新后重试');
+      setFormStatus(form, '接口初始化失败，请刷新后重试', 'error');
       return;
     }
-    if (!validateBeforeSubmit('register', values)) return;
-    setBusy(button, true);
+    if (!validateForm(form, 'register', values)) return;
+    setSubmitPending(button, true, '正在注册…');
+    setFormStatus(form, '正在创建账号…', 'loading');
     try {
       await api.register(buildRegisterBody(values));
       root.location.href = getSuccessUrl('register');
     } catch (error) {
-      showMessage(error.message || '注册失败');
+      setFormStatus(form, error.message || '注册失败', getApiStateType(error));
     } finally {
-      setBusy(button, false);
+      setSubmitPending(button, false, '正在注册…');
     }
   }
 
@@ -419,26 +446,31 @@
     var operationCode = getFormCaptchaOperation(form, formType);
 
     if (!api) {
-      showMessage('接口初始化失败，请刷新后重试');
+      setFormStatus(form, '接口初始化失败，请刷新后重试', 'error');
+      return;
+    }
+    if (!validateForm(form, 'send-code', values)) return;
+    if (!await ensureCaptcha(form, operationCode, values.phone)) {
+      setFormStatus(form, '请完成验证后再获取验证码。', 'error');
       return;
     }
-    if (!validateBeforeSendCode(values)) return;
-    if (!await ensureCaptcha(form, operationCode, values.phone)) return;
 
     values = readForm(form);
     values.validToken = takeCaptchaToken(form);
 
     setBusy(button, true);
+    setFormStatus(form, '正在发送验证码…', 'loading');
     try {
       await api.sendSmsCode(operationCode, {
         phone: values.phone,
         validToken: values.validToken || ''
       });
       showMessage('验证码已发送');
+      setFormStatus(form, '');
       setBusy(button, false);
       startSmsCooldown(button);
     } catch (error) {
-      showMessage(error.message || '验证码发送失败');
+      setFormStatus(form, error.message || '验证码发送失败', getApiStateType(error));
       setBusy(button, false);
     }
   }
@@ -449,19 +481,20 @@
     var values = readForm(form);
 
     if (!api) {
-      showMessage('接口初始化失败，请刷新后重试');
+      setFormStatus(form, '接口初始化失败，请刷新后重试', 'error');
       return;
     }
-    if (!validateBeforeSubmit('password-reset', values)) return;
-    setBusy(button, true);
+    if (!validateForm(form, 'password-reset', values)) return;
+    setSubmitPending(button, true, '正在重设…');
+    setFormStatus(form, '正在重设密码…', 'loading');
     try {
       await api.resetPassword(buildPasswordResetBody(values));
       showMessage('密码已重设，请重新登录');
       root.location.href = getSuccessUrl('password-reset');
     } catch (error) {
-      showMessage(error.message || '重设密码失败');
+      setFormStatus(form, error.message || '重设密码失败', getApiStateType(error));
     } finally {
-      setBusy(button, false);
+      setSubmitPending(button, false, '正在重设…');
     }
   }