github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

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
```
pull/6813/head^2
Ryan Wang 2024-10-10 15:17:00 +08:00 committed by GitHub
parent cae871f9e6
commit 01a781c54a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
application/src/main/resources/static/js/main.js
View File

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

1
application/src/main/resources/templates/gateway_modules/common_fragments.html
View File

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

1
application/src/main/resources/templates/gateway_modules/common_fragments.properties
View File

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

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

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

1
application/src/main/resources/templates/gateway_modules/common_fragments_zh_TW.properties
View File

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

22
application/src/main/resources/templates/gateway_modules/form_fragments.html
View File

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

34
application/src/main/resources/templates/setup.html
View File

@ -35,7 +35,11 @@
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 @@
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 @@
<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 @@
<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>