mirror of https://github.com/halo-dev/halo
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
parent
f8be914038
commit
568c7d27e5
|
@ -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");
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
const i18nResources = {
|
||||
sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
|
||||
sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
|
||||
sendVerificationCodeSending: `[(#{js.sendVerificationCode.sending})]`,
|
||||
passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`,
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
socialLogin.label=社交登录
|
||||
js.sendVerificationCode.success=发送成功
|
||||
js.sendVerificationCode.failed=发送失败,请稍后再试
|
||||
js.sendVerificationCode.sending=发送中...
|
||||
js.passwordConfirmation.failed=确认密码不匹配
|
||||
|
||||
signupNotice.description=没有账号?
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
socialLogin.label=社交登入
|
||||
js.sendVerificationCode.success=發送成功
|
||||
js.sendVerificationCode.failed=發送失敗,請稍後再試
|
||||
js.sendVerificationCode.sending=發送中...
|
||||
js.passwordConfirmation.failed=確認密碼不匹配
|
||||
|
||||
signupNotice.description=沒有帳號?
|
||||
|
|
Loading…
Reference in New Issue