feat(user-settings): introduce iframe for user settings

Signed-off-by: codewithvk <[email protected]>

lib/Settings/Personal.php

@@ -6,6 +6,7 @@
 
 namespace OCA\Richdocuments\Settings;
 
+use OCA\Richdocuments\AppConfig;
 use OCA\Richdocuments\Service\CapabilitiesService;
 use OCA\Richdocuments\Service\InitialStateService;
 use OCP\AppFramework\Http\TemplateResponse;
@@ -15,6 +16,7 @@
 class Personal implements ISettings {
 	public function __construct(
 		private IConfig $config,
+		private AppConfig $appConfig,
 		private CapabilitiesService $capabilitiesService,
 		private InitialStateService $initialState,
 		private ?string $userId,
@@ -39,7 +41,8 @@ public function getForm() {
 				'documentSigningKey' => $this->config->getUserValue($this->userId, 'richdocuments', 'documentSigningKey', ''),
 				'documentSigningCa' => $this->config->getUserValue($this->userId, 'richdocuments', 'documentSigningCa', ''),
 				'hasZoteroSupport' => $this->capabilitiesService->hasZoteroSupport(),
-				'zoteroAPIKey' => $this->config->getUserValue($this->userId, 'richdocuments', 'zoteroAPIKey', '')
+				'zoteroAPIKey' => $this->config->getUserValue($this->userId, 'richdocuments', 'zoteroAPIKey', ''),
+				'publicWopiUrl' => $this->appConfig->getCollaboraUrlPublic(),
 			],
 			'blank'
 		);

src/components/AdminSettings.vue

@@ -18,7 +18,7 @@
 			<div id="admin-cool-frame-section" class="section">
 				<h2>{{ t('richdocuments', 'Collabora Admin Settings') }}</h2>
 				<CoolFrame v-if="tokenGenerated"
-					:endpoint="'/cool/adminIntegratorSettings'"
+					:iframe-type="'admin'"
 					:public-wopi-url="settings.public_wopi_url"
 					:access-token="accessToken"
 					:access-token-t-t-l="accessTokenTTL"

src/components/CoolFrame.vue

@@ -8,6 +8,7 @@
 			<input type="hidden" name="access_token" :value="accessToken">
 			<input type="hidden" name="access_token_ttl" :value="accessTokenTTL">
 			<input type="hidden" name="wopi_setting_base_url" :value="wopiSettingBaseUrl">
+			<input type="hidden" name="iframe_type" :value="iframeType">
 			<!-- TODO: Include any other necessary hidden inputs -->
 		</form>
 		<iframe :id="iframeName"
@@ -26,10 +27,6 @@ import { getCoolServerUrl } from '../helpers/url.js'
 export default {
 	name: 'CoolFrame',
 	props: {
-		endpoint: {
-			type: String,
-			required: true,
-		},
 		publicWopiUrl: {
 			type: String,
 			required: true,
@@ -46,6 +43,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		iframeType: {
+			type: String,
+			required: true,
+		},
 	},
 	data() {
 		return {

src/components/PersonalSettings.vue

@@ -34,6 +34,17 @@
 			</em>
 		</p>
 
+		<!-- user settings iframe  -->
+		<div id="user-cool-frame-section" class="section">
+			<h2>{{ t('richdocuments', 'Collabora User Settings') }}</h2>
+			<CoolFrame v-if="tokenGenerated"
+				:iframe-type="'user'"
+				:public-wopi-url="public_wopi_url"
+				:access-token="accessToken"
+				:access-token-t-t-l="accessTokenTTL"
+				:wopi-setting-base-url="wopiSettingBaseUrl" />
+		</div>
+
 		<!-- Zotero -->
 		<div class="zotero-section">
 			<p><strong>{{ t('richdocuments', 'Zotero') }}</strong></p>
@@ -114,14 +125,21 @@
 </template>
 
 <script>
-import { generateFilePath } from '@nextcloud/router'
+import { generateFilePath, generateUrl } from '@nextcloud/router'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import DocSigningField from './DocSigningField.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import axios from '@nextcloud/axios'
+import {
+	getCurrentUser,
+} from '@nextcloud/auth'
+
+import { isPublicShare, getSharingToken } from '@nextcloud/sharing/public'
+import { getConfigFileUrl } from '../helpers/url.js'
+import CoolFrame from './CoolFrame.vue'
 
 export default {
 	name: 'PersonalSettings',
@@ -131,6 +149,7 @@ export default {
 		NcButton,
 		DocSigningField,
 		DeleteIcon,
+		CoolFrame,
 	},
 	props: {
 		initial: {
@@ -147,9 +166,46 @@ export default {
 			documentSigningCert: this.initial.documentSigningCert || '',
 			documentSigningKey: this.initial.documentSigningKey || '',
 			documentSigningCa: this.initial.documentSigningCa || '',
+			tokenGenerated: false,
+			accessToken: '',
+			accessTokenTTL: '',
+			userId: '',
+			wopiSettingBaseUrl: '',
+			public_wopi_url: this.initial.publicWopiUrl || '',
+		}
+	},
+	computed: {
+		shareToken() {
+			return getSharingToken()
+		},
+	},
+	async mounted() {
+		const currentUser = getCurrentUser()
+		if (currentUser && currentUser.uid) {
+			this.userId = currentUser.uid
+			await this.generateAccessToken()
+			if (this.accessToken) {
+				this.wopiSettingBaseUrl = getConfigFileUrl()
+				console.debug('wopiSettingBaseUrl', this.wopiSettingBaseUrl)
+				this.tokenGenerated = true
+			}
+		} else {
+			console.error('User not authenticated')
 		}
 	},
 	methods: {
+		async generateAccessToken() {
+			const { data } = await axios.get(generateUrl('/apps/richdocuments/settings/generateToken/user'))
+			if (data.token) {
+				this.accessToken = data.token
+				this.accessTokenTTL = data.token_ttl
+				console.debug('Admin settings WOPI token generated:', this.accessToken, this.accessTokenTTL)
+			} else if (data.federatedUrl) {
+				console.error('Federated URL returned, not expected for admin settings.')
+			} else {
+				console.error('Failed to generate token for admin settings')
+			}
+		},
 		setZoteroAPIKey(newVal) {
 			this.zoteroAPIKey = newVal
 		},

src/helpers/url.js

@@ -93,9 +93,8 @@ export const getCoolServerUrl = (collaboraBaseUrl) => {
 	// todo fix wopi Url
 	const wopiurl = getCallbackBaseUrl() + '/index.php/apps/richdocuments/wopi/files/-1'
 
-	const AdminSettingsUrl = collaboraBaseUrl + '/browser/dist/admin/adminIntegratorSettings.html?'
-
-	return AdminSettingsUrl
+	return collaboraBaseUrl
+		+ '/browser/dist/admin/adminIntegratorSettings.html?'
 		+ 'WOPISrc=' + encodeURIComponent(wopiurl)
 }