feat: improve password confirmation validation for forms (#6807)

#### What type of PR is this? /area core /kind improvement /milestone 2.20.x #### What this PR does / why we need it: 完善部分表单的确定密码校验。 1. 封装单独的校验函数。 2. 完善 i18n。 <img width="676" alt="image" src="https://github.com/user-attachments/assets/af8a4edc-d6ba-419f-b7ba-baa9d488186d"> #### Does this PR introduce a user-facing change? ```release-note None ```
halo-dev · Oct 10, 2024 · 01a781c · 01a781c
1 parent cae871f
commit 01a781c
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 31 deletions.
diff --git a/application/src/main/resources/static/js/main.js b/application/src/main/resources/static/js/main.js
@@ -151,3 +151,19 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 });
+
+function setupPasswordConfirmation(passwordId, confirmPasswordId) {
+    const password = document.getElementById(passwordId);
+    const confirmPassword = document.getElementById(confirmPasswordId);
+
+    function validatePasswordMatch() {
+        if (password.value !== confirmPassword.value) {
+            confirmPassword.setCustomValidity(i18nResources.passwordConfirmationFailed);
+        } else {
+            confirmPassword.setCustomValidity("");
+        }
+    }
+
+    password.addEventListener("change", validatePasswordMatch);
+    confirmPassword.addEventListener("input", validatePasswordMatch);
+}
diff --git a/application/src/main/resources/templates/gateway_modules/common_fragments.html b/application/src/main/resources/templates/gateway_modules/common_fragments.html
@@ -8,6 +8,7 @@
         const i18nResources = {
             sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
             sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
+            passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`
         };
     </script>
 

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

diff --git a/application/src/main/resources/templates/gateway_modules/common_fragments_en.properties b/application/src/main/resources/templates/gateway_modules/common_fragments_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.passwordConfirmation.failed=Password confirmation does not match
 
 signupNotice.description=Don't have an account?
 signupNotice.link=Sign up

diff --git a/application/src/main/resources/templates/gateway_modules/common_fragments_es.properties b/application/src/main/resources/templates/gateway_modules/common_fragments_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.passwordConfirmation.failed=La confirmación de la contraseña no coincide
 
 signupNotice.description=¿No tienes una cuenta?
 signupNotice.link=Regístrate ahora

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

diff --git a/application/src/main/resources/templates/gateway_modules/form_fragments.html b/application/src/main/resources/templates/gateway_modules/form_fragments.html
@@ -153,19 +153,7 @@
 
     <script th:inline="javascript">
         document.addEventListener("DOMContentLoaded", function () {
-            var password = document.getElementById("password"),
-                confirm_password = document.getElementById("confirmPassword");
-
-            function validatePassword() {
-                if (password.value != confirm_password.value) {
-                    confirm_password.setCustomValidity("Passwords Don't Match");
-                } else {
-                    confirm_password.setCustomValidity("");
-                }
-            }
-
-            password.onchange = validatePassword;
-            confirm_password.onkeyup = validatePassword;
+            setupPasswordConfirmation("password", "confirmPassword");
         });
     </script>
 
@@ -269,6 +257,12 @@
     <div class="form-item">
         <button type="submit" th:text="#{form.passwordResetLink.submit}"></button>
     </div>
+
+    <script th:inline="javascript">
+        document.addEventListener("DOMContentLoaded", function () {
+            setupPasswordConfirmation("password", "confirmPassword");
+        });
+    </script>
 </form>
 
 <th:block th:fragment="passwordReset">
@@ -294,4 +288,4 @@
             <button type="submit" th:text="#{form.passwordReset.submit}"></button>
         </div>
     </form>
-</th:block>
+</th:block>
diff --git a/application/src/main/resources/templates/setup.html b/application/src/main/resources/templates/setup.html
@@ -35,7 +35,11 @@ <h1 class="form-title" th:text="#{title}"></h1>
                                 autofocus
                             />
                         </div>
-                        <p class="alert alert-error" th:if="${#fields.hasErrors('siteTitle')}" th:errors="*{siteTitle}"></p>
+                        <p
+                            class="alert alert-error"
+                            th:if="${#fields.hasErrors('siteTitle')}"
+                            th:errors="*{siteTitle}"
+                        ></p>
                     </div>
 
                     <div class="form-item">
@@ -55,7 +59,11 @@ <h1 class="form-title" th:text="#{title}"></h1>
                                 required
                             />
                         </div>
-                        <p class="alert alert-error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></p>
+                        <p
+                            class="alert alert-error"
+                            th:if="${#fields.hasErrors('username')}"
+                            th:errors="*{username}"
+                        ></p>
                     </div>
 
                     <div class="form-item">
@@ -81,7 +89,11 @@ <h1 class="form-title" th:text="#{title}"></h1>
                         <th:block
                             th:replace="~{gateway_modules/input_fragments :: password(id = 'password', name = 'password', required = 'true', minlength = 5, maxlength = 257, enableToggle = true)}"
                         ></th:block>
-                        <p class="alert alert-error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></p>
+                        <p
+                            class="alert alert-error"
+                            th:if="${#fields.hasErrors('password')}"
+                            th:errors="*{password}"
+                        ></p>
                     </div>
 
                     <div class="form-item">
@@ -102,20 +114,8 @@ <h1 class="form-title" th:text="#{title}"></h1>
 
         <script th:inline="javascript">
             document.addEventListener("DOMContentLoaded", function () {
-                var password = document.getElementById("password"),
-                    confirm_password = document.getElementById("confirmPassword");
-
-                function validatePassword() {
-                    if (password.value != confirm_password.value) {
-                        confirm_password.setCustomValidity("Passwords Don't Match");
-                    } else {
-                        confirm_password.setCustomValidity("");
-                    }
-                }
-
-                password.onchange = validatePassword;
-                confirm_password.onkeyup = validatePassword;
+                setupPasswordConfirmation("password", "confirmPassword");
             });
         </script>
     </th:block>
-</html>
+</html>