fix: 登录配置交互优化 #1643 (#1677)

TencentBlueKing · Apr 28, 2024 · a23b00e · a23b00e
1 parent dab6f8e
commit a23b00e
Show file tree

Hide file tree

Showing 5 changed files with 391 additions and 306 deletions.
diff --git a/src/pages/src/http/fetch/index.ts b/src/pages/src/http/fetch/index.ts
@@ -46,7 +46,6 @@ const axiosInstance = axios.create({
   xsrfCookieName: window.CSRF_COOKIE_NAME,
   xsrfHeaderName: 'X-CSRFToken',
   headers: {
-    'X-CSRFToken': Cookies.get(window.CSRF_COOKIE_NAME),
     'x-requested-with': 'XMLHttpRequest',
   },
 });
@@ -111,6 +110,14 @@ const handleReject = (error: AxiosError, config: Record<string, any>) => {
   return Promise.reject(error);
 };
 
+// 更新axios实例的cookie
+function updateAxiosInstance() {
+  const csrfToken = Cookies.get(window.CSRF_COOKIE_NAME);
+  if (csrfToken !== undefined) {
+    axiosInstance.defaults.headers.common['X-CSRFToken'] = csrfToken;
+  }
+}
+
 methods.forEach((method) => {
   Object.defineProperty(http, method, {
     get() {
@@ -122,6 +129,8 @@ methods.forEach((method) => {
           ? axiosInstance[method as Methods]<ServiceResponseData<T>>(fetchURL, payload, config)
           : axiosInstance[method as Methods]<ServiceResponseData<T>>(fetchURL, config);
 
+        updateAxiosInstance();
+
         return axiosRequest
           .then(response => handleResponse<T>({
             response,

diff --git a/src/pages/src/views/setting/LoginSetting.vue b/src/pages/src/views/setting/LoginSetting.vue
@@ -10,7 +10,9 @@
             class="login-item"
             v-for="(item, index) in idpsPlugins"
             :key="index">
-            <div class="login-content">
+            <div
+              :class="['login-content',
+                       { 'login-content-disabled': currentDataSource.plugin_id !== 'local' && item.id === 'local' }]">
               <div
                 :class="['box', { 'disabled-box': item.status === 'disabled' && !item.idp_id }]"
                 v-bk-tooltips="{
@@ -107,9 +109,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"> import { h, inject, onMounted, reactive, ref } from 'vue';
 import { bkTooltips as vBkTooltips, InfoBox } from 'bkui-vue';
-import { h, inject, onMounted, reactive, ref } from 'vue';
 
 import Local from './auth-config/Local.vue';
 import LocalView from './auth-config/LocalView.vue';
@@ -183,20 +184,12 @@ const detailsConfig = reactive({
 const authDetails = ref({});
 
 const handleClickActive = (item) => {
-  if (!currentDataSource.value?.plugin_id) {
-    InfoBox({
-      title: t('暂未配置数据源'),
-      confirmText: t('去配置'),
-      onConfirm: () => {
-        router.push({ name: 'dataSource' });
-      },
-    });
-    return;
-  };
+  if (currentDataSource.value.plugin_id !== 'local' && item.id === 'local') return;
   if (!item.idp_id) {
     detailsConfig.isEdit = true;
     detailsConfig.title = `${item.name}${t('登录配置')}`;
   } else {
+    detailsConfig.isEdit = false;
     detailsConfig.title = `${item.name}${t('登录详情')}`;
   }
   authDetails.value = item;
@@ -236,7 +229,7 @@ const handleBeforeClose = async () => {
 };
 
 // 本地认证源配置成功
-const localSuccess = () => {
+const localSuccess = (status: boolean) => {
   window.changeInput = false;
   detailsConfig.show = false;
   InfoBox({
@@ -247,17 +240,21 @@ const localSuccess = () => {
         height: '44px',
         background: '#F5F7FA',
         lineHeight: '44px',
+        display: status ? 'flex' : 'none',
+        alignItems: 'center',
       },
     }, [
       h('i', {
         class: 'user-icon icon-info-i',
+        style: {
+          margin: '0 8px 0 12px',
+        },
       }),
       h('span', {
         style: {
           fontSize: '12px',
-          marginLeft: '8px',
         },
-      }, t('账号重置需要一定时间，账号生效以最终邮件通知为准')),
+      }, t('账号陆续生效中，请以用户最终收到的邮件为准')),
     ]),
     dialogType: 'confirm',
     footerAlign: 'center',
@@ -367,6 +364,12 @@ const handleDataSource = () => {
           text-align: center;
           border-radius: 2px;
 
+          .login-content-disabled {
+            &:hover {
+              background: #F5F7FA !important;
+            }
+          }
+
           .login-content {
             position: relative;
             height: 80px;

diff --git a/src/pages/src/views/setting/auth-config/Local.vue b/src/pages/src/views/setting/auth-config/Local.vue
@@ -244,7 +244,7 @@
 <script setup lang="ts">
 import { InfoBox } from 'bkui-vue';
 import { AngleDown, AngleUp } from 'bkui-vue/lib/icon';
-import { defineEmits, defineProps, h, onMounted, reactive, ref, watch } from 'vue';
+import { defineEmits, defineProps, onMounted, reactive, ref, watch } from 'vue';
 
 import Row from '@/components/layouts/row.vue';
 import NotifyEditorTemplate from '@/components/notify-editor/NotifyEditorTemplate.vue';
@@ -306,6 +306,7 @@ onMounted(async () => {
       // 获取默认配置
       const res = await getDefaultConfig('local');
       formData.config = res?.data?.config || {};
+      formData.config.enable_password = true;
     }
   } catch (e) {
     console.warn(e);
@@ -419,10 +420,10 @@ const handleSubmit = async () => {
     if (props.currentId) {
       params.id = props.currentId;
       await putLocalIdps(params);
-      emit('success');
+      emit('success', formData.config?.enable_password);
     } else {
       await postLocalIdps(params);
-      emit('success');
+      emit('success', false);
     }
   } catch (e) {
     console.warn(e);
@@ -439,15 +440,7 @@ const changeAccountPassword = (value) => {
   if (!value) {
     InfoBox({
       title: t('确认要关闭账密登录吗？'),
-      subTitle: h('div', {
-        style: {
-          textAlign: 'left',
-          lineHeight: '24px',
-        },
-      }, [
-        h('p', t('1.关闭后该数据的用户将无法通过账密登录')),
-        h('p', t('2.关闭后，再次开启时，账密规则信息会重置')),
-      ]),
+      subTitle: t('关闭后用户将无法通过账密登录'),
       onConfirm() {
         formData.config.enable_password = value;
       },

diff --git a/src/pages/src/views/setting/auth-config/WeCom.vue b/src/pages/src/views/setting/auth-config/WeCom.vue
@@ -103,7 +103,7 @@
 
 <script setup lang="ts">
 import { InfoBox, Message } from 'bkui-vue';
-import { defineEmits, defineProps, h, onMounted, ref } from 'vue';
+import { defineEmits, defineProps, onMounted, ref } from 'vue';
 
 import Row from '@/components/layouts/row.vue';
 import { useCustomPlugin, useValidate } from '@/hooks';
@@ -222,15 +222,7 @@ const changeStatus = (value: boolean) => {
   if (!value) {
     InfoBox({
       title: t('确认要关闭企业微信登录吗？'),
-      subTitle: h('div', {
-        style: {
-          textAlign: 'left',
-          lineHeight: '24px',
-        },
-      }, [
-        h('p', t('1.关闭后该数据的用户将无法通过企业微信登录')),
-        h('p', t('2.关闭后，再次开启时，企业微信信息会重置')),
-      ]),
+      subTitle: t('关闭后用户将无法通过企业微信登录'),
       onConfirm() {
         formData.value.status = 'disabled';
       },