From ec2ab632fcf3d80afdf1139a0395b34c140a3a9b Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 19 Jul 2023 19:48:12 +0800
Subject: [PATCH] feat: refine validation for password field (#4257)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind feature
/milestone 2.8.x

#### What this PR does / why we need it:

在 Console 端关于用户密码输入的部分添加基本的验证，目前的规则是：

1. 必填，且不能全为空格符
2. 长度为 5-100
3. 字符串前后不能有空格

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4203

#### Special notes for your reviewer:

按照以上规则测试即可。

#### Does this PR introduce a user-facing change?

```release-note
Console 端关于用户密码输入的部分添加基本的验证
```
---
 console/src/components/signup/SignupForm.vue           | 10 ++++++++--
 console/src/locales/en.yaml                            |  2 ++
 console/src/locales/zh-CN.yaml                         |  2 ++
 console/src/locales/zh-TW.yaml                         |  2 ++
 .../system/users/components/UserCreationModal.vue      |  5 ++++-
 .../users/components/UserPasswordChangeModal.vue       | 10 ++++++++--
 6 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/console/src/components/signup/SignupForm.vue b/console/src/components/signup/SignupForm.vue
index ef8db20d2..88bdd092b 100644
--- a/console/src/components/signup/SignupForm.vue
+++ b/console/src/components/signup/SignupForm.vue
@@ -125,7 +125,10 @@ const inputClasses = {
       :validation-label="$t('core.signup.fields.password.placeholder')"
       :classes="inputClasses"
       type="password"
-      validation="required|length:0,100"
+      validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+      :validation-messages="{
+        matches: $t('core.formkit.validation.trim'),
+      }"
     >
     </FormKit>
     <FormKit
@@ -134,7 +137,10 @@ const inputClasses = {
       :validation-label="$t('core.signup.fields.password_confirm.placeholder')"
       :classes="inputClasses"
       type="password"
-      validation="required|confirm|length:0,100"
+      validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
+      :validation-messages="{
+        matches: $t('core.formkit.validation.trim'),
+      }"
     >
     </FormKit>
   </FormKit>
diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
index cc000f595..716016382 100644
--- a/console/src/locales/en.yaml
+++ b/console/src/locales/en.yaml
@@ -1105,6 +1105,8 @@ core:
       creation_label: "Create {text} category"
     tag_select:
       creation_label: "Create {text} tag"
+    validation:
+      trim: Please remove the leading and trailing spaces
   common:
     buttons:
       save: Save
diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
index f2326d10b..a0e6d6235 100644
--- a/console/src/locales/zh-CN.yaml
+++ b/console/src/locales/zh-CN.yaml
@@ -1105,6 +1105,8 @@ core:
       creation_label: 创建 {text} 分类
     tag_select:
       creation_label: 创建 {text} 标签
+    validation:
+      trim: 不能以空格开头或结尾
   common:
     buttons:
       save: 保存
diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
index 1756713d2..ba21806f7 100644
--- a/console/src/locales/zh-TW.yaml
+++ b/console/src/locales/zh-TW.yaml
@@ -1105,6 +1105,8 @@ core:
       creation_label: 創建 {text} 分類
     tag_select:
       creation_label: 創建 {text} 標籤
+    validation:
+      trim: 不能以空格開頭或結尾
   common:
     buttons:
       save: 保存
diff --git a/console/src/modules/system/users/components/UserCreationModal.vue b/console/src/modules/system/users/components/UserCreationModal.vue
index 42ba92a1d..b4f6d7c2d 100644
--- a/console/src/modules/system/users/components/UserCreationModal.vue
+++ b/console/src/modules/system/users/components/UserCreationModal.vue
@@ -161,7 +161,10 @@ const handleCreateUser = async () => {
         :label="$t('core.user.change_password_modal.fields.new_password.label')"
         type="password"
         name="password"
-        validation="required|length:0,100"
+        validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation-messages="{
+          matches: $t('core.formkit.validation.trim'),
+        }"
       ></FormKit>
       <FormKit
         v-model="selectedRole"
diff --git a/console/src/modules/system/users/components/UserPasswordChangeModal.vue b/console/src/modules/system/users/components/UserPasswordChangeModal.vue
index 6ecf37808..a00f8b049 100644
--- a/console/src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/console/src/modules/system/users/components/UserPasswordChangeModal.vue
@@ -112,7 +112,10 @@ const handleChangePassword = async () => {
         :label="$t('core.user.change_password_modal.fields.new_password.label')"
         name="password"
         type="password"
-        validation="required|length:0,100"
+        validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation-messages="{
+          matches: $t('core.formkit.validation.trim'),
+        }"
       ></FormKit>
       <FormKit
         :label="
@@ -120,7 +123,10 @@ const handleChangePassword = async () => {
         "
         name="password_confirm"
         type="password"
-        validation="required|confirm|length:0,100"
+        validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation-messages="{
+          matches: $t('core.formkit.validation.trim'),
+        }"
       ></FormKit>
     </FormKit>
     <template #footer>