feat: show sending status of verification emails in signup form. (#7065)

What type of PR is this? /kind feature What this PR does / why we need it: This PR modifies the behavior of the "Send" button for sending verification codes. Now, when the button is clicked, it immediately shows a "Sending..." state, improving user experience by providing instant feedback. After a successful request, a countdown is displayed. This makes the process clearer for users and reduces confusion during waiting time. Which issue(s) this PR fixes: Fixes #7064 Special notes for your reviewer: Please review the implementation for consistent UI behavior and ensure no race conditions occur if the button is clicked multiple times quickly. Does this PR introduce a user-facing change? Improved user experience for sending verification codes: the button now immediately shows "
halo-dev · Dec 2, 2024 · 568c7d2 · 568c7d2
1 parent f8be914
commit 568c7d2
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 1 deletion.
diff --git a/application/src/main/resources/static/js/main.js b/application/src/main/resources/static/js/main.js
@@ -90,16 +90,19 @@ const Toast = (function () {
 function sendVerificationCode(button, sendRequest) {
     let timer;
     const countdown = 60;
+    const originalButtonText = button.textContent;
 
     button.addEventListener("click", () => {
         button.disabled = true;
+        button.textContent = i18nResources.sendVerificationCodeSending;
         sendRequest()
             .then(() => {
                 startCountdown();
                 Toast.success(i18nResources.sendVerificationCodeSuccess);
             })
             .catch((e) => {
                 button.disabled = false;
+                button.textContent = originalButtonText;
                 if (e instanceof Error) {
                     Toast.error(e.message);
                 } else {
@@ -119,7 +122,7 @@ function sendVerificationCode(button, sendRequest) {
                 remainingTime--;
             } else {
                 clearInterval(timer);
-                button.textContent = "Send";
+                button.textContent = originalButtonText;
                 button.disabled = false;
                 button.classList.remove("disabled");
             }

diff --git a/application/src/main/resources/templates/gateway_fragments/common.html b/application/src/main/resources/templates/gateway_fragments/common.html
@@ -8,6 +8,7 @@
         const i18nResources = {
             sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
             sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
+            sendVerificationCodeSending: `[(#{js.sendVerificationCode.sending})]`,
             passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`,
         };
     </script>

diff --git a/application/src/main/resources/templates/gateway_fragments/common.properties b/application/src/main/resources/templates/gateway_fragments/common.properties
@@ -1,6 +1,7 @@
 socialLogin.label=社交登录
 js.sendVerificationCode.success=发送成功
 js.sendVerificationCode.failed=发送失败，请稍后再试
+js.sendVerificationCode.sending=发送中...
 js.passwordConfirmation.failed=确认密码不匹配
 
 signupNotice.description=没有账号？

diff --git a/application/src/main/resources/templates/gateway_fragments/common_en.properties b/application/src/main/resources/templates/gateway_fragments/common_en.properties
@@ -1,6 +1,7 @@
 socialLogin.label=Social Login
 js.sendVerificationCode.success=Sent Successfully
 js.sendVerificationCode.failed=Sending Failed, Please Try Again Later
+js.sendVerificationCode.sending=Sending...
 js.passwordConfirmation.failed=Password confirmation does not match
 
 signupNotice.description=Don't have an account?

diff --git a/application/src/main/resources/templates/gateway_fragments/common_es.properties b/application/src/main/resources/templates/gateway_fragments/common_es.properties
@@ -1,6 +1,7 @@
 socialLogin.label=Inicio de Sesión Social
 js.sendVerificationCode.success=Enviado con éxito
 js.sendVerificationCode.failed=Error al enviar, por favor intente nuevamente más tarde
+js.sendVerificationCode.sending=Enviando...
 js.passwordConfirmation.failed=La confirmación de la contraseña no coincide
 
 signupNotice.description=¿No tienes una cuenta?

diff --git a/application/src/main/resources/templates/gateway_fragments/common_zh_TW.properties b/application/src/main/resources/templates/gateway_fragments/common_zh_TW.properties
@@ -1,6 +1,7 @@
 socialLogin.label=社交登入
 js.sendVerificationCode.success=發送成功
 js.sendVerificationCode.failed=發送失敗，請稍後再試
+js.sendVerificationCode.sending=發送中...
 js.passwordConfirmation.failed=確認密碼不匹配
 
 signupNotice.description=沒有帳號？