Merge pull request #56570 from nextcloud/artonge/debt/migrate_user_ldap_vu3

refactor(user_ldap): Migrate to Vue3

Author: susnux

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();
 
 		/**

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 {

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 ([email protected])«.')"
-				@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>

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>

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) ?? ''
 }
 
 /**