feat: Implement UI for managing Team Folders SSE in Nextcloud security settings

Signed-off-by: Faisal Alghamdi <falghamdi125@gmail.com>

Author: falghamdi125

appinfo/info.xml

@@ -71,6 +71,7 @@ Folder.
 
 	<settings>
 		<admin>OCA\GroupFolders\Settings\Admin</admin>
+		<admin>OCA\GroupFolders\Settings\AdminSecurity</admin>
 		<admin-section>OCA\GroupFolders\Settings\Section</admin-section>
 	</settings>
 

lib/Controller/SettingsController.php

@@ -0,0 +1,47 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\GroupFolders\Controller;
+
+use OCA\GroupFolders\AppInfo\Application;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\OCSController;
+use OCP\IAppConfig;
+use OCP\IRequest;
+
+class SettingsController extends OCSController {
+	public function __construct(
+		string $appName,
+		IRequest $request,
+		private readonly IAppConfig $appConfig,
+	) {
+		parent::__construct($appName, $request);
+	}
+
+	/**
+	 * @return DataResponse<Http::STATUS_OK, array{enable_encryption: bool}, array{}>
+	 */
+	#[FrontpageRoute(verb: 'GET', url: '/settings')]
+	public function getSettings(): DataResponse {
+		return new DataResponse([
+			'enable_encryption' => $this->appConfig->getValueBool(Application::APP_ID, 'enable_encryption', false),
+		]);
+	}
+
+	/**
+	 * @return DataResponse<Http::STATUS_OK, array{}, array{}>
+	 */
+	#[FrontpageRoute(verb: 'POST', url: '/settings')]
+	public function setSettings(bool $enable): DataResponse {
+		$this->appConfig->setValueMixed(Application::APP_ID, 'enable_encryption', $enable ? 'true' : 'false');
+		return new DataResponse([]);
+	}
+}

lib/Settings/AdminSecurity.php

@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\GroupFolders\Settings;
+
+use OCA\GroupFolders\AppInfo\Application;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\IAppConfig;
+use OCP\Settings\ISettings;
+use OCP\Util;
+
+class AdminSecurity implements ISettings {
+	public function __construct(
+		private readonly IInitialState $initialState,
+		private readonly IAppConfig $appConfig,
+	) {
+	}
+
+	#[\Override]
+	public function getForm(): TemplateResponse {
+		$this->initialState->provideInitialState(
+			'server_side_encryption',
+			$this->appConfig->getValueString('encryption', 'enabled', 'no'),
+		);		
+		$this->initialState->provideInitialState(
+			'enable_encryption',
+			$this->appConfig->getValueBool(Application::APP_ID, 'enable_encryption', false),
+		);
+		
+		Util::addStyle('encryption', 'settings_admin');
+		Util::addStyle(Application::APP_ID, Application::APP_ID . '-settings-security');
+		Util::addScript(Application::APP_ID, Application::APP_ID . '-settings-security');
+
+		return new TemplateResponse(Application::APP_ID, 'settings-security', []);
+	}
+
+	#[\Override]
+	public function getSection(): string {
+		return 'security';
+	}
+
+	#[\Override]
+	public function getPriority(): int {
+		return 90;
+	}
+}

src/components/TeamFoldersEncryption.vue

@@ -0,0 +1,74 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NcNoteCard, NcCheckboxRadioSwitch, NcSettingsSection } from '@nextcloud/vue'
+import { loadState } from '@nextcloud/initial-state'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+
+const serverSideEncryptionEnabled = ref<string>(loadState<string>('groupfolders', 'server_side_encryption', 'no'))
+const folderEncryptionEnabled = ref<boolean>(loadState<boolean>('groupfolders', 'enable_encryption', false))
+
+const loading = ref(false)
+
+async function handleChange(isEnabled: boolean) {
+	if (loading.value || serverSideEncryptionEnabled.value === 'no' || (folderEncryptionEnabled.value == true && isEnabled == false)) {
+		return
+	}	
+	const previous = folderEncryptionEnabled.value
+	folderEncryptionEnabled.value = isEnabled
+	loading.value = true
+	try {
+		await axios.post(generateUrl('apps/groupfolders/settings'), { enable: isEnabled })
+	} catch {
+		folderEncryptionEnabled.value = previous
+		showError(t('groupfolders', 'Failed to update encryption setting'))
+	} finally {
+		loading.value = false
+	}
+}
+</script>
+
+<template>
+	<NcSettingsSection :name="t('groupfolders', 'Team folders encryption')">
+		<NcCheckboxRadioSwitch
+			:class="{ disabled: folderEncryptionEnabled || serverSideEncryptionEnabled === 'no' }"
+			type="switch"
+			:model-value="folderEncryptionEnabled"
+			:aria-disabled="loading || serverSideEncryptionEnabled === 'no' || folderEncryptionEnabled == true"
+			:loading="loading"
+			:description="!folderEncryptionEnabled ? t('groupfolders', 'Encrypt team folders using server-side encryption. Remember that the data cannot be accessed if the encryption key is lost.') : null"
+			@update:model-value="handleChange">
+			{{ t('groupfolders', 'Enable Team Folders encryption') }}
+		</NcCheckboxRadioSwitch>
+
+		<p v-if=" serverSideEncryptionEnabled === 'yes' && folderEncryptionEnabled == true" id="team-folders-encryption-disable-hint" class="disable-hint">
+			{{ t('groupfolders', 'Disabling team folders encryption is only possible using OCC, please refer to the documentation.') }}				
+		</p>
+		
+		<NcNoteCard v-if="serverSideEncryptionEnabled === 'no'" type="warning"
+			:text="t('settings', 'Team Folders cannot be encrypted on the server because server-side encryption is disabled.')" />		
+	</NcSettingsSection>
+</template>
+
+<style scoped>
+
+.disabled {
+	opacity: .75;
+}
+
+.disabled :deep(*) {
+	cursor: not-allowed !important;
+}
+
+.disable-hint {
+	color: var(--color-text-maxcontrast);
+	padding-inline-start: 10px;
+}
+</style>

src/settings-security/index.ts

@@ -0,0 +1,10 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import TeamFoldersEncryption from '../components/TeamFoldersEncryption.vue'
+
+const app = createApp(TeamFoldersEncryption)
+app.mount('#groupfolders-settings-section')

templates/settings-security.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+?>
+<div id="groupfolders-settings-section"></div>

vite.config.ts

@@ -10,6 +10,7 @@ import { join } from 'node:path'
 export default createAppConfig({
 	initFiles: join(__dirname, 'src/init-files.ts'),
 	settings: join(__dirname, 'src/settings/index.tsx'),
+	'settings-security': join(__dirname, 'src/settings-security/index.ts'),
 }, {
 	createEmptyCSSEntryPoints: true,
 	emptyOutputDirectory: {