From 72e6a6d06f785c0f27936fa32cadac28e92c932d Mon Sep 17 00:00:00 2001
From: Amy0104 <97265214+Amy0104@users.noreply.github.com>
Date: Thu, 5 May 2022 14:40:27 +0800
Subject: [PATCH] [Feature][UI Next][V1.0.0-Beta] Add hints to the password
 repeat. (#9888)

---
 .../src/views/password/index.tsx              | 17 ++++++--
 .../src/views/password/use-form.ts            | 40 +++++++++++--------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/views/password/index.tsx b/dolphinscheduler-ui-next/src/views/password/index.tsx
index a2eaf8fb59..44621c46ab 100644
--- a/dolphinscheduler-ui-next/src/views/password/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/password/index.tsx
@@ -24,10 +24,10 @@ import Card from '@/components/card'
 const password = defineComponent({
   name: 'password',
   setup() {
-    const { state, t } = useForm()
+    const { state, rules, t } = useForm()
     const { handleUpdate } = useUpdate(state)
 
-    return { ...toRefs(state), t, handleUpdate }
+    return { ...toRefs(state), t, handleUpdate, rules }
   },
   render() {
     const { t } = this
@@ -37,17 +37,28 @@ const password = defineComponent({
         {{
           default: () => (
             <div>
-              <NForm rules={this.rules} ref='passwordFormRef'>
+              <NForm
+                rules={this.rules}
+                ref='passwordFormRef'
+                model={this.passwordForm}
+              >
                 <NFormItem label={t('password.password')} path='password'>
                   <NInput
                     type='password'
                     placeholder={t('password.password_tips')}
                     v-model={[this.passwordForm.password, 'value']}
+                    onInput={() => {
+                      this.rPasswordFormItemRef.validate({
+                        trigger: 'password-input'
+                      })
+                    }}
                   />
                 </NFormItem>
                 <NFormItem
+                  ref='rPasswordFormItemRef'
                   label={t('password.confirm_password')}
                   path='confirmPassword'
+                  first
                 >
                   <NInput
                     type='password'
diff --git a/dolphinscheduler-ui-next/src/views/password/use-form.ts b/dolphinscheduler-ui-next/src/views/password/use-form.ts
index e7cd6fc43e..4f2753bd12 100644
--- a/dolphinscheduler-ui-next/src/views/password/use-form.ts
+++ b/dolphinscheduler-ui-next/src/views/password/use-form.ts
@@ -24,30 +24,38 @@ export function useForm() {
 
   const state = reactive({
     passwordFormRef: ref(),
+    rPasswordFormItemRef: ref(),
     passwordForm: {
       password: '',
       confirmPassword: ''
     },
-    saving: false,
-    rules: {
-      password: {
+    saving: false
+  })
+
+  const rules = {
+    password: {
+      trigger: ['input', 'blur'],
+      required: true,
+      message: t('password.password_tips')
+    },
+    confirmPassword: [
+      {
         trigger: ['input', 'blur'],
-        validator() {
-          if (state.passwordForm.password === '') {
-            return new Error(t('password.password_tips'))
-          }
-        }
+        required: true,
+        message: t('password.confirm_password_tips')
       },
-      confirmPassword: {
-        trigger: ['input', 'blur'],
-        validator() {
-          if (state.passwordForm.confirmPassword === '') {
-            return new Error(t('password.confirm_password_tips'))
+      {
+        trigger: ['password-input', 'blur', 'input'],
+        message: t('password.two_password_entries_are_inconsistent'),
+        validator: (unuse: any, value: string) => {
+          if (value) {
+            return state.passwordForm.password === value
           }
+          return true
         }
       }
-    } as FormRules
-  })
+    ]
+  } as FormRules
 
-  return { state, t }
+  return { state, rules, t }
 }