refactor(sharebymail): migrate app to Vue 3

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

REUSE.toml

@@ -178,7 +178,7 @@ SPDX-FileCopyrightText = "2020 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["cypress/tsconfig.json", "cypress/fixtures/appstore/apps.json", "dist/icons.css"]
+path = ["cypress/tsconfig.json", "cypress/fixtures/appstore/apps.json", "dist/*.css"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2022 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"

apps/sharebymail/lib/Settings/Admin.php

@@ -26,6 +26,8 @@ class Admin implements IDelegatedSettings {
 		$this->initialState->provideInitialState('sendPasswordMail', $this->settingsManager->sendPasswordByMail());
 		$this->initialState->provideInitialState('replyToInitiator', $this->settingsManager->replyToInitiator());
 
+		\OCP\Util::addStyle('sharebymail', 'admin-settings');
+		\OCP\Util::addScript('sharebymail', 'admin-settings');
 		return new TemplateResponse('sharebymail', 'settings-admin', [], '');
 	}
 

apps/sharebymail/src/components/AdminSettings.vue

@@ -7,17 +7,11 @@
 	<NcSettingsSection
 		:name="t('sharebymail', 'Share by mail')"
 		:description="t('sharebymail', 'Allows people to share a personalized link to a file or folder by putting in an email address.')">
-		<NcCheckboxRadioSwitch
-			type="switch"
-			:checked.sync="sendPasswordMail"
-			@update:checked="update('sendpasswordmail', sendPasswordMail)">
+		<NcCheckboxRadioSwitch v-model="sendPasswordMail" type="switch">
 			{{ t('sharebymail', 'Send password by mail') }}
 		</NcCheckboxRadioSwitch>
 
-		<NcCheckboxRadioSwitch
-			type="switch"
-			:checked.sync="replyToInitiator"
-			@update:checked="update('replyToInitiator', replyToInitiator)">
+		<NcCheckboxRadioSwitch v-model="replyToInitiator" type="switch">
 			{{ t('sharebymail', 'Reply to initiator') }}
 		</NcCheckboxRadioSwitch>
 	</NcSettingsSection>
@@ -27,6 +21,7 @@
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { generateOcsUrl } from '@nextcloud/router'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
@@ -40,6 +35,10 @@ export default {
 		NcSettingsSection,
 	},
 
+	setup() {
+		return { t }
+	},
+
 	data() {
 		return {
 			sendPasswordMail: loadState('sharebymail', 'sendPasswordMail'),
@@ -47,6 +46,16 @@ export default {
 		}
 	},
 
+	watch: {
+		sendPasswordMail(newValue) {
+			this.update('sendpasswordmail', newValue)
+		},
+
+		replyToInitiator(newValue) {
+			this.update('replyToInitiator', newValue)
+		},
+	},
+
 	methods: {
 		async update(key, value) {
 			await confirmPassword()

apps/sharebymail/src/main-admin.js

@@ -1,20 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import AdminSettings from './components/AdminSettings.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.mixin({
-	methods: {
-		t,
-	},
-})
-
-const AdminSettingsView = Vue.extend(AdminSettings)
-new AdminSettingsView().$mount('#vue-admin-sharebymail')

apps/sharebymail/src/settings-admin.ts

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import AdminSettings from './components/AdminSettings.vue'
+
+const app = createApp(AdminSettings)
+app.mount('#vue-admin-sharebymail')

apps/sharebymail/templates/settings-admin.php

@@ -3,7 +3,6 @@
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-
-\OCP\Util::addScript('sharebymail', 'vue-settings-admin-sharebymail');
 ?>
+
 <div id="vue-admin-sharebymail"></div>

build/frontend/vite.config.mts

@@ -7,6 +7,7 @@ import { createAppConfig } from '@nextcloud/vite-config'
 import { resolve } from 'node:path'
 
 export default createAppConfig({
+	'admin-settings': resolve(import.meta.dirname, 'apps/sharebymail/src', 'settings-admin.ts'),
 }, {
 	emptyOutputDirectory: {
 		additionalDirectories: [resolve(import.meta.dirname, '../..', 'dist')],