diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2025-01-25 14:04:35 +0100 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2025-01-31 17:30:20 +0100 |
| commit | 763541207608dcc436b9cc40f8a183de058496dd (patch) | |
| tree | 00f0a22b76d8453e3e25fbbce62b5e2ae6e43e63 /apps/settings/src/components | |
| parent | abfe64fbca6acad3d0eb2da6eb63d491d431e578 (diff) | |
| download | nextcloud-server-763541207608dcc436b9cc40f8a183de058496dd.tar.gz nextcloud-server-763541207608dcc436b9cc40f8a183de058496dd.zip | |
fix(settings): Clarify peculiarities of enabling encryption
- Clarify that enabling server side encryption will not encrypt
existing files but only new or changed files.
- Clarify that server side encryption can only be disabled using OCC
- Ensure there is accessible information of encryption state (`disabled`
input will not be announced so make it `aria-disabled` instead)
- Make warning more prominent by moving it into a dialog
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'apps/settings/src/components')
4 files changed, 292 insertions, 188 deletions
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue deleted file mode 100644 index 8ef08079488..00000000000 --- a/apps/settings/src/components/Encryption.vue +++ /dev/null @@ -1,188 +0,0 @@ -<!-- - - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors - - SPDX-License-Identifier: AGPL-3.0-or-later ---> - -<template> - <NcSettingsSection :name="t('settings', 'Server-side encryption')" - :description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')" - :doc-url="encryptionAdminDoc"> - <NcCheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning" - :disabled="encryptionEnabled" - type="switch" - @update:checked="displayWarning"> - {{ t('settings', 'Enable server-side encryption') }} - </NcCheckboxRadioSwitch> - - <div v-if="shouldDisplayWarning && !encryptionEnabled" class="notecard warning" role="alert"> - <p>{{ t('settings', 'Please read carefully before activating server-side encryption:') }}</p> - <ul> - <li>{{ t('settings', 'Once encryption is enabled, all files uploaded to the server from that point forward will be encrypted at rest on the server. It will only be possible to disable encryption at a later date if the active encryption module supports that function, and all pre-conditions (e.g. setting a recover key) are met.') }}</li> - <li>{{ t('settings', 'Encryption alone does not guarantee security of the system. Please see documentation for more information about how the encryption app works, and the supported use cases.') }}</li> - <li>{{ t('settings', 'Be aware that encryption always increases the file size.') }}</li> - <li>{{ t('settings', 'It is always good to create regular backups of your data, in case of encryption make sure to backup the encryption keys along with your data.') }}</li> - </ul> - - <p class="margin-bottom"> - {{ t('settings', 'This is the final warning: Do you really want to enable encryption?') }} - </p> - <NcButton type="primary" - @click="enableEncryption()"> - {{ t('settings', "Enable encryption") }} - </NcButton> - </div> - - <div v-if="encryptionEnabled"> - <div v-if="encryptionReady"> - <p v-if="encryptionModules.length === 0"> - {{ t('settings', 'No encryption module loaded, please enable an encryption module in the app menu.') }} - </p> - <template v-else> - <h3>{{ t('settings', 'Select default encryption module:') }}</h3> - <fieldset> - <NcCheckboxRadioSwitch v-for="(module, id) in encryptionModules" - :key="id" - :checked.sync="defaultCheckedModule" - :value="id" - type="radio" - name="default_encryption_module" - @update:checked="checkDefaultModule"> - {{ module.displayName }} - </NcCheckboxRadioSwitch> - </fieldset> - </template> - </div> - - <div v-else-if="externalBackendsEnabled" v-html="migrationMessage" /> - </div> - </NcSettingsSection> -</template> - -<script> -import { showError } from '@nextcloud/dialogs' -import { loadState } from '@nextcloud/initial-state' -import { generateOcsUrl } from '@nextcloud/router' -import { confirmPassword } from '@nextcloud/password-confirmation' -import axios from '@nextcloud/axios' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' - -import logger from '../logger' - -import '@nextcloud/password-confirmation/dist/style.css' - -export default { - name: 'Encryption', - components: { - NcCheckboxRadioSwitch, - NcSettingsSection, - NcButton, - }, - data() { - const encryptionModules = loadState('settings', 'encryption-modules') - return { - encryptionReady: loadState('settings', 'encryption-ready'), - encryptionEnabled: loadState('settings', 'encryption-enabled'), - externalBackendsEnabled: loadState('settings', 'external-backends-enabled'), - encryptionAdminDoc: loadState('settings', 'encryption-admin-doc'), - encryptionModules, - shouldDisplayWarning: false, - migrating: false, - defaultCheckedModule: Object.entries(encryptionModules).find((module) => module[1].default)?.[0], - } - }, - computed: { - migrationMessage() { - return t('settings', 'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}', { - command: '"occ encryption:migrate"', - }) - }, - }, - methods: { - displayWarning() { - if (!this.encryptionEnabled) { - this.shouldDisplayWarning = !this.shouldDisplayWarning - } else { - this.encryptionEnabled = false - this.shouldDisplayWarning = false - } - }, - async update(key, value) { - await confirmPassword() - - const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', { - appId: 'core', - key, - }) - - try { - const { data } = await axios.post(url, { - value, - }) - this.handleResponse({ - status: data.ocs?.meta?.status, - }) - } catch (e) { - this.handleResponse({ - errorMessage: t('settings', 'Unable to update server side encryption config'), - error: e, - }) - } - }, - async checkDefaultModule() { - await this.update('default_encryption_module', this.defaultCheckedModule) - }, - async enableEncryption() { - this.encryptionEnabled = true - await this.update('encryption_enabled', 'yes') - }, - async handleResponse({ status, errorMessage, error }) { - if (status !== 'ok') { - showError(errorMessage) - logger.error(errorMessage, { error }) - } - }, - }, -} -</script> - -<style lang="scss" scoped> - -.notecard.success { - --note-background: rgba(var(--color-success-rgb), 0.2); - --note-theme: var(--color-success); -} - -.notecard.error { - --note-background: rgba(var(--color-error-rgb), 0.2); - --note-theme: var(--color-error); -} - -.notecard.warning { - --note-background: rgba(var(--color-warning-rgb), 0.2); - --note-theme: var(--color-warning); -} - -#body-settings .notecard { - color: var(--color-text-light); - background-color: var(--note-background); - border: 1px solid var(--color-border); - border-left: 4px solid var(--note-theme); - border-radius: var(--border-radius); - box-shadow: rgba(43, 42, 51, 0.05) 0px 1px 2px 0px; - margin: 1rem 0; - margin-top: 1rem; - padding: 1rem; -} - -li { - list-style-type: initial; - margin-left: 1rem; - padding: 0.25rem 0; -} - -.margin-bottom { - margin-bottom: 0.75rem; -} -</style> diff --git a/apps/settings/src/components/Encryption/EncryptionSettings.vue b/apps/settings/src/components/Encryption/EncryptionSettings.vue new file mode 100644 index 00000000000..bda8271a076 --- /dev/null +++ b/apps/settings/src/components/Encryption/EncryptionSettings.vue @@ -0,0 +1,197 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<script setup lang="ts"> +import type { OCSResponse } from '@nextcloud/typings/ocs' +import { showError, spawnDialog } from '@nextcloud/dialogs' +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' +import { confirmPassword } from '@nextcloud/password-confirmation' +import { generateOcsUrl } from '@nextcloud/router' +import { ref } from 'vue' +import { textExistingFilesNotEncrypted } from './sharedTexts.ts' + +import axios from '@nextcloud/axios' +import logger from '../../logger.ts' + +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' +import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' +import EncryptionWarningDialog from './EncryptionWarningDialog.vue' + +interface EncryptionModule { + default?: boolean + displayName: string +} + +const allEncryptionModules = loadState<never[]|Record<string, EncryptionModule>>('settings', 'encryption-modules') +/** Available encryption modules on the backend */ +const encryptionModules = Array.isArray(allEncryptionModules) ? [] : Object.entries(allEncryptionModules).map(([id, module]) => ({ ...module, id })) +/** ID of the default encryption module */ +const defaultCheckedModule = encryptionModules.find((module) => module.default)?.id + +/** Is the server side encryptio ready to be enabled */ +const encryptionReady = loadState<boolean>('settings', 'encryption-ready') +/** Are external backends enabled (legacy ownCloud stuff) */ +const externalBackendsEnabled = loadState<boolean>('settings', 'external-backends-enabled') +/** URL to the admin docs */ +const encryptionAdminDoc = loadState<string>('settings', 'encryption-admin-doc') + +/** Is the encryption enabled */ +const encryptionEnabled = ref(loadState<boolean>('settings', 'encryption-enabled')) + +/** Loading state while enabling encryption (e.g. because the confirmation dialog is open) */ +const loadingEncryptionState = ref(false) + +/** + * Open the encryption-enabling warning (spawns a dialog) + * @param enabled The enabled state of encryption + */ +function displayWarning(enabled: boolean) { + if (loadingEncryptionState.value || enabled === false) { + return + } + + loadingEncryptionState.value = true + spawnDialog(EncryptionWarningDialog, {}, async (confirmed) => { + try { + if (confirmed) { + await enableEncryption() + } + } finally { + loadingEncryptionState.value = false + } + }) +} + +/** + * Update an encryption setting on the backend + * @param key The setting to update + * @param value The new value + */ +async function update(key: string, value: string) { + await confirmPassword() + + const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', { + appId: 'core', + key, + }) + + try { + const { data } = await axios.post<OCSResponse>(url, { + value, + }) + if (data.ocs.meta.status !== 'ok') { + throw new Error('Unsuccessful OCS response', { cause: data.ocs }) + } + } catch (error) { + showError(t('settings', 'Unable to update server side encryption config')) + logger.error('Unable to update server side encryption config', { error }) + return false + } + return true +} + +/** + * Choose the default encryption module + */ +async function checkDefaultModule(): Promise<void> { + if (defaultCheckedModule) { + await update('default_encryption_module', defaultCheckedModule) + } +} + +/** + * Enable encryption - sends an async POST request + */ +async function enableEncryption(): Promise<void> { + encryptionEnabled.value = await update('encryption_enabled', 'yes') +} +</script> + +<template> + <NcSettingsSection :name="t('settings', 'Server-side encryption')" + :description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')" + :doc-url="encryptionAdminDoc"> + <NcNoteCard v-if="encryptionEnabled" type="info"> + <p> + {{ textExistingFilesNotEncrypted }} + {{ t('settings', 'To encrypt all existing files run this OCC command:') }} + </p> + <code> + <pre>occ encryption:encrypt-all</pre> + </code> + </NcNoteCard> + + <NcCheckboxRadioSwitch :class="{ disabled: encryptionEnabled }" + :checked="encryptionEnabled" + :aria-disabled="encryptionEnabled ? 'true' : undefined" + :aria-describedby="encryptionEnabled ? 'server-side-encryption-disable-hint' : undefined" + :loading="loadingEncryptionState" + type="switch" + @update:checked="displayWarning"> + {{ t('settings', 'Enable server-side encryption') }} + </NcCheckboxRadioSwitch> + <p v-if="encryptionEnabled" id="server-side-encryption-disable-hint" class="disable-hint"> + {{ t('settings', 'Disabling server side encryption is only possible using OCC, please refer to the documentation.') }} + </p> + + <NcNoteCard v-if="encryptionModules.length === 0" + type="warning" + :text="t('settings', 'No encryption module loaded, please enable an encryption module in the app menu.')" /> + + <template v-else-if="encryptionEnabled"> + <div v-if="encryptionReady && encryptionModules.length > 0"> + <h3>{{ t('settings', 'Select default encryption module:') }}</h3> + <fieldset> + <NcCheckboxRadioSwitch v-for="module in encryptionModules" + :key="module.id" + :checked.sync="defaultCheckedModule" + :value="module.id" + type="radio" + name="default_encryption_module" + @update:checked="checkDefaultModule"> + {{ module.displayName }} + </NcCheckboxRadioSwitch> + </fieldset> + </div> + + <div v-else-if="externalBackendsEnabled"> + {{ + t( + 'settings', + 'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}', + { command: '"occ encryption:migrate"' }, + ) + }} + </div> + </template> + </NcSettingsSection> +</template> + +<style scoped> +code { + background-color: var(--color-background-dark); + color: var(--color-main-text); + + display: block; + margin-block-start: 0.5rem; + padding: .25lh .5lh; + width: fit-content; +} + +.disabled { + opacity: .75; +} + +.disabled :deep(*) { + cursor: not-allowed !important; +} + +.disable-hint { + color: var(--color-text-maxcontrast); + padding-inline-start: 10px; +} +</style> diff --git a/apps/settings/src/components/Encryption/EncryptionWarningDialog.vue b/apps/settings/src/components/Encryption/EncryptionWarningDialog.vue new file mode 100644 index 00000000000..c45268e81ee --- /dev/null +++ b/apps/settings/src/components/Encryption/EncryptionWarningDialog.vue @@ -0,0 +1,88 @@ +<!-- + - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<script setup lang="ts"> +import type { IDialogButton } from '@nextcloud/dialogs' + +import { t } from '@nextcloud/l10n' +import { textExistingFilesNotEncrypted } from './sharedTexts.ts' +import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' +import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' + +const emit = defineEmits<{ + (e: 'close', encrypt: boolean): void +}>() + +const buttons: IDialogButton[] = [ + { + label: t('settings', 'Cancel encryption'), + // @ts-expect-error Needs to be fixed in the dialogs library - value is allowed but missing from the types + type: 'tertiary', + callback: () => emit('close', false), + }, + { + label: t('settings', 'Enable encryption'), + type: 'error', + callback: () => emit('close', true), + }, +] + +/** + * When closed we need to emit the close event + * @param isOpen open state of the dialog + */ +function onUpdateOpen(isOpen: boolean) { + if (!isOpen) { + emit('close', false) + } +} +</script> + +<template> + <NcDialog :buttons="buttons" + :name="t('settings', 'Confirm enabling encryption')" + size="normal" + @update:open="onUpdateOpen"> + <NcNoteCard type="warning"> + <p> + {{ t('settings', 'Please read carefully before activating server-side encryption:') }} + <ul> + <li> + {{ t('settings', 'Once encryption is enabled, all files uploaded to the server from that point forward will be encrypted at rest on the server. It will only be possible to disable encryption at a later date if the active encryption module supports that function, and all pre-conditions (e.g. setting a recover key) are met.') }} + </li> + <li> + {{ t('settings', 'Encryption alone does not guarantee security of the system. Please see documentation for more information about how the encryption app works, and the supported use cases.') }} + </li> + <li> + {{ t('settings', 'Be aware that encryption always increases the file size.') }} + </li> + <li> + {{ t('settings', 'It is always good to create regular backups of your data, in case of encryption make sure to backup the encryption keys along with your data.') }} + </li> + <li> + {{ textExistingFilesNotEncrypted }} + {{ t('settings', 'Refer to the admin documentation on how to manually also encrypt existing files.') }} + </li> + </ul> + </p> + </NcNoteCard> + <p> + {{ t('settings', 'This is the final warning: Do you really want to enable encryption?') }} + </p> + </NcDialog> +</template> + +<style scoped> +li { + list-style-type: initial; + margin-inline-start: 1rem; + padding: 0.25rem 0; +} + +p + p, +div + p { + margin-block: 0.75rem; +} +</style> diff --git a/apps/settings/src/components/Encryption/sharedTexts.ts b/apps/settings/src/components/Encryption/sharedTexts.ts new file mode 100644 index 00000000000..94d23be07f2 --- /dev/null +++ b/apps/settings/src/components/Encryption/sharedTexts.ts @@ -0,0 +1,7 @@ +/*! + * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import { t } from '@nextcloud/l10n' + +export const textExistingFilesNotEncrypted = t('settings', 'For performance reasons, when you enable encryption on a Nextcloud server only new and changed files are encrypted.') |