refactor(user_ldap): Migrate to Vue3

Signed-off-by: Louis Chmn <[email protected]>

Author: artonge

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/main.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')

apps/user_ldap/src/settings-admin.ts

@@ -6,7 +6,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-\OCP\Util::addScript('user_ldap', 'main', 'core');
 ?>
 
 <div id="content-ldap-settings"></div>

apps/user_ldap/templates/settings.php

@@ -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'),
 	},

build/frontend-legacy/webpack.modules.cjs

@@ -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.ts'),
+	},
 }
 
 // convert modules to modules entries prefied with the app id