feat: Show "Sending..." state immediately after clicking the send but… #7065

zly199 · 2024-11-22T14:43:20Z

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 "

…ton, start countdown only after successful request

f2c-ci-robot · 2024-11-22T14:43:24Z

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

f2c-ci-robot · 2024-11-22T14:43:26Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign guqing for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

CLAassistant · 2024-11-22T14:44:00Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

ruibaby · 2024-11-25T02:35:19Z

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

        sendRequest()
            .then(() => {
                startCountdown();
                Toast.success(i18nResources.sendVerificationCodeSuccess);
            })
            .catch((e) => {
                button.disabled = false;
+                button.textContent = "Send";


完善 i18n，或者在首次更改 button.textContent 之前缓存一下按钮的原始文字（推荐），比如：

function sendVerificationCode(button, sendRequest) { let timer; const countdown = 60; let originalButtonText = button.textContent; button.addEventListener("click", () => { button.disabled = true; button.textContent = "Sending..."; sendRequest() .then(() => { startCountdown(); Toast.success(i18nResources.sendVerificationCodeSuccess); }) .catch((e) => { button.disabled = false; button.textContent = originalButtonText; ...

下面的 startCountdown 方法中设置 button.textContent 似乎也没有 i18n，建议帮忙修改下。

已做修改, 麻烦再看下了.

ruibaby · 2024-11-25T02:36:52Z

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

@@ -93,13 +93,15 @@ function sendVerificationCode(button, sendRequest) {

    button.addEventListener("click", () => {
        button.disabled = true;
+        button.textContent = "Sending...";


完善 i18n。

已做修改, 麻烦再看下了.

sonarcloud · 2024-11-27T01:19:36Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

ruibaby · 2024-11-28T08:01:23Z

看了一下最新的代码，感觉改动有点复杂了，并且 sendVerificationCode 这个方法不止是注册这里在用，如果修改了参数，其他使用的地方也需要修改。

我这里尝试修改了一下，但是你是用 main 分支提交的 PR，我这边没有办法直接推送到这个 PR，所以下面贴出改动，你可以参考下。

diff --git a/application/src/main/resources/static/js/main.js b/application/src/main/resources/static/js/main.js
index 241caa097..269b35a52 100644
--- a/application/src/main/resources/static/js/main.js
+++ b/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");
             }
diff --git a/application/src/main/resources/templates/gateway_fragments/common.html b/application/src/main/resources/templates/gateway_fragments/common.html
index 127692d41..d95fa4020 100644
--- 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>
@@ -209,4 +210,4 @@
             <span th:text="#{returnToSite}"></span>
         </a>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/application/src/main/resources/templates/gateway_fragments/common.properties b/application/src/main/resources/templates/gateway_fragments/common.pro
perties
index 22053bc75..526bdbe51 100644
--- 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
index 70af7ab8d..ef1ab42f4 100644
--- 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
index db6c8cef4..e786b10d3 100644
--- 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/comm
on_zh_TW.properties
index 63129e166..c06c3afd1 100644
--- 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=沒有帳號？

ruibaby · 2024-11-28T08:24:41Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.You have signed the CLA already but the status is still pending? Let us recheck it.

合并之前需要签署一下 CLA。

feat: Show "Sending..." state immediately after clicking the send but…

c9f30a2

…ton, start countdown only after successful request

f2c-ci-robot bot added the kind/feature Categorizes issue or PR as related to a new feature. label Nov 22, 2024

f2c-ci-robot bot requested review from LIlGG and ruibaby November 22, 2024 14:43

f2c-ci-robot bot added the do-not-merge/release-note-label-needed Indicates that a PR should not merge because it's missing one of the release note labels. label Nov 22, 2024

ruibaby requested changes Nov 25, 2024

View reviewed changes

zly199 added 2 commits November 26, 2024 20:59

feat: make name field optional during registration

14a6288

Merge branch 'halo-dev:main' into main

7e23c66

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Show "Sending..." state immediately after clicking the send but… #7065

feat: Show "Sending..." state immediately after clicking the send but… #7065

zly199 commented Nov 22, 2024

f2c-ci-robot bot commented Nov 22, 2024

f2c-ci-robot bot commented Nov 22, 2024

CLAassistant commented Nov 22, 2024

ruibaby Nov 25, 2024

ruibaby Nov 25, 2024

zly199 Nov 26, 2024

ruibaby Nov 25, 2024

zly199 Nov 26, 2024

sonarcloud bot commented Nov 27, 2024

ruibaby commented Nov 28, 2024

ruibaby commented Nov 28, 2024

feat: Show "Sending..." state immediately after clicking the send but… #7065

Are you sure you want to change the base?

feat: Show "Sending..." state immediately after clicking the send but… #7065

Conversation

zly199 commented Nov 22, 2024

f2c-ci-robot bot commented Nov 22, 2024

f2c-ci-robot bot commented Nov 22, 2024

CLAassistant commented Nov 22, 2024

ruibaby Nov 25, 2024

Choose a reason for hiding this comment

ruibaby Nov 25, 2024

Choose a reason for hiding this comment

zly199 Nov 26, 2024

Choose a reason for hiding this comment

ruibaby Nov 25, 2024

Choose a reason for hiding this comment

zly199 Nov 26, 2024

Choose a reason for hiding this comment

sonarcloud bot commented Nov 27, 2024

Quality Gate passed

ruibaby commented Nov 28, 2024

ruibaby commented Nov 28, 2024