From 00b1485ce6b7b7cf4b29ff6251ef9d58c62f9e94 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Fri, 20 Sep 2024 17:12:47 +0200
Subject: [PATCH] WIP7

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 apps/user_ldap/lib/Settings/Admin.php         |  2 +-
 .../components/SettingsTabs/AdvancedTab.vue   |  7 ++-
 .../src/components/SettingsTabs/ExpertTab.vue |  7 ++-
 .../src/components/SettingsTabs/GroupsTab.vue | 10 ++--
 .../src/components/SettingsTabs/LoginTab.vue  | 11 ++--
 .../src/components/SettingsTabs/ServerTab.vue | 24 +++++----
 .../src/components/SettingsTabs/UsersTab.vue  | 10 ++--
 .../src/components/WizardControls.vue         | 10 ++--
 .../src/services/ldapConfigService.ts         | 30 +++++++----
 apps/user_ldap/src/store/configs.ts           | 28 +++++-----
 apps/user_ldap/src/store/wizard.ts            |  4 +-
 apps/user_ldap/src/views/Settings.vue         | 54 +++++++++----------
 12 files changed, 113 insertions(+), 84 deletions(-)

diff --git a/apps/user_ldap/lib/Settings/Admin.php b/apps/user_ldap/lib/Settings/Admin.php
index f3fe9325916..c609a9e48de 100644
--- a/apps/user_ldap/lib/Settings/Admin.php
+++ b/apps/user_ldap/lib/Settings/Admin.php
@@ -70,7 +70,7 @@ class Admin implements IDelegatedSettings {
 		}
 
 		$this->InitialState->provideInitialState('ldapConfigs', $ldapConfigs);
-		$this->InitialState->provideInitialState('ldapDefaultConfig', $defaults);
+		$this->InitialState->provideInitialState('ldapModuleInstalled', function_exists('ldap_connect'));
 
 		return new TemplateResponse('user_ldap', 'settings', $parameters);
 	}
