diff --git a/src/components/DocSigningField.vue b/src/components/DocSigningField.vue
new file mode 100644
index 0000000000..8fe3f48a80
--- /dev/null
+++ b/src/components/DocSigningField.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+ {{ t('richdocuments', 'Save') }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/PersonalSettings.vue b/src/components/PersonalSettings.vue
new file mode 100644
index 0000000000..732d15b140
--- /dev/null
+++ b/src/components/PersonalSettings.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
+
+
+
+ {{ t('richdocuments', 'Templates inside of this directory will be added to the template selector of Nextcloud Office.') }}
+
+
+
+
+
+
{{ t('richdocuments', 'Zotero') }}
+
+
+
+
+
+ {{ t('richdocuments', 'This instance does not support Zotero, because the feature is missing or disabled. Please contact the administration.') }}
+
+
+
+
+
+
+
+ {{ t('richdocuments', 'Document signing') }}
+
+
+
+
+
+
+ {{ t('richdocuments', 'This instance does not support document signing, because the feature is missing or disabled. Please contact the administrator.') }}
+
+
+
+
+
+
+
+
+
diff --git a/src/personal.js b/src/personal.js
index e2e89a5c09..15fb2eae57 100644
--- a/src/personal.js
+++ b/src/personal.js
@@ -1,173 +1,25 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
import './init-shared.js'
+import Vue from 'vue'
+import PersonalSettings from './components/PersonalSettings.vue'
import '../css/admin.scss'
-import { generateFilePath } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
-(function() {
- const PersonalSettings = function() {
- this.templateInput = document.getElementById('templateInputField')
- this.templateSelectButton = document.getElementById('templateSelectButton')
- this.templateResetButton = document.getElementById('templateResetButton')
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
- this.zoteroAPIKeyInput = document.getElementById('zoteroAPIKeyField')
- this.zoteroAPIKeySaveButton = document.getElementById('zoteroAPIKeySave')
- this.zoteroAPIKeyRemoveButton = document.getElementById('zoteroAPIKeyRemove')
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('richdocuments', 'js/')
- this.documentSigningCertInput = document.getElementById('documentSigningCertField')
- this.documentSigningCertSaveButton = document.getElementById('documentSigningCertSave')
- this.documentSigningCertRemoveButton = document.getElementById('documentSigningCertRemove')
- this.documentSigningKeyInput = document.getElementById('documentSigningKeyField')
- this.documentSigningKeySaveButton = document.getElementById('documentSigningKeySave')
- this.documentSigningKeyRemoveButton = document.getElementById('documentSigningKeyRemove')
- this.documentSigningCaInput = document.getElementById('documentSigningCaField')
- this.documentSigningCaSaveButton = document.getElementById('documentSigningCaSave')
- this.documentSigningCaRemoveButton = document.getElementById('documentSigningCaRemove')
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.OC = OC
+Vue.prototype.OCA = OCA
- const self = this
- this.templateSelectButton.addEventListener('click', function() {
- OC.dialogs.filepicker(t('richdocuments', 'Select a personal template folder'), function(datapath, returntype) {
- self.updateSetting(datapath)
- }, false, 'httpd/unix-directory', true, OC.dialogs.FILEPICKER_TYPE_CHOOSE)
- })
+const element = document.getElementById('personal-vue')
- this.templateResetButton.addEventListener('click', this.resetSettings.bind(this))
-
- this.zoteroAPIKeySaveButton.addEventListener('click', function() {
- self.updateZoteroAPIKey(self.zoteroAPIKeyInput.value)
- })
-
- this.zoteroAPIKeyRemoveButton.addEventListener('click', this.resetZoteroAPI.bind(this))
-
- this.documentSigningCertSaveButton.addEventListener('click', function() {
- self.updateDocumentSigningCert(self.documentSigningCertInput.value)
- })
- this.documentSigningCertRemoveButton.addEventListener('click', this.resetDocumentSigningCert.bind(this))
- this.documentSigningKeySaveButton.addEventListener('click', function() {
- self.updateDocumentSigningKey(self.documentSigningKeyInput.value)
- })
- this.documentSigningKeyRemoveButton.addEventListener('click', this.resetDocumentSigningKey.bind(this))
- this.documentSigningCaSaveButton.addEventListener('click', function() {
- self.updateDocumentSigningCa(self.documentSigningCaInput.value)
- })
- this.documentSigningCaRemoveButton.addEventListener('click', this.resetDocumentSigningCa.bind(this))
- }
-
- PersonalSettings.prototype.updateSetting = function(path) {
- const self = this
- this._updateSetting({ templateFolder: path }, function() {
- self.templateInput.value = path
- }, function() {
-
- })
- }
-
- PersonalSettings.prototype.resetSettings = function() {
- const self = this
- this._updateSetting({ templateFolder: '' }, function() {
- self.templateInput.value = ''
- }, function() {
-
- })
- }
-
- PersonalSettings.prototype.updateZoteroAPIKey = function(key) {
- const self = this
- this._updateSetting({ zoteroAPIKeyInput: key }, function() {
- self.zoteroAPIKeyInput.value = key
- }, function() {
- showError(t('richdocuments', 'Failed to update the Zotero API key'))
- })
- }
-
- PersonalSettings.prototype.resetZoteroAPI = function() {
- const self = this
- this._updateSetting({ zoteroAPIKeyInput: '' }, function() {
- self.zoteroAPIKeyInput.value = ''
- }, function() {
-
- })
- }
-
- PersonalSettings.prototype.updateDocumentSigningCert = function(ca) {
- const self = this
- this._updateSetting({ documentSigningCertInput: ca }, function() {
- self.documentSigningCertInput.value = ca
- }, function() {
- showError(t('richdocuments', 'Failed to update the document signing CA chain'))
- })
- }
-
- PersonalSettings.prototype.resetDocumentSigningCert = function() {
- const self = this
- this._updateSetting({ documentSigningCertInput: '' }, function() {
- self.documentSigningCertInput.value = ''
- }, function() {
-
- })
- }
-
- PersonalSettings.prototype.updateDocumentSigningKey = function(ca) {
- const self = this
- this._updateSetting({ documentSigningKeyInput: ca }, function() {
- self.documentSigningKeyInput.value = ca
- }, function() {
- showError(t('richdocuments', 'Failed to update the document signing CA chain'))
- })
- }
-
- PersonalSettings.prototype.resetDocumentSigningKey = function() {
- const self = this
- this._updateSetting({ documentSigningKeyInput: '' }, function() {
- self.documentSigningKeyInput.value = ''
- }, function() {
-
- })
- }
-
- PersonalSettings.prototype.updateDocumentSigningCa = function(ca) {
- const self = this
- this._updateSetting({ documentSigningCaInput: ca }, function() {
- self.documentSigningCaInput.value = ca
- }, function() {
- showError(t('richdocuments', 'Failed to update the document signing CA chain'))
- })
- }
-
- PersonalSettings.prototype.resetDocumentSigningCa = function() {
- const self = this
- this._updateSetting({ documentSigningCaInput: '' }, function() {
- self.documentSigningCaInput.value = ''
- }, function() {
-
- })
- }
-
- PersonalSettings.prototype._updateSetting = function(data, successCallback, errorCallback) {
- OC.msg.startAction('#documents-admin-msg', t('richdocuments', 'Saving …'))
- const request = new XMLHttpRequest()
- request.open('POST', generateFilePath('richdocuments', 'ajax', 'personal.php'), true)
- request.setRequestHeader('Content-Type', 'application/json')
- request.setRequestHeader('requesttoken', OC.requestToken)
- request.onload = function() {
- if (request.status >= 200 && request.status < 400) {
- const response = JSON.parse(request.response)
- OC.msg.finishedAction('#documents-admin-msg', response)
- successCallback(response)
- } else {
- errorCallback(this.response)
- }
- }
-
- request.onerror = function() {
- errorCallback(this.response)
- }
-
- request.send(JSON.stringify(data))
- }
-
- return new PersonalSettings()
-})()
+/* eslint-disable-next-line no-new */
+new Vue({
+ render: h => h(PersonalSettings, { props: { initial: JSON.parse(element.dataset.initial) } }),
+}).$mount('#personal-vue')
diff --git a/templates/personal.php b/templates/personal.php
index 9cf81a4180..75bbf816f1 100644
--- a/templates/personal.php
+++ b/templates/personal.php
@@ -1,57 +1,4 @@
-
-
- t('Nextcloud Office')) ?>
-
-
-
t('Select a template directory')); ?>
-
-
-
-
-
t('Templates inside of this directory will be added to the template selector of Nextcloud Office.')); ?>
-
t('Zotero')) ?>
-
-
-
-
t('This instance does not support Zotero, because the feature is missing or disabled. Please contact the administration.')); ?>
-
-
t('Document signing')) ?>
-
-
-
-
t('This instance does not support document signing, because the feature is missing or disabled. Please contact the administrator.')); ?>
-
-
-
+