feat(X-Pack): Add LDAP authentication mechanism

frontend/src/i18n/en.json

@@ -741,7 +741,18 @@
     "oidc_settings": "OIDC Settings",
     "metadata_url": "Metadata URL",
     "realm": "Realm",
-    "oidc_field_mapping_placeholder": "e.g., {\"account\": \"oidcAccount\", \"name\": \"oidcName\", \"email\": \"email\"}"
+    "oidc_field_mapping_placeholder": "e.g., {\"account\": \"oidcAccount\", \"name\": \"oidcName\", \"email\": \"email\"}",
+    "ldap_settings": "LDAP Settings",
+    "server_address": "Server Address",
+    "server_address_placeholder": "Example: ldap://ldap.example.com:389",
+    "bind_dn": "Bind DN",
+    "bind_dn_placeholder": "Example: cn=admin,dc=example,dc=com",
+    "bind_pwd": "Bind Password",
+    "ou": "User OU",
+    "ou_placeholder": "Example: ou=users,dc=example,dc=com",
+    "user_filter": "User Filter",
+    "user_filter_placeholder": "Example: uid",
+    "ldap_field_mapping_placeholder": "Example: {\"account\": \"ldapAccount\", \"name\": \"ldapName\", \"email\": \"mail\"}"
   },
   "login": {
     "default_login": "Default",

frontend/src/i18n/ko-KR.json

@@ -741,7 +741,18 @@
     "oidc_settings": "OIDC 설정",
     "metadata_url": "메타데이터 URL",
     "realm": "영역",
-    "oidc_field_mapping_placeholder": "예: {\"account\": \"oidcAccount\", \"name\": \"oidcName\", \"email\": \"email\"}"
+    "oidc_field_mapping_placeholder": "예: {\"account\": \"oidcAccount\", \"name\": \"oidcName\", \"email\": \"email\"}",
+    "ldap_settings": "LDAP 설정",
+    "server_address": "서버 주소",
+    "server_address_placeholder": "예: ldap://ldap.example.com:389",
+    "bind_dn": "바인드 DN",
+    "bind_dn_placeholder": "예: cn=admin,dc=example,dc=com",
+    "bind_pwd": "바인드 비밀번호",
+    "ou": "사용자 OU",
+    "ou_placeholder": "예: ou=users,dc=example,dc=com",
+    "user_filter": "사용자 필터",
+    "user_filter_placeholder": "예: uid",
+    "ldap_field_mapping_placeholder": "예: {\"account\": \"ldapAccount\", \"name\": \"ldapName\", \"email\": \"mail\"}"
   },
   "login": {
     "default_login": "기본값",

frontend/src/i18n/zh-CN.json

@@ -741,7 +741,18 @@
     "oidc_settings": "OIDC 设置",
     "metadata_url": "元数据地址",
     "realm": "领域",
-    "oidc_field_mapping_placeholder": "例如：{'{'}\"account\": \"oidcAccount\", \"name\": \"oidcName\", \"email\": \"email\"{'}'}"
+    "oidc_field_mapping_placeholder": "例如：{'{'}\"account\": \"oidcAccount\", \"name\": \"oidcName\", \"email\": \"email\"{'}'}",
+    "ldap_settings": "LDAP 设置",
+    "server_address": "服务器地址",
+    "server_address_placeholder": "例如：ldap://ldap.example.com:389",
+    "bind_dn": "绑定 DN",
+    "bind_dn_placeholder": "例如：cn=admin,dc=example,dc=com",
+    "bind_pwd": "绑定密码",
+    "ou": "用户 OU",
+    "ou_placeholder": "例如：ou=users,dc=example,dc=com",
+    "user_filter": "用户过滤器",
+    "user_filter_placeholder": "例如：uid",
+    "ldap_field_mapping_placeholder": "例如：{'{'}\"account\": \"ldapAccount\", \"name\": \"ldapName\", \"email\": \"mail\"{'}'}"
   },
   "login": {
     "default_login": "默认",

frontend/src/views/login/index.vue

@@ -28,42 +28,45 @@
         </div>
         <div v-else class="welcome" style="height: 0"></div>
         <div class="login-form">
-          <h2 class="title">{{ $t('common.login') }}</h2>
-          <el-form
-            ref="loginFormRef"
-            class="form-content_error"
-            :model="loginForm"
-            :rules="rules"
-            @keyup.enter="submitForm"
-          >
-            <el-form-item prop="username">
-              <el-input
-                v-model="loginForm.username"
-                clearable
-                :placeholder="$t('common.your_account_email_address')"
-                size="large"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-              <el-input
-                v-model="loginForm.password"
-                :placeholder="$t('common.enter_your_password')"
-                type="password"
-                show-password
-                clearable
-                size="large"
-              ></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" class="login-btn" @click="submitForm">{{
-                $t('common.login_')
-              }}</el-button>
-            </el-form-item>
-          </el-form>
+          <div class="default-login-tabs">
+            <h2 class="title">{{ $t('common.login') }}</h2>
+            <el-form
+              ref="loginFormRef"
+              class="form-content_error"
+              :model="loginForm"
+              :rules="rules"
+              @keyup.enter="submitForm"
+            >
+              <el-form-item prop="username">
+                <el-input
+                  v-model="loginForm.username"
+                  clearable
+                  :placeholder="$t('common.your_account_email_address')"
+                  size="large"
+                ></el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input
+                  v-model="loginForm.password"
+                  :placeholder="$t('common.enter_your_password')"
+                  type="password"
+                  show-password
+                  clearable
+                  size="large"
+                ></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" class="login-btn" @click="submitForm">{{
+                  $t('common.login_')
+                }}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
           <Handler
             ref="xpackLoginHandler"
             v-model:loading="showLoading"
             jsname="L2NvbXBvbmVudC9sb2dpbi9IYW5kbGVy"
