ldap settings (#47)

src/api/settings.js

@@ -14,3 +14,34 @@ export function testEmailSetting(data) {
     data: data
   })
 }
+
+export function testLdapSetting(data) {
+  return request({
+    url: '/api/v1/settings/ldap/testing/config/',
+    method: 'post',
+    data: data
+  })
+}
+
+export function testLdapUserLogin(data) {
+  return request({
+    url: '/api/v1/settings/ldap/testing/login/',
+    method: 'post',
+    data: data
+  })
+}
+
+export function refreshLdapUserCache() {
+  return request({
+    url: '/api/v1/settings/ldap/cache/refresh/',
+    method: 'get'
+  })
+}
+
+export function importLdapUser(data) {
+  return request({
+    url: '/api/v1/settings/ldap/users/import/',
+    method: 'post',
+    data: data
+  })
+}

src/components/ListTable/index.vue

@@ -2,7 +2,7 @@
   <div>
     <TableAction :table-url="tableConfig.url" :search-table="search" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
-      <AutoDataTable :key="tableConfig.url" ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange" />
+      <AutoDataTable :key="tableConfig.url" ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
     </IBox>
   </div>
 </template>

src/i18n/langs/cn.js

@@ -587,6 +587,18 @@ const cn = {
     'securityPasswordSpecialChar': '必须包含特殊字符',
     'Hostname': '主机名',
     'emailTest': '测试连接',
+    'ldapConnectTest': '测试连接',
+    'ldapLoginTest': '测试登录',
+    'ldapBulkImport': '一键导入',
+    'password': '密码',
+    'username': '用户名',
+    'usernamePlaceholder': '请输入用户名',
+    'passwordPlaceholder': '请输入密码',
+    'refreshLdapUser': '刷新缓存',
+    'testLdapLoginTitle': '测试LDAP 用户登录',
+    'testLdapLoginSubtitle': '请先提交LDAP配置再进行测试登录',
+    'importLdapUserTitle': 'LDAP 用户列表',
+    'importLdapUserTip': '请先提交LDAP配置再进行导入',
     helpText: {
       'siteUrl': 'eg: http://jumpserver.abc.com:8080',
       'userGuideUrl': '用户第一次登录，修改profile后重定向到地址',

src/i18n/langs/en.js

@@ -396,6 +396,18 @@ const en = {
     'securityPasswordSpecialChar': 'Must contain special characters',
     'Hostname': 'Hostname',
     'emailTest': 'Test connection',
+    'ldapConnectTest': 'Test connection',
+    'ldapLoginTest': 'Test login',
+    'ldapBulkImport': 'Bulk import',
+    'password': 'Password',
+    'username': 'Username',
+    'usernamePlaceholder': 'Please input username',
+    'passwordPlaceholder': 'Please input password',
+    'refreshLdapUser': 'Refresh cache',
+    'testLdapLoginTitle': 'Test LDAP user login',
+    'testLdapLoginSubtitle': 'Save the configuration before testing the login',
+    'importLdapUserTitle': 'LDAP user list',
+    'importLdapUserTip': 'Please submit the LDAP configuration before import',
     helpText: {
       'siteUrl': 'eg: http://jumpserver.abc.com:8080',
       'userGuideUrl': 'User first login update profile done redirect to it',

src/views/settings/Ldap.vue

@@ -1,22 +1,80 @@
 <template>
+  <div v-if="!loading">
     <GenericCreateUpdateForm
       :fields="selectFields"
       :url="url"
-    :initial="object"
+      :initial="initialData"
       :update-success-next-route="successUrl"
       :clean-form-value="cleanFormValue"
-    :object="object"
+      :object="initialData"
       :fields-meta="fieldsMeta"
       :get-method="getMethod"
+      :more-buttons="moreButtons"
     />
+    <el-dialog :visible.sync="dialogVisible" center>
+      <div slot="title">
+        {{ $t('setting.testLdapLoginTitle') }}
+        <br>
+        <small>
+          {{ $t('setting.testLdapLoginSubtitle') }}
+        </small>
+      </div>
+      <el-form
+        :model="userLoginForm"
+        label-position="right"
+        label-width="17%"
+      >
+        <el-form-item :label="$t('setting.username')">
+          <el-input
+            v-model="userLoginForm.username"
+            :placeholder="$t('setting.usernamePlaceholder')"
+            autocomplete="off"
+          />
+
+        </el-form-item>
+        <el-form-item :label="$t('setting.password')">
+          <el-input
+            v-model="userLoginForm.password"
+            type="password"
+            :placeholder="$t('setting.passwordPlaceholder')"
+            autocomplete="off"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">{{ $tco('Cancel') }}</el-button>
+        <el-button type="primary" @click="testUerLogin">{{ $tco('Confirm') }}</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogLdapUserImport" center>
+      <div slot="title">
+        {{ $t('setting.importLdapUserTitle') }}
+        <el-alert type="success"> {{ $t('setting.importLdapUserTip') }}</el-alert>
+      </div>
+      <ListTable
+        ref="listTable"
+        :table-config="tableConfig"
+        :header-actions="headerActions"
+        @error="handlerError($event)"
+      />
+      <div slot="footer">
+        <el-button @click="dialogLdapUserImport = false">{{ $tco('cancel') }}</el-button>
+        <el-button type="primary" @click="importUserClick">{{ $tco('import') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import { testLdapSetting, testLdapUserLogin,
+  importLdapUser, refreshLdapUserCache } from '@/api/settings'
+import { ListTable } from '@/components'
 
 export default {
   name: 'Ldap',
   components: {
-    GenericCreateUpdateForm
+    GenericCreateUpdateForm,
+    ListTable
   },
   props: {
     object: {
@@ -26,6 +84,10 @@ export default {
   },
   data() {
     return {
+      loading: true,
+      dialogVisible: false,
+      dialogLdapUserImport: false,
+      initialData: {},
       selectFields: ['AUTH_LDAP_SERVER_URI', 'AUTH_LDAP_BIND_DN', 'AUTH_LDAP_BIND_PASSWORD', 'AUTH_LDAP_SEARCH_OU',
         'AUTH_LDAP_SEARCH_FILTER', 'AUTH_LDAP_USER_ATTR_MAP', 'AUTH_LDAP'],
       successUrl: { name: 'Settings', params: { activeMenu: 'Email' }},
@@ -68,17 +130,133 @@ export default {
           type: 'checkbox'
         }
       },
-      url: '/api/v1/settings/setting/'
+      url: '/api/v1/settings/setting/',
+      moreButtons: [
+        {
+          title: this.$t('setting.ldapConnectTest'),
+          callback: function(value, form) {
+            if (value['AUTH_LDAP_BIND_PASSWORD'] === undefined) {
+              value['AUTH_LDAP_BIND_PASSWORD'] = ''
             }
+            testLdapSetting(value).then(resp => {
+              this.$notify({
+                message: resp,
+                type: 'success',
+                duration: 4500
+              })
+            }).catch(err => {
+              this.$notify({
+                message: err,
+                type: 'error',
+                duration: 4500
+              })
+            })
+          }.bind(this)
+        },
+        {
+          title: this.$t('setting.ldapLoginTest'),
+          callback: function(value, form) {
+            this.dialogVisible = true
+          }.bind(this)
+        },
+        {
+          title: this.$t('setting.ldapBulkImport'),
+          callback: function(value, form) {
+            this.dialogLdapUserImport = true
+          }.bind(this)
+        }
+      ],
+      userLoginForm: {
+        username: '',
+        password: ''
+      },
+      tableConfig: {
+        url: '/api/v1/settings/ldap/users/',
+        columns: ['username', 'name', 'email', 'existing']
+      },
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasUpload: false,
+        hasExport: false,
+        hasImport: false,
+        hasUpdate: false,
+        hasRefresh: false,
+        extraActions: [
+          {
+            name: 'refresh',
+            title: this.$t('setting.refreshLdapUser'),
+            type: 'primary',
+            has: true,
+            can: true,
+            callback: function() {
+              refreshLdapUserCache().then(res => {
+                this.$notify({
+                  message: res.msg,
+                  type: 'success',
+                  duration: 4500
+                })
+                setTimeout(this.$refs.listTable.reloadTable, 500)
+              })
+            }.bind(this)
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    Object.assign(this.initialData, this.object)
+    if (this.object.AUTH_LDAP_USER_ATTR_MAP !== null) {
+      this.initialData.AUTH_LDAP_USER_ATTR_MAP = JSON.stringify(this.object.AUTH_LDAP_USER_ATTR_MAP)
+    }
+    this.loading = false
   },
   methods: {
     cleanFormValue(data) {
+      if (data['AUTH_LDAP_BIND_PASSWORD'] === '') {
+        delete data['AUTH_LDAP_BIND_PASSWORD']
+      }
+      if (data['AUTH_LDAP_USER_ATTR_MAP']) {
+        data['AUTH_LDAP_USER_ATTR_MAP'] = JSON.parse(data['AUTH_LDAP_USER_ATTR_MAP'])
+      }
       return {
         ldap: data
       }
     },
     getMethod() {
       return 'put'
+    },
+    testUerLogin() {
+      testLdapUserLogin(this.userLoginForm).then(res => {
+        this.$notify({
+          message: res,
+          type: 'success',
+          duration: 4500
+        })
+      }).catch(err => {
+        this.$notify({
+          message: err,
+          type: 'error',
+          duration: 4500
+        })
+      })
+    },
+    importUserClick() {
+      const selectIds = []
+      this.$refs.listTable.selectedRows.forEach((item, index) => { selectIds.push(item.id) })
+      const data = {
+        username_list: selectIds
+      }
+      importLdapUser(data).then(res => {
+        this.$notify({
+          message: res.msg,
+          type: 'success',
+          duration: 4500
+        })
+      })
+    },
+    handlerError(errMsg) {
+      setTimeout(this.$refs.listTable.reloadTable, 500)
     }
   }
 }