fix(frontend): 密码未通过校验规则禁止提交 #8250

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3676,5 +3676,6 @@
   "冷/热节点": "冷/热节点",
   "冷_热节点规格": "冷_热节点规格",
   "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
+  "密码不符合规则": "密码不符合规则",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue

@@ -71,6 +71,10 @@
     buttonDisabledTip?: string;
   }
 
+  interface Emits {
+    (e: 'verifyResult', isPass: boolean): void;
+  }
+
   interface Exposes {
     getEncyptPassword: () => string;
     validate: () => Promise<boolean>;
@@ -82,12 +86,14 @@
     buttonDisabledTip: '',
   });
 
-  const { t } = useI18n();
+  const emits = defineEmits<Emits>();
 
   const modelValue = defineModel<string>('modelValue', {
     default: '',
   });
 
+  const { t } = useI18n();
+
   let tippyInstance: Instance;
   let publicKey = '';
   let passwordPolicyMemo = {} as PasswordPolicy['rule'];
@@ -256,6 +262,7 @@
       password: getEncyptPassword(),
     });
     tippyInstance.show();
+    emits('verifyResult', isStrength);
     return isStrength;
   };
   const debounceVerifyPassword = _.debounce(verifyPassword, 300);
@@ -294,6 +301,10 @@
     tippyInstance.hide();
   };
 
+  watch(modelValue, () => {
+    debounceVerifyPassword();
+  });
+
   onUnmounted(() => {
     tippyInstance.destroy();
   });

dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue

@@ -54,7 +54,8 @@
         <PasswordInput
           ref="passwordRef"
           v-model="state.formdata.password"
-          :db-type="accountType" />
+          :db-type="dbTypeMap[accountType]"
+          @verify-result="verifyResult" />
         <p style="color: #ff9c01">
           {{ t('平台不会保存密码，请自行保管好。') }}
           <BkButton
@@ -74,7 +75,12 @@
     </BkForm>
     <template #footer>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(state.formdata.password) || passwordIsPass,
+        }"
         class="mr-8"
+        :disabled="!passwordIsPass"
         :loading="state.isLoading"
         theme="primary"
         @click="handleSubmit">
@@ -98,7 +104,7 @@
 
   import { useCopy } from '@hooks';
 
-  import { AccountTypes } from '@common/const';
+  import { AccountTypes, DBTypes } from '@common/const';
 
   import PasswordInput from '@views/db-manage/common/password-input/Index.vue';
 
@@ -123,6 +129,13 @@
 
   const { t } = useI18n();
 
+  const dbTypeMap = {
+    [AccountTypes.MYSQL]: DBTypes.MYSQL,
+    [AccountTypes.TENDBCLUSTER]: DBTypes.TENDBCLUSTER,
+    [AccountTypes.SQLSERVER]: DBTypes.SQLSERVER,
+    [AccountTypes.MONGODB]: DBTypes.MONGODB,
+  };
+
   const state = reactive({
     formdata: {
       password: '',
@@ -133,6 +146,7 @@
   });
   const accountRef = ref();
   const passwordRef = ref<InstanceType<typeof PasswordInput>>();
+  const passwordIsPass = ref(false);
 
   const defaultUserPlaceholder = t('由_1_~_32_位字母_数字_下划线(_)_点(.)_减号(-)字符组成以字母或数字开头');
   const userPlaceholder = computed(() => {
@@ -177,6 +191,10 @@
     copy(state.formdata.password);
   };
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   /**
    * 提交表单数据
    */

dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue

@@ -117,7 +117,8 @@
             <PasswordInput
               ref="passwordRef"
               v-model="formData.details.redis_pwd"
-              :db-type="DBTypes.REDIS" />
+              :db-type="DBTypes.REDIS"
+              @verify-result="verifyResult" />
           </BkFormItem>
           <BkFormItem
             v-if="!isAppend"
@@ -184,7 +185,12 @@
     </div>
     <template #action>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(formData.details.redis_pwd) || passwordIsPass,
+        }"
         class="w-88"
+        :disabled="!passwordIsPass"
         :loading="baseState.isSubmitting"
         theme="primary"
         @click="handleSubmit">
@@ -277,6 +283,7 @@
     cityCode: '',
     cityName: '',
   });
+  const passwordIsPass = ref(false);
 
   const formData = reactive(initData());
 
@@ -369,6 +376,10 @@
     },
   );
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
   const handleChangeBiz = (info: BizItem) => {

dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue

@@ -97,7 +97,8 @@
             <PasswordInput
               ref="passwordRef"
               v-model="state.formdata.details.proxy_pwd"
-              :db-type="DBTypes.REDIS" />
+              :db-type="DBTypes.REDIS"
+              @verify-result="verifyResult" />
           </BkFormItem>
           <BkFormItem
             :label="t('服务器选择')"
@@ -334,7 +335,12 @@
     </div>
     <template #action>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(state.formdata.details.proxy_pwd) || passwordIsPass,
+        }"
         class="w-88"
+        :disabled="!passwordIsPass"
         :loading="baseState.isSubmitting"
         theme="primary"
         @click="handleSubmit">
@@ -487,6 +493,7 @@
     id: '' as number | string,
     name: '',
   });
+  const passwordIsPass = ref(false);
 
   const state = reactive({
     formdata: initData(),
@@ -583,6 +590,10 @@
   });
   // const isDefaultCity = computed(() => state.formdata.details.city_code === 'default');
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
 
   const getDispalyCapSpecs = (item: CapSepcs) => {

dbm-ui/frontend/src/views/temporary-paassword-modify/index/Index.vue

@@ -73,7 +73,8 @@
             v-model="formData.password"
             :button-disabled="!instanceDbType"
             :button-disabled-tip="t('请先添加实例')"
-            :db-type="instanceDbType" />
+            :db-type="instanceDbType"
+            @verify-result="verifyResult" />
         </BkFormItem>
         <ValidDuration
           v-model="formData.validDuration"
@@ -84,7 +85,12 @@
       v-if="!submitting && !submitted"
       #action>
       <BkButton
+        v-bk-tooltips="{
+          content: t('密码不符合规则'),
+          disabled: !Boolean(formData.password) || passwordIsPass,
+        }"
         class="w-88"
+        :disabled="!passwordIsPass"
         theme="primary"
         @click="submitValidator">
         {{ t('提交') }}
@@ -130,12 +136,15 @@
     validDurationType: 'day',
   });
 
+  const passwordIsPass = ref(false);
   const submitted = ref(false);
   const submitLength = ref(0);
   const formRef = ref();
   const submitRoleMap = shallowRef<Record<string, string>>({});
   const formData = reactive(createDefaultData());
   const instanceDbType = ref<DBTypes>();
+  const rootId = ref('');
+  const modifyResult = ref<ModifyAdminPassword>('');
 
   watch(
     formData,
@@ -159,9 +168,6 @@
     },
   );
 
-  const rootId = ref('');
-  const modifyResult = ref<ModifyAdminPassword>('');
-
   // 轮询
   const { isActive, resume, pause } = useTimeoutPoll(() => {
     queryAsyncModifyResultRun({
@@ -204,6 +210,10 @@
     handleSubmit(formData.instanceList);
   };
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   const handleSubmit = (
     instanceList: {
       ip: string;