fix(frontend): 临时密码修改优化 #8250

# Reviewed, transaction id: 26128
TencentBlueKing · Dec 9, 2024 · 4ed677c · 4ed677c
1 parent 2b28220
commit 4ed677c
Show file tree

Hide file tree

Showing 17 changed files with 618 additions and 587 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3675,6 +3675,8 @@
   "冷/热节点": "冷/热节点",
   "冷_热节点规格": "冷_热节点规格",
   "不允许使用特殊账号名称n": "不允许使用特殊账号名称 {n}",
+  "密码不符合要求": "密码不符合要求",
+  "错误日志": "错误日志",
   "这行勿动！新增翻译请在上一行添加！": ""
 
 }
diff --git a/dbm-ui/frontend/src/services/source/permission.ts b/dbm-ui/frontend/src/services/source/permission.ts
@@ -88,14 +88,7 @@ export const modifyAdminPassword = (params: {
   }[];
   // 是否异步
   is_async?: boolean;
-}) =>
-  http.post<
-    | {
-        success: AdminPasswordResultItem[] | null;
-        fail: AdminPasswordResultItem[] | null;
-      }
-    | string // 异步修改时返回root_id
-  >(`${path}/modify_admin_password/`, params);
+}) => http.post<string>(`${path}/modify_admin_password/`, params);
 
 /**
  * 查询生效实例密码(admin)
@@ -118,11 +111,11 @@ export const queryAdminPassword = (params: {
  */
 export const queryAsyncModifyResult = (params: { root_id: string }) =>
   http.post<{
-    data: {
-      success: AdminPasswordResultItem[] | null;
-      fail: AdminPasswordResultItem[] | null;
-    };
     status: string;
+    error?: string;
+    success?: AdminPasswordResultItem[];
+    fail?: AdminPasswordResultItem[];
+    result?: boolean;
   }>(`${path}/query_async_modify_result/`, params);
 
 /**

diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/password-input/Index.vue b/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();
   });

diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/common/AccountCreate.vue b/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';
 
@@ -127,6 +133,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: '',
@@ -137,6 +150,7 @@
   });
   const accountRef = ref();
   const passwordRef = ref<InstanceType<typeof PasswordInput>>();
+  const passwordIsPass = ref(false);
 
   const defaultUserPlaceholder = t('由_1_~_32_位字母_数字_下划线(_)_点(.)_减号(-)字符组成以字母或数字开头');
   let validValue = '';
@@ -198,6 +212,10 @@
     copy(state.formdata.password);
   };
 
+  const verifyResult = (isPass: boolean) => {
+    passwordIsPass.value = isPass;
+  };
+
   /**
    * 提交表单数据
    */

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue b/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) => {

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue b/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(),
@@ -589,6 +596,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) => {