[Feature][UI Next][V1.0.0-Beta] Add hints to the password repeat. (#9888)

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'

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: {
+    saving: false
+  })
+
+  const rules = {
     password: {
       trigger: ['input', 'blur'],
-        validator() {
-          if (state.passwordForm.password === '') {
-            return new Error(t('password.password_tips'))
-          }
-        }
+      required: true,
+      message: t('password.password_tips')
     },
-      confirmPassword: {
+    confirmPassword: [
+      {
         trigger: ['input', 'blur'],
-        validator() {
-          if (state.passwordForm.confirmPassword === '') {
-            return new Error(t('password.confirm_password_tips'))
+        required: true,
+        message: 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
-  })
 
-  return { state, t }
+  return { state, rules, t }
 }