From 939d5e691ac7a1b44be5e0c04b13d350689c94fd Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 23 Nov 2022 11:00:19 +0800
Subject: [PATCH] perf: adding the necessary validation to the forms
 (halo-dev/console#701)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/milestone 2.0

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

完善 Console 中表单的验证规则。

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

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

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

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

```release-note
完善 Console 中表单的验证规则。
```
---
 .../components/AttachmentGroupEditingModal.vue         |  2 +-
 .../components/AttachmentPolicyEditingModal.vue        |  2 +-
 .../comments/components/ReplyCreationModal.vue         |  2 +-
 .../pages/components/SinglePageSettingModal.vue        |  6 ++++--
 .../categories/components/CategoryEditingModal.vue     |  7 ++++---
 .../contents/posts/components/PostSettingModal.vue     |  6 ++++--
 .../contents/posts/tags/components/TagEditingModal.vue |  6 ++++--
 .../interface/menus/components/MenuEditingModal.vue    |  2 +-
 .../menus/components/MenuItemEditingModal.vue          |  4 ++--
 .../system/roles/components/RoleEditingModal.vue       |  2 +-
 .../system/users/components/UserEditingModal.vue       | 10 ++++++----
 .../users/components/UserPasswordChangeModal.vue       |  4 ++--
 src/views/system/Setup.vue                             |  2 +-
 13 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue b/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
index 98f29687b..758ad6762 100644
--- a/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
@@ -127,7 +127,7 @@ watch(
         label="名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue b/src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue
index fd246f8be..c570082ba 100644
--- a/src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue
@@ -224,7 +224,7 @@ const onVisibleChange = (visible: boolean) => {
         label="名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKitSchema
         :schema="formSchema"
diff --git a/src/modules/contents/comments/components/ReplyCreationModal.vue b/src/modules/contents/comments/components/ReplyCreationModal.vue
index edc7f2949..e6067ec74 100644
--- a/src/modules/contents/comments/components/ReplyCreationModal.vue
+++ b/src/modules/contents/comments/components/ReplyCreationModal.vue
@@ -151,9 +151,9 @@ watchEffect(() => {
         :id="contentInputId"
         v-model="formState.raw"
         type="textarea"
-        validation="required"
         validation-label="内容"
         :rows="6"
+        validation="required|length:0,1024"
       ></FormKit>
     </FormKit>
     <div class="mt-2 flex justify-end">
diff --git a/src/modules/contents/pages/components/SinglePageSettingModal.vue b/src/modules/contents/pages/components/SinglePageSettingModal.vue
index 49e09e569..8fa59d687 100644
--- a/src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -190,14 +190,14 @@ const { templates } = useThemeCustomTemplates("page");
             label="标题"
             type="text"
             name="title"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.slug"
             label="别名"
             name="slug"
             type="text"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.excerpt.autoGenerate"
@@ -216,6 +216,7 @@ const { templates } = useThemeCustomTemplates("page");
             name="raw"
             label="自定义摘要"
             type="textarea"
+            validation="length:0,1024"
             :rows="5"
           ></FormKit>
         </FormKit>
@@ -277,6 +278,7 @@ const { templates } = useThemeCustomTemplates("page");
             label="封面图"
             type="attachment"
             name="cover"
+            validation="length:0,1024"
           ></FormKit>
         </FormKit>
         <!--TODO: add SEO/Metas/Inject Code form-->
diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index 98b2263db..abe4081ef 100644
--- a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -140,7 +140,7 @@ const { templates } = useThemeCustomTemplates("category");
         name="displayName"
         label="名称"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.slug"
@@ -148,7 +148,7 @@ const { templates } = useThemeCustomTemplates("category");
         name="slug"
         label="别名"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.template"
@@ -163,7 +163,7 @@ const { templates } = useThemeCustomTemplates("category");
         name="cover"
         label="封面图"
         type="attachment"
-        validation="required"
+        validation="length:0,1024"
       ></FormKit>
       <FormKit
         v-model="formState.spec.description"
@@ -171,6 +171,7 @@ const { templates } = useThemeCustomTemplates("category");
         help="需要主题适配以支持"
         label="描述"
         type="textarea"
+        validation="length:0,200"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue
index cb065ff63..216755ee3 100644
--- a/src/modules/contents/posts/components/PostSettingModal.vue
+++ b/src/modules/contents/posts/components/PostSettingModal.vue
@@ -180,14 +180,14 @@ const { templates } = useThemeCustomTemplates("post");
             label="标题"
             type="text"
             name="title"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.slug"
             label="别名"
             name="slug"
             type="text"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.categories"
@@ -219,6 +219,7 @@ const { templates } = useThemeCustomTemplates("post");
             name="raw"
             type="textarea"
             :rows="5"
+            validation="length:0,1024"
           ></FormKit>
         </FormKit>
       </VTabItem>
@@ -277,6 +278,7 @@ const { templates } = useThemeCustomTemplates("post");
             name="cover"
             label="封面图"
             type="attachment"
+            validation="length:0,1024"
           ></FormKit>
         </FormKit>
         <!--TODO: add SEO/Metas/Inject Code form-->
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index bc646a9d7..412b7282d 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -148,7 +148,7 @@ watch(
         name="displayName"
         label="名称"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.slug"
@@ -156,7 +156,7 @@ watch(
         label="别名"
         name="slug"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.color"
@@ -164,6 +164,7 @@ watch(
         help="需要主题适配以支持"
         label="颜色"
         type="color"
+        validation="length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.cover"
@@ -171,6 +172,7 @@ watch(
         help="需要主题适配以支持"
         label="封面图"
         type="attachment"
+        validation="length:0,1024"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/src/modules/interface/menus/components/MenuEditingModal.vue b/src/modules/interface/menus/components/MenuEditingModal.vue
index 91e7d967f..44ae7853f 100644
--- a/src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuEditingModal.vue
@@ -121,7 +121,7 @@ watch(
         label="菜单名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,100"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/src/modules/interface/menus/components/MenuItemEditingModal.vue b/src/modules/interface/menus/components/MenuItemEditingModal.vue
index c07309b0a..b717511d8 100644
--- a/src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -266,7 +266,7 @@ const onMenuItemSourceChange = () => {
         label="名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,100"
       />
 
       <FormKit
@@ -275,7 +275,7 @@ const onMenuItemSourceChange = () => {
         label="链接地址"
         type="text"
         name="href"
-        validation="required"
+        validation="required|length:0,1024"
       />
 
       <FormKit
diff --git a/src/modules/system/roles/components/RoleEditingModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
index 692140bc2..00a76015f 100644
--- a/src/modules/system/roles/components/RoleEditingModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@@ -128,7 +128,7 @@ const handleResetForm = () => {
             "
             label="名称"
             type="text"
-            validation="required"
+            validation="required|length:0,50"
           ></FormKit>
         </FormKit>
       </VTabItem>
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index fe0c6e3d7..de0737b90 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -171,7 +171,7 @@ const handleRawModeChange = () => {
           label="用户名"
           type="text"
           name="name"
-          validation="required"
+          validation="required|alphanumeric|length:0,50"
         ></FormKit>
         <FormKit
           id="displayNameInput"
@@ -179,33 +179,35 @@ const handleRawModeChange = () => {
           label="显示名称"
           type="text"
           name="displayName"
-          validation="required"
+          validation="required|length:0,50"
         ></FormKit>
         <FormKit
           v-model="formState.spec.email"
           label="电子邮箱"
           type="email"
           name="email"
-          validation="required|email"
+          validation="required|email|length:0,100"
         ></FormKit>
         <FormKit
           v-model="formState.spec.phone"
           label="手机号"
           type="text"
           name="phone"
+          validation="length:0,20"
         ></FormKit>
         <FormKit
           v-model="formState.spec.avatar"
           label="头像"
           type="attachment"
           name="avatar"
-          validation="url"
+          validation="url|length:0,1024"
         ></FormKit>
         <FormKit
           v-model="formState.spec.bio"
           label="描述"
           type="textarea"
           name="bio"
+          validation="length:0,2048"
         ></FormKit>
       </FormKit>
     </div>
diff --git a/src/modules/system/users/components/UserPasswordChangeModal.vue b/src/modules/system/users/components/UserPasswordChangeModal.vue
index 1df816d62..ac559ccfd 100644
--- a/src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/src/modules/system/users/components/UserPasswordChangeModal.vue
@@ -111,13 +111,13 @@ const handleChangePassword = async () => {
         label="新密码"
         name="password"
         type="password"
-        validation="required"
+        validation="required|length:0,100"
       ></FormKit>
       <FormKit
         label="确认密码"
         name="password_confirm"
         type="password"
-        validation="required|confirm"
+        validation="required|confirm|length:0,50"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/src/views/system/Setup.vue b/src/views/system/Setup.vue
index 2e0e81913..19ae8730d 100644
--- a/src/views/system/Setup.vue
+++ b/src/views/system/Setup.vue
@@ -121,7 +121,7 @@ onMounted(async () => {
           }"
           type="text"
           placeholder="站点名称"
-          validation="required"
+          validation="required|length:0,100"
         ></FormKit>
       </FormKit>
       <VButton