Port admin federated files sharing to vue

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

apps/federatedfilesharing/js/settings-admin.js

@@ -1,11 +0,0 @@
-window.addEventListener('DOMContentLoaded', function() {
-
-	$('#fileSharingSettings input').change(function() {
-		var value = 'no';
-		if (this.checked) {
-			value = 'yes';
-		}
-		OCP.AppConfig.setValue('files_sharing', $(this).attr('name'), value);
-	});
-
-});

apps/federatedfilesharing/lib/Settings/Admin.php

@@ -26,49 +26,52 @@ namespace OCA\FederatedFileSharing\Settings;
 
 use OCA\FederatedFileSharing\FederatedShareProvider;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\GlobalScale\IConfig;
 use OCP\IL10N;
+use OCP\IURLGenerator;
 use OCP\Settings\IDelegatedSettings;
 
 class Admin implements IDelegatedSettings {
-
-	/** @var FederatedShareProvider */
-	private $fedShareProvider;
-
-	/** @var IConfig */
-	private $gsConfig;
-
-	/** @var IL10N */
-	private $l;
+	private FederatedShareProvider $fedShareProvider;
+	private IConfig $gsConfig;
+	private IL10N $l;
+	private IURLGenerator $urlGenerator;
+	private IInitialState $initialState;
 
 	/**
 	 * Admin constructor.
-	 *
-	 * @param FederatedShareProvider $fedShareProvider
-	 * @param IConfig $globalScaleConfig
 	 */
-	public function __construct(FederatedShareProvider $fedShareProvider, IConfig $globalScaleConfig, IL10N $l) {
+	public function __construct(
+		FederatedShareProvider $fedShareProvider,
+		IConfig $globalScaleConfig,
+		IL10N $l,
+		IURLGenerator $urlGenerator,
+		IInitialState $initialState
+	) {
 		$this->fedShareProvider = $fedShareProvider;
 		$this->gsConfig = $globalScaleConfig;
 		$this->l = $l;
+		$this->urlGenerator = $urlGenerator;
+		$this->initialState = $initialState;
 	}
 
 	/**
 	 * @return TemplateResponse
 	 */
 	public function getForm() {
-		$parameters = [
-			'internalOnly' => $this->gsConfig->onlyInternalFederation(),
-			'outgoingServer2serverShareEnabled' => $this->fedShareProvider->isOutgoingServer2serverShareEnabled(),
-			'incomingServer2serverShareEnabled' => $this->fedShareProvider->isIncomingServer2serverShareEnabled(),
-			'federatedGroupSharingSupported' => $this->fedShareProvider->isFederatedGroupSharingSupported(),
-			'outgoingServer2serverGroupShareEnabled' => $this->fedShareProvider->isOutgoingServer2serverGroupShareEnabled(),
-			'incomingServer2serverGroupShareEnabled' => $this->fedShareProvider->isIncomingServer2serverGroupShareEnabled(),
-			'lookupServerEnabled' => $this->fedShareProvider->isLookupServerQueriesEnabled(),
-			'lookupServerUploadEnabled' => $this->fedShareProvider->isLookupServerUploadEnabled(),
-		];
 
-		return new TemplateResponse('federatedfilesharing', 'settings-admin', $parameters, '');
+		$this->initialState->provideInitialState('internalOnly', $this->gsConfig->onlyInternalFederation());
+		$this->initialState->provideInitialState('sharingFederatedDocUrl', $this->urlGenerator->linkToDocs('admin-sharing-federated'));
+		$this->initialState->provideInitialState('outgoingServer2serverShareEnabled', $this->fedShareProvider->isOutgoingServer2serverShareEnabled());
+		$this->initialState->provideInitialState('incomingServer2serverShareEnabled', $this->fedShareProvider->isIncomingServer2serverShareEnabled());
+		$this->initialState->provideInitialState('federatedGroupSharingSupported', $this->fedShareProvider->isFederatedGroupSharingSupported());
+		$this->initialState->provideInitialState('outgoingServer2serverGroupShareEnabled', $this->fedShareProvider->isOutgoingServer2serverGroupShareEnabled());
+		$this->initialState->provideInitialState('incomingServer2serverGroupShareEnabled', $this->fedShareProvider->isIncomingServer2serverGroupShareEnabled());
+		$this->initialState->provideInitialState('lookupServerEnabled', $this->fedShareProvider->isLookupServerQueriesEnabled());
+		$this->initialState->provideInitialState('lookupServerUploadEnabled', $this->fedShareProvider->isLookupServerUploadEnabled());
+
+		return new TemplateResponse('federatedfilesharing', 'settings-admin', [], '');
 	}
 
 	/**

apps/federatedfilesharing/src/components/AdminSettings.vue

@@ -0,0 +1,129 @@
+<!--
+	- @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+	-
+	- @author Carl Schwan <carl@carlschwan.eu>
+	-
+	- @license GNU AGPL version 3 or any later version
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+	-
+-->
+
+<template>
+	<SettingsSection :title="t('federatedfilesharing', 'Federated Cloud Sharing')"
+		:description="t('federatedfilesharing', 'Adjust how people can share between servers. This includes shares between users on this server as well if they are using federated sharing.')"
+		:doc-url="sharingFederatedDocUrl">
+		<CheckboxRadioSwitch type="switch"
+			:checked.sync="outgoingServer2serverShareEnabled"
+			@update:checked="update('outgoing_server2server_share_enabled', outgoingServer2serverShareEnabled)">
+			{{ t('federatedfilesharing', 'Allow users on this server to send shares to other servers (this option also allows WebDAV access to public shares)') }}
+		</CheckboxRadioSwitch>
+
+		<CheckboxRadioSwitch type="switch"
+			:checked.sync="incomingServer2serverShareEnabled"
+			@update:checked="update('incoming_server2server_share_enabled', incomingServer2serverShareEnabled)">
+			{{ t('federatedfilesharing', 'Allow users on this server to receive shares from other servers') }}
+		</CheckboxRadioSwitch>
+
+		<CheckboxRadioSwitch v-if="federatedGroupSharingSupported"
+			type="switch"
+			:checked.sync="outgoingServer2serverGroupShareEnabled"
+			@update:checked="update('outgoing_server2server_group_share_enabled', outgoingServer2serverGroupShareEnabled)">
+			{{ t('federatedfilesharing', 'Allow users on this server to send shares to groups on other servers') }}
+		</CheckboxRadioSwitch>
+
+		<CheckboxRadioSwitch v-if="federatedGroupSharingSupported"
+			type="switch"
+			:checked.sync="incomingServer2serverGroupShareEnabled"
+			@update:checked="update('incoming_server2server_group_share_enabled', incomingServer2serverGroupShareEnabled)">
+			{{ t('federatedfilesharing', 'Allow users on this server to receive group shares from other servers') }}
+		</CheckboxRadioSwitch>
+
+		<CheckboxRadioSwitch type="switch"
+			:checked.sync="lookupServerEnabled"
+			@update:checked="update('lookupServerEnabled', lookupServerEnabled)">
+			{{ t('federatedfilesharing', 'Search global and public address book for users') }}
+		</CheckboxRadioSwitch>
+
+		<CheckboxRadioSwitch type="switch"
+			:checked.sync="lookupServerUploadEnabled"
+			@update:checked="update('lookupServerUploadEnabled', lookupServerUploadEnabled)">
+			{{ t('federatedfilesharing', 'Allow users to publish their data to a global and public address book') }}
+		</CheckboxRadioSwitch>
+	</SettingsSection>
+</template>
+
+<script>
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import { loadState } from '@nextcloud/initial-state'
+import { showError } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import confirmPassword from '@nextcloud/password-confirmation'
+
+export default {
+	name: 'AdminSettings',
+
+	components: {
+		CheckboxRadioSwitch,
+		SettingsSection,
+	},
+
+	data() {
+		return {
+			outgoingServer2serverShareEnabled: loadState('federatedfilesharing', 'outgoingServer2serverShareEnabled'),
+			incomingServer2serverShareEnabled: loadState('federatedfilesharing', 'incomingServer2serverShareEnabled'),
+			outgoingServer2serverGroupShareEnabled: loadState('federatedfilesharing', 'outgoingServer2serverGroupShareEnabled'),
+			incomingServer2serverGroupShareEnabled: loadState('federatedfilesharing', 'incomingServer2serverGroupShareEnabled'),
+			federatedGroupSharingSupported: loadState('federatedfilesharing', 'federatedGroupSharingSupported'),
+			lookupServerEnabled: loadState('federatedfilesharing', 'lookupServerEnabled'),
+			lookupServerUploadEnabled: loadState('federatedfilesharing', 'lookupServerUploadEnabled'),
+			internalOnly: loadState('federatedfilesharing', 'internalOnly'),
+			sharingFederatedDocUrl: loadState('federatedfilesharing', 'sharingFederatedDocUrl'),
+		}
+	},
+	methods: {
+		async update(key, value) {
+			await confirmPassword()
+
+			const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
+				appId: 'files_sharing',
+				key,
+			})
+
+			const stringValue = value ? 'yes' : 'no'
+			try {
+				const { data } = await axios.post(url, {
+					value: stringValue,
+				})
+				this.handleResponse({
+					status: data.ocs?.meta?.status,
+				})
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('federatedfilesharing', 'Unable to update federated files sharing config'),
+					error: e,
+				})
+			}
+		},
+		async handleResponse({ status, errorMessage, error }) {
+			if (status !== 'ok') {
+				showError(errorMessage)
+				console.error(errorMessage, error)
+			}
+		},
+	}
+}
+</script>

apps/federatedfilesharing/src/main-admin.js

@@ -0,0 +1,44 @@
+/**
+ * @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ *
+ * @author Carl Schwan <carl@carlschwan.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate as t } from '@nextcloud/l10n'
+import '@nextcloud/dialogs/styles/toast.scss'
+import { loadState } from '@nextcloud/initial-state'
+
+import AdminSettings from './components/AdminSettings'
+
+__webpack_nonce__ = btoa(getRequestToken())
+
+Vue.mixin({
+	methods: {
+		t,
+	},
+})
+
+const internalOnly = loadState('federatedfilesharing', 'internalOnly', false)
+
+if (!internalOnly) {
+	const AdminSettingsView = Vue.extend(AdminSettings)
+	new AdminSettingsView().$mount('#vue-admin-federated')
+}

apps/federatedfilesharing/templates/settings-admin.php

@@ -1,79 +1,26 @@
 <?php
-/** @var \OCP\IL10N $l */
-/** @var array $_ */
-script('federatedfilesharing', 'settings-admin');
-style('federatedfilesharing', 'settings-admin');
-?>
-
-<?php if ($_['internalOnly'] === false): ?>
-
-<div id="fileSharingSettings" class="section">
-	<h2>
-		<?php p($l->t('Federated Cloud Sharing'));?>
-	</h2>
-	<a target="_blank" rel="noreferrer noopener" class="icon-info svg"
-	   title="<?php p($l->t('Open documentation'));?>"
-	   href="<?php p(link_to_docs('admin-sharing-federated')); ?>"></a>
+/*
+ * @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ *
+ * @author Carl Schwan <carl@carlschwan.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
 
-	<p class="settings-hint"><?php p($l->t('Adjust how people can share between servers. This includes shares between users on this server as well if they are using federated sharing.')); ?></p>
-
-	<p>
-		<input type="checkbox" name="outgoing_server2server_share_enabled" id="outgoingServer2serverShareEnabled" class="checkbox"
-			   value="1" <?php if ($_['outgoingServer2serverShareEnabled']) {
-	print_unescaped('checked="checked"');
-} ?> />
-		<label for="outgoingServer2serverShareEnabled">
-			<?php p($l->t('Allow users on this server to send shares to other servers (this option also allows WebDAV access to public shares)'));?>
-		</label>
-	</p>
-	<p>
-		<input type="checkbox" name="incoming_server2server_share_enabled" id="incomingServer2serverShareEnabled" class="checkbox"
-			   value="1" <?php if ($_['incomingServer2serverShareEnabled']) {
-	print_unescaped('checked="checked"');
-} ?> />
-		<label for="incomingServer2serverShareEnabled">
-			<?php p($l->t('Allow users on this server to receive shares from other servers'));?>
-		</label><br/>
-	</p>
-	<?php if ($_['federatedGroupSharingSupported']): ?>
-	<p>
-		<input type="checkbox" name="outgoing_server2server_group_share_enabled" id="outgoingServer2serverGroupShareEnabled" class="checkbox"
-			   value="1" <?php if ($_['outgoingServer2serverGroupShareEnabled']) {
-	print_unescaped('checked="checked"');
-} ?> />
-		<label for="outgoingServer2serverGroupShareEnabled">
-			<?php p($l->t('Allow users on this server to send shares to groups on other servers'));?>
-		</label>
-	</p>
-	<p>
-		<input type="checkbox" name="incoming_server2server_group_share_enabled" id="incomingServer2serverGroupShareEnabled" class="checkbox"
-			   value="1" <?php if ($_['incomingServer2serverGroupShareEnabled']) {
-	print_unescaped('checked="checked"');
-} ?> />
-		<label for="incomingServer2serverGroupShareEnabled">
-			<?php p($l->t('Allow users on this server to receive group shares from other servers'));?>
-		</label><br/>
-	</p>
-	<?php endif; ?>
-	<p>
-		<input type="checkbox" name="lookupServerEnabled" id="lookupServerEnabled" class="checkbox"
-			   value="1" <?php if ($_['lookupServerEnabled']) {
-	print_unescaped('checked="checked"');
-} ?> />
-		<label for="lookupServerEnabled">
-			<?php p($l->t('Search global and public address book for users'));?>
-		</label><br/>
-	</p>
-	<p>
-		<input type="checkbox" name="lookupServerUploadEnabled" id="lookupServerUploadEnabled" class="checkbox"
-			   value="1" <?php if ($_['lookupServerUploadEnabled']) {
-	print_unescaped('checked="checked"');
-} ?> />
-		<label for="lookupServerUploadEnabled">
-			<?php p($l->t('Allow users to publish their data to a global and public address book'));?>
-		</label><br/>
-	</p>
-
-</div>
+\OCP\Util::addScript('federatedfilesharing', 'vue-settings-admin');
+?>
 
-<?php endif; ?>
+<div id="vue-admin-federated"></div>

apps/federatedfilesharing/tests/Settings/AdminTest.php

@@ -28,8 +28,10 @@ namespace OCA\FederatedFileSharing\Tests\Settings;
 use OCA\FederatedFileSharing\FederatedShareProvider;
 use OCA\FederatedFileSharing\Settings\Admin;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\GlobalScale\IConfig;
 use OCP\IL10N;
+use OCP\IURLGenerator;
 use Test\TestCase;
 
 class AdminTest extends TestCase {
@@ -37,17 +39,25 @@ class AdminTest extends TestCase {
 	private $admin;
 	/** @var \OCA\FederatedFileSharing\FederatedShareProvider */
 	private $federatedShareProvider;
-	/** @var  IConfig|\PHPUnit\Framework\MockObject\MockObject */
+	/** @var IConfig|\PHPUnit\Framework\MockObject\MockObject */
 	private $gsConfig;
 
 	protected function setUp(): void {
 		parent::setUp();
 		$this->federatedShareProvider = $this->createMock(FederatedShareProvider::class);
 		$this->gsConfig = $this->createMock(IConfig::class);
+		$this->initialState = $this->createMock(IInitialState::class);
+		$urlGenerator = $this->createMock(IURLGenerator::class);
+		$urlGenerator->expects($this->any())
+			->method('linkToDocs')
+			->willReturn('doc-link');
+
 		$this->admin = new Admin(
 			$this->federatedShareProvider,
 			$this->gsConfig,
-			$this->createMock(IL10N::class)
+			$this->createMock(IL10N::class),
+			$urlGenerator,
+			$this->initialState
 		);
 	}
 
@@ -102,17 +112,21 @@ class AdminTest extends TestCase {
 		$this->gsConfig->expects($this->once())->method('onlyInternalFederation')
 			->willReturn($state);
 
-		$params = [
-			'internalOnly' => $state,
-			'outgoingServer2serverShareEnabled' => $state,
-			'incomingServer2serverShareEnabled' => $state,
-			'lookupServerEnabled' => $state,
-			'lookupServerUploadEnabled' => $state,
-			'federatedGroupSharingSupported' => $state,
-			'outgoingServer2serverGroupShareEnabled' => $state,
-			'incomingServer2serverGroupShareEnabled' => $state,
-		];
-		$expected = new TemplateResponse('federatedfilesharing', 'settings-admin', $params, '');
+		$this->initialState->expects($this->exactly(9))
+			->method('provideInitialState')
+			->withConsecutive(
+				['internalOnly', $state],
+				['sharingFederatedDocUrl', 'doc-link'],
+				['outgoingServer2serverShareEnabled', $state],
+				['incomingServer2serverShareEnabled', $state],
+				['federatedGroupSharingSupported', $state],
+				['outgoingServer2serverGroupShareEnabled', $state],
+				['incomingServer2serverGroupShareEnabled', $state],
+				['lookupServerEnabled', $state],
+				['lookupServerUploadEnabled', $state],
+			);
+
+		$expected = new TemplateResponse('federatedfilesharing', 'settings-admin', [], '');
 		$this->assertEquals($expected, $this->admin->getForm());
 	}
 

dist/federatedfilesharing-vue-settings-admin.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/**
+ * @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ *
+ * @author Carl Schwan <carl@carlschwan.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */

webpack.modules.js

@@ -68,6 +68,9 @@ module.exports = {
 	oauth2: {
 		oauth2: path.join(__dirname, 'apps/oauth2/src', 'main.js'),
 	},
+	federatedfilesharing: {
+		'vue-settings-admin': path.join(__dirname, 'apps/federatedfilesharing/src', 'main-admin.js'),
+    },
 	settings: {
 		'vue-settings-admin-basic-settings': path.join(__dirname, 'apps/settings/src', 'main-admin-basic-settings.js'),
 		'vue-settings-admin-delegation': path.join(__dirname, 'apps/settings/src', 'main-admin-delegation.js'),