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 "

application/src/main/resources/static/js/main.js

@@ -90,9 +90,11 @@ 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();
@@ -100,6 +102,7 @@ function sendVerificationCode(button, sendRequest) {
             })
             .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");
             }

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>

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=没有账号？

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?

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?

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=沒有帳號？