aboutsummaryrefslogtreecommitdiffstats
path: root/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue')
-rw-r--r--apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue95
1 files changed, 51 insertions, 44 deletions
diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
index 879eb8e62d8..9ee1680516e 100644
--- a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
+++ b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
@@ -1,12 +1,15 @@
+<!--
+ - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
<template>
- <NcSettingsSection
- class="declarative-settings-section"
+ <NcSettingsSection class="declarative-settings-section"
:name="t(formApp, form.title)"
:description="t(formApp, form.description)"
:doc-url="form.doc_url || ''">
<div v-for="formField in formFields"
- :key="formField.id"
- class="declarative-form-field"
+ :key="formField.id"
+ class="declarative-form-field"
:aria-label="t('settings', '{app}\'s declarative setting field: {name}', { app: formApp, name: t(formApp, formField.title) })"
:class="{
'declarative-form-field-text': isTextFormField(formField),
@@ -16,39 +19,35 @@
'declarative-form-field-multi_checkbox': formField.type === 'multi-checkbox',
'declarative-form-field-radio': formField.type === 'radio'
}">
-
<template v-if="isTextFormField(formField)">
<div class="input-wrapper">
- <NcInputField
- :type="formField.type"
+ <NcInputField :type="formField.type"
:label="t(formApp, formField.title)"
:value.sync="formFieldsData[formField.id].value"
:placeholder="t(formApp, formField.placeholder)"
@update:value="onChangeDebounced(formField)"
- @submit="updateDeclarativeSettingsValue(formField)"/>
+ @submit="updateDeclarativeSettingsValue(formField)" />
</div>
- <span class="hint">{{ t(formApp, formField.description) }}</span>
+ <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'select'">
<label :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
<div class="input-wrapper">
- <NcSelect
- :id="formField.id + '_field'"
+ <NcSelect :id="formField.id + '_field'"
:options="formField.options"
:placeholder="t(formApp, formField.placeholder)"
:label-outside="true"
:value="formFieldsData[formField.id].value"
- @input="(value) => updateFormFieldDataValue(value, formField, true)"/>
+ @input="(value) => updateFormFieldDataValue(value, formField, true)" />
</div>
- <span class="hint">{{ t(formApp, formField.description) }}</span>
+ <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'multi-select'">
<label :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
<div class="input-wrapper">
- <NcSelect
- :id="formField.id + '_field'"
+ <NcSelect :id="formField.id + '_field'"
:options="formField.options"
:placeholder="t(formApp, formField.placeholder)"
:multiple="true"
@@ -58,30 +57,29 @@
formFieldsData[formField.id].value = value
updateDeclarativeSettingsValue(formField, JSON.stringify(formFieldsData[formField.id].value))
}
- "/>
+ " />
</div>
- <span class="hint">{{ t(formApp, formField.description) }}</span>
+ <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'checkbox'">
- <label :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
- <NcCheckboxRadioSwitch
- :id="formField.id + '_field'"
+ <label v-if="formField.label" :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
+ <NcCheckboxRadioSwitch :id="formField.id + '_field'"
:checked="Boolean(formFieldsData[formField.id].value)"
+ type="switch"
@update:checked="(value) => {
formField.value = value
updateFormFieldDataValue(+value, formField, true)
}
- ">
- {{ t(formApp, formField.label) }}
+ ">
+ {{ t(formApp, formField.label ?? formField.title) }}
</NcCheckboxRadioSwitch>
- <span class="hint">{{ t(formApp, formField.description) }}</span>
+ <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'multi-checkbox'">
<label :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
- <NcCheckboxRadioSwitch
- v-for="option in formField.options"
+ <NcCheckboxRadioSwitch v-for="option in formField.options"
:id="formField.id + '_field_' + option.value"
:key="option.value"
:checked="formFieldsData[formField.id].value[option.value]"
@@ -90,16 +88,15 @@
// Update without re-generating initial formFieldsData.value object as the link to components are lost
updateDeclarativeSettingsValue(formField, JSON.stringify(formFieldsData[formField.id].value))
}
- ">
+ ">
{{ t(formApp, option.name) }}
</NcCheckboxRadioSwitch>
- <span class="hint">{{ t(formApp, formField.description) }}</span>
+ <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'radio'">
<label :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
- <NcCheckboxRadioSwitch
- v-for="option in formField.options"
+ <NcCheckboxRadioSwitch v-for="option in formField.options"
:key="option.value"
:value="option.value"
type="radio"
@@ -107,7 +104,7 @@
@update:checked="(value) => updateFormFieldDataValue(value, formField, true)">
{{ t(formApp, option.name) }}
</NcCheckboxRadioSwitch>
- <span class="hint">{{ t(formApp, formField.description) }}</span>
+ <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
</div>
</NcSettingsSection>
@@ -118,10 +115,11 @@ import axios from '@nextcloud/axios'
import { generateOcsUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
import debounce from 'debounce'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
-import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
-import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import { confirmPassword } from '@nextcloud/password-confirmation'
export default {
name: 'DeclarativeSection',
@@ -142,9 +140,6 @@ export default {
formFieldsData: {},
}
},
- beforeMount() {
- this.initFormFieldsData()
- },
computed: {
formApp() {
return this.form.app || ''
@@ -153,6 +148,9 @@ export default {
return this.form.fields || []
},
},
+ beforeMount() {
+ this.initFormFieldsData()
+ },
methods: {
initFormFieldsData() {
this.form.fields.forEach((formField) => {
@@ -171,7 +169,7 @@ export default {
this.$set(formField, 'value', JSON.parse(formField.value))
// Merge possible new options
formField.options.forEach(option => {
- if (!formField.value.hasOwnProperty(option.value)) {
+ if (!Object.prototype.hasOwnProperty.call(formField.value, option.value)) {
this.$set(formField.value, option.value, false)
}
})
@@ -205,14 +203,24 @@ export default {
}
},
- updateDeclarativeSettingsValue(formField, value = null) {
+ async updateDeclarativeSettingsValue(formField, value = null) {
try {
- return axios.post(generateOcsUrl('settings/api/declarative/value'), {
+ let url = generateOcsUrl('settings/api/declarative/value')
+ if (formField?.sensitive === true) {
+ url = generateOcsUrl('settings/api/declarative/value-sensitive')
+ try {
+ await confirmPassword()
+ } catch (err) {
+ showError(t('settings', 'Password confirmation is required'))
+ return
+ }
+ }
+ return axios.post(url, {
app: this.formApp,
formId: this.form.id.replace(this.formApp + '_', ''), // Remove app prefix to send clean form id
fieldId: formField.id,
value: value === null ? this.formFieldsData[formField.id].value : value,
- });
+ })
} catch (err) {
console.debug(err)
showError(t('settings', 'Failed to save setting'))
@@ -232,7 +240,6 @@ export default {
<style lang="scss" scoped>
.declarative-form-field {
- margin: 20px 0;
padding: 10px 0;
.input-wrapper {
@@ -247,8 +254,8 @@ export default {
.hint {
display: inline-block;
color: var(--color-text-maxcontrast);
- margin-left: 8px;
- padding-top: 5px;
+ margin-inline-start: 8px;
+ padding-block-start: 5px;
}
&-radio, &-multi_checkbox {
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 14:25:54 +0000