+            @switch-tab="switchTab"
           />
         </div>
       </div>
@@ -93,7 +96,9 @@ const loginForm = ref({
   username: '',
   password: '',
 })
+const activeName = ref('simple')
 
+// const isLdap = computed(() => activeName.value == 'ldap')
 const bg = computed(() => {
   return appearanceStore.getBg || (appearanceStore.isBlue ? loginImage : login_image)
 })
@@ -118,6 +123,9 @@ const submitForm = () => {
     }
   })
 }
+const switchTab = (name: string) => {
+  activeName.value = name || 'simple'
+}
 </script>
 
 <style lang="less" scoped>

frontend/src/views/login/xpack/Handler.vue

@@ -8,18 +8,19 @@
       :larksuite="loginCategory.larksuite"
     />
   </div> -->
+  <LdapLoginForm v-if="isLdap" />
   <el-divider v-if="anyEnable" class="de-other-login-divider">{{
     t('login.other_login')
   }}</el-divider>
   <el-form-item v-if="anyEnable" class="other-login-item">
     <div class="login-list">
-      <!-- <QrcodeLdap
+      <QrcodeLdap
         v-if="loginCategory.qrcode || loginCategory.ldap"
         ref="qrcodeLdapHandler"
         :qrcode="loginCategory.qrcode"
         :ldap="loginCategory.ldap"
         @status-change="qrStatusChange"
-      /> -->
+      />
       <Oidc v-if="loginCategory.oidc" @switch-category="switcherCategory" />
       <Oauth2 v-if="loginCategory.oauth2" ref="oauth2Handler" @switch-category="switcherCategory" />
       <Cas v-if="loginCategory.cas" @switch-category="switcherCategory" />
@@ -51,8 +52,9 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
-/* import QrcodeLdap from './QrcodeLdap.vue'
-import Oidc from './Oidc.vue'
+import QrcodeLdap from './QrcodeLdap.vue'
+import LdapLoginForm from './LdapLoginForm.vue'
+/* import Oidc from './Oidc.vue'
 import Oauth2 from './Oauth2.vue'
 import Saml2 from './Saml2.vue' */
 import Oidc from './Oidc.vue'
@@ -70,6 +72,7 @@ import { loadClient, type LoginCategory } from './PlatformClient'
 // import { logoutHandler } from '@/utils/logout'
 import { useI18n } from 'vue-i18n'
 // import PlatformError from './PlatformError.vue'
+const isLdap = ref(false)
 defineProps<{
   loading: boolean
 }>()
@@ -211,14 +214,16 @@ const init = (cb?: () => void) => {
     })
 }
 
-/* const qrStatusChange = (activeComponent: string) => {
+const qrStatusChange = (activeComponent: string) => {
   qrStatus.value = activeComponent === 'qrcode'
+  isLdap.value = false
   if (activeComponent === 'account') {
     emits('switchTab', 'simple')
   } else if (activeComponent === 'ldap') {
+    isLdap.value = true
     switcherCategory({ category: 'ldap', proxy: '' })
   }
-} */
+}
 /* const showMfa = ref(false)
 const toMfa = (mfa) => {
   state.mfaData = mfa

frontend/src/views/login/xpack/LdapLoginForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="default-login-tabs-ldap">
+    <h2 class="title">{{ t('login.ldap_login') }}</h2>
+    <el-form
+      ref="loginFormRef"
+      class="form-content_error"
+      :model="loginForm"
+      @keyup.enter="submitForm"
+    >
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          clearable
+          :placeholder="t('login.input_account')"
+          size="large"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          :placeholder="$t('common.enter_your_password')"
+          type="password"
+          show-password
+          clearable
+          size="large"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="login-btn" @click="submitForm">{{
+          $t('common.login_')
+        }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { request } from '@/utils/request'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user.ts'
+
+const userStore = useUserStore()
+const router = useRouter()
+const { t } = useI18n()
+const loginForm = ref({
+  username: '',
+  password: '',
+  origin: 1,
+})
+const loginFormRef = ref()
+const submitForm = () => {
+  loginFormRef.value.validate((valid: boolean) => {
+    if (valid) {
+      const data = { ...loginForm.value }
+      request.post('/system/authentication/sso/3', data).then((res: any) => {
+        const token = res.access_token
+        userStore.setToken(token)
+        userStore.setExp(res.exp)
+        userStore.setTime(Date.now())
+        router.push('/')
+      })
+    }
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.form-content_error {
+  .ed-form-item--default {
+    margin-bottom: 24px;
+    &.is-error {
+      margin-bottom: 48px;
+    }
+  }
+}
+
+.title {
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 20px;
+  line-height: 28px;
+  margin-bottom: 24px;
+}
+
+.login-btn {
+  width: 100%;
+  height: 45px;
+  font-size: 16px;
+  border-radius: 4px;
+}
+
+.agreement {
+  margin-top: 20px;
+  text-align: center;
+  color: #666;
+}
+</style>