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 "
pull/7106/head
zly199 2024-12-02 22:19:00 +09:00 committed by GitHub
parent f8be914038
commit 568c7d27e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 9 additions and 1 deletions

View File

@ -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");
}

View File

@ -8,6 +8,7 @@
const i18nResources = {
sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
sendVerificationCodeSending: `[(#{js.sendVerificationCode.sending})]`,
passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`,
};
</script>

View File

@ -1,6 +1,7 @@
socialLogin.label=社交登录
js.sendVerificationCode.success=发送成功
js.sendVerificationCode.failed=发送失败,请稍后再试
js.sendVerificationCode.sending=发送中...
js.passwordConfirmation.failed=确认密码不匹配
signupNotice.description=没有账号?

View File

@ -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?

View File

@ -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?

View File

@ -1,6 +1,7 @@
socialLogin.label=社交登入
js.sendVerificationCode.success=發送成功
js.sendVerificationCode.failed=發送失敗,請稍後再試
js.sendVerificationCode.sending=發送中...
js.passwordConfirmation.failed=確認密碼不匹配
signupNotice.description=沒有帳號?