From d7aba834859d7cc9572eb48742f023aaff62f87c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 10 Oct 2024 10:43:20 +0800
Subject: [PATCH] Refine password validation

---
 .../system/users/components/UserCreationModal.vue  |  9 +++++++--
 .../users/components/UserPasswordChangeModal.vue   | 14 ++++++++------
 ui/src/constants/regex.ts                          |  1 +
 ui/src/locales/en.yaml                             |  1 +
 ui/src/locales/zh-CN.yaml                          |  1 +
 ui/src/locales/zh-TW.yaml                          |  1 +
 .../profile/components/PasswordChangeModal.vue     | 14 ++++++++------
 7 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 ui/src/constants/regex.ts

diff --git a/ui/console-src/modules/system/users/components/UserCreationModal.vue b/ui/console-src/modules/system/users/components/UserCreationModal.vue
index 5084f5e73..5401b0859 100644
--- a/ui/console-src/modules/system/users/components/UserCreationModal.vue
+++ b/ui/console-src/modules/system/users/components/UserCreationModal.vue
@@ -12,6 +12,7 @@ import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import { setFocus } from "@/formkit/utils/focus";
 import { useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
+import { PASSWORD_REGEX } from "@/constants/regex";
 
 const { t } = useI18n();
 const queryClient = useQueryClient();
@@ -112,9 +113,13 @@ const handleCreateUser = async () => {
         :label="$t('core.user.change_password_modal.fields.new_password.label')"
         type="password"
         name="password"
-        validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation="[
+          ['required'],
+          ['length', 5, 257],
+          ['matches', PASSWORD_REGEX],
+        ]"
         :validation-messages="{
-          matches: $t('core.formkit.validation.trim'),
+          matches: $t('core.formkit.validation.password'),
         }"
       ></FormKit>
       <FormKit
diff --git a/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue b/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
index 15ae82248..10b3ae2cf 100644
--- a/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import SubmitButton from "@/components/button/SubmitButton.vue";
+import { PASSWORD_REGEX } from "@/constants/regex";
 import { setFocus } from "@/formkit/utils/focus";
 import type { User } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
@@ -81,9 +82,13 @@ const handleChangePassword = async () => {
         :label="$t('core.user.change_password_modal.fields.new_password.label')"
         name="password"
         type="password"
-        validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation="[
+          ['required'],
+          ['length', 5, 257],
+          ['matches', PASSWORD_REGEX],
+        ]"
         :validation-messages="{
-          matches: $t('core.formkit.validation.trim'),
+          matches: $t('core.formkit.validation.password'),
         }"
       ></FormKit>
       <FormKit
@@ -92,10 +97,7 @@ const handleChangePassword = async () => {
         "
         name="password_confirm"
         type="password"
-        validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
-        :validation-messages="{
-          matches: $t('core.formkit.validation.trim'),
-        }"
+        validation="confirm|required"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/ui/src/constants/regex.ts b/ui/src/constants/regex.ts
new file mode 100644
index 000000000..4933d3ec5
--- /dev/null
+++ b/ui/src/constants/regex.ts
@@ -0,0 +1 @@
+export const PASSWORD_REGEX = /^[A-Za-z0-9!@#$%^&*]+$/;
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index aa46cc72f..981e0a6db 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1664,6 +1664,7 @@ core:
       creation_label: Create {text} tag
     validation:
       trim: Please remove the leading and trailing spaces
+      password: "The password can only use uppercase and lowercase letters (A-Z, a-z), numbers (0-9), and the following special characters: !{'@'}#$%^&*"
     verification_form:
       no_action_defined: "{label} interface not defined"
       verify_success: "{label} successful"
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 145875729..4d9140cd2 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -1557,6 +1557,7 @@ core:
       creation_label: 创建 {text} 标签
     validation:
       trim: 不能以空格开头或结尾
+      password: "密码只能使用大小写字母 (A-Z, a-z)、数字 (0-9)，以及以下特殊字符: !{'@'}#$%^&*"
     verification_form:
       no_action_defined: 未定义{label}接口
       verify_success: "{label}成功"
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 4f3c2d022..6b591117d 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -1535,6 +1535,7 @@ core:
       creation_label: 創建 {text} 標籤
     validation:
       trim: 不能以空格開頭或結尾
+      password: "密碼只能使用大小寫字母 (A-Z, a-z)、數字 (0-9)，以及以下特殊字符: !{'@'}#$%^&*"
     verification_form:
       no_action_defined: 未定義{label}介面
       verify_success: "{label}成功"
diff --git a/ui/uc-src/modules/profile/components/PasswordChangeModal.vue b/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
index 5f5ed02f9..3414a0973 100644
--- a/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
+++ b/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import SubmitButton from "@/components/button/SubmitButton.vue";
+import { PASSWORD_REGEX } from "@/constants/regex";
 import { setFocus } from "@/formkit/utils/focus";
 import { consoleApiClient } from "@halo-dev/api-client";
 import { VButton, VModal, VSpace } from "@halo-dev/components";
@@ -81,9 +82,13 @@ const handleChangePassword = async () => {
         "
         name="password"
         type="password"
-        validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation="[
+          ['required'],
+          ['length', 5, 257],
+          ['matches', PASSWORD_REGEX],
+        ]"
         :validation-messages="{
-          matches: $t('core.formkit.validation.trim'),
+          matches: $t('core.formkit.validation.password'),
         }"
       ></FormKit>
       <FormKit
@@ -94,10 +99,7 @@ const handleChangePassword = async () => {
         "
         name="password_confirm"
         type="password"
-        validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
-        :validation-messages="{
-          matches: $t('core.formkit.validation.trim'),
-        }"
+        validation="confirm|required"
       ></FormKit>
     </FormKit>
     <template #footer>