diff --git a/apps/user_ldap/lib/AppInfo/Application.php b/apps/user_ldap/lib/AppInfo/Application.php
index 70b7920f7ab17..25ca6f3a7baea 100644
--- a/apps/user_ldap/lib/AppInfo/Application.php
+++ b/apps/user_ldap/lib/AppInfo/Application.php
@@ -45,8 +45,10 @@
 use Psr\Log\LoggerInterface;
 
 class Application extends App implements IBootstrap {
+	public const APP_ID = 'user_ldap';
+
 	public function __construct() {
-		parent::__construct('user_ldap');
+		parent::__construct(self::APP_ID);
 		$container = $this->getContainer();
 
 		/**
diff --git a/apps/user_ldap/lib/Settings/Admin.php b/apps/user_ldap/lib/Settings/Admin.php
index a3144fd9c57fe..e1410441292ed 100644
--- a/apps/user_ldap/lib/Settings/Admin.php
+++ b/apps/user_ldap/lib/Settings/Admin.php
@@ -6,6 +6,7 @@
  */
 namespace OCA\User_LDAP\Settings;
 
+use OCA\User_LDAP\AppInfo\Application;
 use OCA\User_LDAP\Configuration;
 use OCA\User_LDAP\Helper;
 use OCP\AppFramework\Http\TemplateResponse;
@@ -59,7 +60,9 @@ public function getForm(): TemplateResponse {
 		$this->initialState->provideInitialState('ldapConfigs', $ldapConfigs);
 		$this->initialState->provideInitialState('ldapModuleInstalled', function_exists('ldap_connect'));
 
-		return new TemplateResponse('user_ldap', 'settings', $parameters);
+		\OCP\Util::addStyle(Application::APP_ID, 'settings-admin');
+		\OCP\Util::addScript(Application::APP_ID, 'settings-admin');
+		return new TemplateResponse(Application::APP_ID, 'settings', $parameters);
 	}
 
 	public function getSection(): string {
diff --git a/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue b/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue
index 5adb0181dbb0d..9bbe2ee7aa395 100644
--- a/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/AdvancedTab.vue
@@ -9,29 +9,29 @@
 
 			<NcTextField
 				autocomplete="off"
-				:label=" t('user_ldap', 'Backup (Replica) Host')"
+				:label="t('user_ldap', 'Backup (Replica) Host')"
 				:value="ldapConfigProxy.ldapBackupHost"
 				:helper-text="t('user_ldap', 'Give an optional backup host. It must be a replica of the main LDAP/AD server.')"
-				@change.native="(event) => ldapConfigProxy.ldapBackupHost = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapBackupHost = event.target.value" />
 
 			<NcTextField
 				type="number"
 				:value="ldapConfigProxy.ldapBackupPort"
-				:label="t('user_ldap', 'Backup (Replica) Port') "
-				@change.native="(event) => ldapConfigProxy.ldapBackupPort = event.target.value" />
+				:label="t('user_ldap', 'Backup (Replica) Port')"
+				@change="(event) => ldapConfigProxy.ldapBackupPort = event.target.value" />
 
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.ldapOverrideMainServer === '1'"
+				:model-value="ldapConfigProxy.ldapOverrideMainServer === '1'"
 				type="switch"
 				:aria-label="t('user_ldap', 'Only connect to the replica server.')"
-				@update:checked="ldapConfigProxy.ldapOverrideMainServer = $event ? '1' : '0'">
+				@update:model-value="ldapConfigProxy.ldapOverrideMainServer = $event ? '1' : '0'">
 				{{ t('user_ldap', 'Disable Main Server') }}
 			</NcCheckboxRadioSwitch>
 
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.turnOffCertCheck === '1'"
+				:model-value="ldapConfigProxy.turnOffCertCheck === '1'"
 				:aria-label="t('user_ldap', 'Not recommended, use it for testing only! If connection only works with this option, import the LDAP server\'s SSL certificate in your {instanceName} server.', { instanceName })"
-				@update:checked="ldapConfigProxy.turnOffCertCheck = $event ? '1' : '0'">
+				@update:model-value="ldapConfigProxy.turnOffCertCheck = $event ? '1' : '0'">
 				{{ t('user_ldap', 'Turn off SSL certificate validation.') }}
 			</NcCheckboxRadioSwitch>
 
@@ -40,7 +40,7 @@
 				:label="t('user_ldap', 'Cache Time-To-Live')"
 				:value="ldapConfigProxy.ldapCacheTTL"
 				:helper-text="t('user_ldap', 'in seconds. A change empties the cache.')"
-				@change.native="(event) => ldapConfigProxy.ldapCacheTTL = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapCacheTTL = event.target.value" />
 		</details>
 
 		<details name="ldap-wizard__advanced__section" class="ldap-wizard__advanced__section">
@@ -51,31 +51,31 @@
 				:value="ldapConfigProxy.ldapUserDisplayName"
 				:label="t('user_ldap', 'User Display Name Field')"
 				:helper-text="t('user_ldap', 'The LDAP attribute to use to generate the user\'s display name.')"
-				@change.native="(event) => ldapConfigProxy.ldapUserDisplayName = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapUserDisplayName = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:value="ldapConfigProxy.ldapUserDisplayName2"
 				:label="t('user_ldap', '2nd User Display Name Field')"
 				:helper-text="t('user_ldap', 'Optional. An LDAP attribute to be added to the display name in brackets. Results in e.g. »John Doe (john.doe@example.org)«.')"
-				@change.native="(event) => ldapConfigProxy.ldapUserDisplayName2 = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapUserDisplayName2 = event.target.value" />
 
 			<NcTextArea
-				:value="ldapConfigProxy.ldapBaseUsers"
+				:model-value="ldapConfigProxy.ldapBaseUsers"
 				:placeholder="t('user_ldap', 'One User Base DN per line')"
 				:label="t('user_ldap', 'Base User Tree')"
-				@change.native="(event) => ldapConfigProxy.ldapBaseUsers = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapBaseUsers = event.target.value" />
 
 			<NcTextArea
-				:value="ldapConfigProxy.ldapAttributesForUserSearch"
+				:model-value="ldapConfigProxy.ldapAttributesForUserSearch"
 				:placeholder="t('user_ldap', 'Optional; one attribute per line')"
 				:label="t('user_ldap', 'User Search Attributes')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributesForUserSearch = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributesForUserSearch = event.target.value" />
 
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.markRemnantsAsDisabled === '1'"
+				:model-value="ldapConfigProxy.markRemnantsAsDisabled === '1'"
 				:aria-label="t('user_ldap', 'When switched on, users imported from LDAP which are then missing will be disabled')"
-				@update:checked="ldapConfigProxy.markRemnantsAsDisabled = $event ? '1' : '0'">
+				@update:model-value="ldapConfigProxy.markRemnantsAsDisabled = $event ? '1' : '0'">
 				{{ t('user_ldap', 'Disable users missing from LDAP') }}
 			</NcCheckboxRadioSwitch>
 
@@ -84,19 +84,19 @@
 				:value="ldapConfigProxy.ldapGroupDisplayName"
 				:label="t('user_ldap', 'Group Display Name Field')"
 				:title="t('user_ldap', 'The LDAP attribute to use to generate the groups\'s display name.')"
-				@change.native="(event) => ldapConfigProxy.ldapGroupDisplayName = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapGroupDisplayName = event.target.value" />
 
 			<NcTextArea
-				:value="ldapConfigProxy.ldapBaseGroups"
+				:model-value="ldapConfigProxy.ldapBaseGroups"
 				:placeholder="t('user_ldap', 'One Group Base DN per line')"
 				:label="t('user_ldap', 'Base Group Tree')"
-				@change.native="(event) => ldapConfigProxy.ldapBaseGroups = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapBaseGroups = event.target.value" />
 
 			<NcTextArea
-				:value="ldapConfigProxy.ldapAttributesForGroupSearch"
+				:model-value="ldapConfigProxy.ldapAttributesForGroupSearch"
 				:placeholder="t('user_ldap', 'Optional; one attribute per line')"
 				:label="t('user_ldap', 'Group Search Attributes')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributesForGroupSearch = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributesForGroupSearch = event.target.value" />
 
 			<NcSelect
 				v-model="ldapConfigProxy.ldapGroupMemberAssocAttr"
@@ -115,12 +115,12 @@
 				:label="t('user_ldap', 'Dynamic Group Member URL')"
 				:value="ldapConfigProxy.ldapDynamicGroupMemberURL"
 				:helper-text="t('user_ldap', 'The LDAP attribute that on group objects contains an LDAP search URL that determines what objects belong to the group. (An empty setting disables dynamic group membership functionality.)')"
-				@change.native="(event) => ldapConfigProxy.ldapDynamicGroupMemberURL = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapDynamicGroupMemberURL = event.target.value" />
 
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.ldapNestedGroups === '1'"
+				:model-value="ldapConfigProxy.ldapNestedGroups === '1'"
 				:aria-label="t('user_ldap', 'When switched on, groups that contain groups are supported. (Only works if the group member attribute contains DNs.)')"
-				@update:checked="ldapConfigProxy.ldapNestedGroups = $event ? '1' : '0'">
+				@update:model-value="ldapConfigProxy.ldapNestedGroups = $event ? '1' : '0'">
 				{{ t('user_ldap', 'Nested Groups') }}
 			</NcCheckboxRadioSwitch>
 
@@ -129,12 +129,12 @@
 				:label="t('user_ldap', 'Paging chunksize')"
 				:value="ldapConfigProxy.ldapPagingSize"
 				:helper-text="t('user_ldap', 'Chunksize used for paged LDAP searches that may return bulky results like user or group enumeration. (Setting it 0 disables paged LDAP searches in those situations.)')"
-				@change.native="(event) => ldapConfigProxy.ldapPagingSize = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapPagingSize = event.target.value" />
 
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.turnOnPasswordChange === '1'"
+				:model-value="ldapConfigProxy.turnOnPasswordChange === '1'"
 				:aria-label="t('user_ldap', 'Allow LDAP users to change their password and allow Super Administrators and Group Administrators to change the password of their LDAP users. Only works when access control policies are configured accordingly on the LDAP server. As passwords are sent in plaintext to the LDAP server, transport encryption must be used and password hashing should be configured on the LDAP server.')"
-				@update:checked="ldapConfigProxy.turnOnPasswordChange = $event ? '1' : '0'">
+				@update:model-value="ldapConfigProxy.turnOnPasswordChange = $event ? '1' : '0'">
 				{{ t('user_ldap', 'Enable LDAP password changes per user') }}
 			</NcCheckboxRadioSwitch>
 			<span class="tablecell">
@@ -146,7 +146,7 @@
 				:label="t('user_ldap', 'Default password policy DN')"
 				:value="ldapConfigProxy.ldapDefaultPPolicyDN"
 				:helper-text="t('user_ldap', 'The DN of a default password policy that will be used for password expiry handling. Works only when LDAP password changes per user are enabled and is only supported by OpenLDAP. Leave empty to disable password expiry handling.')"
-				@change.native="(event) => ldapConfigProxy.ldapDefaultPPolicyDN = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapDefaultPPolicyDN = event.target.value" />
 		</details>
 
 		<details name="ldap-wizard__advanced__section" class="ldap-wizard__advanced__section">
@@ -157,35 +157,35 @@
 				:value="ldapConfigProxy.ldapQuotaAttribute"
 				:label="t('user_ldap', 'Quota Field')"
 				:helper-text="t('user_ldap', 'Leave empty for user\'s default quota. Otherwise, specify an LDAP/AD attribute.')"
-				@change.native="(event) => ldapConfigProxy.ldapQuotaAttribute = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapQuotaAttribute = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:value="ldapConfigProxy.ldapQuotaDefault"
 				:label="t('user_ldap', 'Quota Default')"
 				:helper-text="t('user_ldap', 'Override default quota for LDAP users who do not have a quota set in the Quota Field.')"
-				@change.native="(event) => ldapConfigProxy.ldapQuotaDefault = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapQuotaDefault = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:value="ldapConfigProxy.ldapEmailAttribute"
 				:label="t('user_ldap', 'Email Field')"
 				:helper-text="t('user_ldap', 'Set the user\'s email from their LDAP attribute. Leave it empty for default behaviour.')"
-				@change.native="(event) => ldapConfigProxy.ldapEmailAttribute = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapEmailAttribute = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'User Home Folder Naming Rule')"
 				:value="ldapConfigProxy.homeFolderNamingRule"
 				:helper-text="t('user_ldap', 'Leave empty for username (default). Otherwise, specify an LDAP/AD attribute.')"
-				@change.native="(event) => ldapConfigProxy.homeFolderNamingRule = event.target.value" />
+				@change="(event) => ldapConfigProxy.homeFolderNamingRule = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', '`$home` Placeholder Field')"
 				:value="ldapConfigProxy.ldapExtStorageHomeAttribute"
 				:helper-text="t('user_ldap', '$home in an external storage configuration will be replaced with the value of the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapExtStorageHomeAttribute = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapExtStorageHomeAttribute = event.target.value" />
 		</details>
 
 		<details name="ldap-wizard__advanced__section" class="ldap-wizard__advanced__section">
@@ -196,70 +196,70 @@
 				:label="t('user_ldap', 'Phone Field')"
 				:value="ldapConfigProxy.ldapAttributePhone"
 				:helper-text="t('user_ldap', 'User profile Phone will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributePhone = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributePhone = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Website Field')"
 				:value="ldapConfigProxy.ldapAttributeWebsite"
 				:helper-text="t('user_ldap', 'User profile Website will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeWebsite = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeWebsite = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Address Field')"
 				:value="ldapConfigProxy.ldapAttributeAddress"
 				:helper-text="t('user_ldap', 'User profile Address will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeAddress = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeAddress = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Twitter Field')"
 				:value="ldapConfigProxy.ldapAttributeTwitter"
 				:helper-text="t('user_ldap', 'User profile Twitter will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeTwitter = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeTwitter = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Fediverse Field')"
 				:value="ldapConfigProxy.ldapAttributeFediverse"
 				:helper-text="t('user_ldap', 'User profile Fediverse will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeFediverse = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeFediverse = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Organisation Field')"
 				:value="ldapConfigProxy.ldapAttributeOrganisation"
 				:helper-text="t('user_ldap', 'User profile Organisation will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeOrganisation = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeOrganisation = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Role Field')"
 				:value="ldapConfigProxy.ldapAttributeRole"
 				:helper-text="t('user_ldap', 'User profile Role will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeRole = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeRole = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Headline Field')"
 				:value="ldapConfigProxy.ldapAttributeHeadline"
 				:helper-text="t('user_ldap', 'User profile Headline will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeHeadline = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeHeadline = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Biography Field')"
 				:value="ldapConfigProxy.ldapAttributeBiography"
 				:helper-text="t('user_ldap', 'User profile Biography will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeBiography = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeBiography = event.target.value" />
 
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'Birthdate Field')"
 				:value="ldapConfigProxy.ldapAttributeBirthDate"
 				:helper-text="t('user_ldap', 'User profile Date of birth will be set from the specified attribute')"
-				@change.native="(event) => ldapConfigProxy.ldapAttributeBirthDate = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapAttributeBirthDate = event.target.value" />
 		</details>
 	</fieldset>
 </template>
diff --git a/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue b/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue
index 35962ae5c2874..79559115a30b5 100644
--- a/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/ExpertTab.vue
@@ -14,8 +14,7 @@
 				autocomplete="off"
 				:label="t('user_ldap', 'Internal Username Attribute:')"
 				:value="ldapConfigProxy.ldapExpertUsernameAttr"
-				:label-outside="true"
-				@change.native="(event) => ldapConfigProxy.ldapExpertUsernameAttr = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapExpertUsernameAttr = event.target.value" />
 		</div>
 
 		<div class="ldap-wizard__expert__line">
@@ -28,12 +27,12 @@
 				autocomplete="off"
 				:label="t('user_ldap', 'UUID Attribute for Users')"
 				:value="ldapConfigProxy.ldapExpertUUIDUserAttr"
-				@change.native="(event) => ldapConfigProxy.ldapExpertUUIDUserAttr = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapExpertUUIDUserAttr = event.target.value" />
 			<NcTextField
 				autocomplete="off"
 				:label="t('user_ldap', 'UUID Attribute for Groups')"
 				:value="ldapConfigProxy.ldapExpertUUIDGroupAttr"
-				@change.native="(event) => ldapConfigProxy.ldapExpertUUIDGroupAttr = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapExpertUUIDGroupAttr = event.target.value" />
 		</div>
 	</fieldset>
 </template>
diff --git a/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue b/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue
index 00a045b7fc2a8..3e09b5d1cd83f 100644
--- a/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/GroupsTab.vue
@@ -28,14 +28,14 @@
 
 		<div class="ldap-wizard__groups__line ldap-wizard__groups__groups-filter">
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.ldapGroupFilterMode === '1'"
-				@update:checked="toggleFilterMode">
+				:model-value="ldapConfigProxy.ldapGroupFilterMode === '1'"
+				@update:model-value="toggleFilterMode">
 				{{ t('user_ldap', 'Edit LDAP Query') }}
 			</NcCheckboxRadioSwitch>
 
 			<div v-if="ldapConfigProxy.ldapGroupFilterMode === '1'">
 				<NcTextArea
-					:value.sync="ldapConfigProxy.ldapGroupFilter"
+					v-model="ldapConfigProxy.ldapGroupFilter"
 					:placeholder="t('user_ldap', 'Edit LDAP Query')"
 					:helper-text="t('user_ldap', 'The filter specifies which LDAP groups shall have access to the {instanceName} instance.', { instanceName })" />
 			</div>
@@ -96,10 +96,10 @@ const ldapGroupFilterGroups = computed({
  */
 async function init() {
 	const response1 = await callWizard('determineGroupObjectClasses', props.configId)
-	groupObjectClasses.value = response1.options!.ldap_groupfilter_objectclass
+	groupObjectClasses.value = response1.options?.ldap_groupfilter_objectclass ?? []
 
 	const response2 = await callWizard('determineGroupsForGroups', props.configId)
-	groupGroups.value = response2.options!.ldap_groupfilter_groups
+	groupGroups.value = response2.options?.ldap_groupfilter_groups ?? []
 }
 
 init()
@@ -110,7 +110,7 @@ init()
 async function getGroupFilter() {
 	const response = await callWizard('getGroupFilter', props.configId)
 	// Not using ldapConfig to avoid triggering the save logic.
-	ldapConfigs.value[props.configId].ldapGroupFilter = response.changes!.ldap_group_filter as string
+	ldapConfigs.value[props.configId]!.ldapGroupFilter = (response.changes?.ldap_group_filter as string | undefined) ?? ''
 }
 
 /**
diff --git a/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue b/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue
index d734c726cb34c..d8742ed40ae85 100644
--- a/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/LoginTab.vue
@@ -21,16 +21,16 @@
 		<div class="ldap-wizard__login__line ldap-wizard__login__user-login-filter">
 			<NcCheckboxRadioSwitch
 				:model-value="ldapLoginFilterMode"
-				@update:checked="toggleFilterMode">
+				@update:model-value="toggleFilterMode">
 				{{ t('user_ldap', 'Edit LDAP Query') }}
 			</NcCheckboxRadioSwitch>
 
 			<NcTextArea
 				v-if="ldapLoginFilterMode"
-				:value="ldapConfigProxy.ldapLoginFilter"
+				:model-value="ldapConfigProxy.ldapLoginFilter"
 				:placeholder="t('user_ldap', 'Edit LDAP Query')"
 				:helper-text="t('user_ldap', 'Defines the filter to apply, when login is attempted. `%%uid` replaces the username in the login action. Example: `uid=%%uid`')"
-				@change.native="(event) => ldapConfigProxy.ldapLoginFilter = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapLoginFilter = event.target.value" />
 			<div v-else>
 				<span>{{ t('user_ldap', 'LDAP Filter:') }}</span>
 				<code>{{ ldapConfigProxy.ldapLoginFilter }}</code>
@@ -41,7 +41,7 @@
 			<NcTextField
 				v-model="testUsername"
 				:helper-text="t('user_ldap', 'Attempts to receive a DN for the given login name and the current login filter')"
-				:placeholder="t('user_ldap', 'Test Login name')"
+				:label="t('user_ldap', 'Test Login name')"
 				autocomplete="off" />
 
 			<NcButton
@@ -90,7 +90,7 @@ const filteredLoginFilterOptions = computed(() => loginFilterOptions.value.filte
  */
 async function init() {
 	const response = await callWizard('determineAttributes', props.configId)
-	loginFilterOptions.value = response.options!.ldap_loginfilter_attributes
+	loginFilterOptions.value = response.options?.ldap_loginfilter_attributes ?? []
 }
 
 init()
@@ -102,7 +102,7 @@ async function getUserLoginFilter() {
 	if (ldapConfigProxy.value.ldapLoginFilterMode === '0') {
 		const response = await callWizard('getUserLoginFilter', props.configId)
 		// Not using ldapConfig to avoid triggering the save logic.
-		ldapConfigs.value[props.configId].ldapLoginFilter = response.changes!.ldap_login_filter as string
+		ldapConfigs.value[props.configId]!.ldapLoginFilter = (response.changes?.ldap_login_filter as string | undefined) ?? ''
 	}
 }
 
diff --git a/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue b/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue
index 96802688430ed..08a1da5c2c818 100644
--- a/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/ServerTab.vue
@@ -6,10 +6,10 @@
 	<fieldset class="ldap-wizard__server">
 		<div class="ldap-wizard__server__line">
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.ldapConfigurationActive === '1'"
+				:model-value="ldapConfigProxy.ldapConfigurationActive === '1'"
 				type="switch"
 				:aria-label="t('user_ldap', 'When unchecked, this configuration will be skipped.')"
-				@update:checked="ldapConfigProxy.ldapConfigurationActive = $event ? '1' : '0'">
+				@update:model-value="ldapConfigProxy.ldapConfigurationActive = $event ? '1' : '0'">
 				{{ t('user_ldap', 'Configuration Active') }}
 			</NcCheckboxRadioSwitch>
 
@@ -33,18 +33,20 @@
 
 		<div class="ldap-wizard__server__line">
 			<NcTextField
-				:value="ldapConfigProxy.ldapHost"
+				:model-value="ldapConfigProxy.ldapHost"
 				:helper-text="t('user_ldap', 'You can omit the protocol, unless you require SSL. If so, start with ldaps://')"
-				:placeholder="t('user_ldap', 'Host')"
+				:label="t('user_ldap', 'Host')"
+				:placeholder="t('user_ldap', 'ldaps://localhost')"
 				autocomplete="off"
-				@change.native="(event) => ldapConfigProxy.ldapHost = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapHost = event.target.value" />
 			<div class="ldap-wizard__server__host__port">
 				<NcTextField
-					:value="ldapConfigProxy.ldapPort"
-					:placeholder="t('user_ldap', 'Port')"
+					:model-value="ldapConfigProxy.ldapPort"
+					:label="t('user_ldap', 'Port')"
+					:placeholder="t('user_ldap', '389')"
 					type="number"
 					autocomplete="off"
-					@change.native="(event) => ldapConfigProxy.ldapPort = event.target.value" />
+					@change="(event) => ldapConfigProxy.ldapPort = event.target.value" />
 				<NcButton :disabled="loadingGuessPortAndTLS" @click="guessPortAndTLS">
 					{{ t('user_ldap', 'Detect Port') }}
 				</NcButton>
@@ -54,8 +56,9 @@
 		<div class="ldap-wizard__server__line">
 			<NcTextField
 				v-model="localLdapAgentName"
-				:helper-text="t('user_ldap', 'The DN of the client user with which the bind shall be done, e.g. uid=agent,dc=example,dc=com. For anonymous access, leave DN and Password empty.')"
-				:placeholder="t('user_ldap', 'User DN')"
+				:helper-text="t('user_ldap', 'The DN of the client user with which the bind shall be done. For anonymous access, leave DN and Password empty.')"
+				:label="t('user_ldap', 'User DN')"
+				:placeholder="t('user_ldap', 'uid=agent,dc=example,dc=com')"
 				autocomplete="off" />
 		</div>
 
@@ -64,7 +67,7 @@
 				v-model="localLdapAgentPassword"
 				type="password"
 				:helper-text="t('user_ldap', 'For anonymous access, leave DN and Password empty.')"
-				:placeholder="t('user_ldap', 'Password')"
+				:label="t('user_ldap', 'Password')"
 				autocomplete="off" />
 
 			<NcButton :disabled="!needsToSaveCredentials" @click="updateCredentials">
@@ -75,10 +78,10 @@
 		<div class="ldap-wizard__server__line">
 			<NcTextArea
 				:label="t('user_ldap', 'Base DN')"
-				:value="ldapConfigProxy.ldapBase"
+				:model-value="ldapConfigProxy.ldapBase"
 				:placeholder="t('user_ldap', 'One Base DN per line')"
 				:helper-text="t('user_ldap', 'You can specify Base DN for users and groups in the Advanced tab')"
-				@change.native="(event) => ldapConfigProxy.ldapBase = event.target.value" />
+				@change="(event) => ldapConfigProxy.ldapBase = event.target.value" />
 
 			<NcButton :disabled="loadingGuessBaseDN" @click="guessBaseDN">
 				{{ t('user_ldap', 'Detect Base DN') }}
diff --git a/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue b/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue
index f706033f55d1f..db195b438b5e6 100644
--- a/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue
+++ b/apps/user_ldap/src/components/SettingsTabs/UsersTab.vue
@@ -29,14 +29,14 @@
 
 		<div class="ldap-wizard__users__line ldap-wizard__users__user-filter">
 			<NcCheckboxRadioSwitch
-				:checked="ldapConfigProxy.ldapUserFilterMode === '1'"
-				@update:checked="toggleFilterMode">
+				:model-value="ldapConfigProxy.ldapUserFilterMode === '1'"
+				@update:model-value="toggleFilterMode">
 				{{ t('user_ldap', 'Edit LDAP Query') }}
 			</NcCheckboxRadioSwitch>
 
 			<div v-if="ldapConfigProxy.ldapUserFilterMode === '1'">
 				<NcTextArea
-					:value.sync="ldapConfigProxy.ldapUserFilter"
+					v-model="ldapConfigProxy.ldapUserFilter"
 					:placeholder="t('user_ldap', 'Edit LDAP Query')"
 					:helper-text="t('user_ldap', 'The filter specifies which LDAP users shall have access to the {instanceName} instance.', { instanceName })" />
 			</div>
@@ -97,14 +97,14 @@ const ldapUserFilterGroups = computed({
  */
 async function init() {
 	const response1 = await callWizard('determineUserObjectClasses', props.configId)
-	userObjectClasses.value = response1.options!.ldap_userfilter_objectclass
+	userObjectClasses.value = response1.options?.ldap_userfilter_objectclass ?? []
 	// Not using ldapConfig to avoid triggering the save logic.
-	ldapConfigs.value[props.configId].ldapUserFilterObjectclass = response1.changes!.ldap_userfilter_objectclass?.join(';') ?? ''
+	ldapConfigs.value[props.configId]!.ldapUserFilterObjectclass = (response1.changes?.ldap_userfilter_objectclass as string[] | undefined)?.join(';') ?? ''
 
 	const response2 = await callWizard('determineGroupsForUsers', props.configId)
-	userGroups.value = response2.options!.ldap_userfilter_groups
+	userGroups.value = response2.options?.ldap_userfilter_groups ?? []
 	// Not using ldapConfig to avoid triggering the save logic.
-	ldapConfigs.value[props.configId].ldapUserFilterGroups = response2.changes!.ldap_userfilter_groups?.join(';') ?? ''
+	ldapConfigs.value[props.configId]!.ldapUserFilterGroups = (response2.changes?.ldap_userfilter_groups as string[] | undefined)?.join(';') ?? ''
 }
 
 init()
@@ -116,11 +116,11 @@ async function reloadFilters() {
 	if (ldapConfigProxy.value.ldapUserFilterMode === '0') {
 		const response1 = await callWizard('getUserListFilter', props.configId)
 		// Not using ldapConfig to avoid triggering the save logic.
-		ldapConfigs.value[props.configId].ldapUserFilter = response1.changes!.ldap_userlist_filter as string
+		ldapConfigs.value[props.configId]!.ldapUserFilter = (response1.changes?.ldap_userlist_filter as string | undefined) ?? ''
 
 		const response2 = await callWizard('getUserLoginFilter', props.configId)
 		// Not using ldapConfig to avoid triggering the save logic.
-		ldapConfigs.value[props.configId].ldapLoginFilter = response2.changes!.ldap_userlogin_filter as string
+		ldapConfigs.value[props.configId]!.ldapLoginFilter = (response2.changes?.ldap_userlogin_filter as string | undefined) ?? ''
 	}
 }
 
diff --git a/apps/user_ldap/src/main.ts b/apps/user_ldap/src/main.ts
deleted file mode 100644
index a65f030d69d86..0000000000000
--- a/apps/user_ldap/src/main.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getCSPNonce } from '@nextcloud/auth'
-import { PiniaVuePlugin } from 'pinia'
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import Vue from 'vue'
-import LDAPSettingsApp from './LDAPSettingsApp.vue'
-import { pinia } from './store/index.ts'
-
-__webpack_nonce__ = getCSPNonce()
-
-// Init Pinia store
-Vue.use(PiniaVuePlugin)
-
-const LDAPSettingsAppVue = Vue.extend(LDAPSettingsApp)
-new LDAPSettingsAppVue({
-	name: 'LDAPSettingsApp',
-	pinia,
-}).$mount('#content-ldap-settings')
diff --git a/apps/user_ldap/src/services/ldapConfigService.ts b/apps/user_ldap/src/services/ldapConfigService.ts
index c2b2a0d44359a..a1c767e12bdf8 100644
--- a/apps/user_ldap/src/services/ldapConfigService.ts
+++ b/apps/user_ldap/src/services/ldapConfigService.ts
@@ -74,7 +74,7 @@ export async function getConfig(configId: string): Promise<LDAPConfig> {
  * @param configId
  * @param config
  */
-export async function updateConfig(configId: string, config: LDAPConfig): Promise<LDAPConfig> {
+export async function updateConfig(configId: string, config: Partial<LDAPConfig>): Promise<LDAPConfig> {
 	const response = await axios.put(
 		generateOcsUrl('apps/user_ldap/api/v1/config/{configId}', { configId }),
 		{ configData: config },
@@ -142,7 +142,7 @@ export async function clearMapping(subject: 'user' | 'group') {
 			{ subject },
 		) as AxiosResponse<OCSResponse>
 
-		logger.debug('Cleared mapping', { subject, params, response })
+		logger.debug('Cleared mapping', { subject, response })
 		showSuccess(t('user_ldap', 'Mapping cleared'))
 		return true
 	} catch (error) {
diff --git a/apps/user_ldap/src/settings-admin.ts b/apps/user_ldap/src/settings-admin.ts
new file mode 100644
index 0000000000000..f7c25e2344a1f
--- /dev/null
+++ b/apps/user_ldap/src/settings-admin.ts
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { createApp } from 'vue'
+import LDAPSettingsApp from './LDAPSettingsApp.vue'
+import { pinia } from './store/index.ts'
+
+const app = createApp(LDAPSettingsApp)
+app.use(pinia)
+app.mount('#content-ldap-settings')
diff --git a/apps/user_ldap/src/store/configs.ts b/apps/user_ldap/src/store/configs.ts
index 961e7b513bbe7..4cd6d9bf33092 100644
--- a/apps/user_ldap/src/store/configs.ts
+++ b/apps/user_ldap/src/store/configs.ts
@@ -7,13 +7,13 @@ import type { LDAPConfig } from '../models/index.ts'
 
 import { loadState } from '@nextcloud/initial-state'
 import { defineStore } from 'pinia'
-import Vue, { computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { copyConfig, createConfig, deleteConfig, getConfig, updateConfig } from '../services/ldapConfigService.ts'
 
 export const useLDAPConfigsStore = defineStore('ldap-configs', () => {
 	const ldapConfigs = ref(loadState('user_ldap', 'ldapConfigs') as Record<string, LDAPConfig>)
-	const selectedConfigId = ref<string>(Object.keys(ldapConfigs.value)[0])
-	const selectedConfig = computed(() => ldapConfigs.value[selectedConfigId.value])
+	const selectedConfigId = ref<string | undefined>(Object.keys(ldapConfigs.value)[0])
+	const selectedConfig = computed(() => selectedConfigId.value === undefined ? undefined : ldapConfigs.value[selectedConfigId.value])
 	const updatingConfig = ref(0)
 
 	/**
@@ -22,6 +22,10 @@ export const useLDAPConfigsStore = defineStore('ldap-configs', () => {
 	 * @param postSetHooks
 	 */
 	function getConfigProxy<J>(configId: string, postSetHooks: Partial<Record<keyof LDAPConfig, (value: J) => void>> = {}) {
+		if (ldapConfigs.value[configId] === undefined) {
+			throw new Error(`Config with id ${configId} does not exist`)
+		}
+
 		return new Proxy(ldapConfigs.value[configId], {
 			get(target, property) {
 				return target[property]
@@ -49,7 +53,7 @@ export const useLDAPConfigsStore = defineStore('ldap-configs', () => {
 	 */
 	async function create() {
 		const configId = await createConfig()
-		Vue.set(ldapConfigs.value, configId, await getConfig(configId))
+		ldapConfigs.value[configId] = await getConfig(configId)
 		selectedConfigId.value = configId
 		return configId
 	}
@@ -59,8 +63,13 @@ export const useLDAPConfigsStore = defineStore('ldap-configs', () => {
 	 * @param fromConfigId
 	 */
 	async function _copyConfig(fromConfigId: string) {
+		if (ldapConfigs.value[fromConfigId] === undefined) {
+			throw new Error(`Config with id ${fromConfigId} does not exist`)
+		}
+
 		const configId = await copyConfig(fromConfigId)
-		Vue.set(ldapConfigs.value, configId, { ...ldapConfigs.value[fromConfigId] })
+
+		ldapConfigs.value[configId] = { ...ldapConfigs.value[fromConfigId] }
 		selectedConfigId.value = configId
 		return configId
 	}
@@ -72,7 +81,7 @@ export const useLDAPConfigsStore = defineStore('ldap-configs', () => {
 	async function removeConfig(configId: string) {
 		const result = await deleteConfig(configId)
 		if (result === true) {
-			Vue.delete(ldapConfigs.value, configId)
+			delete ldapConfigs.value[configId]
 		}
 
 		selectedConfigId.value = Object.keys(ldapConfigs.value)[0] ?? await create()
diff --git a/apps/user_ldap/src/views/Settings.vue b/apps/user_ldap/src/views/Settings.vue
index 5c855d4b117c1..eb0e41c5a90a5 100644
--- a/apps/user_ldap/src/views/Settings.vue
+++ b/apps/user_ldap/src/views/Settings.vue
@@ -42,8 +42,8 @@
 						<NcCheckboxRadioSwitch
 							v-for="(tabLabel, tabId) in tabs"
 							:key="tabId"
+							v-model="selectedTab"
 							:button-variant="true"
-							:checked.sync="selectedTab"
 							:value="tabId"
 							type="radio"
 							:disabled="tabId !== 'server' && !selectedConfigHasServerInfo"
diff --git a/apps/user_ldap/templates/part.settingcontrols.php b/apps/user_ldap/templates/part.settingcontrols.php
deleted file mode 100644
index 4105fa751b9e4..0000000000000
--- a/apps/user_ldap/templates/part.settingcontrols.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<?php
-
-/**
- * SPDX-FileCopyrightText: 2017-2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2013-2017 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-?>
-<div class="ldapSettingControls">
-	<button type="button" class="ldap_action_test_connection" name="ldap_action_test_connection">
-		<?php p($l->t('Test Configuration'));?>
-	</button>
-	<a href="<?php p(link_to_docs('admin-ldap')); ?>"
-		target="_blank" rel="noreferrer noopener">
-		<img src="<?php print_unescaped(image_path('core', 'actions/info.svg')); ?>"
-			style="height:1.75ex" />
-		<?php p($l->t('Help'));?>
-	</a>
-</div>
diff --git a/apps/user_ldap/templates/part.wizard-groupfilter.php b/apps/user_ldap/templates/part.wizard-groupfilter.php
deleted file mode 100644
index bab08d85da8ca..0000000000000
--- a/apps/user_ldap/templates/part.wizard-groupfilter.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-
-/**
- * SPDX-FileCopyrightText: 2017-2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2013-2015 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-?>
-<fieldset id="ldapWizard4">
-	<div>
-		<p>
-			<?php p($l->t('Groups meeting these criteria are available in %s:', [$theme->getName()]));?>
-		</p>
-		<p>
-			<label for="ldap_groupfilter_objectclass">
-				<?php p($l->t('Only these object classes:'));?>
-			</label>
-
-			<select id="ldap_groupfilter_objectclass" multiple="multiple"
-			 name="ldap_groupfilter_objectclass" class="multiSelectPlugin">
-			</select>
-		</p>
-		<p>
-			<label for="ldap_groupfilter_groups">
-				<?php p($l->t('Only from these groups:'));?>
-			</label>
-
-			<input type="text" class="ldapManyGroupsSupport ldapManyGroupsSearch hidden" placeholder="<?php p($l->t('Search groups'));?>" />
-
-			<select id="ldap_groupfilter_groups" multiple="multiple"
-			 name="ldap_groupfilter_groups" class="multiSelectPlugin">
-			</select>
-
-		</p>
-		<p class="ldapManyGroupsSupport hidden">
-			<label></label>
-			<select class="ldapGroupList ldapGroupListAvailable" multiple="multiple"
-					aria-describedby="ldapGroupListAvailable_instructions"
-					title="<?php p($l->t('Available groups'));?>"></select>
-			<p class="hidden-visually" id="ldapGroupListAvailable_instructions">
-					<?php p($l->t('Available groups'));?>
-			</p>
-			<span class="buttonSpan">
-				<button class="ldapGroupListSelect" type="button">&gt;</button><br/>
-				<button class="ldapGroupListDeselect" type="button">&lt;</button>
-			</span>
-			<select class="ldapGroupList ldapGroupListSelected" multiple="multiple"
-					aria-describedby="ldapGroupListSelected_instructions"
-					title="<?php p($l->t('Selected groups'));?>"></select>
-			<p class="hidden-visually" id="ldapGroupListSelected_instructions">
-					<?php p($l->t('Selected groups'));?>
-			</p>
-		</p>
-		<p>
-			<label><a id='toggleRawGroupFilter' class='ldapToggle'>↓ <?php p($l->t('Edit LDAP Query'));?></a></label>
-		</p>
-		<p id="ldapReadOnlyGroupFilterContainer" class="hidden ldapReadOnlyFilterContainer">
-			<label><?php p($l->t('LDAP Filter:'));?></label>
-			<span class="ldapFilterReadOnlyElement ldapInputColElement"></span>
-		</p>
-		<p id="rawGroupFilterContainer" class="invisible">
-			<textarea type="text" id="ldap_group_filter" name="ldap_group_filter"
-					  placeholder="<?php p($l->t('Edit LDAP Query'));?>"
-					  aria-describedby="rawGroupFilterContainer_instructions"
-					  title="<?php p($l->t('The filter specifies which LDAP groups shall have access to the %s instance.', [$theme->getName()]));?>">
-			</textarea>
-			<p class="hidden-visually" id="rawGroupFilterContainer_instructions">
-				<?php p($l->t('The filter specifies which LDAP groups shall have access to the %s instance.', [$theme->getName()]));?>
-			</p>
-
-		</p>
-		<p>
-			<div class="ldapWizardInfo invisible">&nbsp;</div>
-		</p>
-		<p class="ldap_count">
-			<button class="ldapGetEntryCount ldapGetGroupCount" name="ldapGetEntryCount" type="button">
-				<?php p($l->t('Verify settings and count the groups'));?>
-			</button>
-			<span id="ldap_group_count"></span>
-		</p>
-		<?php print_unescaped($_['wizardControls']); ?>
-	</div>
-</fieldset>
diff --git a/apps/user_ldap/templates/part.wizard-loginfilter.php b/apps/user_ldap/templates/part.wizard-loginfilter.php
deleted file mode 100644
index 541a5c06c8c76..0000000000000
--- a/apps/user_ldap/templates/part.wizard-loginfilter.php
+++ /dev/null
@@ -1,85 +0,0 @@
-<?php
-
-/**
- * SPDX-FileCopyrightText: 2017-2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2013-2017 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-?>
-<fieldset id="ldapWizard3">
-	<div>
-		<p>
-			<?php p($l->t('When logging in, %s will find the user based on the following attributes:', [$theme->getName()]));?>
-		</p>
-		<p>
-			<label for="ldap_loginfilter_username">
-				<?php p($l->t('LDAP/AD Username:'));?>
-			</label>
-
-			<input type="checkbox" id="ldap_loginfilter_username"
-				   aria-describedby="ldap_loginfilter_username_instructions"
-				   title="<?php p($l->t('Allows login against the LDAP/AD username, which is either "uid" or "sAMAccountName" and will be detected.'));?>"
-				   name="ldap_loginfilter_username" value="1" />
-			<p class="hidden-visually" id="ldap_loginfilter_username_instructions">
-				<?php p($l->t('Allows login against the LDAP/AD username, which is either "uid" or "sAMAccountName" and will be detected.'));?>
-			</p>
-		</p>
-		<p>
-			<label for="ldap_loginfilter_email">
-				<?php p($l->t('LDAP/AD Email Address:'));?>
-			</label>
-
-			<input type="checkbox" id="ldap_loginfilter_email"
-				   title="<?php p($l->t('Allows login against an email attribute. "mail" and "mailPrimaryAddress" allowed.'));?>"
-				   aria-describedby="ldap_loginfilter_email_instructions"
-				   name="ldap_loginfilter_email" value="1" />
-			<p class="hidden-visually" id="ldap_loginfilter_email_instructions">
-				<?php p($l->t('Allows login against an email attribute. "mail" and "mailPrimaryAddress" allowed.'));?>
-			</p>
-		</p>
-		<p>
-			<label for="ldap_loginfilter_attributes">
-				<?php p($l->t('Other Attributes:'));?>
-			</label>
-
-			<select id="ldap_loginfilter_attributes" multiple="multiple"
-			 name="ldap_loginfilter_attributes" class="multiSelectPlugin">
-			</select>
-		</p>
-		<p>
-			<label><a id='toggleRawLoginFilter' class='ldapToggle'>↓ <?php p($l->t('Edit LDAP Query'));?></a></label>
-		</p>
-		<p id="ldapReadOnlyLoginFilterContainer" class="hidden ldapReadOnlyFilterContainer">
-			<label><?php p($l->t('LDAP Filter:'));?></label>
-			<span class="ldapFilterReadOnlyElement ldapInputColElement"></span>
-		</p>
-		<p id="rawLoginFilterContainer" class="invisible">
-			<textarea type="text" id="ldap_login_filter" name="ldap_login_filter"
-				class="ldapFilterInputElement"
-				placeholder="<?php p($l->t('Edit LDAP Query'));?>"
-				aria-describedby="ldap_login_filter_instructions"
-				title="<?php p($l->t('Defines the filter to apply, when login is attempted. "%%uid" replaces the username in the login action. Example: "uid=%%uid"'));?>">
-			</textarea>
-		<p class="hidden-visually" id="ldap_login_filter_instructions">
-			<?php p($l->t('Defines the filter to apply, when login is attempted. "%%uid" replaces the username in the login action. Example: "uid=%%uid"'));?>
-		</p>
-		</p>
-		<p>
-			<div class="ldapWizardInfo invisible">&nbsp;</div>
-		</p>
-		<p class="ldap_verify">
-			<input type="text" id="ldap_test_loginname" name="ldap_test_loginname"
-				   placeholder="<?php p($l->t('Test Loginname'));?>"
-				   class="ldapVerifyInput"
-				   aria-describedby="ldap_test_loginname_instructions"
-				   title="<?php p($l->t('Attempts to receive a DN for the given loginname and the current login filter'));?>"/>
-			<p class="hidden-visually" id="ldap_test_loginname_instructions">
-				<?php p($l->t('Attempts to receive a DN for the given loginname and the current login filter'));?>
-			</p>
-			<button class="ldapVerifyLoginName" name="ldapTestLoginSettings" type="button" disabled="disabled">
-				<?php p($l->t('Verify settings'));?>
-			</button>
-		</p>
-		<?php print_unescaped($_['wizardControls']); ?>
-	</div>
-</fieldset>
diff --git a/apps/user_ldap/templates/part.wizard-server.php b/apps/user_ldap/templates/part.wizard-server.php
deleted file mode 100644
index 9fb67342247cc..0000000000000
--- a/apps/user_ldap/templates/part.wizard-server.php
+++ /dev/null
@@ -1,137 +0,0 @@
-<?php
-
-/**
- * SPDX-FileCopyrightText: 2017-2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2013-2017 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-?>
-<fieldset id="ldapWizard1">
-		<p>
-		<select id="ldap_serverconfig_chooser" name="ldap_serverconfig_chooser">
-<?php
-$i = 1;
-$sel = ' selected';
-foreach ($_['serverConfigurationPrefixes'] as $prefix) {
-	?>
-			<option value="<?php p($prefix); ?>"<?php p($sel);
-	$sel = ''; ?>><?php p($l->t('%s. Server:', [$i++])); ?> <?php p(' ' . $_['serverConfigurationHosts'][$prefix]); ?></option>
-<?php
-}
-?>
-		</select>
-		<button type="button" id="ldap_action_add_configuration"
-			aria-describedby="ldap_action_add_configuration_instructions"
-			name="ldap_action_add_configuration" class="icon-add icon-default-style"
-			title="<?php p($l->t('Add a new configuration'));?>">&nbsp;</button>
-		<p class="hidden-visually" id="ldap_action_add_configuration_instructions">
-			<?php p($l->t('Add a new configuration'));?>
-		</p>
-		<button type="button" id="ldap_action_copy_configuration"
-			name="ldap_action_copy_configuration"
-			aria-describedby="ldap_action_copy_configuration_instructions"
-			class="ldapIconCopy icon-default-style"
-			title="<?php p($l->t('Copy current configuration into new directory binding'));?>">&nbsp;</button>
-		<p class="hidden-visually" id="ldap_action_copy_configuration_instructions">
-			<?php p($l->t('Copy current configuration into new directory binding'));?>
-		</p>
-		<button type="button" id="ldap_action_delete_configuration"
-			aria-describedby="ldap_action_delete_configuration_instructions"
-			name="ldap_action_delete_configuration" class="icon-delete icon-default-style"
-			title="<?php p($l->t('Delete the current configuration'));?>">&nbsp;</button>
-		<p class="hidden-visually" id="ldap_action_delete_configuration_instructions">
-			<?php p($l->t('Delete the current configuration'));?>
-		</p>
-		</p>
-
-		<div class="hostPortCombinator">
-			<div class="tablerow">
-				<div class="tablecell">
-					<div class="table">
-						<input type="text" class="host" id="ldap_host"
-							name="ldap_host"
-							aria-describedby="ldap_host_instructions"
-							placeholder="<?php p($l->t('Host'));?>"
-							title="<?php p($l->t('You can omit the protocol, unless you require SSL. If so, start with ldaps://'));?>"
-							/>
-						<p class="hidden-visually" id="ldap_host_instructions">
-							<?php p($l->t('You can omit the protocol, unless you require SSL. If so, start with ldaps://'));?>
-						</p>
-						<span class="hostPortCombinatorSpan">
-							<input type="number" id="ldap_port" name="ldap_port"
-								placeholder="<?php p($l->t('Port'));?>" />
-							<button class="ldapDetectPort" name="ldapDetectPort" type="button">
-								<?php p($l->t('Detect Port'));?>
-							</button>
-						</span>
-					</div>
-				</div>
-			</div>
-			<div class="tablerow">&nbsp;</div>
-			<div class="tablerow">
-				<input type="text" id="ldap_dn" name="ldap_dn"
-				class="tablecell"
-				aria-describedby="ldap_dn_instructions"
-				placeholder="<?php p($l->t('User DN'));?>" autocomplete="off"
-				title="<?php p($l->t('The DN of the client user with which the bind shall be done, e.g. uid=agent,dc=example,dc=com. For anonymous access, leave DN and Password empty.'));?>"
-				/>
-				<p class="hidden-visually" id="ldap_dn_instructions">
-					<?php p($l->t('The DN of the client user with which the bind shall be done, e.g. uid=agent,dc=example,dc=com. For anonymous access, leave DN and Password empty.'));?>
-				</p>
-			</div>
-
-			<div class="tablerow">
-				<input type="password" id="ldap_agent_password"
-				class="tablecell" name="ldap_agent_password"
-				aria-describedby="ldap_agent_password_instructions"
-				placeholder="<?php p($l->t('Password'));?>" autocomplete="off"
-				title="<?php p($l->t('For anonymous access, leave DN and Password empty.'));?>"
-				/>
-				<p class="hidden-visually" id="ldap_agent_password_instructions">
-					<?php p($l->t('For anonymous access, leave DN and Password empty.'));?>
-				</p>
-				<button class="ldapSaveAgentCredentials" name="ldapSaveAgentCredentials" type="button">
-					<?php p($l->t('Save Credentials'));?>
-				</button>
-			</div>
-			<div class="tablerow">&nbsp;</div>
-
-			<div class="tablerow">
-				<textarea id="ldap_base" name="ldap_base"
-					class="tablecell"
-					aria-describedby="ldap_base_instructions"
-					placeholder="<?php p($l->t('One Base DN per line'));?>"
-					title="<?php p($l->t('You can specify Base DN for users and groups in the Advanced tab'));?>">
-				</textarea>
-				<p class="hidden-visually" id="ldap_base_instructions">
-					<?php p($l->t('You can specify Base DN for users and groups in the Advanced tab'));?>
-				</p>
-				<button class="ldapDetectBase" name="ldapDetectBase" type="button">
-					<?php p($l->t('Detect Base DN'));?>
-				</button>
-				<button class="ldapTestBase" name="ldapTestBase" type="button">
-					<?php p($l->t('Test Base DN'));?>
-				</button>
-			</div>
-
-			<div class="tablerow left">
-				<input type="checkbox" id="ldap_experienced_admin" value="1"
-					name="ldap_experienced_admin" class="tablecell"
-					aria-describedby="ldap_experienced_admin_instructions"
-					title="<?php p($l->t('Avoids automatic LDAP requests. Better for bigger setups, but requires some LDAP knowledge.'));?>"
-					/>
-				<p class="hidden-visually" id="ldap_experienced_admin_instructions">
-					<?php p($l->t('Avoids automatic LDAP requests. Better for bigger setups, but requires some LDAP knowledge.'));?>
-				</p>
-				<label for="ldap_experienced_admin" class="tablecell">
-					<?php p($l->t('Manually enter LDAP filters (recommended for large directories)'));?>
-				</label>
-			</div>
-
-			<div class="tablerow">
-				<div class="tablecell ldapWizardInfo invisible">&nbsp;
-				</div>
-			</div>
-		</div>
-		<?php print_unescaped($_['wizardControls']); ?>
-	</fieldset>
diff --git a/apps/user_ldap/templates/part.wizard-userfilter.php b/apps/user_ldap/templates/part.wizard-userfilter.php
deleted file mode 100644
index ab505c65d4405..0000000000000
--- a/apps/user_ldap/templates/part.wizard-userfilter.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<?php
-
-/**
- * SPDX-FileCopyrightText: 2017-2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2013-2016 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-?>
-<fieldset id="ldapWizard2">
-	<div>
-		<p>
-			<?php p($l->t('Listing and searching for users is constrained by these criteria:'));?>
-		</p>
-		<p>
-			<label for="ldap_userfilter_objectclass">
-				<?php p($l->t('Only these object classes:'));?>
-			</label>
-
-			<select id="ldap_userfilter_objectclass" multiple="multiple"
-			 name="ldap_userfilter_objectclass" class="multiSelectPlugin">
-			</select>
-		</p>
-		<p>
-			<label></label>
-			<span class="ldapInputColElement"><?php p($l->t('The most common object classes for users are organizationalPerson, person, user, and inetOrgPerson. If you are not sure which object class to select, please consult your directory admin.'));?></span>
-		</p>
-		<p>
-			<label for="ldap_userfilter_groups">
-				<?php p($l->t('Only from these groups:'));?>
-			</label>
-
-			<input type="text" class="ldapManyGroupsSupport ldapManyGroupsSearch hidden" placeholder="<?php p($l->t('Search groups'));?>" />
-
-			<select id="ldap_userfilter_groups" multiple="multiple"
-			 name="ldap_userfilter_groups" class="multiSelectPlugin">
-			</select>
-		</p>
-		<p class="ldapManyGroupsSupport hidden">
-			<label></label>
-			<select class="ldapGroupList ldapGroupListAvailable" multiple="multiple"
-					aria-describedby="ldapGroupListAvailable_instructions"
-					title="<?php p($l->t('Available groups'));?>"></select>
-			<p class="hidden-visually" id="ldapGroupListAvailable_instructions">
-				<?php p($l->t('Available groups'));?>
-			</p>
-			<span class="buttonSpan">
-				<button class="ldapGroupListSelect" type="button">&gt;</button><br/>
-				<button class="ldapGroupListDeselect" type="button">&lt;</button>
-			</span>
-			<select class="ldapGroupList ldapGroupListSelected" multiple="multiple"
-					aria-describedby="ldapGroupListSelected_instructions"
-					title="<?php p($l->t('Selected groups'));?>"></select>
-			<p class="hidden-visually" id="ldapGroupListSelected_instructions">
-				<?php p($l->t('Selected groups'));?>
-			</p>
-		</p>
-		<p>
-			<label><a id='toggleRawUserFilter' class='ldapToggle'>↓ <?php p($l->t('Edit LDAP Query'));?></a></label>
-		</p>
-		<p id="ldapReadOnlyUserFilterContainer" class="hidden ldapReadOnlyFilterContainer">
-			<label><?php p($l->t('LDAP Filter:'));?></label>
-			<span class="ldapFilterReadOnlyElement ldapInputColElement"></span>
-		</p>
-		<p id="rawUserFilterContainer">
-			<textarea type="text" id="ldap_userlist_filter" name="ldap_userlist_filter"
-				class="ldapFilterInputElement"
-				placeholder="<?php p($l->t('Edit LDAP Query'));?>"
-				aria-describedby="ldap_userlist_filter_instructions"
-				title="<?php p($l->t('The filter specifies which LDAP users shall have access to the %s instance.', [$theme->getName()]));?>">
-			</textarea>
-		<p class="hidden-visually" id="ldap_userlist_filter_instructions">
-			<?php p($l->t('The filter specifies which LDAP users shall have access to the %s instance.', [$theme->getName()]));?>
-		</p>
-		</p>
-		<p>
-			<div class="ldapWizardInfo invisible">&nbsp;</div>
-		</p>
-		<p class="ldap_count">
-			<button class="ldapGetEntryCount ldapGetUserCount" name="ldapGetEntryCount" type="button">
-				<?php p($l->t('Verify settings and count users'));?>
-			</button>
-			<span id="ldap_user_count"></span>
-		</p>
-		<?php print_unescaped($_['wizardControls']); ?>
-	</div>
-</fieldset>
diff --git a/apps/user_ldap/templates/part.wizardcontrols.php b/apps/user_ldap/templates/part.wizardcontrols.php
deleted file mode 100644
index 2c6b1f16d675a..0000000000000
--- a/apps/user_ldap/templates/part.wizardcontrols.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-/**
- * SPDX-FileCopyrightText: 2017-2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-FileCopyrightText: 2013-2017 ownCloud, Inc.
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-?>
-<div class="ldapWizardControls">
-	<span class="ldap_saving hidden"><?php p($l->t('Saving'));?> <img class="wizSpinner" src="<?php p(image_path('core', 'loading.gif')); ?>"/></span>
-	<span class="ldap_config_state_indicator"></span> <span class="ldap_config_state_indicator_sign"></span>
-	<button class="ldap_action_back invisible" name="ldap_action_back"
-			type="button">
-		<?php p($l->t('Back'));?>
-	</button>
-	<button class="ldap_action_continue primary" name="ldap_action_continue" type="button">
-		<?php p($l->t('Continue'));?>
-	</button>
-	<a href="<?php p(link_to_docs('admin-ldap')); ?>"
-		target="_blank" rel="noreferrer noopener">
-		<img src="<?php print_unescaped(image_path('core', 'actions/info.svg')); ?>"
-			style="height:1.75ex" />
-		<span class="ldap_grey"><?php p($l->t('Help'));?></span>
-	</a>
-</div>
diff --git a/apps/user_ldap/templates/settings.php b/apps/user_ldap/templates/settings.php
index 3b0b966a096d8..b08bd8041c265 100644
--- a/apps/user_ldap/templates/settings.php
+++ b/apps/user_ldap/templates/settings.php
@@ -6,7 +6,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-\OCP\Util::addScript('user_ldap', 'main', 'core');
 ?>
 
 <div id="content-ldap-settings"></div>
diff --git a/apps/user_ldap/tests/Settings/AdminTest.php b/apps/user_ldap/tests/Settings/AdminTest.php
index 8107849146183..51abba3091b55 100644
--- a/apps/user_ldap/tests/Settings/AdminTest.php
+++ b/apps/user_ldap/tests/Settings/AdminTest.php
@@ -41,14 +41,6 @@ protected function setUp(): void {
 	}
 
 	public function testGetForm(): void {
-		$prefixes = ['s01'];
-		$hosts = ['s01' => ''];
-
-		$wControls = $this->templateManager->getTemplate('user_ldap', 'part.wizardcontrols');
-		$wControls = $wControls->fetchPage();
-		$sControls = $this->templateManager->getTemplate('user_ldap', 'part.settingcontrols');
-		$sControls = $sControls->fetchPage();
-
 		$parameters = [];
 
 		// assign default values
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index 027f22967b916..78792048d8835 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -100,9 +100,6 @@ module.exports = {
 		updatenotification: path.join(__dirname, 'apps/updatenotification/src', 'updatenotification.js'),
 		'update-notification-legacy': path.join(__dirname, 'apps/updatenotification/src', 'update-notification-legacy.ts'),
 	},
-	user_ldap: {
-		main: path.join(__dirname, 'apps/user_ldap/src', 'main.js'),
-	},
 	user_status: {
 		menu: path.join(__dirname, 'apps/user_status/src', 'menu.js'),
 	},
diff --git a/build/frontend-legacy/apps/user_ldap b/build/frontend/apps/user_ldap
similarity index 100%
rename from build/frontend-legacy/apps/user_ldap
rename to build/frontend/apps/user_ldap
diff --git a/build/frontend/vite.config.mts b/build/frontend/vite.config.mts
index e5b04daef8a47..00730d67c415a 100644
--- a/build/frontend/vite.config.mts
+++ b/build/frontend/vite.config.mts
@@ -24,6 +24,9 @@ const modules = {
 	twofactor_backupcodes: {
 		'settings-personal': resolve(import.meta.dirname, 'apps/twofactor_backupcodes/src', 'settings-personal.ts'),
 	},
+	user_ldap: {
+		'settings-admin': resolve(import.meta.dirname, 'apps/user_ldap/src', 'settings-admin.js'),
+	},
 }
 
 // convert modules to modules entries prefied with the app id