From 0084cd6c2f48bc76693920aaac07d50b94ae8c22 Mon Sep 17 00:00:00 2001 From: codewithvk Date: Thu, 16 Jan 2025 10:32:44 +0530 Subject: [PATCH] Refactor: Move personal user settings page to Vue Signed-off-by: codewithvk --- src/components/DocSigningField.vue | 98 ++++++++++ src/components/PersonalSettings.vue | 271 ++++++++++++++++++++++++++++ src/personal.js | 180 ++---------------- templates/personal.php | 53 +----- 4 files changed, 390 insertions(+), 212 deletions(-) create mode 100644 src/components/DocSigningField.vue create mode 100644 src/components/PersonalSettings.vue diff --git a/src/components/DocSigningField.vue b/src/components/DocSigningField.vue new file mode 100644 index 0000000000..12ac34d50a --- /dev/null +++ b/src/components/DocSigningField.vue @@ -0,0 +1,98 @@ + + + + + + + diff --git a/src/components/PersonalSettings.vue b/src/components/PersonalSettings.vue new file mode 100644 index 0000000000..64ebe9be77 --- /dev/null +++ b/src/components/PersonalSettings.vue @@ -0,0 +1,271 @@ + + + + + + + diff --git a/src/personal.js b/src/personal.js index e2e89a5c09..2ca918e326 100644 --- a/src/personal.js +++ b/src/personal.js @@ -3,171 +3,27 @@ * 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..6f1c8f3da2 100644 --- a/templates/personal.php +++ b/templates/personal.php @@ -4,54 +4,7 @@ * SPDX-FileCopyrightText: 2013-2016 ownCloud, Inc. * SPDX-License-Identifier: AGPL-3.0-or-later */ -script('richdocuments', 'richdocuments-personal'); + + \OCP\Util::addScript('richdocuments', 'richdocuments-personal'); // This should load your personal.js bundle ?> -
-

- t('Nextcloud Office')) ?> -

- -


- - - -

-

t('Templates inside of this directory will be added to the template selector of Nextcloud Office.')); ?>

-

t('Zotero')) ?>

- -
-


- - - -

-

t('To use Zotero specify your API key here. You can create your API key in your')); ?> t('Zotero account API settings.')); ?>

-
- -

t('This instance does not support Zotero, because the feature is missing or disabled. Please contact the administration.')); ?>

- -

t('Document signing')) ?>

- -
-


-
- - -

-


-
- - -

-


-
- - -

-

t('To use document signing, specify your signing certificate, key and CA chain here.')); ?>

-
- -

t('This instance does not support document signing, because the feature is missing or disabled. Please contact the administrator.')); ?>

- -
- +