diff --git a/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue b/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue
index aad72231f47..d9e40c2faef 100644
--- a/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue
@@ -219,12 +219,15 @@
 </template>
 
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
 import { t } from '@nextcloud/l10n'
 import { NcTextField, NcTextArea, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
-import { useLDAPConfigStore } from '../../store/configs'
+import { useLDAPConfigsStore } from '../../store/configs'
 
-const { selectedConfig: ldapConfig } = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const { selectedConfig: ldapConfig } = storeToRefs(ldapConfigsStore)
 
 const instanceName = 'TODO'
 </script>
diff --git a/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue b/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue
index bc58e05781d..f2cbf6f8813 100644
--- a/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue
@@ -40,12 +40,15 @@
 </template>
 
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
 import { t } from '@nextcloud/l10n'
 import { NcTextField, NcButton } from '@nextcloud/vue'
 
-import { useLDAPConfigStore } from '../../store/configs'
+import { useLDAPConfigsStore } from '../../store/configs'
 
-const { selectedConfig: ldapConfig } = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const { selectedConfig: ldapConfig } = storeToRefs(ldapConfigsStore)
 </script>
 <style lang="scss" scoped>
 .ldap-wizard__expert {
diff --git a/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue b/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue
index 1aa3cd6cc18..2e30a796e2e 100644
--- a/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue
@@ -77,13 +77,17 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
 
 import { t } from '@nextcloud/l10n'
 import { NcButton, NcTextArea, NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
 
-import { useLDAPConfigStore } from '../../store/configs'
+import { useLDAPConfigsStore } from '../../store/configs'
+import { useWizardStore } from '../../store/wizard'
 
-const { selectedConfig: ldapConfig, callWizardAction } = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const wizardStore = useWizardStore()
+const { selectedConfig: ldapConfig } = storeToRefs(ldapConfigsStore)
 
 const instanceName = 'TODO'
 
@@ -95,7 +99,7 @@ const allowUserFilterGroupsSelection = ref(false)
  *
  */
 async function countGroups() {
-	const { changes: { ldap_test_base: ldapTestBase } } = await callWizardAction('countGroups')
+	const { changes: { ldap_test_base: ldapTestBase } } = await wizardStore.callWizardAction('countGroups')
 	groupsCount.value = ldapTestBase
 }
 </script>
diff --git a/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue b/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue
index 57c477ca5a4..d7539b16ef2 100644
--- a/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue
@@ -57,13 +57,18 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
 
 import { t } from '@nextcloud/l10n'
 import { NcButton, NcTextField, NcTextArea, NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
 
-import { useLDAPConfigStore } from '../../store/configs'
+import { useLDAPConfigsStore } from '../../store/configs'
+import { useWizardStore } from '../../store/wizard'
 
-const { selectedConfig: ldapConfig, callWizardAction } = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const wizardStore = useWizardStore()
+
+const { selectedConfig: ldapConfig } = storeToRefs(ldapConfigsStore)
 
 const instanceName = 'TODO'
 const testUsername = ref('TODO')
@@ -74,7 +79,7 @@ const editUserLoginFilter = ref(false)
  *
  */
 async function verifyLoginName() {
-	const { changes: { ldap_test_base: ldapTestBase } } = await callWizardAction('testLoginName', { testUsername: testUsername.value })
+	const { changes: { ldap_test_base: ldapTestBase } } = await wizardStore.callWizardAction('testLoginName', { testUsername: testUsername.value })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue b/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue
index ebbd8e46ce4..133f626e93d 100644
--- a/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue
@@ -6,13 +6,13 @@
 	<fieldset class="ldap-wizard__server">
 		<div class="ldap-wizard__server__line">
 			<NcButton :aria-label="t('user_ldap', 'Copy current configuration into new directory binding')"
-				@click="() => copy(ldapConfigId)">
+				@click="() => ldapConfigsStore.copyConfig(ldapConfigId)">
 				<template #icon>
 					<ContentCopy :size="20" />
 				</template>
 			</NcButton>
 			<NcButton :aria-label="t('user_ldap', 'Delete the current configuration')"
-				@click="() => remove(ldapConfigId)">
+				@click="() => ldapConfigsStore.removeConfig(ldapConfigId)">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
@@ -80,6 +80,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
 
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -87,25 +88,26 @@ import Delete from 'vue-material-design-icons/Delete.vue'
 import { t } from '@nextcloud/l10n'
 import { NcButton, NcTextField, NcTextArea, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
-import { useLDAPConfigStore } from '../../store/configs'
+import { useLDAPConfigsStore } from '../../store/configs'
 import { showInfo } from '@nextcloud/dialogs'
 import { useWizardStore } from '../../store/wizard'
 
-const { selectedConfigId: ldapConfigId, selectedConfig: ldapConfig, copy, remove } = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const { selectedConfigId: ldapConfigId, selectedConfig: ldapConfig } = storeToRefs(ldapConfigsStore)
 const { currentWizardActions, callWizardAction } = useWizardStore()
 
-const localLdapAgentName = ref(ldapConfig.ldapAgentName)
-const localLdapAgentPassword = ref(ldapConfig.ldapAgentPassword)
+const localLdapAgentName = ref(ldapConfig.value.ldapAgentName)
+const localLdapAgentPassword = ref(ldapConfig.value.ldapAgentPassword)
 const needsToSaveCredentials = computed(() => {
-	return ldapConfig.ldapAgentName !== localLdapAgentName.value || ldapConfig.ldapAgentPassword !== localLdapAgentPassword.value
+	return ldapConfig.value.ldapAgentName !== localLdapAgentName.value || ldapConfig.value.ldapAgentPassword !== localLdapAgentPassword.value
 })
 
 /**
  *
  */
 function updateCredentials() {
-	ldapConfig.ldapAgentName = localLdapAgentName.value
-	ldapConfig.ldapAgentPassword = localLdapAgentPassword.value
+	ldapConfig.value.ldapAgentName = localLdapAgentName.value
+	ldapConfig.value.ldapAgentPassword = localLdapAgentPassword.value
 }
 
 /**
@@ -113,7 +115,7 @@ function updateCredentials() {
  */
 async function guessPortAndTLS() {
 	const { changes: { ldap_port: ldapPort } } = await callWizardAction('guessPortAndTLS')
-	ldapConfig.ldapPort = String(ldapPort)
+	ldapConfig.value.ldapPort = String(ldapPort)
 }
 
 /**
@@ -121,7 +123,7 @@ async function guessPortAndTLS() {
  */
 async function guessBaseDN() {
 	const { changes: { ldap_base: ldapBase } } = await callWizardAction('guessBaseDN')
-	ldapConfig.ldapBase = ldapBase
+	ldapConfig.value.ldapBase = ldapBase
 }
 
 /**
diff --git a/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue b/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue
index 5a63b57573a..9c4cc700e49 100644
--- a/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue
@@ -90,13 +90,17 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
 
 import { t } from '@nextcloud/l10n'
 import { NcButton, NcTextArea, NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
 
-import { useLDAPConfigStore } from '../../store/configs'
+import { useLDAPConfigsStore } from '../../store/configs'
+import { useWizardStore } from '../../store/wizard'
 
-const { selectedConfig: ldapConfig, callWizardAction } = useLDAPConfigStore()
+const wizardStore = useWizardStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const { selectedConfig: ldapConfig } = storeToRefs(ldapConfigsStore)
 
 const usersCount = ref<number|undefined>(undefined)
 
@@ -108,7 +112,7 @@ const instanceName = 'TODO'
  *
  */
 async function countUsers() {
-	const { changes: { ldap_test_base: ldapTestBase } } = await callWizardAction('countUsers')
+	const { changes: { ldap_test_base: ldapTestBase } } = await wizardStore.callWizardAction('countUsers')
 	usersCount.value = ldapTestBase
 }
 </script>
diff --git a/apps/user_ldap/src/components/WizardControls.vue b/apps/user_ldap/src/components/WizardControls.vue
index 9be7315a283..affc75f31be 100644
--- a/apps/user_ldap/src/components/WizardControls.vue
+++ b/apps/user_ldap/src/components/WizardControls.vue
@@ -24,16 +24,18 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
 
 import Information from 'vue-material-design-icons/ContentCopy.vue'
 
 import { t } from '@nextcloud/l10n'
 import { NcButton } from '@nextcloud/vue'
-import { testConfiguration } from '../services/ldapConfigService'
 
-import { useLDAPConfigStore } from '../store/configs'
+import { testConfiguration } from '../services/ldapConfigService'
+import { useLDAPConfigsStore } from '../store/configs'
 
-const { selectedConfigId } = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const { selectedConfigId } = storeToRefs(ldapConfigsStore)
 
 const loading = ref(false)
 
@@ -43,7 +45,7 @@ const loading = ref(false)
 function testSelectedConfig() {
 	try {
 		loading.value = true
-		testConfiguration(selectedConfigId)
+		testConfiguration(selectedConfigId.value)
 	} finally {
 		loading.value = false
 	}
diff --git a/apps/user_ldap/src/services/ldapConfigService.ts b/apps/user_ldap/src/services/ldapConfigService.ts
index 041353a10a9..28915d7a050 100644
--- a/apps/user_ldap/src/services/ldapConfigService.ts
+++ b/apps/user_ldap/src/services/ldapConfigService.ts
@@ -5,12 +5,12 @@
 
 import path from 'path'
 
-import axios from '@nextcloud/axios'
+import axios, { AxiosError, type AxiosResponse } from '@nextcloud/axios'
 import { getAppRootUrl, generateOcsUrl } from '@nextcloud/router'
 
 import type { LDAPConfig } from '../models'
-import { useLDAPConfigStore } from '../store/configs'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import type { OCSResponse } from '@nextcloud/typings/ocs'
 
 const AJAX_ENDPOINT = path.join(getAppRootUrl('user_ldap'), '/ajax')
 
@@ -37,8 +37,8 @@ export type WizardAction =
  *
  * @param config
  */
-export async function createConfig(config: LDAPConfig) {
-	const response = await axios.post(generateOcsUrl('apps/user_ldap/api/v1/config'), config)
+export async function createConfig() {
+	const response = await axios.post(generateOcsUrl('apps/user_ldap/api/v1/config'))
 	return response.data.ocs.data.configID as string
 }
 
@@ -47,10 +47,17 @@ export async function createConfig(config: LDAPConfig) {
  * @param configId
  * @param config
  */
-export async function updateConfig(): Promise<LDAPConfig> {
-	const configId = useLDAPConfigStore().selectedConfigId
-	const config = useLDAPConfigStore().selectedConfig
+export async function getConfig(configId: string): Promise<LDAPConfig> {
+	const response: AxiosResponse<OCSResponse<LDAPConfig>> = await axios.get(generateOcsUrl('apps/user_ldap/api/v1/config/{configId}', { configId }))
+	return response.data.ocs.data
+}
 
+/**
+ *
+ * @param configId
+ * @param config
+ */
+export async function updateConfig(configId: string, config: LDAPConfig): Promise<LDAPConfig> {
 	const response = await axios.put(
 		generateOcsUrl('apps/user_ldap/api/v1/config/{configId}', { configId }),
 		{ configData: config },
@@ -64,8 +71,13 @@ export async function updateConfig(): Promise<LDAPConfig> {
  * @param configId
  */
 export async function deleteConfig(configId: string): Promise<boolean> {
-	await axios.delete(generateOcsUrl('apps/user_ldap/api/v1/config/{configId}', { configId }))
-	// TODO: check status
+	try {
+		await axios.delete(generateOcsUrl('apps/user_ldap/api/v1/config/{configId}', { configId }))
+	} catch (error) {
+		const errorResponse = (error as AxiosError<OCSResponse>).response
+		showError(errorResponse?.data.ocs.meta.message || 'Fail to delete config')
+	}
+
 	return true
 }
 
diff --git a/apps/user_ldap/src/store/configs.ts b/apps/user_ldap/src/store/configs.ts
index 2e077bbe9eb..fee13565624 100644
--- a/apps/user_ldap/src/store/configs.ts
+++ b/apps/user_ldap/src/store/configs.ts
@@ -7,12 +7,11 @@ import Vue, { computed, ref } from 'vue'
 
 import { loadState } from '@nextcloud/initial-state'
 
-import { createConfig, deleteConfig } from '../services/ldapConfigService'
+import { createConfig, deleteConfig, getConfig, updateConfig } from '../services/ldapConfigService'
 import type { LDAPConfig } from '../models'
 
-export const useLDAPConfigStore = defineStore('ldap-configs', () => {
+export const useLDAPConfigsStore = defineStore('ldap-configs', () => {
 	const ldapConfigs = ref(loadState('user_ldap', 'ldapConfigs') as Record<string, LDAPConfig>)
-	const defaultLdapConfig = ref(loadState('user_ldap', 'ldapDefaultConfig') as LDAPConfig)
 	const selectedConfigId = ref<string>(Object.keys(ldapConfigs.value)[0])
 	const selectedConfig = computed<LDAPConfig>(() => ldapConfigs.value[selectedConfigId.value])
 
@@ -20,9 +19,9 @@ export const useLDAPConfigStore = defineStore('ldap-configs', () => {
 	 *
 	 */
 	async function create() {
-		const newConfig = { ...defaultLdapConfig.value }
-		const configId = await createConfig(newConfig)
-		Vue.set(ldapConfigs, configId, newConfig)
+		const configId = await createConfig()
+		const config = await getConfig(configId)
+		ldapConfigs.value[configId] = config
 		selectedConfigId.value = configId
 		return configId
 	}
@@ -31,10 +30,9 @@ export const useLDAPConfigStore = defineStore('ldap-configs', () => {
 	 *
 	 * @param fromConfigId
 	 */
-	async function copy(fromConfigId: string) {
-		const newConfig = { ...ldapConfigs.value[fromConfigId] }
-		const configId = await createConfig(newConfig)
-		Vue.set(ldapConfigs, configId, newConfig)
+	async function copyConfig(fromConfigId: string) {
+		const configId = await createConfig()
+		ldapConfigs.value[configId] = { ...ldapConfigs.value[fromConfigId] }
 		selectedConfigId.value = configId
 		return configId
 	}
@@ -43,13 +41,13 @@ export const useLDAPConfigStore = defineStore('ldap-configs', () => {
 	 *
 	 * @param configId
 	 */
-	async function remove(configId: string) {
+	async function removeConfig(configId: string) {
 		const result = await deleteConfig(configId)
 		if (result === true) {
-			Vue.delete(ldapConfigs, configId)
+			Vue.delete(ldapConfigs.value, configId)
 		}
 
-		const firstConfigId = Object.keys(ldapConfigs)[0] ?? await create()
+		const firstConfigId = Object.keys(ldapConfigs.value)[0] ?? await create()
 		selectedConfigId.value = firstConfigId
 	}
 
@@ -58,7 +56,7 @@ export const useLDAPConfigStore = defineStore('ldap-configs', () => {
 		selectedConfigId,
 		selectedConfig,
 		create,
-		copy,
-		remove,
+		copyConfig,
+		removeConfig,
 	}
 })
diff --git a/apps/user_ldap/src/store/wizard.ts b/apps/user_ldap/src/store/wizard.ts
index c16a2027583..f277ae7c0ae 100644
--- a/apps/user_ldap/src/store/wizard.ts
+++ b/apps/user_ldap/src/store/wizard.ts
@@ -6,12 +6,12 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import { callWizard, type WizardAction } from '../services/ldapConfigService'
-import { useLDAPConfigStore } from './configs'
+import { useLDAPConfigsStore } from './configs'
 
 export const useWizardStore = defineStore('ldap-wizard', () => {
 	const currentWizardActions = ref<string[]>([])
 
-	const { selectedConfigId } = useLDAPConfigStore()
+	const { selectedConfigId } = useLDAPConfigsStore()
 
 	/**
 	 *
diff --git a/apps/user_ldap/src/views/Settings.vue b/apps/user_ldap/src/views/Settings.vue
index c306dfcd6b9..9392ccef669 100644
--- a/apps/user_ldap/src/views/Settings.vue
+++ b/apps/user_ldap/src/views/Settings.vue
@@ -8,18 +8,26 @@
 
 		<div class="ldap-wizard__config-selection">
 			<NcSelect v-model="selectedConfigId"
-				:options="selectOptions"
-				:input-label="t('user_ldap', 'Select LDAP Config')" />
-			<NcButton :label="t('user_ldap','Create New Config')" @click="ldapConfigStore.create">
+				:options="Object.keys(ldapConfigs)"
+				:input-label="t('user_ldap', 'Select LDAP Config')"
+				@input="selectedConfigId = $event">
+				<template #option="{label: configId}">
+					{{ `${configId}: ${ldapConfigs[configId].ldapHost}` }}
+				</template>
+				<template #selected-option="{label: configId}">
+					{{ `${configId}: ${ldapConfigs[configId].ldapHost}` }}
+				</template>
+			</NcSelect>
+			<NcButton :label="t('user_ldap','Create New Config')" @click="ldapConfigsStore.create">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
 			</NcButton>
-			<!-- TODO: Find a use for the loading icon -->
-			<NcLoadingIcon v-if="false" />
 		</div>
 
-		<div v-if="selectedConfigId !== undefined" class="ldap-wizard__tab-container">
+		<NcNoteCard v-if="!ldapModuleInstalled" type="warning" :text="t('user_ldap', 'The PHP LDAP module is not installed, the backend will not work. Please ask your system administrator to install it.')" />
+
+		<div v-if="ldapModuleInstalled && selectedConfig !== undefined" class="ldap-wizard__tab-container">
 			<div class="ldap-wizard__tab-selection-container">
 				<div class="ldap-wizard__tab-selection">
 					<NcCheckboxRadioSwitch v-for="(tabLabel, tabId) in leftTabs"
@@ -45,12 +53,6 @@
 				</div>
 			</div>
 
-			<!-- TODO: change ldapwarning -->
-			<div v-if="!ldapModuleInstalled" class="ldapwarning">
-				{{ t('user_ldap', '<b>Warning:</b>') }}
-				{{ t('user_ldap', 'The PHP LDAP module is not installed, the backend will not work. Please ask your system administrator to install it.') }}
-			</div>
-
 			<ServerTab v-if="selectedTab === 'server'" />
 			<UsersTab v-else-if="selectedTab === 'users'" />
 			<LoginTab v-else-if="selectedTab === 'login'" />
@@ -69,7 +71,8 @@ import { ref } from 'vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
 import { t } from '@nextcloud/l10n'
-import { NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcButton } from '@nextcloud/vue'
+import { loadState } from '@nextcloud/initial-state'
+import { NcCheckboxRadioSwitch, NcSelect, NcButton, NcNoteCard } from '@nextcloud/vue'
 
 import ServerTab from '../components/SettingsTabs/ServerTab.vue'
 import UsersTab from '../components/SettingsTabs/UsersTab.vue'
@@ -78,8 +81,11 @@ import GroupsTab from '../components/SettingsTabs/GroupsTab.vue'
 import ExpertTab from '../components/SettingsTabs/ExpertTab.vue'
 import AdvancedTab from '../components/SettingsTabs/AdvancedTab.vue'
 import WizardControls from '../components/WizardControls.vue'
-import { useLDAPConfigStore } from '../store/configs'
+import { useLDAPConfigsStore } from '../store/configs'
 import { updateConfig } from '../services/ldapConfigService'
+import { storeToRefs } from 'pinia'
+
+const ldapModuleInstalled = loadState('user_ldap', 'ldapModuleInstalled')
 
 const leftTabs = {
 	server: t('user_ldap', 'Server'),
@@ -93,27 +99,17 @@ const rightTabs = {
 	expert: t('user_ldap', 'Expert'),
 }
 
-const ldapConfigStore = useLDAPConfigStore()
+const ldapConfigsStore = useLDAPConfigsStore()
+const { ldapConfigs, selectedConfigId, selectedConfig } = storeToRefs(ldapConfigsStore)
 
 const selectedTab = ref('server')
-// eslint-disable-next-line prefer-const
-let selectedConfigId = ldapConfigStore.selectedConfigId
-// TODO: Setup from initial state
-const ldapModuleInstalled = true
-const mutationsCount = ref(0)
-const selectOptions = Object.entries(ldapConfigStore.ldapConfigs).map(([configId, config]) => ({
-	id: configId,
-	label: `${configId}: ${config.ldapHost}`,
-}))
-
-ldapConfigStore.$subscribe(() => {
+
+ldapConfigsStore.$subscribe(async () => {
 	if (selectedConfigId === undefined) {
 		throw new Error('selectedConfigId should not be undefined')
 	}
 
-	mutationsCount.value++
-	updateConfig()
-	mutationsCount.value--
+	await updateConfig(selectedConfigId.value, selectedConfig.value)
 })
 </script>
 <style lang="scss" scoped>
-- 
2.39.5