Add UI to select a collabora demo server

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 188 insertions, 80 deletions

diff --git a/src/admin.js b/src/admin.js
index 150c2916..e5203398 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -49,21 +49,6 @@ const documentsSettings = {
 		return app1
 	},
 
-	save: function() {
-		$('#wopi_apply, #disable_certificate_verification').attr('disabled', true)
-		var data = {
-			wopi_url: $('#wopi_url').val().replace(/\/$/, ''),
-			disable_certificate_verification: document.getElementById('disable_certificate_verification').checked
-		}
-
-		OC.msg.startAction('#documents-admin-msg', t('richdocuments', 'Saving…'))
-		$.post(
-			OC.filePath('richdocuments', 'ajax', 'admin.php'),
-			data,
-			documentsSettings.afterSave
-		)
-	},
-
 	saveGroups: function(data) {
 		$.post(
 			OC.filePath('richdocuments', 'ajax', 'admin.php'),
@@ -78,11 +63,6 @@ const documentsSettings = {
 		)
 	},
 
-	afterSave: function(response) {
-		$('#wopi_apply, #disable_certificate_verification').attr('disabled', false)
-		OC.msg.finishedAction('#documents-admin-msg', response)
-	},
-
 	saveExternalApps: function(externalAppsData) {
 		var data = {
 			'external_apps': externalAppsData
@@ -148,9 +128,7 @@ const documentsSettings = {
 		documentsSettings.initGroups()
 		documentsSettings.initExternalApps()
 
-		var page = $('#richdocuments')
-
-		$('#wopi_apply').on('click', documentsSettings.save)
+		var page = $('#richdocuments-advanced')
 
 		// destroy or create app name and token fields depending on whether the checkbox is on or off
 		$(document).on('change', '#enable_external_apps_cb-richdocuments', function() {
@@ -208,17 +186,6 @@ const documentsSettings = {
 			$('#external-apps-section').append(app1)
 		})
 
-		$(document).on('click', '#test_wopi_apply', function() {
-			var groups = page.find('#test_server_group_select').val()
-			var testserver = page.find('#test_wopi_url').val()
-
-			if (groups !== '' && testserver !== '') {
-				documentsSettings.saveTestWopi(groups, testserver)
-			} else {
-				OC.msg.finishedError('#test-documents-admin-msg', 'Both fields required')
-			}
-		})
-
 		$(document).on('change', '.doc-format-ooxml', function() {
 			var ooxml = this.checked
 			documentsSettings.saveDocFormat(ooxml ? 'ooxml' : 'odf')
diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index c7d1ba67..0716ad4e 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -21,52 +21,118 @@
   -->
 
 <template>
-	<div class="section">
-		<h2>Secure view settings</h2>
-
-		<p>{{ t('richdocuments', 'Secure view enables you to secure documents by embedding a watermark') }}</p>
-		<settings-checkbox v-model="settings.watermark.enabled" label="Enable watermarking" hint=""
-			:disabled="updating" @input="update" />
-		<settings-input-text v-if="settings.watermark.enabled" v-model="settings.watermark.text" label="Watermark text"
-			:hint="t('richdocuments', 'Supported placeholders: {userId}, {date}')"
-			:disabled="updating" @update="update" />
-		<div v-if="settings.watermark.enabled">
-			<settings-checkbox v-model="settings.watermark.allTags" label="Show watermark on tagged files" :disabled="updating"
-				@input="update" />
-			<p v-if="settings.watermark.allTags" class="checkbox-details">
-				<settings-select-tag v-model="settings.watermark.allTagsList" label="Select tags to enforce watermarking" @input="update" />
-			</p>
-			<settings-checkbox v-model="settings.watermark.allGroups" label="Show watermark for users of groups" :disabled="updating"
-				@input="update" />
-			<p v-if="settings.watermark.allGroups" class="checkbox-details">
-				<settings-select-group v-model="settings.watermark.allGroupsList" label="Select tags to enforce watermarking" @input="update" />
-			</p>
-			<settings-checkbox v-model="settings.watermark.shareAll" label="Show watermark for all shares" hint=""
-				:disabled="updating" @input="update" />
-			<settings-checkbox v-if="!settings.watermark.shareAll" v-model="settings.watermark.shareRead" label="Show watermark for read only shares"
-				hint=""
-				:disabled="updating" @input="update" />
+	<div>
+		<div class="section">
+			<h2>Collabora Online</h2>
+			<p>{{ t('richdocuments', 'Collabora Online is a powerful LibreOffice-based online office suite with collaborative editing, which supports all major documents, spreadsheet and presentation file formats and works together with all modern browsers.') }}</p>
 
-			<h3>Link shares</h3>
-			<settings-checkbox v-model="settings.watermark.linkAll" label="Show watermark for all link shares" hint=""
-				:disabled="updating" @input="update" />
-			<settings-checkbox v-if="!settings.watermark.linkAll" v-model="settings.watermark.linkSecure" label="Show watermark for download hidden shares"
-				hint=""
-				:disabled="updating" @input="update" />
-			<settings-checkbox v-if="!settings.watermark.linkAll" v-model="settings.watermark.linkRead" label="Show watermark for read only link shares"
-				hint=""
-				:disabled="updating" @input="update" />
-			<settings-checkbox v-if="!settings.watermark.linkAll" v-model="settings.watermark.linkTags" label="Show watermark on link shares with specific system tags"
+			<div v-if="settings.wopi_url !== ''">
+				<div v-if="serverError == 2" id="security-warning-state-failure">
+					<span class="icon icon-close-white" /><span class="message">Could not establish connection to the Collabora Online server.</span>
+				</div>
+				<div v-else-if="serverError == 1" id="security-warning-state-failure">
+					<span class="icon icon-loading" /><span class="message">Settings new server</span>
+				</div>
+				<div v-else id="security-warning-state-ok">
+					<span class="icon icon-checkmark-white" /><span class="message">Collabora Online server is reachable.</span>
+				</div>
+			</div>
+			<div v-else id="security-warning-state-warning">
+				<span class="icon icon-error-white" /><span class="message">Please configure a Collabora Online server to start editing documents</span>
+			</div>
+
+			<fieldset>
+				<div>
+					<input id="customserver" v-model="serverMode" type="radio"
+						name="serverMode" value="custom" class="radio"
+						:disabled="updating">
+					<label for="customserver">Use your own server</label><br>
+					<p class="option-inline">
+						<em>{{ t('richdocuments', 'Collabora Online requires a seperate server acting as a WOPI-like Client to provide editing capabilities.') }}</em>
+					</p>
+					<div v-if="serverMode === 'custom'" class="option-inline">
+						<form @submit="updateServer">
+							<p>
+								<label for="wopi_url">URL (and Port) of Collabora Online-server</label><br>
+								<input id="wopi_url" v-model="settings.wopi_url" type="text"
+									:disabled="updating">
+								<input type="submit" value="Save" :disabled="updating"
+									@click="updateServer"><br>
+							</p>
+							<p>
+								<input id="disable_certificate_verification" v-model="settings.disable_certificate_verification" type="checkbox"
+									class="checkbox" :disabled="updating" @change="updateServer">
+								<label for="disable_certificate_verification">{{ t('richdocuments', 'Disable certificate verification (insecure)') }}</label><br>
+								<em>{{ t('Enable if your Collabora Online server uses a self signed certificate') }}</em>
+							</p>
+						</form>
+					</div>
+				</div>
+				<div>
+					<input id="demoserver" v-model="serverMode" type="radio"
+						name="serverMode" value="demo" class="radio"
+						:disabled="updating">
+					<label for="demoserver">Use a demo server</label><br>
+					<div class="option-inline">
+						<p><em>{{ t('richdocuments', 'You can use a demo server provided by Collabora and other service providers for giving Collabora Online a try.') }}</em></p>
+						<p>
+							<multiselect v-if="serverMode === 'demo'" v-model="settings.demoUrl" :custom-label="demoServerLabel"
+								track-by="demo_url" label="demo_url" placeholder="Select a demo server"
+								:options="demoServers" :searchable="false" :allow-empty="false"
+								:disabled="updating" @input="setDemoServer" />
+						</p>
+					</div>
+				</div>
+			</fieldset>
+		</div>
+
+		<div id="secure-view-settings" class="section">
+			<h2>{{ t('richdocuments', 'Secure view settings') }}</h2>
+			<p>{{ t('richdocuments', 'Secure view enables you to secure documents by embedding a watermark') }}</p>
+			<settings-checkbox v-model="settings.watermark.enabled" label="Enable watermarking" hint=""
 				:disabled="updating" @input="update" />
-			<p v-if="!settings.watermark.linkAll && settings.watermark.linkTags" class="checkbox-details">
-				<settings-select-tag v-model="settings.watermark.linkTagsList" label="Select tags to enforce watermarking" @input="update" />
-			</p>
+			<settings-input-text v-if="settings.watermark.enabled" v-model="settings.watermark.text" label="Watermark text"
+				:hint="t('richdocuments', 'Supported placeholders: {userId}, {date}')"
+				:disabled="updating" @update="update" />
+			<div v-if="settings.watermark.enabled">
+				<settings-checkbox v-model="settings.watermark.allTags" label="Show watermark on tagged files" :disabled="updating"
+					@input="update" />
+				<p v-if="settings.watermark.allTags" class="checkbox-details">
+					<settings-select-tag v-model="settings.watermark.allTagsList" label="Select tags to enforce watermarking" @input="update" />
+				</p>
+				<settings-checkbox v-model="settings.watermark.allGroups" label="Show watermark for users of groups" :disabled="updating"
+					@input="update" />
+				<p v-if="settings.watermark.allGroups" class="checkbox-details">
+					<settings-select-group v-model="settings.watermark.allGroupsList" label="Select tags to enforce watermarking" @input="update" />
+				</p>
+				<settings-checkbox v-model="settings.watermark.shareAll" label="Show watermark for all shares" hint=""
+					:disabled="updating" @input="update" />
+				<settings-checkbox v-if="!settings.watermark.shareAll" v-model="settings.watermark.shareRead" label="Show watermark for read only shares"
+					hint=""
+					:disabled="updating" @input="update" />
+
+				<h3>Link shares</h3>
+				<settings-checkbox v-model="settings.watermark.linkAll" label="Show watermark for all link shares" hint=""
+					:disabled="updating" @input="update" />
+				<settings-checkbox v-if="!settings.watermark.linkAll" v-model="settings.watermark.linkSecure" label="Show watermark for download hidden shares"
+					hint=""
+					:disabled="updating" @input="update" />
+				<settings-checkbox v-if="!settings.watermark.linkAll" v-model="settings.watermark.linkRead" label="Show watermark for read only link shares"
+					hint=""
+					:disabled="updating" @input="update" />
+				<settings-checkbox v-if="!settings.watermark.linkAll" v-model="settings.watermark.linkTags" label="Show watermark on link shares with specific system tags"
+					:disabled="updating" @input="update" />
+				<p v-if="!settings.watermark.linkAll && settings.watermark.linkTags" class="checkbox-details">
+					<settings-select-tag v-model="settings.watermark.linkTagsList" label="Select tags to enforce watermarking" @input="update" />
+				</p>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 import Vue from 'vue'
+import { Multiselect } from 'nextcloud-vue'
 import axios from 'nextcloud-axios'
 import SettingsCheckbox from './SettingsCheckbox'
 import SettingsInputText from './SettingsInputText'
@@ -74,13 +140,18 @@ import SettingsSelectTag from './SettingsSelectTag'
 import SettingsSelectGroup from './SettingsSelectGroup'
 import { generateUrl } from 'nextcloud-router'
 
+const SERVER_STATE_OK = 0
+const SERVER_STATE_LOADING = 1
+const SERVER_STATE_CONNECTION_ERROR = 2
+
 export default {
 	name: 'AdminSettings',
 	components: {
 		SettingsCheckbox,
 		SettingsInputText,
 		SettingsSelectTag,
-		SettingsSelectGroup
+		SettingsSelectGroup,
+		Multiselect
 	},
 	props: {
 		initial: {
@@ -90,10 +161,14 @@ export default {
 	},
 	data() {
 		return {
+			serverMode: 'custom',
+			serverError: SERVER_STATE_OK,
 			updating: false,
 			groups: [],
 			tags: [],
 			settings: {
+				demoUrl: null,
+				wopi_url: null,
 				watermark: {
 					enabled: false,
 					shareAll: false,
@@ -112,21 +187,27 @@ export default {
 			}
 		}
 	},
+	computed: {
+		demoServers() {
+			return this.initial.demo_servers
+		}
+	},
 	beforeMount() {
-		for (let key in this.initial) {
-			if (!this.initial.hasOwnProperty(key)) {
+		for (let key in this.initial.settings) {
+			if (!this.initial.settings.hasOwnProperty(key)) {
 				continue
 			}
 
 			let [ parent, setting ] = key.split('_')
 			if (parent === 'watermark') {
-				Vue.set(this.settings[parent], setting, this.initial[key])
+				Vue.set(this.settings[parent], setting, this.initial.settings[key])
 			} else {
-				Vue.set(this.settings, key, this.initial[key])
+				Vue.set(this.settings, key, this.initial.settings[key])
 			}
 
 		}
-		Vue.set(this.settings, 'data', this.initial)
+		Vue.set(this.settings, 'data', this.initial.settings)
+		this.checkIfDemoServerIsActive()
 	},
 	methods: {
 		update() {
@@ -139,12 +220,47 @@ export default {
 				OC.Notification.showTemporary('Failed to save settings')
 				console.error(error)
 			})
+		},
+		async updateServer() {
+			const data = {
+				wopi_url: this.settings.wopi_url,
+				disable_certificate_verification: this.settings.disable_certificate_verification
+			}
+			this.serverError = SERVER_STATE_LOADING
+			this.updating = true
+
+			try {
+				await axios.post(
+					OC.filePath('richdocuments', 'ajax', 'admin.php'),
+					data
+				)
+				this.serverError = SERVER_STATE_OK
+			} catch (e) {
+				console.error(e)
+				this.serverError = SERVER_STATE_CONNECTION_ERROR
+			}
+			this.updating = false
+			this.checkIfDemoServerIsActive()
+		},
+		checkIfDemoServerIsActive() {
+			this.settings.demoUrl = this.initial.demo_servers.find((server) => server.demo_url === this.settings.wopi_url)
+			if (this.settings.demoUrl) {
+				this.serverMode = 'demo'
+			}
+		},
+		demoServerLabel(server) {
+			return `${server.provider_name} — ${server.provider_location}`
+		},
+		async setDemoServer(server) {
+			this.settings.wopi_url = server.demo_url
+			this.settings.disable_certificate_verification = false
+			await this.updateServer()
 		}
 	}
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 	p {
 		margin-bottom: 15px;
 	}
@@ -153,9 +269,34 @@ export default {
 		margin-top: -10px;
 		margin-bottom: 20px;
 	}
-	input,
+
+	input[type='text'],
 	.multiselect {
 		width: 100%;
 		max-width: 400px;
 	}
+
+	input#wopi_url {
+		width: 300px;
+	}
+
+	#secure-view-settings {
+		margin-top: 20px;
+	}
+
+	.section {
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	#security-warning-state-failure,
+	#security-warning-state-warning,
+	#security-warning-state-ok {
+		margin-top: 10px;
+		margin-bottom: 20px;
+	}
+
+	.option-inline {
+		margin-left: 25px;
+		margin-top: 10px;
+	}
 </style>