diff options
Diffstat (limited to 'apps/settings/src/components')
73 files changed, 2464 insertions, 819 deletions
diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue index 70f5a03ec70..0d3e9154bb9 100644 --- a/apps/settings/src/components/AdminAI.vue +++ b/apps/settings/src/components/AdminAI.vue @@ -3,7 +3,45 @@ - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <div> + <div class="ai-settings"> + <NcSettingsSection :name="t('settings', 'Unified task processing')" + :description="t('settings', 'AI tasks can be implemented by different apps. Here you can set which app should be used for which task.')"> + <NcCheckboxRadioSwitch v-model="settings['ai.taskprocessing_guests']" + type="switch" + @update:modelValue="saveChanges"> + {{ t('settings', 'Allow AI usage for guest users') }} + </NcCheckboxRadioSwitch> + <h3>{{ t('settings', 'Provider for Task types') }}</h3> + <template v-for="type in taskProcessingTaskTypes"> + <div :key="type" class="tasktype-item"> + <p class="tasktype-name"> + {{ type.name }} + </p> + <NcCheckboxRadioSwitch v-model="settings['ai.taskprocessing_type_preferences'][type.id]" + type="switch" + @update:modelValue="saveChanges"> + {{ t('settings', 'Enable') }} + </NcCheckboxRadioSwitch><NcSelect v-model="settings['ai.taskprocessing_provider_preferences'][type.id]" + class="provider-select" + :clearable="false" + :disabled="!settings['ai.taskprocessing_type_preferences'][type.id]" + :options="taskProcessingProviders.filter(p => p.taskType === type.id).map(p => p.id)" + @input="saveChanges"> + <template #option="{label}"> + {{ taskProcessingProviders.find(p => p.id === label)?.name }} + </template> + <template #selected-option="{label}"> + {{ taskProcessingProviders.find(p => p.id === label)?.name }} + </template> + </NcSelect> + </div> + </template> + <template v-if="!hasTaskProcessing"> + <NcNoteCard type="info"> + {{ t('settings', 'None of your currently installed apps provide Task processing functionality') }} + </NcNoteCard> + </template> + </NcSettingsSection> <NcSettingsSection :name="t('settings', 'Machine translation')" :description="t('settings', 'Machine translation can be implemented by different apps. Here you can define the precedence of the machine translation apps you have installed at the moment.')"> <draggable v-model="settings['ai.translation_provider_preferences']" @change="saveChanges"> @@ -22,24 +60,6 @@ </div> </draggable> </NcSettingsSection> - <NcSettingsSection :name="t('settings', 'Speech-To-Text')" - :description="t('settings', 'Speech-To-Text can be implemented by different apps. Here you can set which app should be used.')"> - <template v-for="provider in sttProviders"> - <NcCheckboxRadioSwitch :key="provider.class" - :checked.sync="settings['ai.stt_provider']" - :value="provider.class" - name="stt_provider" - type="radio" - @update:checked="saveChanges"> - {{ provider.name }} - </NcCheckboxRadioSwitch> - </template> - <template v-if="!hasStt"> - <NcNoteCard type="info"> - {{ t('settings', 'None of your currently installed apps provide Speech-To-Text functionality') }} - </NcNoteCard> - </template> - </NcSettingsSection> <NcSettingsSection :name="t('settings', 'Image generation')" :description="t('settings', 'Image generation can be implemented by different apps. Here you can set which app should be used.')"> <template v-for="provider in text2imageProviders"> @@ -62,10 +82,11 @@ :description="t('settings', 'Text processing tasks can be implemented by different apps. Here you can set which app should be used for which task.')"> <template v-for="type in tpTaskTypes"> <div :key="type"> - <h3>{{ t('settings', 'Task:') }} {{ getTaskType(type).name }}</h3> - <p>{{ getTaskType(type).description }}</p> + <h3>{{ t('settings', 'Task:') }} {{ getTextProcessingTaskType(type).name }}</h3> + <p>{{ getTextProcessingTaskType(type).description }}</p> <p> </p> <NcSelect v-model="settings['ai.textprocessing_provider_preferences'][type]" + class="provider-select" :clearable="false" :options="textProcessingProviders.filter(p => p.taskType === type).map(p => p.class)" @input="saveChanges"> @@ -79,9 +100,10 @@ <p> </p> </div> </template> - <template v-if="!hasTextProcessing"> + <template v-if="tpTaskTypes.length === 0"> <NcNoteCard type="info"> - {{ t('settings', 'None of your currently installed apps provide Text processing functionality') }} + <!-- TRANSLATORS Text processing is the name of a Nextcloud-internal API --> + {{ t('settings', 'None of your currently installed apps provide text processing functionality using the Text Processing API.') }} </NcNoteCard> </template> </NcSettingsSection> @@ -90,17 +112,17 @@ <script> import axios from '@nextcloud/axios' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' import draggable from 'vuedraggable' import DragVerticalIcon from 'vue-material-design-icons/DragVertical.vue' import ArrowDownIcon from 'vue-material-design-icons/ArrowDown.vue' import ArrowUpIcon from 'vue-material-design-icons/ArrowUp.vue' import { loadState } from '@nextcloud/initial-state' - +import { nextTick } from 'vue' import { generateUrl } from '@nextcloud/router' export default { @@ -127,22 +149,32 @@ export default { textProcessingProviders: loadState('settings', 'ai-text-processing-providers'), textProcessingTaskTypes: loadState('settings', 'ai-text-processing-task-types'), text2imageProviders: loadState('settings', 'ai-text2image-providers'), + taskProcessingProviders: loadState('settings', 'ai-task-processing-providers'), + taskProcessingTaskTypes: loadState('settings', 'ai-task-processing-task-types'), settings: loadState('settings', 'ai-settings'), } }, computed: { - hasStt() { - return this.sttProviders.length > 0 - }, hasTextProcessing() { return Object.keys(this.settings['ai.textprocessing_provider_preferences']).length > 0 && Array.isArray(this.textProcessingTaskTypes) }, tpTaskTypes() { - return Object.keys(this.settings['ai.textprocessing_provider_preferences']).filter(type => !!this.getTaskType(type)) + const builtinTextProcessingTypes = [ + 'OCP\\TextProcessing\\FreePromptTaskType', + 'OCP\\TextProcessing\\HeadlineTaskType', + 'OCP\\TextProcessing\\SummaryTaskType', + 'OCP\\TextProcessing\\TopicsTaskType', + ] + return Object.keys(this.settings['ai.textprocessing_provider_preferences']) + .filter(type => !!this.getTextProcessingTaskType(type)) + .filter(type => !builtinTextProcessingTypes.includes(type)) }, hasText2ImageProviders() { return this.text2imageProviders.length > 0 }, + hasTaskProcessing() { + return Object.keys(this.settings['ai.taskprocessing_provider_preferences']).length > 0 && Array.isArray(this.taskProcessingTaskTypes) + }, }, methods: { moveUp(i) { @@ -163,6 +195,7 @@ export default { }, async saveChanges() { this.loading = true + await nextTick() const data = { settings: this.settings } try { await axios.put(generateUrl('/settings/api/admin/ai'), data) @@ -171,7 +204,7 @@ export default { } this.loading = false }, - getTaskType(type) { + getTextProcessingTaskType(type) { if (!Array.isArray(this.textProcessingTaskTypes)) { return null } @@ -197,10 +230,28 @@ export default { border: 2px solid var(--color-primary-element); color: var(--color-primary-element); padding: 0px 7px; - margin-right: 3px; + margin-inline-end: 3px; } .drag-vertical-icon { float: left; } + +.ai-settings h3 { + font-size: 16px; /* to offset against the 20px section heading */ +} + +.provider-select { + min-width: 350px !important; +} + +.tasktype-item { + display: flex; + align-items: center; + gap: 8px; + .tasktype-name { + flex: 1; + margin: 0; + } +} </style> diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue index 0775316ed2b..521ff8f0155 100644 --- a/apps/settings/src/components/AdminDelegating.vue +++ b/apps/settings/src/components/AdminDelegating.vue @@ -17,7 +17,7 @@ <script> import GroupSelect from './AdminDelegation/GroupSelect.vue' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import { loadState } from '@nextcloud/initial-state' export default { diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue index 203c17aa7f8..28d3deb0afa 100644 --- a/apps/settings/src/components/AdminDelegation/GroupSelect.vue +++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue @@ -14,7 +14,7 @@ </template> <script> -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' import { generateUrl } from '@nextcloud/router' import axios from '@nextcloud/axios' import { showError } from '@nextcloud/dialogs' diff --git a/apps/settings/src/components/AdminSettingsSharingForm.vue b/apps/settings/src/components/AdminSettingsSharingForm.vue index 38484c00d23..b0e142d8480 100644 --- a/apps/settings/src/components/AdminSettingsSharingForm.vue +++ b/apps/settings/src/components/AdminSettingsSharingForm.vue @@ -27,6 +27,15 @@ :label="t('settings', 'Ignore the following groups when checking group membership')" style="width: 100%" /> </div> + <NcCheckboxRadioSwitch :checked.sync="settings.allowViewWithoutDownload"> + {{ t('settings', 'Allow users to preview files even if download is disabled') }} + </NcCheckboxRadioSwitch> + <NcNoteCard v-show="settings.allowViewWithoutDownload" + id="settings-sharing-api-view-without-download-hint" + class="sharing__note" + type="warning"> + {{ t('settings', 'Users will still be able to screenshot or record the screen. This does not provide any definitive protection.') }} + </NcNoteCard> </div> <div v-show="settings.enabled" id="settings-sharing-api" class="sharing__section"> @@ -39,15 +48,19 @@ <NcCheckboxRadioSwitch :checked.sync="settings.allowPublicUpload"> {{ t('settings', 'Allow public uploads') }} </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch v-model="settings.allowFederationOnPublicShares"> + {{ t('settings', 'Allow public shares to be added to other clouds by federation.') }} + {{ t('settings', 'This will add share permissions to all newly created link shares.') }} + </NcCheckboxRadioSwitch> <NcCheckboxRadioSwitch :checked.sync="settings.enableLinkPasswordByDefault"> {{ t('settings', 'Always ask for a password') }} </NcCheckboxRadioSwitch> <NcCheckboxRadioSwitch :checked.sync="settings.enforceLinksPassword" :disabled="!settings.enableLinkPasswordByDefault"> {{ t('settings', 'Enforce password protection') }} </NcCheckboxRadioSwitch> - <label v-if="settings.passwordExcludedGroupsFeatureEnabled" class="sharing__labeled-entry sharing__input"> + <label v-if="settings.enforceLinksPasswordExcludedGroupsEnabled" class="sharing__labeled-entry sharing__input"> <span>{{ t('settings', 'Exclude groups from password requirements') }}</span> - <NcSettingsSelectGroup v-model="settings.passwordExcludedGroups" + <NcSettingsSelectGroup v-model="settings.enforceLinksPasswordExcludedGroups" style="width: 100%" :disabled="!settings.enforceLinksPassword || !settings.enableLinkPasswordByDefault" /> </label> @@ -59,21 +72,45 @@ </label> </fieldset> + <NcCheckboxRadioSwitch type="switch" + aria-describedby="settings-sharing-custom-token-disable-hint settings-sharing-custom-token-access-hint" + :checked.sync="settings.allowCustomTokens"> + {{ t('settings', 'Allow users to set custom share link tokens') }} + </NcCheckboxRadioSwitch> + <div class="sharing__sub-section"> + <NcNoteCard id="settings-sharing-custom-token-disable-hint" + class="sharing__note" + type="info"> + {{ t('settings', 'Shares with custom tokens will continue to be accessible after this setting has been disabled') }} + </NcNoteCard> + <NcNoteCard id="settings-sharing-custom-token-access-hint" + class="sharing__note" + type="warning"> + {{ t('settings', 'Shares with guessable tokens may be accessed easily') }} + </NcNoteCard> + </div> + <label>{{ t('settings', 'Limit sharing based on groups') }}</label> <div class="sharing__sub-section"> <NcCheckboxRadioSwitch :checked.sync="settings.excludeGroups" - name="excludeGroups" value="no" - type="radio" @update:checked="onUpdateExcludeGroups"> + name="excludeGroups" + value="no" + type="radio" + @update:checked="onUpdateExcludeGroups"> {{ t('settings', 'Allow sharing for everyone (default)') }} </NcCheckboxRadioSwitch> <NcCheckboxRadioSwitch :checked.sync="settings.excludeGroups" - name="excludeGroups" value="yes" - type="radio" @update:checked="onUpdateExcludeGroups"> + name="excludeGroups" + value="yes" + type="radio" + @update:checked="onUpdateExcludeGroups"> {{ t('settings', 'Exclude some groups from sharing') }} </NcCheckboxRadioSwitch> <NcCheckboxRadioSwitch :checked.sync="settings.excludeGroups" - name="excludeGroups" value="allow" - type="radio" @update:checked="onUpdateExcludeGroups"> + name="excludeGroups" + value="allow" + type="radio" + @update:checked="onUpdateExcludeGroups"> {{ t('settings', 'Limit sharing to some groups') }} </NcCheckboxRadioSwitch> <div v-show="settings.excludeGroups !== 'no'" class="sharing__labeled-entry sharing__input"> @@ -90,7 +127,7 @@ <NcCheckboxRadioSwitch type="switch" aria-controls="settings-sharing-api-expiration" :checked.sync="settings.defaultInternalExpireDate"> - {{ t('settings', 'Set default expiration date for shares') }} + {{ t('settings', 'Set default expiration date for internal shares') }} </NcCheckboxRadioSwitch> <fieldset v-show="settings.defaultInternalExpireDate" id="settings-sharing-api-expiration" class="sharing__sub-section"> <NcCheckboxRadioSwitch :checked.sync="settings.enforceInternalExpireDate"> @@ -127,7 +164,7 @@ </NcCheckboxRadioSwitch> <fieldset v-show="settings.allowLinks && settings.defaultExpireDate" id="settings-sharing-api-api-expiration" class="sharing__sub-section"> <NcCheckboxRadioSwitch :checked.sync="settings.enforceExpireDate"> - {{ t('settings', 'Enforce expiration date for remote shares') }} + {{ t('settings', 'Enforce expiration date for link or mail shares') }} </NcCheckboxRadioSwitch> <NcTextField type="number" class="sharing__input" @@ -150,10 +187,10 @@ {{ t('settings', 'If autocompletion "same group" and "phone number integration" are enabled a match in either is enough to show the user.') }} </em> <NcCheckboxRadioSwitch :checked.sync="settings.restrictUserEnumerationToGroup"> - {{ t('settings', 'Allow account name autocompletion to users within the same groups and limit system address books to users in the same groups') }} + {{ t('settings', 'Restrict account name autocompletion and system address book access to users within the same groups') }} </NcCheckboxRadioSwitch> <NcCheckboxRadioSwitch :checked.sync="settings.restrictUserEnumerationToPhone"> - {{ t('settings', 'Allow account name autocompletion to users based on phone number integration') }} + {{ t('settings', 'Restrict account name autocompletion to users based on phone number integration') }} </NcCheckboxRadioSwitch> </fieldset> @@ -164,7 +201,7 @@ <NcCheckboxRadioSwitch type="switch" :checked.sync="publicShareDisclaimerEnabled"> {{ t('settings', 'Show disclaimer text on the public link upload page (only shown when the file list is hidden)') }} </NcCheckboxRadioSwitch> - <div v-if="typeof settings.publicShareDisclaimerText === 'string'" + <div v-if="publicShareDisclaimerEnabled" aria-describedby="settings-sharing-privary-related-disclaimer-hint" class="sharing__sub-section"> <NcTextArea class="sharing__input" @@ -186,19 +223,18 @@ </template> <script lang="ts"> -import { - NcCheckboxRadioSwitch, - NcSettingsSelectGroup, - NcTextArea, - NcTextField, -} from '@nextcloud/vue' import { showError, showSuccess } from '@nextcloud/dialogs' -import { translate as t } from '@nextcloud/l10n' import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' import { snakeCase } from 'lodash' import { defineComponent } from 'vue' import debounce from 'debounce' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import NcSettingsSelectGroup from '@nextcloud/vue/components/NcSettingsSelectGroup' +import NcTextArea from '@nextcloud/vue/components/NcTextArea' +import NcTextField from '@nextcloud/vue/components/NcTextField' import SelectSharingPermissions from './SelectSharingPermissions.vue' interface IShareSettings { @@ -209,6 +245,7 @@ interface IShareSettings { allowPublicUpload: boolean allowResharing: boolean allowShareDialogUserEnumeration: boolean + allowFederationOnPublicShares: boolean restrictUserEnumerationToGroup: boolean restrictUserEnumerationToPhone: boolean restrictUserEnumerationFullMatch: boolean @@ -216,8 +253,8 @@ interface IShareSettings { restrictUserEnumerationFullMatchEmail: boolean restrictUserEnumerationFullMatchIgnoreSecondDN: boolean enforceLinksPassword: boolean - passwordExcludedGroups: string[] - passwordExcludedGroupsFeatureEnabled: boolean + enforceLinksPasswordExcludedGroups: string[] + enforceLinksPasswordExcludedGroupsEnabled: boolean onlyShareWithGroupMembers: boolean onlyShareWithGroupMembersExcludeGroupList: string[] defaultExpireDate: boolean @@ -225,7 +262,7 @@ interface IShareSettings { enforceExpireDate: boolean excludeGroups: string excludeGroupsList: string[] - publicShareDisclaimerText?: string + publicShareDisclaimerText: string enableLinkPasswordByDefault: boolean defaultPermissions: number defaultInternalExpireDate: boolean @@ -234,6 +271,8 @@ interface IShareSettings { defaultRemoteExpireDate: boolean remoteExpireAfterNDays: string enforceRemoteExpireDate: boolean + allowCustomTokens: boolean + allowViewWithoutDownload: boolean } export default defineComponent({ @@ -241,13 +280,16 @@ export default defineComponent({ components: { NcCheckboxRadioSwitch, NcSettingsSelectGroup, + NcNoteCard, NcTextArea, NcTextField, SelectSharingPermissions, }, data() { + const settingsData = loadState<IShareSettings>('settings', 'sharingSettings') return { - settingsData: loadState<IShareSettings>('settings', 'sharingSettings'), + settingsData, + publicShareDisclaimerEnabled: settingsData.publicShareDisclaimerText !== '', } }, computed: { @@ -266,26 +308,24 @@ export default defineComponent({ }, }) }, - publicShareDisclaimerEnabled: { - get() { - return typeof this.settingsData.publicShareDisclaimerText === 'string' - }, - set(value) { - if (value) { - this.settingsData.publicShareDisclaimerText = '' - } else { - this.onUpdateDisclaimer() - } - }, + }, + + watch: { + publicShareDisclaimerEnabled() { + // When disabled we just remove the disclaimer content + if (this.publicShareDisclaimerEnabled === false) { + this.onUpdateDisclaimer('') + } }, }, + methods: { t, - onUpdateDisclaimer: debounce(function(value?: string) { + onUpdateDisclaimer: debounce(function(value: string) { const options = { success() { - if (value) { + if (value !== '') { showSuccess(t('settings', 'Changed disclaimer text')) } else { showSuccess(t('settings', 'Deleted disclaimer text')) @@ -295,7 +335,7 @@ export default defineComponent({ showError(t('settings', 'Could not set disclaimer text')) }, } - if (!value) { + if (value === '') { window.OCP.AppConfig.deleteKey('core', 'shareapi_public_link_disclaimertext', options) } else { window.OCP.AppConfig.setValue('core', 'shareapi_public_link_disclaimertext', value, options) @@ -305,7 +345,7 @@ export default defineComponent({ onUpdateExcludeGroups: debounce(function(value: string) { window.OCP.AppConfig.setValue('core', 'excludeGroups', value) this.settings.excludeGroups = value - }, 500) as (v?: string) => void + }, 500) as (v?: string) => void, }, }) </script> @@ -348,6 +388,10 @@ export default defineComponent({ width: 100%; } } + + & &__note { + margin: 2px 0; + } } @media only screen and (max-width: 350px) { diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue index 816bbfd3ea9..e24bee02593 100644 --- a/apps/settings/src/components/AdminTwoFactor.vue +++ b/apps/settings/src/components/AdminTwoFactor.vue @@ -71,10 +71,10 @@ <script> import axios from '@nextcloud/axios' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import { loadState } from '@nextcloud/initial-state' import sortedUniq from 'lodash/sortedUniq.js' @@ -175,8 +175,7 @@ export default { .two-factor-loading { display: inline-block; vertical-align: sub; - margin-left: -2px; - margin-right: 1px; + margin-inline: -2px 1px; } .top-margin { diff --git a/apps/settings/src/components/AppAPI/DaemonSelectionDialog.vue b/apps/settings/src/components/AppAPI/DaemonSelectionDialog.vue new file mode 100644 index 00000000000..696c77d19ce --- /dev/null +++ b/apps/settings/src/components/AppAPI/DaemonSelectionDialog.vue @@ -0,0 +1,41 @@ +<!-- + - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcDialog :open="show" + :name="t('settings', 'Choose Deploy Daemon for {appName}', {appName: app.name })" + size="normal" + @update:open="closeModal"> + <DaemonSelectionList :app="app" + :deploy-options="deployOptions" + @close="closeModal" /> + </NcDialog> +</template> + +<script setup> +import { defineProps, defineEmits } from 'vue' +import NcDialog from '@nextcloud/vue/components/NcDialog' +import DaemonSelectionList from './DaemonSelectionList.vue' + +defineProps({ + show: { + type: Boolean, + required: true, + }, + app: { + type: Object, + required: true, + }, + deployOptions: { + type: Object, + required: false, + default: () => ({}), + }, +}) + +const emit = defineEmits(['update:show']) +const closeModal = () => { + emit('update:show', false) +} +</script> diff --git a/apps/settings/src/components/AppAPI/DaemonSelectionEntry.vue b/apps/settings/src/components/AppAPI/DaemonSelectionEntry.vue new file mode 100644 index 00000000000..6b1cefde032 --- /dev/null +++ b/apps/settings/src/components/AppAPI/DaemonSelectionEntry.vue @@ -0,0 +1,77 @@ +<!-- + - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcListItem :name="itemTitle" + :details="isDefault ? t('settings', 'Default') : ''" + :force-display-actions="true" + :counter-number="daemon.exAppsCount" + :active="isDefault" + counter-type="highlighted" + @click.stop="selectDaemonAndInstall"> + <template #subname> + {{ daemon.accepts_deploy_id }} + </template> + </NcListItem> +</template> + +<script> +import NcListItem from '@nextcloud/vue/components/NcListItem' +import AppManagement from '../../mixins/AppManagement.js' +import { useAppsStore } from '../../store/apps-store' +import { useAppApiStore } from '../../store/app-api-store' + +export default { + name: 'DaemonSelectionEntry', + components: { + NcListItem, + }, + mixins: [AppManagement], // TODO: Convert to Composition API when AppManagement is refactored + props: { + daemon: { + type: Object, + required: true, + }, + isDefault: { + type: Boolean, + required: true, + }, + app: { + type: Object, + required: true, + }, + deployOptions: { + type: Object, + required: false, + default: () => ({}), + }, + }, + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + } + }, + computed: { + itemTitle() { + return this.daemon.name + ' - ' + this.daemon.display_name + }, + daemons() { + return this.appApiStore.dockerDaemons + }, + }, + methods: { + closeModal() { + this.$emit('close') + }, + selectDaemonAndInstall() { + this.closeModal() + this.enable(this.app.id, this.daemon, this.deployOptions) + }, + }, +} +</script> diff --git a/apps/settings/src/components/AppAPI/DaemonSelectionList.vue b/apps/settings/src/components/AppAPI/DaemonSelectionList.vue new file mode 100644 index 00000000000..701a17dbe24 --- /dev/null +++ b/apps/settings/src/components/AppAPI/DaemonSelectionList.vue @@ -0,0 +1,77 @@ +<!-- + - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <div class="daemon-selection-list"> + <ul v-if="dockerDaemons.length > 0" + :aria-label="t('settings', 'Registered Deploy daemons list')"> + <DaemonSelectionEntry v-for="daemon in dockerDaemons" + :key="daemon.id" + :daemon="daemon" + :is-default="defaultDaemon.name === daemon.name" + :app="app" + :deploy-options="deployOptions" + @close="closeModal" /> + </ul> + <NcEmptyContent v-else + class="daemon-selection-list__empty-content" + :name="t('settings', 'No Deploy daemons configured')" + :description="t('settings', 'Register a custom one or setup from available templates')"> + <template #icon> + <FormatListBullet :size="20" /> + </template> + <template #action> + <NcButton :href="appApiAdminPage"> + {{ t('settings', 'Manage Deploy daemons') }} + </NcButton> + </template> + </NcEmptyContent> + </div> +</template> + +<script setup> +import { computed, defineProps } from 'vue' +import { generateUrl } from '@nextcloud/router' + +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcButton from '@nextcloud/vue/components/NcButton' +import FormatListBullet from 'vue-material-design-icons/FormatListBulleted.vue' +import DaemonSelectionEntry from './DaemonSelectionEntry.vue' +import { useAppApiStore } from '../../store/app-api-store.ts' + +defineProps({ + app: { + type: Object, + required: true, + }, + deployOptions: { + type: Object, + required: false, + default: () => ({}), + }, +}) + +const appApiStore = useAppApiStore() + +const dockerDaemons = computed(() => appApiStore.dockerDaemons) +const defaultDaemon = computed(() => appApiStore.defaultDaemon) +const appApiAdminPage = computed(() => generateUrl('/settings/admin/app_api')) +const emit = defineEmits(['close']) +const closeModal = () => { + emit('close') +} +</script> + +<style scoped lang="scss"> +.daemon-selection-list { + max-height: 350px; + overflow-y: scroll; + padding: 2rem; + + &__empty-content { + margin-top: 0; + text-align: center; + } +} +</style> diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue index b7913c386e9..3e40e08b257 100644 --- a/apps/settings/src/components/AppList.vue +++ b/apps/settings/src/components/AppList.vue @@ -140,9 +140,12 @@ <script> import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import AppItem from './AppList/AppItem.vue' import pLimit from 'p-limit' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import AppItem from './AppList/AppItem.vue' +import AppManagement from '../mixins/AppManagement' +import { useAppApiStore } from '../store/app-api-store' +import { useAppsStore } from '../store/apps-store' export default { name: 'AppList', @@ -151,6 +154,8 @@ export default { NcButton, }, + mixins: [AppManagement], + props: { category: { type: String, @@ -158,6 +163,16 @@ export default { }, }, + setup() { + const appApiStore = useAppApiStore() + const store = useAppsStore() + + return { + appApiStore, + store, + } + }, + data() { return { search: '', @@ -168,7 +183,10 @@ export default { return this.apps.filter(app => app.update).length }, loading() { - return this.$store.getters.loading('list') + if (!this.$store.getters['appApiApps/isAppApiEnabled']) { + return this.$store.getters.loading('list') + } + return this.$store.getters.loading('list') || this.appApiStore.getLoading('list') }, hasPendingUpdate() { return this.apps.filter(app => app.update).length > 0 @@ -177,12 +195,18 @@ export default { return this.hasPendingUpdate && this.useListView }, apps() { - const apps = this.$store.getters.getAllApps + // Exclude ExApps from the list if AppAPI is disabled + const exApps = this.$store.getters.isAppApiEnabled ? this.appApiStore.getAllApps : [] + const apps = [...this.$store.getters.getAllApps, ...exApps] .filter(app => app.name.toLowerCase().search(this.search.toLowerCase()) !== -1) .sort(function(a, b) { - const sortStringA = '' + (a.active ? 0 : 1) + (a.update ? 0 : 1) + a.name - const sortStringB = '' + (b.active ? 0 : 1) + (b.update ? 0 : 1) + b.name - return OC.Util.naturalSortCompare(sortStringA, sortStringB) + const natSortDiff = OC.Util.naturalSortCompare(a, b) + if (natSortDiff === 0) { + const sortStringA = '' + (a.active ? 0 : 1) + (a.update ? 0 : 1) + const sortStringB = '' + (b.active ? 0 : 1) + (b.update ? 0 : 1) + return Number(sortStringA) - Number(sortStringB) + } + return natSortDiff }) if (this.category === 'installed') { @@ -230,7 +254,8 @@ export default { if (this.search === '') { return [] } - return this.$store.getters.getAllApps + const exApps = this.$store.getters.isAppApiEnabled ? this.appApiStore.getAllApps : [] + return [...this.$store.getters.getAllApps, ...exApps] .filter(app => { if (app.name.toLowerCase().search(this.search.toLowerCase()) !== -1) { return (!this.apps.find(_app => _app.id === app.id)) @@ -304,8 +329,9 @@ export default { const limit = pLimit(1) this.apps .filter(app => app.update) - .map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id })), - ) + .map((app) => limit(() => { + this.update(app.id) + })) }, }, } @@ -326,14 +352,14 @@ $toolbar-height: 44px + $toolbar-padding * 2; } #app-list-update-all { - margin-left: 10px; + margin-inline-start: 10px; } &__toolbar { height: $toolbar-height; padding: $toolbar-padding; // Leave room for app-navigation-toggle - padding-left: $toolbar-height; + padding-inline-start: $toolbar-height; width: 100%; background-color: var(--color-main-background); position: sticky; @@ -361,11 +387,13 @@ $toolbar-height: 44px + $toolbar-padding * 2; &__bundle-heading { display: flex; align-items: center; - margin: 20px 10px 20px 0; + margin-block: 20px; + margin-inline: 0 10px; } &__bundle-header { - margin: 0 10px 0 50px; + margin-block: 0; + margin-inline: 50px 10px; font-weight: bold; font-size: 20px; line-height: 30px; diff --git a/apps/settings/src/components/AppList/AppDaemonBadge.vue b/apps/settings/src/components/AppList/AppDaemonBadge.vue new file mode 100644 index 00000000000..ca81e7fab0b --- /dev/null +++ b/apps/settings/src/components/AppList/AppDaemonBadge.vue @@ -0,0 +1,37 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <span v-if="daemon" + class="app-daemon-badge" + :title="daemon.name"> + <NcIconSvgWrapper :path="mdiFileChart" :size="20" inline /> + {{ daemon.display_name }} + </span> +</template> + +<script setup lang="ts"> +import type { IDeployDaemon } from '../../app-types.ts' +import { mdiFileChart } from '@mdi/js' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' + +defineProps<{ + daemon?: IDeployDaemon +}>() +</script> + +<style scoped lang="scss"> +.app-daemon-badge { + color: var(--color-text-maxcontrast); + background-color: transparent; + border: 1px solid var(--color-text-maxcontrast); + border-radius: var(--border-radius); + + display: flex; + flex-direction: row; + gap: 6px; + padding: 3px 6px; + width: fit-content; +} +</style> diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue index 881be612445..95a98a93cde 100644 --- a/apps/settings/src/components/AppList/AppItem.vue +++ b/apps/settings/src/components/AppList/AppItem.vue @@ -14,9 +14,13 @@ <component :is="dataItemTag" class="app-image app-image-icon" :headers="getDataItemHeaders(`app-table-col-icon`)"> - <div v-if="(listView && !app.preview) || (!listView && !screenshotLoaded)" class="icon-settings-dark" /> + <div v-if="!app?.app_api && shouldDisplayDefaultIcon" class="icon-settings-dark" /> + <NcIconSvgWrapper v-else-if="app.app_api && shouldDisplayDefaultIcon" + :path="mdiCogOutline" + :size="listView ? 24 : 48" + style="min-width: auto; min-height: auto; height: 100%;" /> - <svg v-else-if="listView && app.preview" + <svg v-else-if="listView && app.preview && !app.app_api" width="32" height="32" viewBox="0 0 32 32"> @@ -71,10 +75,11 @@ <div v-if="app.error" class="warning"> {{ app.error }} </div> - <div v-if="isLoading" class="icon icon-loading-small" /> + <div v-if="isLoading || isInitializing" class="icon icon-loading-small" /> <NcButton v-if="app.update" type="primary" - :disabled="installing || isLoading" + :disabled="installing || isLoading || !defaultDeployDaemonAccessible || isManualInstall" + :title="updateButtonText" @click.stop="update(app.id)"> {{ t('settings', 'Update to {update}', {update:app.update}) }} </NcButton> @@ -86,36 +91,46 @@ {{ t('settings', 'Remove') }} </NcButton> <NcButton v-if="app.active" - :disabled="installing || isLoading" + :disabled="installing || isLoading || isInitializing || isDeploying" @click.stop="disable(app.id)"> - {{ t('settings','Disable') }} + {{ disableButtonText }} </NcButton> <NcButton v-if="!app.active && (app.canInstall || app.isCompatible)" :title="enableButtonTooltip" :aria-label="enableButtonTooltip" type="primary" - :disabled="!app.canInstall || installing || isLoading" - @click.stop="enable(app.id)"> + :disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying" + @click.stop="enableButtonAction"> {{ enableButtonText }} </NcButton> <NcButton v-else-if="!app.active" :title="forceEnableButtonTooltip" :aria-label="forceEnableButtonTooltip" type="secondary" - :disabled="installing || isLoading" + :disabled="installing || isLoading || !defaultDeployDaemonAccessible" @click.stop="forceEnable(app.id)"> {{ forceEnableButtonText }} </NcButton> + + <DaemonSelectionDialog v-if="app?.app_api && showSelectDaemonModal" + :show.sync="showSelectDaemonModal" + :app="app" /> </component> </component> </template> <script> +import { useAppsStore } from '../../store/apps-store.js' + import AppScore from './AppScore.vue' import AppLevelBadge from './AppLevelBadge.vue' import AppManagement from '../../mixins/AppManagement.js' import SvgFilterMixin from '../SvgFilterMixin.vue' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import { mdiCogOutline } from '@mdi/js' +import { useAppApiStore } from '../../store/app-api-store.ts' +import DaemonSelectionDialog from '../AppAPI/DaemonSelectionDialog.vue' export default { name: 'AppItem', @@ -123,6 +138,8 @@ export default { AppLevelBadge, AppScore, NcButton, + NcIconSvgWrapper, + DaemonSelectionDialog, }, mixins: [AppManagement, SvgFilterMixin], props: { @@ -151,11 +168,22 @@ export default { default: false, }, }, + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + mdiCogOutline, + } + }, data() { return { isSelected: false, scrolled: false, screenshotLoaded: false, + showSelectDaemonModal: false, } }, computed: { @@ -168,6 +196,9 @@ export default { withSidebar() { return !!this.$route.params.id }, + shouldDisplayDefaultIcon() { + return (this.listView && !this.app.preview) || (!this.listView && !this.screenshotLoaded) + }, }, watch: { '$route.params.id'(id) { @@ -195,6 +226,23 @@ export default { getDataItemHeaders(columnName) { return this.useBundleView ? [this.headers, columnName].join(' ') : null }, + showSelectionModal() { + this.showSelectDaemonModal = true + }, + async enableButtonAction() { + if (!this.app?.app_api) { + this.enable(this.app.id) + return + } + await this.appApiStore.fetchDockerDaemons() + if (this.appApiStore.dockerDaemons.length === 1 && this.app.needsDownload) { + this.enable(this.app.id, this.appApiStore.dockerDaemons[0]) + } else if (this.app.needsDownload) { + this.showSelectionModal() + } else { + this.enable(this.app.id, this.app.daemon) + } + }, }, } </script> @@ -228,7 +276,7 @@ export default { .app-image { width: var(--default-clickable-area); height: auto; - text-align: right; + text-align: end; } .app-image-icon svg, @@ -257,8 +305,7 @@ export default { .app-name--link::after { content: ''; position: absolute; - left: 0; - right: 0; + inset-inline: 0; height: var(--app-item-height); } @@ -271,7 +318,7 @@ export default { .icon-loading-small { display: inline-block; top: 4px; - margin-right: 10px; + margin-inline-end: 10px; } } @@ -317,10 +364,8 @@ export default { .app-name--link::after { content: ''; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset-block: 0; + inset-inline: 0; } .app-actions { diff --git a/apps/settings/src/components/AppList/AppLevelBadge.vue b/apps/settings/src/components/AppList/AppLevelBadge.vue index cceb5b0ecf9..8461f5eb6b9 100644 --- a/apps/settings/src/components/AppList/AppLevelBadge.vue +++ b/apps/settings/src/components/AppList/AppLevelBadge.vue @@ -13,9 +13,9 @@ </template> <script setup lang="ts"> -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' -import { mdiCheck, mdiStarShooting } from '@mdi/js' +import { mdiCheck, mdiStarShootingOutline } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' import { computed } from 'vue' @@ -28,7 +28,7 @@ const props = defineProps<{ const isSupported = computed(() => props.level === 300) const isFeatured = computed(() => props.level === 200) -const badgeIcon = computed(() => isSupported.value ? mdiStarShooting : mdiCheck) +const badgeIcon = computed(() => isSupported.value ? mdiStarShootingOutline : mdiCheck) const badgeText = computed(() => isSupported.value ? t('settings', 'Supported') : t('settings', 'Featured')) const badgeTitle = computed(() => isSupported.value ? t('settings', 'This app is supported via your current Nextcloud subscription.') diff --git a/apps/settings/src/components/AppList/AppScore.vue b/apps/settings/src/components/AppList/AppScore.vue index 7eebc620a0b..a1dd4c03842 100644 --- a/apps/settings/src/components/AppList/AppScore.vue +++ b/apps/settings/src/components/AppList/AppScore.vue @@ -20,7 +20,7 @@ </span> </template> <script lang="ts"> -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import { mdiStar, mdiStarHalfFull, mdiStarOutline } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' import { defineComponent } from 'vue' diff --git a/apps/settings/src/components/AppNavigationGroupList.vue b/apps/settings/src/components/AppNavigationGroupList.vue new file mode 100644 index 00000000000..8f21d18d695 --- /dev/null +++ b/apps/settings/src/components/AppNavigationGroupList.vue @@ -0,0 +1,220 @@ +<!-- + - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <Fragment> + <NcAppNavigationCaption :name="t('settings', 'Groups')" + :disabled="loadingAddGroup" + :aria-label="loadingAddGroup ? t('settings', 'Creating group…') : t('settings', 'Create group')" + force-menu + is-heading + :open.sync="isAddGroupOpen"> + <template v-if="isAdminOrDelegatedAdmin" #actionsTriggerIcon> + <NcLoadingIcon v-if="loadingAddGroup" /> + <NcIconSvgWrapper v-else :path="mdiPlus" /> + </template> + <template v-if="isAdminOrDelegatedAdmin" #actions> + <NcActionText> + <template #icon> + <NcIconSvgWrapper :path="mdiAccountGroupOutline" /> + </template> + {{ t('settings', 'Create group') }} + </NcActionText> + <NcActionInput :label="t('settings', 'Group name')" + data-cy-users-settings-new-group-name + :label-outside="false" + :disabled="loadingAddGroup" + :value.sync="newGroupName" + :error="hasAddGroupError" + :helper-text="hasAddGroupError ? t('settings', 'Please enter a valid group name') : ''" + @submit="createGroup" /> + </template> + </NcAppNavigationCaption> + + <NcAppNavigationSearch v-model="groupsSearchQuery" + :label="t('settings', 'Search groups…')" /> + + <p id="group-list-desc" class="hidden-visually"> + {{ t('settings', 'List of groups. This list is not fully populated for performance reasons. The groups will be loaded as you navigate or search through the list.') }} + </p> + <NcAppNavigationList class="account-management__group-list" + aria-describedby="group-list-desc" + data-cy-users-settings-navigation-groups="custom"> + <GroupListItem v-for="group in filteredGroups" + :id="group.id" + ref="groupListItems" + :key="group.id" + :active="selectedGroupDecoded === group.id" + :name="group.title" + :count="group.count" /> + <div v-if="loadingGroups" role="note"> + <NcLoadingIcon :name="t('settings', 'Loading groups…')" /> + </div> + </NcAppNavigationList> + </Fragment> +</template> + +<script setup lang="ts"> +import type CancelablePromise from 'cancelable-promise' +import type { IGroup } from '../views/user-types.d.ts' + +import { mdiAccountGroupOutline, mdiPlus } from '@mdi/js' +import { showError } from '@nextcloud/dialogs' +import { t } from '@nextcloud/l10n' +import { useElementVisibility } from '@vueuse/core' +import { computed, ref, watch, onBeforeMount } from 'vue' +import { Fragment } from 'vue-frag' +import { useRoute, useRouter } from 'vue-router/composables' + +import NcActionInput from '@nextcloud/vue/components/NcActionInput' +import NcActionText from '@nextcloud/vue/components/NcActionText' +import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption' +import NcAppNavigationList from '@nextcloud/vue/components/NcAppNavigationList' +import NcAppNavigationSearch from '@nextcloud/vue/components/NcAppNavigationSearch' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' + +import GroupListItem from './GroupListItem.vue' + +import { useFormatGroups } from '../composables/useGroupsNavigation.ts' +import { useStore } from '../store' +import { searchGroups } from '../service/groups.ts' +import logger from '../logger.ts' + +const store = useStore() +const route = useRoute() +const router = useRouter() + +onBeforeMount(async () => { + await loadGroups() +}) + +/** Current active group in the view - this is URL encoded */ +const selectedGroup = computed(() => route.params?.selectedGroup) +/** Current active group - URL decoded */ +const selectedGroupDecoded = computed(() => selectedGroup.value ? decodeURIComponent(selectedGroup.value) : null) +/** All available groups */ +const groups = computed(() => { + return isAdminOrDelegatedAdmin.value + ? store.getters.getSortedGroups + : store.getters.getSubAdminGroups +}) +/** User groups */ +const { userGroups } = useFormatGroups(groups) +/** Server settings for current user */ +const settings = computed(() => store.getters.getServerData) +/** True if the current user is a (delegated) admin */ +const isAdminOrDelegatedAdmin = computed(() => settings.value.isAdmin || settings.value.isDelegatedAdmin) + +/** True if the 'add-group' dialog is open - needed to be able to close it when the group is created */ +const isAddGroupOpen = ref(false) +/** True if the group creation is in progress to show loading spinner and disable adding another one */ +const loadingAddGroup = ref(false) +/** Error state for creating a new group */ +const hasAddGroupError = ref(false) +/** Name of the group to create (used in the group creation dialog) */ +const newGroupName = ref('') + +/** True if groups are loading */ +const loadingGroups = ref(false) +/** Search offset */ +const offset = ref(0) +/** Search query for groups */ +const groupsSearchQuery = ref('') +const filteredGroups = computed(() => { + if (isAdminOrDelegatedAdmin.value) { + return userGroups.value + } + + const substring = groupsSearchQuery.value.toLowerCase() + return userGroups.value.filter(group => group.id.toLowerCase().search(substring) !== -1 || group.title.toLowerCase().search(substring) !== -1) +}) + +const groupListItems = ref([]) +const lastGroupListItem = computed(() => { + return groupListItems.value + .findLast(component => component?.$vnode?.key === userGroups.value?.at(-1)?.id) // Order of refs is not guaranteed to match source array order + ?.$refs?.listItem?.$el +}) +const isLastGroupVisible = useElementVisibility(lastGroupListItem) +watch(isLastGroupVisible, async () => { + if (!isLastGroupVisible.value) { + return + } + await loadGroups() +}) + +watch(groupsSearchQuery, async () => { + store.commit('resetGroups') + offset.value = 0 + await loadGroups() +}) + +/** Cancelable promise for search groups request */ +const promise = ref<CancelablePromise<IGroup[]>>() + +/** + * Load groups + */ +async function loadGroups() { + if (!isAdminOrDelegatedAdmin.value) { + return + } + + if (promise.value) { + promise.value.cancel() + } + loadingGroups.value = true + try { + promise.value = searchGroups({ + search: groupsSearchQuery.value, + offset: offset.value, + limit: 25, + }) + const groups = await promise.value + if (groups.length > 0) { + offset.value += 25 + } + for (const group of groups) { + store.commit('addGroup', group) + } + } catch (error) { + logger.error(t('settings', 'Failed to load groups'), { error }) + } + promise.value = undefined + loadingGroups.value = false +} + +/** + * Create a new group + */ +async function createGroup() { + hasAddGroupError.value = false + const groupId = newGroupName.value.trim() + if (groupId === '') { + hasAddGroupError.value = true + return + } + + isAddGroupOpen.value = false + loadingAddGroup.value = true + + try { + await store.dispatch('addGroup', groupId) + await router.push({ + name: 'group', + params: { + selectedGroup: encodeURIComponent(groupId), + }, + }) + const newGroupListItem = groupListItems.value.findLast(component => component?.$vnode?.key === groupId) + newGroupListItem?.$refs?.listItem?.$el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) + newGroupName.value = '' + } catch { + showError(t('settings', 'Failed to create group')) + } + loadingAddGroup.value = false +} +</script> diff --git a/apps/settings/src/components/AppStoreDiscover/AppLink.vue b/apps/settings/src/components/AppStoreDiscover/AppLink.vue index 1ce19ad7319..703adb9f041 100644 --- a/apps/settings/src/components/AppStoreDiscover/AppLink.vue +++ b/apps/settings/src/components/AppStoreDiscover/AppLink.vue @@ -18,12 +18,10 @@ import { loadState } from '@nextcloud/initial-state' import { generateUrl } from '@nextcloud/router' import { defineComponent } from 'vue' import { RouterLink } from 'vue-router' +import type { INavigationEntry } from '../../../../../core/src/types/navigation' -const knownRoutes = Object.fromEntries( - Object.entries( - loadState<Record<string, { app?: string, href: string }>>('core', 'apps'), - ).map(([k, v]) => [v.app ?? k, v.href]), -) +const apps = loadState<INavigationEntry[]>('core', 'apps') +const knownRoutes = Object.fromEntries(apps.map((app) => [app.app ?? app.id, app.href])) /** * This component either shows a native link to the installed app or external size - or a router link to the appstore page of the app if not installed diff --git a/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue b/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue index d0a781159b9..bb91940c763 100644 --- a/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue +++ b/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue @@ -8,7 +8,7 @@ :name="t('settings', 'Nothing to show')" :description="t('settings', 'Could not load section content from app store.')"> <template #icon> - <NcIconSvgWrapper :path="mdiEyeOff" :size="64" /> + <NcIconSvgWrapper :path="mdiEyeOffOutline" :size="64" /> </template> </NcEmptyContent> <NcEmptyContent v-else-if="elements.length === 0" @@ -30,16 +30,16 @@ <script setup lang="ts"> import type { IAppDiscoverElements } from '../../constants/AppDiscoverTypes.ts' -import { mdiEyeOff } from '@mdi/js' +import { mdiEyeOffOutline } from '@mdi/js' import { showError } from '@nextcloud/dialogs' import { translate as t } from '@nextcloud/l10n' import { generateUrl } from '@nextcloud/router' import { defineAsyncComponent, defineComponent, onBeforeMount, ref } from 'vue' import axios from '@nextcloud/axios' -import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' import logger from '../../logger' import { parseApiResponse, filterElements } from '../../utils/appDiscoverParser.ts' diff --git a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue index 537c3004c0e..69393176835 100644 --- a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue +++ b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue @@ -69,8 +69,8 @@ import { computed, defineComponent, nextTick, ref, watch } from 'vue' import { commonAppDiscoverProps } from './common.ts' import { useLocalizedValue } from '../../composables/useGetLocalizedValue.ts' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import PostType from './PostType.vue' export default defineComponent({ @@ -165,10 +165,10 @@ h3 { // See padding of discover section &--next { - right: -54px; + inset-inline-end: -54px; } &--previous { - left: -54px; + inset-inline-start: -54px; } } diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue index 536609f329f..090e9dee577 100644 --- a/apps/settings/src/components/AppStoreDiscover/PostType.vue +++ b/apps/settings/src/components/AppStoreDiscover/PostType.vue @@ -65,7 +65,7 @@ import { computed, defineComponent, ref, watchEffect } from 'vue' import { commonAppDiscoverProps } from './common' import { useLocalizedValue } from '../../composables/useGetLocalizedValue' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import AppLink from './AppLink.vue' export default defineComponent({ @@ -252,15 +252,15 @@ export default defineComponent({ } &__play-icon { + position: absolute; + top: -46px; // half of the icon height + inset-inline-end: -46px; // half of the icon width + &-wrapper { position: relative; top: -50%; - left: -50%; + inset-inline-start: -50%; } - - position: absolute; - top: -46px; // half of the icon height - right: -46px; // half of the icon width } } diff --git a/apps/settings/src/components/AppStoreSidebar/AppDeployDaemonTab.vue b/apps/settings/src/components/AppStoreSidebar/AppDeployDaemonTab.vue new file mode 100644 index 00000000000..7c0b8ea4421 --- /dev/null +++ b/apps/settings/src/components/AppStoreSidebar/AppDeployDaemonTab.vue @@ -0,0 +1,50 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcAppSidebarTab v-if="app?.daemon" + id="daemon" + :name="t('settings', 'Daemon')" + :order="3"> + <template #icon> + <NcIconSvgWrapper :path="mdiFileChart" :size="24" /> + </template> + <div class="daemon"> + <h4>{{ t('settings', 'Deploy Daemon') }}</h4> + <p><b>{{ t('settings', 'Type') }}</b>: {{ app?.daemon.accepts_deploy_id }}</p> + <p><b>{{ t('settings', 'Name') }}</b>: {{ app?.daemon.name }}</p> + <p><b>{{ t('settings', 'Display Name') }}</b>: {{ app?.daemon.display_name }}</p> + <p><b>{{ t('settings', 'GPUs support') }}</b>: {{ gpuSupport }}</p> + <p><b>{{ t('settings', 'Compute device') }}</b>: {{ app?.daemon?.deploy_config?.computeDevice?.label }}</p> + </div> + </NcAppSidebarTab> +</template> + +<script setup lang="ts"> +import type { IAppstoreExApp } from '../../app-types' + +import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' + +import { mdiFileChart } from '@mdi/js' +import { ref } from 'vue' + +const props = defineProps<{ + app: IAppstoreExApp, +}>() + +const gpuSupport = ref(props.app?.daemon?.deploy_config?.computeDevice?.id !== 'cpu' || false) +</script> + +<style scoped lang="scss"> +.daemon { + padding: 20px; + + h4 { + font-weight: bold; + margin: 10px auto; + } +} +</style> diff --git a/apps/settings/src/components/AppStoreSidebar/AppDeployOptionsModal.vue b/apps/settings/src/components/AppStoreSidebar/AppDeployOptionsModal.vue new file mode 100644 index 00000000000..0544c3848be --- /dev/null +++ b/apps/settings/src/components/AppStoreSidebar/AppDeployOptionsModal.vue @@ -0,0 +1,320 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcDialog :open="show" + size="normal" + :name="t('settings', 'Advanced deploy options')" + @update:open="$emit('update:show', $event)"> + <div class="modal__content"> + <p class="deploy-option__hint"> + {{ configuredDeployOptions === null ? t('settings', 'Edit ExApp deploy options before installation') : t('settings', 'Configured ExApp deploy options. Can be set only during installation') }}. + <a v-if="deployOptionsDocsUrl" :href="deployOptionsDocsUrl"> + {{ t('settings', 'Learn more') }} + </a> + </p> + <h3 v-if="environmentVariables.length > 0 || (configuredDeployOptions !== null && configuredDeployOptions.environment_variables.length > 0)"> + {{ t('settings', 'Environment variables') }} + </h3> + <template v-if="configuredDeployOptions === null"> + <div v-for="envVar in environmentVariables" + :key="envVar.envName" + class="deploy-option"> + <NcTextField :label="envVar.displayName" :value.sync="deployOptions.environment_variables[envVar.envName]" /> + <p class="deploy-option__hint"> + {{ envVar.description }} + </p> + </div> + </template> + <fieldset v-else-if="Object.keys(configuredDeployOptions).length > 0" + class="envs"> + <legend class="deploy-option__hint"> + {{ t('settings', 'ExApp container environment variables') }} + </legend> + <NcTextField v-for="(value, key) in configuredDeployOptions.environment_variables" + :key="key" + :label="value.displayName ?? key" + :helper-text="value.description" + :value="value.value" + readonly /> + </fieldset> + <template v-else> + <p class="deploy-option__hint"> + {{ t('settings', 'No environment variables defined') }} + </p> + </template> + + <h3>{{ t('settings', 'Mounts') }}</h3> + <template v-if="configuredDeployOptions === null"> + <p class="deploy-option__hint"> + {{ t('settings', 'Define host folder mounts to bind to the ExApp container') }} + </p> + <NcNoteCard type="info" :text="t('settings', 'Must exist on the Deploy daemon host prior to installing the ExApp')" /> + <div v-for="mount in deployOptions.mounts" + :key="mount.hostPath" + class="deploy-option" + style="display: flex; align-items: center; justify-content: space-between; flex-direction: row;"> + <NcTextField :label="t('settings', 'Host path')" :value.sync="mount.hostPath" /> + <NcTextField :label="t('settings', 'Container path')" :value.sync="mount.containerPath" /> + <NcCheckboxRadioSwitch :checked.sync="mount.readonly"> + {{ t('settings', 'Read-only') }} + </NcCheckboxRadioSwitch> + <NcButton :aria-label="t('settings', 'Remove mount')" + style="margin-top: 6px;" + @click="removeMount(mount)"> + <template #icon> + <NcIconSvgWrapper :path="mdiDeleteOutline" /> + </template> + </NcButton> + </div> + <div v-if="addingMount" class="deploy-option"> + <h4> + {{ t('settings', 'New mount') }} + </h4> + <div style="display: flex; align-items: center; justify-content: space-between; flex-direction: row;"> + <NcTextField ref="newMountHostPath" + :label="t('settings', 'Host path')" + :aria-label="t('settings', 'Enter path to host folder')" + :value.sync="newMountPoint.hostPath" /> + <NcTextField :label="t('settings', 'Container path')" + :aria-label="t('settings', 'Enter path to container folder')" + :value.sync="newMountPoint.containerPath" /> + <NcCheckboxRadioSwitch :checked.sync="newMountPoint.readonly" + :aria-label="t('settings', 'Toggle read-only mode')"> + {{ t('settings', 'Read-only') }} + </NcCheckboxRadioSwitch> + </div> + <div style="display: flex; align-items: center; margin-top: 4px;"> + <NcButton :aria-label="t('settings', 'Confirm adding new mount')" + @click="addMountPoint"> + <template #icon> + <NcIconSvgWrapper :path="mdiCheck" /> + </template> + {{ t('settings', 'Confirm') }} + </NcButton> + <NcButton :aria-label="t('settings', 'Cancel adding mount')" + style="margin-left: 4px;" + @click="cancelAddMountPoint"> + <template #icon> + <NcIconSvgWrapper :path="mdiClose" /> + </template> + {{ t('settings', 'Cancel') }} + </NcButton> + </div> + </div> + <NcButton v-if="!addingMount" + :aria-label="t('settings', 'Add mount')" + style="margin-top: 5px;" + @click="startAddingMount"> + <template #icon> + <NcIconSvgWrapper :path="mdiPlus" /> + </template> + {{ t('settings', 'Add mount') }} + </NcButton> + </template> + <template v-else-if="configuredDeployOptions.mounts.length > 0"> + <p class="deploy-option__hint"> + {{ t('settings', 'ExApp container mounts') }} + </p> + <div v-for="mount in configuredDeployOptions.mounts" + :key="mount.hostPath" + class="deploy-option" + style="display: flex; align-items: center; justify-content: space-between; flex-direction: row;"> + <NcTextField :label="t('settings', 'Host path')" :value.sync="mount.hostPath" readonly /> + <NcTextField :label="t('settings', 'Container path')" :value.sync="mount.containerPath" readonly /> + <NcCheckboxRadioSwitch :checked.sync="mount.readonly" disabled> + {{ t('settings', 'Read-only') }} + </NcCheckboxRadioSwitch> + </div> + </template> + <p v-else class="deploy-option__hint"> + {{ t('settings', 'No mounts defined') }} + </p> + </div> + + <template v-if="!app.active && (app.canInstall || app.isCompatible) && configuredDeployOptions === null" #actions> + <NcButton :title="enableButtonTooltip" + :aria-label="enableButtonTooltip" + type="primary" + :disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying" + @click.stop="submitDeployOptions"> + {{ enableButtonText }} + </NcButton> + </template> + </NcDialog> +</template> + +<script> +import { computed, ref } from 'vue' + +import axios from '@nextcloud/axios' +import { generateUrl } from '@nextcloud/router' +import { loadState } from '@nextcloud/initial-state' +import { emit } from '@nextcloud/event-bus' + +import NcDialog from '@nextcloud/vue/components/NcDialog' +import NcTextField from '@nextcloud/vue/components/NcTextField' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' + +import { mdiPlus, mdiCheck, mdiClose, mdiDeleteOutline } from '@mdi/js' + +import { useAppApiStore } from '../../store/app-api-store.ts' +import { useAppsStore } from '../../store/apps-store.ts' + +import AppManagement from '../../mixins/AppManagement.js' + +export default { + name: 'AppDeployOptionsModal', + components: { + NcDialog, + NcTextField, + NcButton, + NcNoteCard, + NcCheckboxRadioSwitch, + NcIconSvgWrapper, + }, + mixins: [AppManagement], + props: { + app: { + type: Object, + required: true, + }, + show: { + type: Boolean, + required: true, + }, + }, + setup(props) { + // for AppManagement mixin + const store = useAppsStore() + const appApiStore = useAppApiStore() + + const environmentVariables = computed(() => { + if (props.app?.releases?.length === 1) { + return props.app?.releases[0]?.environmentVariables || [] + } + return [] + }) + + const deployOptions = ref({ + environment_variables: environmentVariables.value.reduce((acc, envVar) => { + acc[envVar.envName] = envVar.default || '' + return acc + }, {}), + mounts: [], + }) + + return { + environmentVariables, + deployOptions, + store, + appApiStore, + mdiPlus, + mdiCheck, + mdiClose, + mdiDeleteOutline, + } + }, + data() { + return { + addingMount: false, + newMountPoint: { + hostPath: '', + containerPath: '', + readonly: false, + }, + addingPortBinding: false, + configuredDeployOptions: null, + deployOptionsDocsUrl: loadState('settings', 'deployOptionsDocsUrl', null), + } + }, + watch: { + show(newShow) { + if (newShow) { + this.fetchExAppDeployOptions() + } else { + this.configuredDeployOptions = null + } + }, + }, + methods: { + startAddingMount() { + this.addingMount = true + this.$nextTick(() => { + this.$refs.newMountHostPath.focus() + }) + }, + addMountPoint() { + this.deployOptions.mounts.push(this.newMountPoint) + this.newMountPoint = { + hostPath: '', + containerPath: '', + readonly: false, + } + this.addingMount = false + }, + cancelAddMountPoint() { + this.newMountPoint = { + hostPath: '', + containerPath: '', + readonly: false, + } + this.addingMount = false + }, + removeMount(mountToRemove) { + this.deployOptions.mounts = this.deployOptions.mounts.filter(mount => mount !== mountToRemove) + }, + async fetchExAppDeployOptions() { + return axios.get(generateUrl(`/apps/app_api/apps/deploy-options/${this.app.id}`)) + .then(response => { + this.configuredDeployOptions = response.data + }) + .catch(() => { + this.configuredDeployOptions = null + }) + }, + async submitDeployOptions() { + await this.appApiStore.fetchDockerDaemons() + if (this.appApiStore.dockerDaemons.length === 1 && this.app.needsDownload) { + this.enable(this.app.id, this.appApiStore.dockerDaemons[0], this.deployOptions) + } else if (this.app.needsDownload) { + emit('showDaemonSelectionModal', this.deployOptions) + } else { + this.enable(this.app.id, this.app.daemon, this.deployOptions) + } + this.$emit('update:show', false) + }, + }, +} +</script> + +<style scoped> +.deploy-option { + margin: calc(var(--default-grid-baseline) * 4) 0; + display: flex; + flex-direction: column; + align-items: flex-start; + + &__hint { + margin-top: 4px; + font-size: 0.8em; + color: var(--color-text-maxcontrast); + } +} + +.envs { + width: 100%; + overflow: auto; + height: 100%; + max-height: 300px; + + li { + margin: 10px 0; + } +} +</style> diff --git a/apps/settings/src/components/AppStoreSidebar/AppDescriptionTab.vue b/apps/settings/src/components/AppStoreSidebar/AppDescriptionTab.vue index 36c551eb0e8..299d084ef9e 100644 --- a/apps/settings/src/components/AppStoreSidebar/AppDescriptionTab.vue +++ b/apps/settings/src/components/AppStoreSidebar/AppDescriptionTab.vue @@ -22,8 +22,8 @@ import type { IAppstoreApp } from '../../app-types' import { mdiTextShort } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' -import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import Markdown from '../Markdown.vue' defineProps<{ diff --git a/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue b/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue index ef97837b8d4..eb66d8f3e3a 100644 --- a/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue +++ b/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue @@ -8,7 +8,7 @@ :name="t('settings', 'Details')" :order="1"> <template #icon> - <NcIconSvgWrapper :path="mdiTextBox" /> + <NcIconSvgWrapper :path="mdiTextBoxOutline" /> </template> <div class="app-details"> <div class="app-details__actions"> @@ -47,19 +47,19 @@ class="update primary" type="button" :value="t('settings', 'Update to {version}', { version: app.update })" - :disabled="installing || isLoading" + :disabled="installing || isLoading || isManualInstall" @click="update(app.id)"> <input v-if="app.canUnInstall" class="uninstall" type="button" :value="t('settings', 'Remove')" :disabled="installing || isLoading" - @click="remove(app.id)"> + @click="remove(app.id, removeData)"> <input v-if="app.active" class="enable" type="button" - :value="t('settings','Disable')" - :disabled="installing || isLoading" + :value="disableButtonText" + :disabled="installing || isLoading || isInitializing || isDeploying" @click="disable(app.id)"> <input v-if="!app.active && (app.canInstall || app.isCompatible)" :title="enableButtonTooltip" @@ -67,8 +67,8 @@ class="enable primary" type="button" :value="enableButtonText" - :disabled="!app.canInstall || installing || isLoading" - @click="enable(app.id)"> + :disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying" + @click="enableButtonAction"> <input v-else-if="!app.active && !app.canInstall" :title="forceEnableButtonTooltip" :aria-label="forceEnableButtonTooltip" @@ -77,7 +77,25 @@ :value="forceEnableButtonText" :disabled="installing || isLoading" @click="forceEnable(app.id)"> + <NcButton v-if="app?.app_api && (app.canInstall || app.isCompatible)" + :aria-label="t('settings', 'Advanced deploy options')" + type="secondary" + @click="() => showDeployOptionsModal = true"> + <template #icon> + <NcIconSvgWrapper :path="mdiToyBrickPlusOutline" /> + </template> + {{ t('settings', 'Deploy options') }} + </NcButton> </div> + <p v-if="!defaultDeployDaemonAccessible" class="warning"> + {{ t('settings', 'Default Deploy daemon is not accessible') }} + </p> + <NcCheckboxRadioSwitch v-if="app.canUnInstall" + :checked="removeData" + :disabled="installing || isLoading || !defaultDeployDaemonAccessible" + @update:checked="toggleRemoveData"> + {{ t('settings', 'Delete data on remove') }} + </NcCheckboxRadioSwitch> </div> <ul class="app-details__dependencies"> @@ -97,7 +115,7 @@ </li> </ul> - <div v-if="lastModified" class="app-details__section"> + <div v-if="lastModified && !app.shipped" class="app-details__section"> <h4> {{ t('settings', 'Latest updated') }} </h4> @@ -144,7 +162,7 @@ :aria-label="t('settings', 'Report a bug')" :title="t('settings', 'Report a bug')"> <template #icon> - <NcIconSvgWrapper :path="mdiBug" /> + <NcIconSvgWrapper :path="mdiBugOutline" /> </template> </NcButton> <NcButton :disabled="!app.bugs" @@ -152,7 +170,7 @@ :aria-label="t('settings', 'Request feature')" :title="t('settings', 'Request feature')"> <template #icon> - <NcIconSvgWrapper :path="mdiFeatureSearch" /> + <NcIconSvgWrapper :path="mdiFeatureSearchOutline" /> </template> </NcButton> <NcButton v-if="app.appstoreData?.discussion" @@ -160,7 +178,7 @@ :aria-label="t('settings', 'Ask questions or discuss')" :title="t('settings', 'Ask questions or discuss')"> <template #icon> - <NcIconSvgWrapper :path="mdiTooltipQuestion" /> + <NcIconSvgWrapper :path="mdiTooltipQuestionOutline" /> </template> </NcButton> <NcButton v-if="!app.internal" @@ -173,20 +191,33 @@ </NcButton> </div> </div> + + <AppDeployOptionsModal v-if="app?.app_api" + :show.sync="showDeployOptionsModal" + :app="app" /> + <DaemonSelectionDialog v-if="app?.app_api" + :show.sync="showSelectDaemonModal" + :app="app" + :deploy-options="deployOptions" /> </div> </NcAppSidebarTab> </template> <script> -import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcDateTime from '@nextcloud/vue/components/NcDateTime' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import AppDeployOptionsModal from './AppDeployOptionsModal.vue' +import DaemonSelectionDialog from '../AppAPI/DaemonSelectionDialog.vue' import AppManagement from '../../mixins/AppManagement.js' -import { mdiBug, mdiFeatureSearch, mdiStar, mdiTextBox, mdiTooltipQuestion } from '@mdi/js' +import { mdiBugOutline, mdiFeatureSearchOutline, mdiStar, mdiTextBoxOutline, mdiTooltipQuestionOutline, mdiToyBrickPlusOutline } from '@mdi/js' import { useAppsStore } from '../../store/apps-store' +import { useAppApiStore } from '../../store/app-api-store' export default { name: 'AppDetailsTab', @@ -197,6 +228,9 @@ export default { NcDateTime, NcIconSvgWrapper, NcSelect, + NcCheckboxRadioSwitch, + AppDeployOptionsModal, + DaemonSelectionDialog, }, mixins: [AppManagement], @@ -209,21 +243,28 @@ export default { setup() { const store = useAppsStore() + const appApiStore = useAppApiStore() return { store, + appApiStore, - mdiBug, - mdiFeatureSearch, + mdiBugOutline, + mdiFeatureSearchOutline, mdiStar, - mdiTextBox, - mdiTooltipQuestion, + mdiTextBoxOutline, + mdiTooltipQuestionOutline, + mdiToyBrickPlusOutline, } }, data() { return { groupCheckedAppsData: false, + removeData: false, + showDeployOptionsModal: false, + showSelectDaemonModal: false, + deployOptions: null, } }, @@ -328,10 +369,45 @@ export default { .sort((a, b) => a.name.localeCompare(b.name)) }, }, + watch: { + 'app.id'() { + this.removeData = false + }, + }, + beforeUnmount() { + this.deployOptions = null + unsubscribe('showDaemonSelectionModal') + }, mounted() { if (this.app.groups.length > 0) { this.groupCheckedAppsData = true } + subscribe('showDaemonSelectionModal', (deployOptions) => { + this.showSelectionModal(deployOptions) + }) + }, + methods: { + toggleRemoveData() { + this.removeData = !this.removeData + }, + showSelectionModal(deployOptions = null) { + this.deployOptions = deployOptions + this.showSelectDaemonModal = true + }, + async enableButtonAction() { + if (!this.app?.app_api) { + this.enable(this.app.id) + return + } + await this.appApiStore.fetchDockerDaemons() + if (this.appApiStore.dockerDaemons.length === 1 && this.app.needsDownload) { + this.enable(this.app.id, this.appApiStore.dockerDaemons[0]) + } else if (this.app.needsDownload) { + this.showSelectionModal() + } else { + this.enable(this.app.id, this.app.daemon) + } + }, }, } </script> @@ -345,6 +421,7 @@ export default { &-manage { // if too many, shrink them and ellipsis display: flex; + align-items: center; input { flex: 0 1 auto; min-width: 0; @@ -402,6 +479,7 @@ export default { border-color: var(--color-error); background: var(--color-main-background); } + .force:hover, .force:active { color: var(--color-main-background); diff --git a/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue b/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue index 68c5cb8b5ff..e65df0341db 100644 --- a/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue +++ b/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue @@ -25,8 +25,8 @@ import { mdiClockFast } from '@mdi/js' import { getLanguage, translate as t } from '@nextcloud/l10n' import { computed } from 'vue' -import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import Markdown from '../Markdown.vue' // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/components/AuthToken.vue index 2efe2db4145..15286adb135 100644 --- a/apps/settings/src/components/AuthToken.vue +++ b/apps/settings/src/components/AuthToken.vue @@ -80,18 +80,18 @@ import type { PropType } from 'vue' import type { IToken } from '../store/authtoken' -import { mdiCheck, mdiCellphone, mdiTablet, mdiMonitor, mdiWeb, mdiKey, mdiMicrosoftEdge, mdiFirefox, mdiGoogleChrome, mdiAppleSafari, mdiAndroid, mdiAppleIos } from '@mdi/js' +import { mdiCheck, mdiCellphone, mdiTablet, mdiMonitor, mdiWeb, mdiKeyOutline, mdiMicrosoftEdge, mdiFirefox, mdiGoogleChrome, mdiAppleSafari, mdiAndroid, mdiAppleIos } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' import { defineComponent } from 'vue' import { TokenType, useAuthTokenStore } from '../store/authtoken.ts' -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcDateTime from '@nextcloud/vue/components/NcDateTime' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcTextField from '@nextcloud/vue/components/NcTextField' // When using capture groups the following parts are extracted the first is used as the version number, the second as the OS const userAgentMap = { @@ -175,8 +175,8 @@ export default defineComponent({ return this.token.type === TokenType.PERMANENT_TOKEN }, /** - * Object ob the current user agend used by the token - * @return Either an object containing user agent information or null if unknown + * Object ob the current user agent used by the token + * This either returns an object containing user agent information or `null` if unknown */ client() { // pretty format sync client user agent @@ -215,7 +215,7 @@ export default defineComponent({ tokenIcon() { // For custom created app tokens / app passwords if (this.token.type === TokenType.PERMANENT_TOKEN) { - return mdiKey + return mdiKeyOutline } switch (this.client?.id) { diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/components/AuthTokenSetup.vue index dcff95afd63..b93086c9e88 100644 --- a/apps/settings/src/components/AuthTokenSetup.vue +++ b/apps/settings/src/components/AuthTokenSetup.vue @@ -31,8 +31,8 @@ import { translate as t } from '@nextcloud/l10n' import { defineComponent } from 'vue' import { useAuthTokenStore, type ITokenResponse } from '../store/authtoken' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcTextField from '@nextcloud/vue/components/NcTextField' import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue' import logger from '../logger' @@ -81,8 +81,8 @@ export default defineComponent({ <style lang="scss" scoped> .app-name-text-field { height: 44px !important; - padding-left: 12px; - margin-right: 12px; + padding-inline-start: 12px; + margin-inline-end: 12px; width: 200px; } diff --git a/apps/settings/src/components/AuthTokenSetupDialog.vue b/apps/settings/src/components/AuthTokenSetupDialog.vue index 439ab030f4a..3b8fac8dc1d 100644 --- a/apps/settings/src/components/AuthTokenSetupDialog.vue +++ b/apps/settings/src/components/AuthTokenSetupDialog.vue @@ -53,10 +53,10 @@ import { getRootUrl } from '@nextcloud/router' import { defineComponent, type PropType } from 'vue' import QR from '@chenfengyuan/vue-qrcode' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcDialog from '@nextcloud/vue/components/NcDialog' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcTextField from '@nextcloud/vue/components/NcTextField' import logger from '../logger' diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue index e699323be80..a9a3cbb9cef 100644 --- a/apps/settings/src/components/BasicSettings/BackgroundJob.vue +++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue @@ -56,6 +56,7 @@ @update:checked="onBackgroundJobModeChanged"> {{ t('settings', 'Cron (Recommended)') }} </NcCheckboxRadioSwitch> + <!-- eslint-disable-next-line vue/no-v-html The translation is sanitized--> <em v-html="cronLabel" /> </NcSettingsSection> </template> @@ -63,13 +64,15 @@ <script> import { loadState } from '@nextcloud/initial-state' import { showError } from '@nextcloud/dialogs' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' -import moment from '@nextcloud/moment' -import axios from '@nextcloud/axios' import { generateOcsUrl } from '@nextcloud/router' import { confirmPassword } from '@nextcloud/password-confirmation' +import axios from '@nextcloud/axios' +import moment from '@nextcloud/moment' + +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' + import '@nextcloud/password-confirmation/dist/style.css' const lastCron = loadState('settings', 'lastCron') @@ -109,7 +112,7 @@ export default { desc += '<br>' + t('settings', 'The PHP POSIX extension is required. See {linkstart}PHP documentation{linkend} for more details.', { linkstart: '<a target="_blank" rel="noreferrer nofollow" class="external" href="https://www.php.net/manual/en/book.posix.php">', linkend: '</a>', - }, undefined, { escape: false, sanitize: false }) + }, undefined, { escape: false }) } return desc }, @@ -182,6 +185,7 @@ export default { background-color: var(--color-error); width: initial; } + .warning { margin-top: 8px; padding: 5px; @@ -190,6 +194,7 @@ export default { background-color: var(--color-warning); width: initial; } + .ajaxSwitch { margin-top: 1rem; } diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue index 86126c16b29..276448cd97b 100644 --- a/apps/settings/src/components/BasicSettings/ProfileSettings.vue +++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue @@ -30,7 +30,7 @@ import { saveProfileDefault } from '../../service/ProfileService.js' import { validateBoolean } from '../../utils/validate.js' import logger from '../../logger.ts' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' const profileEnabledByDefault = loadState('settings', 'profileEnabledByDefault', true) @@ -80,6 +80,3 @@ export default { }, } </script> - -<style lang="scss" scoped> -</style> diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue index 25bbfa48bf0..9ee1680516e 100644 --- a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue +++ b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue @@ -3,14 +3,13 @@ - 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), @@ -20,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" @@ -62,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]" @@ -94,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" @@ -111,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> @@ -122,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', @@ -146,9 +140,6 @@ export default { formFieldsData: {}, } }, - beforeMount() { - this.initFormFieldsData() - }, computed: { formApp() { return this.form.app || '' @@ -157,6 +148,9 @@ export default { return this.form.fields || [] }, }, + beforeMount() { + this.initFormFieldsData() + }, methods: { initFormFieldsData() { this.form.fields.forEach((formField) => { @@ -175,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) } }) @@ -209,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')) @@ -236,7 +240,6 @@ export default { <style lang="scss" scoped> .declarative-form-field { - margin: 20px 0; padding: 10px 0; .input-wrapper { @@ -251,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 { diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue deleted file mode 100644 index ba9fa186f9f..00000000000 --- a/apps/settings/src/components/Encryption.vue +++ /dev/null @@ -1,192 +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 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 { loadState } from '@nextcloud/initial-state' -import { getLoggerBuilder } from '@nextcloud/logger' - -import { generateOcsUrl } from '@nextcloud/router' -import { confirmPassword } from '@nextcloud/password-confirmation' -import '@nextcloud/password-confirmation/dist/style.css' -import { showError } from '@nextcloud/dialogs' - -const logger = getLoggerBuilder() - .setApp('settings') - .detectUser() - .build() - -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: 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..f4db63ce53c --- /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/components/NcCheckboxRadioSwitch' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' +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..f229544a7d9 --- /dev/null +++ b/apps/settings/src/components/Encryption/EncryptionWarningDialog.vue @@ -0,0 +1,91 @@ +<!-- + - 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/components/NcDialog' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' + +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', 'By default a master key for the whole instance will be generated. Please check if that level of access is compliant with your needs.') }} + </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.') diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue index 98a96c9b4ef..69bb8a3f575 100644 --- a/apps/settings/src/components/GroupListItem.vue +++ b/apps/settings/src/components/GroupListItem.vue @@ -13,7 +13,7 @@ </h2> <NcNoteCard type="warning" show-alert> - {{ t('settings', 'You are about to remove the group "{group}". The accounts will NOT be deleted.', { group: name }) }} + {{ t('settings', 'You are about to delete the group "{group}". The accounts will NOT be deleted.', { group: name }) }} </NcNoteCard> <div class="modal__button-row"> <NcButton type="secondary" @@ -29,6 +29,7 @@ </NcModal> <NcAppNavigationItem :key="id" + ref="listItem" :exact="true" :name="name" :to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }" @@ -45,7 +46,7 @@ </NcCounterBubble> </template> <template #actions> - <NcActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin" + <NcActionInput v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)" ref="displayNameInput" :trailing-button-label="t('settings', 'Submit')" type="text" @@ -56,12 +57,12 @@ <Pencil :size="20" /> </template> </NcActionInput> - <NcActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin" + <NcActionButton v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)" @click="showRemoveGroupModal = true"> <template #icon> <Delete :size="20" /> </template> - {{ t('settings', 'Remove group') }} + {{ t('settings', 'Delete group') }} </NcActionButton> </template> </NcAppNavigationItem> @@ -71,17 +72,17 @@ <script> import { Fragment } from 'vue-frag' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js' -import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcActionInput from '@nextcloud/vue/components/NcActionInput' +import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble' +import NcModal from '@nextcloud/vue/components/NcModal' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' -import AccountGroup from 'vue-material-design-icons/AccountGroup.vue' -import Delete from 'vue-material-design-icons/Delete.vue' -import Pencil from 'vue-material-design-icons/Pencil.vue' +import AccountGroup from 'vue-material-design-icons/AccountGroupOutline.vue' +import Delete from 'vue-material-design-icons/DeleteOutline.vue' +import Pencil from 'vue-material-design-icons/PencilOutline.vue' import { showError } from '@nextcloud/dialogs' @@ -178,7 +179,7 @@ export default { await this.$store.dispatch('removeGroup', this.id) this.showRemoveGroupModal = false } catch (error) { - showError(t('settings', 'Failed to remove group "{group}"', { group: this.name })) + showError(t('settings', 'Failed to delete group "{group}"', { group: this.name })) } }, }, diff --git a/apps/settings/src/components/Markdown.cy.ts b/apps/settings/src/components/Markdown.cy.ts new file mode 100644 index 00000000000..ccdf43c26df --- /dev/null +++ b/apps/settings/src/components/Markdown.cy.ts @@ -0,0 +1,58 @@ +/*! + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import Markdown from './Markdown.vue' + +describe('Markdown component', () => { + it('renders links', () => { + cy.mount(Markdown, { + propsData: { + text: 'This is [a link](http://example.com)!', + }, + }) + + cy.contains('This is') + .find('a') + .should('exist') + .and('have.attr', 'href', 'http://example.com') + .and('contain.text', 'a link') + }) + + it('renders headings', () => { + cy.mount(Markdown, { + propsData: { + text: '# level 1\nText\n## level 2\nText\n### level 3\nText\n#### level 4\nText\n##### level 5\nText\n###### level 6\nText\n', + }, + }) + + for (let level = 1; level <= 6; level++) { + cy.contains(`h${level}`, `level ${level}`) + .should('be.visible') + } + }) + + it('can limit headings', () => { + cy.mount(Markdown, { + propsData: { + text: '# level 1\nText\n## level 2\nText\n### level 3\nText\n#### level 4\nText\n##### level 5\nText\n###### level 6\nText\n', + minHeading: 4, + }, + }) + + cy.get('h1').should('not.exist') + cy.get('h2').should('not.exist') + cy.get('h3').should('not.exist') + cy.get('h4') + .should('exist') + .and('contain.text', 'level 1') + cy.get('h5') + .should('exist') + .and('contain.text', 'level 2') + cy.contains('h6', 'level 3').should('exist') + cy.contains('h6', 'level 4').should('exist') + cy.contains('h6', 'level 5').should('exist') + cy.contains('h6', 'level 6').should('exist') + }) +}) diff --git a/apps/settings/src/components/Markdown.vue b/apps/settings/src/components/Markdown.vue index 18a9ea39018..36535e46763 100644 --- a/apps/settings/src/components/Markdown.vue +++ b/apps/settings/src/components/Markdown.vue @@ -4,6 +4,7 @@ --> <template> + <!-- eslint-disable-next-line vue/no-v-html This is rendered markdown so should be "safe" --> <div class="settings-markdown" v-html="renderMarkdown" /> </template> @@ -26,7 +27,7 @@ export default { computed: { renderMarkdown() { const renderer = new marked.Renderer() - renderer.link = function(href, title, text) { + renderer.link = function({ href, title, text }) { let prot try { prot = decodeURIComponent(unescape(href)) @@ -47,18 +48,18 @@ export default { out += '>' + text + '</a>' return out } - renderer.heading = (text, level) => { - level = Math.min(6, level + (this.minHeading - 1)) - return `<h${level}>${text}</h${level}>` + renderer.heading = ({ text, depth }) => { + depth = Math.min(6, depth + (this.minHeading - 1)) + return `<h${depth}>${text}</h${depth}>` } - renderer.image = function(href, title, text) { + renderer.image = ({ title, text }) => { if (text) { return text } return title } - renderer.blockquote = function(quote) { - return quote + renderer.blockquote = ({ text }) => { + return `<blockquote>${text}</blockquote>` } return dompurify.sanitize( marked(this.text.trim(), { @@ -99,45 +100,13 @@ export default { </script> <style scoped lang="scss"> - .settings-markdown::v-deep { - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 600; - line-height: 120%; - margin-top: 24px; - margin-bottom: 12px; - color: var(--color-main-text); - } - - h1 { - font-size: 36px; - margin-top: 48px; - } - - h2 { - font-size: 28px; - margin-top: 48px; - } - - h3 { - font-size: 24px; - } - - h4 { - font-size: 21px; - } - - h5 { - font-size: 17px; - } - - h6 { - font-size: var(--default-font-size); +.settings-markdown :deep { + a { + text-decoration: underline; + &::after { + content: '↗'; + padding-inline: calc(var(--default-grid-baseline) / 2); + } } pre { @@ -160,8 +129,8 @@ export default { } ul, ol { - padding-left: 10px; - margin-left: 10px; + padding-inline-start: 10px; + margin-inline-start: 10px; } ul li { @@ -177,12 +146,10 @@ export default { } blockquote { - padding-left: 1em; - border-left: 4px solid var(--color-primary-element); + padding-inline-start: 1em; + border-inline-start: 4px solid var(--color-primary-element); color: var(--color-text-maxcontrast); - margin-left: 0; - margin-right: 0; - } - + margin-inline: 0; } +} </style> diff --git a/apps/settings/src/components/PasswordSection.vue b/apps/settings/src/components/PasswordSection.vue index 717be494e36..44845c51ff4 100644 --- a/apps/settings/src/components/PasswordSection.vue +++ b/apps/settings/src/components/PasswordSection.vue @@ -32,9 +32,9 @@ </template> <script> -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcPasswordField from '@nextcloud/vue/components/NcPasswordField' import axios from '@nextcloud/axios' import { generateUrl } from '@nextcloud/router' import { showSuccess, showError } from '@nextcloud/dialogs' diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue index 3145cc28fe2..a99f228668c 100644 --- a/apps/settings/src/components/PersonalInfo/AvatarSection.vue +++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue @@ -80,15 +80,15 @@ import { getCurrentUser } from '@nextcloud/auth' import { getFilePickerBuilder, showError } from '@nextcloud/dialogs' import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus' -import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcAvatar from '@nextcloud/vue/components/NcAvatar' +import NcButton from '@nextcloud/vue/components/NcButton' import VueCropper from 'vue-cropperjs' // eslint-disable-next-line n/no-extraneous-import import 'cropperjs/dist/cropper.css' import Upload from 'vue-material-design-icons/Upload.vue' import Folder from 'vue-material-design-icons/Folder.vue' -import Delete from 'vue-material-design-icons/Delete.vue' +import Delete from 'vue-material-design-icons/DeleteOutline.vue' import HeaderBar from './shared/HeaderBar.vue' import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' @@ -257,9 +257,10 @@ section { grid-row: 1/3; padding: 10px 10px; } + .avatar { &__container { - margin: 0 auto; + margin: calc(var(--default-grid-baseline) * 2) auto 0 auto; display: flex; flex-direction: column; justify-content: center; @@ -296,7 +297,7 @@ section { justify-content: space-between; } - &::v-deep .cropper-view-box { + :deep(.cropper-view-box) { border-radius: 50%; } } diff --git a/apps/settings/src/components/PersonalInfo/BiographySection.vue b/apps/settings/src/components/PersonalInfo/BiographySection.vue index 32af1a03e2d..bbfb25e25cc 100644 --- a/apps/settings/src/components/PersonalInfo/BiographySection.vue +++ b/apps/settings/src/components/PersonalInfo/BiographySection.vue @@ -5,7 +5,7 @@ <template> <AccountPropertySection v-bind.sync="biography" - :placeholder="t('settings', 'Your biography')" + :placeholder="t('settings', 'Your biography. Markdown is supported.')" :multi-line="true" /> </template> diff --git a/apps/settings/src/components/PersonalInfo/BirthdaySection.vue b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue index 7580e958023..f55f09c95e5 100644 --- a/apps/settings/src/components/PersonalInfo/BirthdaySection.vue +++ b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue @@ -8,13 +8,11 @@ :input-id="inputId" :readable="birthdate.readable" /> - <template> - <NcDateTimePickerNative :id="inputId" - type="date" - label="" - :value="value" - @input="onInput" /> - </template> + <NcDateTimePickerNative :id="inputId" + type="date" + label="" + :value="value" + @input="onInput" /> <p class="property__helper-text-message"> {{ t('settings', 'Enter your date of birth') }} @@ -23,15 +21,15 @@ </template> <script> -import HeaderBar from './shared/HeaderBar.vue' -import AccountPropertySection from './shared/AccountPropertySection.vue' +import { loadState } from '@nextcloud/initial-state' import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' -import { NcDateTimePickerNative } from '@nextcloud/vue' -import debounce from 'debounce' import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService' import { handleError } from '../../utils/handlers' -import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue' -import { loadState } from '@nextcloud/initial-state' + +import debounce from 'debounce' + +import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative' +import HeaderBar from './shared/HeaderBar.vue' const { birthdate } = loadState('settings', 'personalInfoParameters', {}) @@ -39,8 +37,6 @@ export default { name: 'BirthdaySection', components: { - AlertCircle, - AccountPropertySection, NcDateTimePickerNative, HeaderBar, }, @@ -68,13 +64,13 @@ export default { get() { return new Date(this.birthdate.value) }, - /** @param {Date} value */ + /** @param {Date} value The date to set */ set(value) { const day = value.getDate().toString().padStart(2, '0') const month = (value.getMonth() + 1).toString().padStart(2, '0') const year = value.getFullYear() this.birthdate.value = `${year}-${month}-${day}` - } + }, }, }, @@ -122,7 +118,7 @@ export default { section { padding: 10px 10px; - &::v-deep button:disabled { + :deep(button:disabled) { cursor: default; } diff --git a/apps/settings/src/components/PersonalInfo/BlueskySection.vue b/apps/settings/src/components/PersonalInfo/BlueskySection.vue new file mode 100644 index 00000000000..65223d1ab53 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/BlueskySection.vue @@ -0,0 +1,64 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="value" + :readable="readable" + :on-validate="onValidate" + :placeholder="t('settings', 'Bluesky handle')" /> +</template> + +<script setup lang="ts"> +import type { AccountProperties } from '../../constants/AccountPropertyConstants.js' + +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' +import { ref } from 'vue' +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.ts' +import AccountPropertySection from './shared/AccountPropertySection.vue' + +const { bluesky } = loadState<AccountProperties>('settings', 'personalInfoParameters') + +const value = ref({ ...bluesky }) +const readable = NAME_READABLE_ENUM[bluesky.name] + +/** + * Validate that the text might be a bluesky handle + * @param text The potential bluesky handle + */ +function onValidate(text: string): boolean { + if (text === '') return true + + const lowerText = text.toLowerCase() + + if (lowerText === 'bsky.social') { + // Standalone bsky.social is invalid + return false + } + + if (lowerText.endsWith('.bsky.social')) { + // Enforce format: exactly one label + '.bsky.social' + const parts = lowerText.split('.') + + // Must be in form: [username, 'bsky', 'social'] + if (parts.length !== 3 || parts[1] !== 'bsky' || parts[2] !== 'social') { + return false + } + + const username = parts[0] + const validateRegex = /^[a-z0-9][a-z0-9-]{2,17}$/ + return validateRegex.test(username) + } + + // Else, treat as a custom domain + try { + const url = new URL(`https://${text}`) + // Ensure the parsed host matches exactly (case-insensitive already) + return url.host === lowerText + } catch { + return false + } +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/DetailsSection.vue b/apps/settings/src/components/PersonalInfo/DetailsSection.vue index 22a0a185db7..d4bb0ce16ec 100644 --- a/apps/settings/src/components/PersonalInfo/DetailsSection.vue +++ b/apps/settings/src/components/PersonalInfo/DetailsSection.vue @@ -20,6 +20,7 @@ <div class="details__quota"> <CircleSlice :size="20" /> <div class="details__quota-info"> + <!-- eslint-disable-next-line vue/no-v-html --> <p class="details__quota-text" v-html="quotaText" /> <NcProgressBar size="medium" :value="usageRelative" @@ -32,9 +33,10 @@ <script> import { loadState } from '@nextcloud/initial-state' -import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' +import { t } from '@nextcloud/l10n' -import Account from 'vue-material-design-icons/Account.vue' +import NcProgressBar from '@nextcloud/vue/components/NcProgressBar' +import Account from 'vue-material-design-icons/AccountOutline.vue' import CircleSlice from 'vue-material-design-icons/CircleSlice3.vue' import HeaderBar from './shared/HeaderBar.vue' @@ -64,12 +66,14 @@ export default { computed: { quotaText() { if (quota === SPACE_UNLIMITED) { - return t('settings', 'You are using <strong>{usage}</strong>', { usage }) + return t('settings', 'You are using {s}{usage}{/s}', { usage, s: '<strong>', '/s': '</strong>' }, undefined, { escape: false }) } return t( 'settings', - 'You are using <strong>{usage}</strong> of <strong>{totalSpace}</strong> (<strong>{usageRelative}%</strong>)', - { usage, totalSpace, usageRelative }, + 'You are using {s}{usage}{/s} of {s}{totalSpace}{/s} ({s}{usageRelative}%{/s})', + { usage, totalSpace, usageRelative, s: '<strong>', '/s': '</strong>' }, + undefined, + { escape: false }, ) }, }, @@ -80,7 +84,8 @@ export default { .details { display: flex; flex-direction: column; - margin: 10px 32px 10px 0; + margin-block: 10px; + margin-inline: 0 32px; gap: 16px 0; color: var(--color-text-maxcontrast); diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue index ecc463c7363..6a6baef8817 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue @@ -48,7 +48,7 @@ :disabled="deleteDisabled" @click="deleteEmail"> <template #icon> - <NcIconSvgWrapper :path="mdiTrashCan" /> + <NcIconSvgWrapper :path="mdiTrashCanOutline" /> </template> {{ deleteEmailLabel }} </NcActionButton> @@ -64,14 +64,14 @@ </template> <script> -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcTextField from '@nextcloud/vue/components/NcTextField' import debounce from 'debounce' -import { mdiArrowLeft, mdiLock, mdiStar, mdiStarOutline, mdiTrashCan } from '@mdi/js' +import { mdiArrowLeft, mdiLockOutline, mdiStar, mdiStarOutline, mdiTrashCanOutline } from '@mdi/js' import FederationControl from '../shared/FederationControl.vue' import { handleError } from '../../../utils/handlers.ts' @@ -133,10 +133,10 @@ export default { setup() { return { mdiArrowLeft, - mdiLock, + mdiLockOutline, mdiStar, mdiStarOutline, - mdiTrashCan, + mdiTrashCanOutline, saveAdditionalEmailScope, } }, @@ -356,6 +356,9 @@ export default { handleDeleteAdditionalEmail(status) { if (status === 'ok') { this.$emit('delete-additional-email') + if (this.isNotificationEmail) { + this.$emit('update:notification-email', '') + } } else { this.handleResponse({ errorMessage: t('settings', 'Unable to delete additional email address'), diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue index 8fd17922724..f9674a3163b 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue @@ -13,7 +13,7 @@ :scope.sync="primaryEmail.scope" @add-additional="onAddAdditionalEmail" /> - <template v-if="displayNameChangeSupported"> + <template v-if="emailChangeSupported"> <Email :input-id="inputId" :primary="true" :scope.sync="primaryEmail.scope" @@ -56,7 +56,7 @@ import { validateEmail } from '../../../utils/validate.js' import { handleError } from '../../../utils/handlers.ts' const { emailMap: { additionalEmails, primaryEmail, notificationEmail } } = loadState('settings', 'personalInfoParameters', {}) -const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {}) +const { emailChangeSupported } = loadState('settings', 'accountParameters', {}) export default { name: 'EmailSection', @@ -70,7 +70,7 @@ export default { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL, additionalEmails: additionalEmails.map(properties => ({ ...properties, key: this.generateUniqueKey() })), - displayNameChangeSupported, + emailChangeSupported, primaryEmail: { ...primaryEmail, readable: NAME_READABLE_ENUM[primaryEmail.name] }, notificationEmail, } diff --git a/apps/settings/src/components/PersonalInfo/FediverseSection.vue b/apps/settings/src/components/PersonalInfo/FediverseSection.vue index 9ba9c37ab80..043fa6e64b9 100644 --- a/apps/settings/src/components/PersonalInfo/FediverseSection.vue +++ b/apps/settings/src/components/PersonalInfo/FediverseSection.vue @@ -4,30 +4,47 @@ --> <template> - <AccountPropertySection v-bind.sync="fediverse" + <AccountPropertySection v-bind.sync="value" + :readable="readable" + :on-validate="onValidate" :placeholder="t('settings', 'Your handle')" /> </template> -<script> +<script setup lang="ts"> +import type { AccountProperties } from '../../constants/AccountPropertyConstants.js' import { loadState } from '@nextcloud/initial-state' - -import AccountPropertySection from './shared/AccountPropertySection.vue' - +import { t } from '@nextcloud/l10n' +import { ref } from 'vue' import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' -const { fediverse } = loadState('settings', 'personalInfoParameters', {}) - -export default { - name: 'FediverseSection', - - components: { - AccountPropertySection, - }, +import AccountPropertySection from './shared/AccountPropertySection.vue' - data() { - return { - fediverse: { ...fediverse, readable: NAME_READABLE_ENUM[fediverse.name] }, - } - }, +const { fediverse } = loadState<AccountProperties>('settings', 'personalInfoParameters') + +const value = ref({ ...fediverse }) +const readable = NAME_READABLE_ENUM[fediverse.name] + +/** + * Validate a fediverse handle + * @param text The potential fediverse handle + */ +function onValidate(text: string): boolean { + // allow to clear the value + if (text === '') { + return true + } + + // check its in valid format + const result = text.match(/^@?([^@/]+)@([^@/]+)$/) + if (result === null) { + return false + } + + // check its a valid URL + try { + return URL.parse(`https://${result[2]}/`) !== null + } catch { + return false + } } </script> diff --git a/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue b/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue new file mode 100644 index 00000000000..98501db7ccc --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue @@ -0,0 +1,126 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later + --> + +<template> + <section class="fdow-section"> + <HeaderBar :input-id="inputId" + :readable="propertyReadable" /> + + <NcSelect :aria-label-listbox="t('settings', 'Day to use as the first day of week')" + class="fdow-section__day-select" + :clearable="false" + :input-id="inputId" + label="label" + label-outside + :options="dayOptions" + :value="valueOption" + @option:selected="updateFirstDayOfWeek" /> + </section> +</template> + +<script lang="ts"> +import HeaderBar from './shared/HeaderBar.vue' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import { + ACCOUNT_SETTING_PROPERTY_ENUM, + ACCOUNT_SETTING_PROPERTY_READABLE_ENUM, +} from '../../constants/AccountPropertyConstants' +import { getDayNames, getFirstDay } from '@nextcloud/l10n' +import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService' +import { handleError } from '../../utils/handlers.ts' +import { loadState } from '@nextcloud/initial-state' + +interface DayOption { + value: number, + label: string, +} + +const { firstDayOfWeek } = loadState<{firstDayOfWeek?: string}>( + 'settings', + 'personalInfoParameters', + {}, +) + +export default { + name: 'FirstDayOfWeekSection', + components: { + HeaderBar, + NcSelect, + }, + data() { + let firstDay = -1 + if (firstDayOfWeek) { + firstDay = parseInt(firstDayOfWeek) + } + + return { + firstDay, + } + }, + computed: { + inputId(): string { + return 'account-property-fdow' + }, + propertyReadable(): string { + return ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.FIRST_DAY_OF_WEEK + }, + dayOptions(): DayOption[] { + const options = [{ + value: -1, + label: t('settings', 'Derived from your locale ({weekDayName})', { + weekDayName: getDayNames()[getFirstDay()], + }), + }] + for (const [index, dayName] of getDayNames().entries()) { + options.push({ value: index, label: dayName }) + } + return options + }, + valueOption(): DayOption | undefined { + return this.dayOptions.find((option) => option.value === this.firstDay) + }, + }, + methods: { + async updateFirstDayOfWeek(option: DayOption): Promise<void> { + try { + const responseData = await savePrimaryAccountProperty( + ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK, + option.value.toString(), + ) + this.handleResponse({ + value: option.value, + status: responseData.ocs?.meta?.status, + }) + window.location.reload() + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update first day of week'), + error: e, + }) + } + }, + + handleResponse({ value, status, errorMessage, error }): void { + if (status === 'ok') { + this.firstDay = value + } else { + this.$emit('update:value', this.firstDay) + handleError(error, errorMessage) + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.fdow-section { + padding: 10px; + + &__day-select { + width: 100%; + margin-top: 6px; // align with other inputs + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue index 3e5b9b67bf5..8f42b2771c0 100644 --- a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue +++ b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue @@ -29,7 +29,7 @@ import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/Person import { validateLanguage } from '../../../utils/validate.js' import { handleError } from '../../../utils/handlers.ts' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' export default { name: 'Language', diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue index 311aa697adb..73300756472 100644 --- a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue +++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue @@ -32,7 +32,7 @@ <script> import moment from '@nextcloud/moment' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' import MapClock from 'vue-material-design-icons/MapClock.vue' import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js' diff --git a/apps/settings/src/components/PersonalInfo/PhoneSection.vue b/apps/settings/src/components/PersonalInfo/PhoneSection.vue index 13ac7fdca0f..8ddeada960e 100644 --- a/apps/settings/src/components/PersonalInfo/PhoneSection.vue +++ b/apps/settings/src/components/PersonalInfo/PhoneSection.vue @@ -39,6 +39,10 @@ export default { methods: { onValidate(value) { + if (value === '') { + return true + } + if (defaultPhoneRegion) { return isValidPhoneNumber(value, defaultPhoneRegion) } diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue index 4514f11f6d8..3deb5340751 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue @@ -66,7 +66,7 @@ a { display: inline-block; vertical-align: middle; margin-top: 6px; - margin-right: 8px; + margin-inline-end: 8px; } &:hover, diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue index b9d8b1276eb..6eb7cf8c34c 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue @@ -19,7 +19,7 @@ import { emit } from '@nextcloud/event-bus' import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' import { handleError } from '../../../utils/handlers.ts' export default { diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue index 317544ecbc3..47894f64f34 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -27,7 +27,7 @@ import { getCurrentUser } from '@nextcloud/auth' import { generateUrl } from '@nextcloud/router' -import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' +import NcAvatar from '@nextcloud/vue/components/NcAvatar' export default { name: 'ProfilePreviewCard', @@ -104,7 +104,7 @@ export default { box-shadow: 0 0 3px var(--color-box-shadow); & *, - &::v-deep * { + &:deep(*) { cursor: default; } } @@ -113,7 +113,7 @@ export default { // Override Avatar component position to fix positioning on rerender position: absolute !important; top: 40px; - left: 18px; + inset-inline-start: 18px; z-index: 1; &:not(.avatardiv--unknown) { @@ -128,7 +128,7 @@ export default { span { position: absolute; - left: 78px; + inset-inline-start: 78px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; @@ -151,7 +151,8 @@ export default { color: var(--color-primary-element-text); font-size: 18px; font-weight: bold; - margin: 0 4px 8px 0; + margin-block: 0 8px; + margin-inline: 0 4px; } } @@ -163,7 +164,8 @@ export default { color: var(--color-text-maxcontrast); font-size: 14px; font-weight: normal; - margin: 4px 4px 0 0; + margin-block: 4px 0; + margin-inline: 0 4px; line-height: 1.3; } } diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue index f5f71eed075..22c03f72697 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue @@ -82,7 +82,7 @@ export default { section { padding: 10px 10px; - &::v-deep button:disabled { + &:deep(button:disabled) { cursor: default; } } diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue index a780883eade..8acec883842 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue @@ -118,7 +118,7 @@ section { pointer-events: none; & *, - &::v-deep * { + &:deep(*) { cursor: default; pointer-events: none; } diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue index 51c0203eb7f..aaa13e63e92 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue @@ -23,7 +23,7 @@ import { loadState } from '@nextcloud/initial-state' import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' import { saveProfileParameterVisibility } from '../../../service/ProfileService.js' import { VISIBILITY_PROPERTY_ENUM } from '../../../constants/ProfileConstants.js' @@ -142,7 +142,7 @@ export default { pointer-events: none; & *, - &::v-deep * { + &:deep(*) { cursor: default; pointer-events: none; } diff --git a/apps/settings/src/components/PersonalInfo/PronounsSection.vue b/apps/settings/src/components/PersonalInfo/PronounsSection.vue new file mode 100644 index 00000000000..e345cb8e225 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/PronounsSection.vue @@ -0,0 +1,47 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="pronouns" + :placeholder="randomPronounsPlaceholder" /> +</template> + +<script lang="ts"> +import type { IAccountProperty } from '../../constants/AccountPropertyConstants.ts' + +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' +import AccountPropertySection from './shared/AccountPropertySection.vue' +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.ts' + +const { pronouns } = loadState<{ pronouns: IAccountProperty }>('settings', 'personalInfoParameters') + +export default defineComponent({ + name: 'PronounsSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + pronouns: { ...pronouns, readable: NAME_READABLE_ENUM[pronouns.name] }, + } + }, + + computed: { + randomPronounsPlaceholder() { + const pronouns = [ + t('settings', 'she/her'), + t('settings', 'he/him'), + t('settings', 'they/them'), + ] + const pronounsExample = pronouns[Math.floor(Math.random() * pronouns.length)] + return t('settings', 'Your pronouns. E.g. {pronounsExample}', { pronounsExample }) + }, + }, +}) +</script> diff --git a/apps/settings/src/components/PersonalInfo/TwitterSection.vue b/apps/settings/src/components/PersonalInfo/TwitterSection.vue index bb809c8d2b7..43d08f81e3f 100644 --- a/apps/settings/src/components/PersonalInfo/TwitterSection.vue +++ b/apps/settings/src/components/PersonalInfo/TwitterSection.vue @@ -4,30 +4,31 @@ --> <template> - <AccountPropertySection v-bind.sync="twitter" + <AccountPropertySection v-bind.sync="value" + :readable="readable" + :on-validate="onValidate" :placeholder="t('settings', 'Your X (formerly Twitter) handle')" /> </template> -<script> -import { loadState } from '@nextcloud/initial-state' +<script setup lang="ts"> +import type { AccountProperties } from '../../constants/AccountPropertyConstants.js' +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' +import { ref } from 'vue' +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.ts' import AccountPropertySection from './shared/AccountPropertySection.vue' -import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' - -const { twitter } = loadState('settings', 'personalInfoParameters', {}) - -export default { - name: 'TwitterSection', +const { twitter } = loadState<AccountProperties>('settings', 'personalInfoParameters') - components: { - AccountPropertySection, - }, +const value = ref({ ...twitter }) +const readable = NAME_READABLE_ENUM[twitter.name] - data() { - return { - twitter: { ...twitter, readable: NAME_READABLE_ENUM[twitter.name] }, - } - }, +/** + * Validate that the text might be a twitter handle + * @param text The potential twitter handle + */ +function onValidate(text: string): boolean { + return text === '' || text.match(/^@?([a-zA-Z0-9_]{2,15})$/) !== null } </script> diff --git a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue index fc7fe7f7984..d039641ec72 100644 --- a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue +++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue @@ -46,8 +46,8 @@ <script> import debounce from 'debounce' -import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js' -import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js' +import NcInputField from '@nextcloud/vue/components/NcInputField' +import NcTextArea from '@nextcloud/vue/components/NcTextArea' import HeaderBar from './HeaderBar.vue' @@ -155,6 +155,7 @@ export default { methods: { async updateProperty(value) { try { + this.hasError = false const responseData = await savePrimaryAccountProperty( this.name, value, @@ -180,10 +181,8 @@ export default { this.isSuccess = true setTimeout(() => { this.isSuccess = false }, 2000) } else { - this.$emit('update:value', this.initialValue) handleError(error, errorMessage) this.hasError = true - setTimeout(() => { this.hasError = false }, 2000) } }, }, @@ -207,7 +206,7 @@ section { display: flex; gap: 0 2px; - margin-right: 5px; + margin-inline-end: 5px; margin-bottom: 5px; } } @@ -218,7 +217,7 @@ section { align-items: center; &__icon { - margin-right: 8px; + margin-inline-end: 8px; align-self: start; margin-top: 4px; } diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue index dd4eb2b5181..e55a50056d3 100644 --- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue +++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue @@ -30,9 +30,9 @@ </template> <script> -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import { loadState } from '@nextcloud/initial-state' import { @@ -146,7 +146,7 @@ export default { } // TODO: provide focus method from NcActions - this.$refs.federationActions.$refs.menuButton.$el.focus() + this.$refs.federationActions.$refs?.triggerButton?.$el?.focus?.() }, async updatePrimaryScope(scope) { diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue index ca41db2a454..7c95c2b8f4c 100644 --- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue +++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue @@ -5,7 +5,7 @@ <template> <div class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }"> - <h3 v-if="isHeading"> + <h3 v-if="isHeading" class="headerbar__heading"> <!-- Already translated as required by prop validator --> {{ readable }} </h3> @@ -36,7 +36,7 @@ </template> <script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcButton from '@nextcloud/vue/components/NcButton' import Plus from 'vue-material-design-icons/Plus.vue' import FederationControl from './FederationControl.vue' @@ -130,7 +130,7 @@ export default { } &.setting-property { - height: 44px; + height: 34px; } label { @@ -138,11 +138,16 @@ export default { } } + .headerbar__heading { + margin: 0; + } + .federation-control { margin: 0; } .button-vue { - margin: 0 0 0 auto !important; + margin: 0 !important; + margin-inline-start: auto !important; } </style> diff --git a/apps/settings/src/components/SelectSharingPermissions.vue b/apps/settings/src/components/SelectSharingPermissions.vue index 212884abcde..ef24bcda026 100644 --- a/apps/settings/src/components/SelectSharingPermissions.vue +++ b/apps/settings/src/components/SelectSharingPermissions.vue @@ -21,8 +21,8 @@ <script lang="ts"> import { translate } from '@nextcloud/l10n' -import { NcCheckboxRadioSwitch } from '@nextcloud/vue' import { defineComponent } from 'vue' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' export default defineComponent({ name: 'SelectSharingPermissions', diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue index 4fc9ee5b70f..459548fad26 100644 --- a/apps/settings/src/components/UserList.vue +++ b/apps/settings/src/components/UserList.vue @@ -19,7 +19,7 @@ <NcLoadingIcon v-if="isInitialLoad && loading.users" :name="t('settings', 'Loading accounts …')" :size="64" /> - <NcIconSvgWrapper v-else :path="mdiAccountGroup" :size="64" /> + <NcIconSvgWrapper v-else :path="mdiAccountGroupOutline" :size="64" /> </template> </NcEmptyContent> @@ -34,8 +34,6 @@ users, settings, hasObfuscated, - groups, - subAdminsGroups, quotaOptions, languages, externalActions, @@ -60,15 +58,15 @@ </template> <script> -import { mdiAccountGroup } from '@mdi/js' +import { mdiAccountGroupOutline } from '@mdi/js' import { showError } from '@nextcloud/dialogs' import { subscribe, unsubscribe } from '@nextcloud/event-bus' import { Fragment } from 'vue-frag' import Vue from 'vue' -import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' import VirtualList from './Users/VirtualList.vue' import NewUserDialog from './Users/NewUserDialog.vue' @@ -122,7 +120,7 @@ export default { setup() { // non reactive properties return { - mdiAccountGroup, + mdiAccountGroupOutline, rowHeight: 55, UserRow, @@ -169,23 +167,12 @@ export default { if (this.selectedGroup === 'disabled') { return this.users.filter(user => user.enabled === false) } - if (!this.settings.isAdmin) { - // we don't want subadmins to edit themselves - return this.users.filter(user => user.enabled !== false) - } return this.users.filter(user => user.enabled !== false) }, groups() { - // data provided php side + remove the disabled group - return this.$store.getters.getGroups - .filter(group => group.id !== 'disabled') - .sort((a, b) => a.name.localeCompare(b.name)) - }, - - subAdminsGroups() { - // data provided php side - return this.$store.getters.getSubadminGroups + return this.$store.getters.getSortedGroups + .filter(group => group.id !== '__nc_internal_recent' && group.id !== 'disabled') }, quotaOptions() { @@ -298,6 +285,12 @@ export default { limit: this.disabledUsersLimit, search: this.searchQuery, }) + } else if (this.selectedGroup === '__nc_internal_recent') { + await this.$store.dispatch('getRecentUsers', { + offset: this.usersOffset, + limit: this.usersLimit, + search: this.searchQuery, + }) } else { await this.$store.dispatch('getUsers', { offset: this.usersOffset, @@ -355,7 +348,18 @@ export default { }, setNewUserDefaultGroup(value) { - if (value && value.length > 0) { + // Is no value set, but user is a line manager we set their group as this is a requirement for line manager + if (!value && !this.settings.isAdmin && !this.settings.isDelegatedAdmin) { + const groups = this.$store.getters.getSubAdminGroups + // if there are multiple groups we do not know which to add, + // so we cannot make the managers life easier by preselecting it. + if (groups.length === 1) { + this.newUser.groups = [...groups] + } + return + } + + if (value) { // setting new account default group to the current selected one const currentGroup = this.groups.find(group => group.id === value) if (currentGroup) { @@ -387,7 +391,7 @@ export default { </script> <style lang="scss" scoped> -@import './Users/shared/styles.scss'; +@use './Users/shared/styles' as *; .empty { :deep { diff --git a/apps/settings/src/components/Users/NewUserDialog.vue b/apps/settings/src/components/Users/NewUserDialog.vue index f7dc0d21a34..ef401b565fa 100644 --- a/apps/settings/src/components/Users/NewUserDialog.vue +++ b/apps/settings/src/components/Users/NewUserDialog.vue @@ -61,32 +61,36 @@ :required="newUser.password === '' || settings.newUserRequireEmail" /> <div class="dialog__item"> <NcSelect class="dialog__select" - :input-label="!settings.isAdmin ? t('settings', 'Member of the following groups (required)') : t('settings', 'Member of the following groups')" + data-test="groups" + :input-label="!settings.isAdmin && !settings.isDelegatedAdmin ? t('settings', 'Member of the following groups (required)') : t('settings', 'Member of the following groups')" :placeholder="t('settings', 'Set account groups')" :disabled="loading.groups || loading.all" - :options="canAddGroups" + :options="availableGroups" :value="newUser.groups" label="name" :close-on-select="false" :multiple="true" - :taggable="true" - :required="!settings.isAdmin" - @input="handleGroupInput" - @option:created="createGroup" /> - <!-- If user is not admin, he is a subadmin. + :taggable="settings.isAdmin || settings.isDelegatedAdmin" + :required="!settings.isAdmin && !settings.isDelegatedAdmin" + :create-option="(value) => ({ id: value, name: value, isCreating: true })" + @search="searchGroups" + @option:created="createGroup" + @option:selected="options => addGroup(options.at(-1))" /> + <!-- If user is not admin, they are a subadmin. Subadmins can't create users outside their groups Therefore, empty select is forbidden --> </div> - <div v-if="subAdminsGroups.length > 0" - class="dialog__item"> + <div class="dialog__item"> <NcSelect v-model="newUser.subAdminsGroups" class="dialog__select" :input-label="t('settings', 'Admin of the following groups')" :placeholder="t('settings', 'Set account as admin for …')" - :options="subAdminsGroups" + :disabled="loading.groups || loading.all" + :options="availableGroups" :close-on-select="false" :multiple="true" - label="name" /> + label="name" + @search="searchGroups" /> </div> <div class="dialog__item"> <NcSelect v-model="newUser.quota" @@ -100,7 +104,7 @@ </div> <div v-if="showConfig.showLanguages" class="dialog__item"> - <NcSelect v-model="newUser.language" + <NcSelect v-model="newUser.language" class="dialog__select" :input-label="t('settings', 'Language')" :placeholder="t('settings', 'Set default language')" @@ -135,11 +139,15 @@ </template> <script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' -import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import { formatFileSize, parseFileSize } from '@nextcloud/files' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcDialog from '@nextcloud/vue/components/NcDialog' +import NcPasswordField from '@nextcloud/vue/components/NcPasswordField' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcTextField from '@nextcloud/vue/components/NcTextField' + +import { searchGroups } from '../../service/groups.ts' +import logger from '../../logger.ts' export default { name: 'NewUserDialog', @@ -175,7 +183,9 @@ export default { // TRANSLATORS This string describes a manager in the context of an organization managerInputLabel: t('settings', 'Manager'), // TRANSLATORS This string describes a manager in the context of an organization - managerLabel: t('settings', 'Set account manager'), + managerLabel: t('settings', 'Set line manager'), + // Cancelable promise for search groups request + promise: null, } }, @@ -199,27 +209,12 @@ export default { return this.$store.getters.getPasswordPolicyMinLength }, - groups() { - // data provided php side + remove the disabled group - return this.$store.getters.getGroups - .filter(group => group.id !== 'disabled') - .sort((a, b) => a.name.localeCompare(b.name)) - }, - - subAdminsGroups() { - // data provided php side - return this.$store.getters.getSubadminGroups - }, + availableGroups() { + const groups = (this.settings.isAdmin || this.settings.isDelegatedAdmin) + ? this.$store.getters.getSortedGroups + : this.$store.getters.getSubAdminGroups - canAddGroups() { - // disabled if no permission to add new users to group - return this.groups.map(group => { - // clone object because we don't want - // to edit the original groups - group = Object.assign({}, group) - group.$isDisabled = group.canAdd === false - return group - }) + return groups.filter(group => group.id !== '__nc_internal_recent' && group.id !== 'disabled') }, languages() { @@ -280,13 +275,32 @@ export default { } }, - handleGroupInput(groups) { - /** - * Filter out groups with no id to prevent duplicate selected options - * - * Created groups are added programmatically by `createGroup()` - */ - this.newUser.groups = groups.filter(group => Boolean(group.id)) + async searchGroups(query, toggleLoading) { + if (!this.settings.isAdmin && !this.settings.isDelegatedAdmin) { + // managers cannot search for groups + return + } + + if (this.promise) { + this.promise.cancel() + } + toggleLoading(true) + try { + this.promise = searchGroups({ + search: query, + offset: 0, + limit: 25, + }) + const groups = await this.promise + // Populate store from server request + for (const group of groups) { + this.$store.commit('addGroup', group) + } + } catch (error) { + logger.error(t('settings', 'Failed to search groups'), { error }) + } + this.promise = null + toggleLoading(false) }, /** @@ -299,11 +313,26 @@ export default { this.loading.groups = true try { await this.$store.dispatch('addGroup', gid) - this.newUser.groups.push(this.groups.find(group => group.id === gid)) - this.loading.groups = false + this.newUser.groups.push({ id: gid, name: gid }) } catch (error) { - this.loading.groups = false + logger.error(t('settings', 'Failed to create group'), { error }) + } + this.loading.groups = false + }, + + /** + * Add user to group + * + * @param {object} group Group object + */ + async addGroup(group) { + if (group.isCreating) { + return + } + if (group.canAdd === false) { + return } + this.newUser.groups.push(group) }, /** @@ -317,7 +346,7 @@ export default { const validQuota = OC.Util.computerFileSize(quota) if (validQuota !== null && validQuota >= 0) { // unify format output - quota = OC.Util.humanFileSize(OC.Util.computerFileSize(quota)) + quota = formatFileSize(parseFileSize(quota, true)) this.newUser.quota = { id: quota, label: quota } return this.newUser.quota } diff --git a/apps/settings/src/components/Users/UserListFooter.vue b/apps/settings/src/components/Users/UserListFooter.vue index bfe01b1fcce..bf9aa43b6d3 100644 --- a/apps/settings/src/components/Users/UserListFooter.vue +++ b/apps/settings/src/components/Users/UserListFooter.vue @@ -26,7 +26,7 @@ <script lang="ts"> import Vue from 'vue' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' import { translate as t, @@ -84,18 +84,18 @@ export default Vue.extend({ </script> <style lang="scss" scoped> -@import './shared/styles.scss'; +@use './shared/styles'; .footer { - @include row; - @include cell; + @include styles.row; + @include styles.cell; &__cell { position: sticky; color: var(--color-text-maxcontrast); &--loading { - left: 0; + inset-inline-start: 0; min-width: var(--avatar-cell-width); width: var(--avatar-cell-width); align-items: center; @@ -103,7 +103,7 @@ export default Vue.extend({ } &--count { - left: var(--avatar-cell-width); + inset-inline-start: var(--avatar-cell-width); min-width: var(--cell-width); width: var(--cell-width); } diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue index 44eb1a6b7ae..a85306d84d3 100644 --- a/apps/settings/src/components/Users/UserListHeader.vue +++ b/apps/settings/src/components/Users/UserListHeader.vue @@ -42,7 +42,7 @@ scope="col"> <span>{{ t('settings', 'Groups') }}</span> </th> - <th v-if="subAdminsGroups.length > 0 && settings.isAdmin" + <th v-if="settings.isAdmin || settings.isDelegatedAdmin" class="header__cell header__cell--large" data-cy-user-list-header-subadmins scope="col"> @@ -71,6 +71,12 @@ {{ t('settings', 'Storage location') }} </span> </th> + <th v-if="showConfig.showFirstLogin" + class="header__cell" + data-cy-user-list-header-first-login + scope="col"> + <span>{{ t('settings', 'First login') }}</span> + </th> <th v-if="showConfig.showLastLogin" class="header__cell" data-cy-user-list-header-last-login @@ -119,11 +125,6 @@ export default Vue.extend({ return this.$store.getters.getServerData }, - subAdminsGroups() { - // @ts-expect-error: allow untyped $store - return this.$store.getters.getSubadminGroups - }, - passwordLabel(): string { if (this.hasObfuscated) { // TRANSLATORS This string is for a column header labelling either a password or a message that the current user has insufficient permissions @@ -140,12 +141,12 @@ export default Vue.extend({ </script> <style lang="scss" scoped> -@import './shared/styles.scss'; +@use './shared/styles'; .header { - @include row; - @include cell; - border-bottom: 1px solid var(--color-border); + + @include styles.row; + @include styles.cell; } </style> diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue index 4a4a221e199..43668725972 100644 --- a/apps/settings/src/components/Users/UserRow.vue +++ b/apps/settings/src/components/Users/UserRow.vue @@ -106,17 +106,18 @@ :data-loading="loading.groups || undefined" :input-id="'groups' + uniqueId" :close-on-select="false" - :disabled="isLoadingField" + :disabled="isLoadingField || loading.groupsDetails" :loading="loading.groups" :multiple="true" :append-to-body="false" :options="availableGroups" :placeholder="t('settings', 'Add account to group')" - :taggable="settings.isAdmin" + :taggable="settings.isAdmin || settings.isDelegatedAdmin" :value="userGroups" label="name" :no-wrap="true" - :create-option="(value) => ({ name: value, isCreating: true })" + :create-option="(value) => ({ id: value, name: value, isCreating: true })" + @search="searchGroups" @option:created="createGroup" @option:selected="options => addUserGroup(options.at(-1))" @option:deselected="removeUserGroup" /> @@ -127,10 +128,10 @@ </span> </td> - <td v-if="subAdminsGroups.length > 0 && settings.isAdmin" + <td v-if="settings.isAdmin || settings.isDelegatedAdmin" data-cy-user-list-cell-subadmins class="row__cell row__cell--large row__cell--multiline"> - <template v-if="editing && settings.isAdmin && subAdminsGroups.length > 0"> + <template v-if="editing && (settings.isAdmin || settings.isDelegatedAdmin)"> <label class="hidden-visually" :for="'subadmins' + uniqueId"> {{ t('settings', 'Set account as admin for') }} @@ -139,21 +140,22 @@ :data-loading="loading.subadmins || undefined" :input-id="'subadmins' + uniqueId" :close-on-select="false" - :disabled="isLoadingField" + :disabled="isLoadingField || loading.subAdminGroupsDetails" :loading="loading.subadmins" label="name" :append-to-body="false" :multiple="true" :no-wrap="true" - :options="subAdminsGroups" + :options="availableSubAdminGroups" :placeholder="t('settings', 'Set account as admin for')" - :value="userSubAdminsGroups" + :value="userSubAdminGroups" + @search="searchGroups" @option:deselected="removeUserSubAdmin" @option:selected="options => addUserSubAdmin(options.at(-1))" /> </template> <span v-else-if="!isObfuscated" - :title="userSubAdminsGroupsLabels?.length > 40 ? userSubAdminsGroupsLabels : null"> - {{ userSubAdminsGroupsLabels }} + :title="userSubAdminGroupsLabels?.length > 40 ? userSubAdminGroupsLabels : null"> + {{ userSubAdminGroupsLabels }} </span> </td> @@ -229,6 +231,12 @@ </template> </td> + <td v-if="showConfig.showFirstLogin" + class="row__cell" + data-cy-user-list-cell-first-login> + <span v-if="!isObfuscated">{{ userFirstLogin }}</span> + </td> + <td v-if="showConfig.showLastLogin" :title="userLastLoginTooltip" class="row__cell" @@ -247,16 +255,17 @@ data-cy-user-list-input-manager :data-loading="loading.manager || undefined" :input-id="'manager' + uniqueId" - :close-on-select="true" :disabled="isLoadingField" - :append-to-body="false" :loading="loadingPossibleManagers || loading.manager" - label="displayname" :options="possibleManagers" :placeholder="managerLabel" + label="displayname" + :filterable="false" + :internal-search="false" + :clearable="true" @open="searchInitialUserManager" @search="searchUserManager" - @option:selected="updateUserManager" /> + @update:model-value="updateUserManager" /> </template> <span v-else-if="!isObfuscated"> {{ user.manager }} @@ -278,17 +287,20 @@ import { formatFileSize, parseFileSize } from '@nextcloud/files' import { getCurrentUser } from '@nextcloud/auth' import { showSuccess, showError } from '@nextcloud/dialogs' +import { confirmPassword } from '@nextcloud/password-confirmation' -import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' -import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcAvatar from '@nextcloud/vue/components/NcAvatar' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' +import NcProgressBar from '@nextcloud/vue/components/NcProgressBar' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcTextField from '@nextcloud/vue/components/NcTextField' import UserRowActions from './UserRowActions.vue' import UserRowMixin from '../../mixins/UserRowMixin.js' -import { isObfuscated, unlimitedQuota } from '../../utils/userUtils.ts'; +import { isObfuscated, unlimitedQuota } from '../../utils/userUtils.ts' +import { searchGroups, loadUserGroups, loadUserSubAdminGroups } from '../../service/groups.ts' +import logger from '../../logger.ts' export default { name: 'UserRow', @@ -323,14 +335,6 @@ export default { type: Boolean, required: true, }, - groups: { - type: Array, - default: () => [], - }, - subAdminsGroups: { - type: Array, - required: true, - }, quotaOptions: { type: Array, required: true, @@ -363,6 +367,8 @@ export default { password: false, mailAddress: false, groups: false, + groupsDetails: false, + subAdminGroupsDetails: false, subadmins: false, quota: false, delete: false, @@ -374,6 +380,8 @@ export default { editedDisplayName: this.user.displayname, editedPassword: '', editedMail: this.user.email ?? '', + // Cancelable promise for search groups request + promise: null, } }, @@ -403,15 +411,35 @@ export default { return encodeURIComponent(this.user.id + this.rand) }, + availableGroups() { + const groups = (this.settings.isAdmin || this.settings.isDelegatedAdmin) + ? this.$store.getters.getSortedGroups + : this.$store.getters.getSubAdminGroups + + return groups.filter(group => group.id !== '__nc_internal_recent' && group.id !== 'disabled') + }, + + availableSubAdminGroups() { + return this.availableGroups.filter(group => group.id !== 'admin') + }, + userGroupsLabels() { return this.userGroups - .map(group => group.name) + .map(group => { + // Try to match with more extensive group data + const availableGroup = this.availableGroups.find(g => g.id === group.id) + return availableGroup?.name ?? group.name ?? group.id + }) .join(', ') }, - userSubAdminsGroupsLabels() { - return this.userSubAdminsGroups - .map(group => group.name) + userSubAdminGroupsLabels() { + return this.userSubAdminGroups + .map(group => { + // Try to match with more extensive group data + const availableGroup = this.availableSubAdminGroups.find(g => g.id === group.id) + return availableGroup?.name ?? group.name ?? group.id + }) .join(', ') }, @@ -423,7 +451,7 @@ export default { }, canEdit() { - return getCurrentUser().uid !== this.user.id || this.settings.isAdmin + return getCurrentUser().uid !== this.user.id || this.settings.isAdmin || this.settings.isDelegatedAdmin }, userQuota() { @@ -495,7 +523,6 @@ export default { return this.languages[0].languages.concat(this.languages[1].languages) }, }, - async beforeMount() { if (this.user.manager) { await this.initManager(this.user.manager) @@ -503,8 +530,9 @@ export default { }, methods: { - wipeUserDevices() { + async wipeUserDevices() { const userid = this.user.id + await confirmPassword() OC.dialogs.confirmDestructive( t('settings', 'In case of lost device or exiting the organization, this can remotely wipe the Nextcloud data from all devices associated with {userid}. Only works if the devices are connected to the internet.', { userid }), t('settings', 'Remote wipe of devices'), @@ -546,6 +574,66 @@ export default { this.loadingPossibleManagers = false }, + async loadGroupsDetails() { + this.loading.groups = true + this.loading.groupsDetails = true + try { + const groups = await loadUserGroups({ userId: this.user.id }) + // Populate store from server request + for (const group of groups) { + this.$store.commit('addGroup', group) + } + this.selectedGroups = this.selectedGroups.map(selectedGroup => groups.find(group => group.id === selectedGroup.id) ?? selectedGroup) + } catch (error) { + logger.error(t('settings', 'Failed to load groups with details'), { error }) + } + this.loading.groups = false + this.loading.groupsDetails = false + }, + + async loadSubAdminGroupsDetails() { + this.loading.subadmins = true + this.loading.subAdminGroupsDetails = true + try { + const groups = await loadUserSubAdminGroups({ userId: this.user.id }) + // Populate store from server request + for (const group of groups) { + this.$store.commit('addGroup', group) + } + this.selectedSubAdminGroups = this.selectedSubAdminGroups.map(selectedGroup => groups.find(group => group.id === selectedGroup.id) ?? selectedGroup) + } catch (error) { + logger.error(t('settings', 'Failed to load sub admin groups with details'), { error }) + } + this.loading.subadmins = false + this.loading.subAdminGroupsDetails = false + }, + + async searchGroups(query, toggleLoading) { + if (query === '') { + return // Prevent unexpected search behaviour e.g. on option:created + } + if (this.promise) { + this.promise.cancel() + } + toggleLoading(true) + try { + this.promise = await searchGroups({ + search: query, + offset: 0, + limit: 25, + }) + const groups = await this.promise + // Populate store from server request + for (const group of groups) { + this.$store.commit('addGroup', group) + } + } catch (error) { + logger.error(t('settings', 'Failed to search groups'), { error }) + } + this.promise = null + toggleLoading(false) + }, + async searchUserManager(query) { await this.$store.dispatch('searchUsers', { offset: 0, limit: 10, search: query }).then(response => { const users = response?.data ? this.filterManagers(Object.values(response?.data.ocs.data.users)) : [] @@ -555,11 +643,12 @@ export default { }) }, - async updateUserManager(manager) { - if (manager === null) { - this.currentManager = '' - } + async updateUserManager() { this.loading.manager = true + + // Store the current manager before making changes + const previousManager = this.user.manager + try { await this.$store.dispatch('setUserData', { userid: this.user.id, @@ -568,15 +657,19 @@ export default { }) } catch (error) { // TRANSLATORS This string describes a line manager in the context of an organization - showError(t('setting', 'Failed to update line manager')) - console.error(error) + showError(t('settings', 'Failed to update line manager')) + logger.error('Failed to update manager:', { error }) + + // Revert to the previous manager in the UI on error + this.currentManager = previousManager } finally { this.loading.manager = false } }, - deleteUser() { + async deleteUser() { const userid = this.user.id + await confirmPassword() OC.dialogs.confirmDestructive( t('settings', 'Fully delete {userid}\'s account including all their personal files, app data, etc.', { userid }), t('settings', 'Account deletion'), @@ -618,68 +711,70 @@ export default { /** * Set user displayName - * - * @param {string} displayName The display name */ - updateDisplayName() { + async updateDisplayName() { this.loading.displayName = true - this.$store.dispatch('setUserData', { - userid: this.user.id, - key: 'displayname', - value: this.editedDisplayName, - }).then(() => { - this.loading.displayName = false + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'displayname', + value: this.editedDisplayName, + }) + if (this.editedDisplayName === this.user.displayname) { - showSuccess(t('setting', 'Display name was successfully changed')) + showSuccess(t('settings', 'Display name was successfully changed')) } - }) + } finally { + this.loading.displayName = false + } }, /** * Set user password - * - * @param {string} password The email address */ - updatePassword() { + async updatePassword() { this.loading.password = true if (this.editedPassword.length === 0) { - showError(t('setting', "Password can't be empty")) + showError(t('settings', "Password can't be empty")) this.loading.password = false } else { - this.$store.dispatch('setUserData', { - userid: this.user.id, - key: 'password', - value: this.editedPassword, - }).then(() => { - this.loading.password = false + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'password', + value: this.editedPassword, + }) this.editedPassword = '' - showSuccess(t('setting', 'Password was successfully changed')) - }) + showSuccess(t('settings', 'Password was successfully changed')) + } finally { + this.loading.password = false + } } }, /** * Set user mailAddress - * - * @param {string} mailAddress The email address */ - updateEmail() { + async updateEmail() { this.loading.mailAddress = true if (this.editedMail === '') { - showError(t('setting', "Email can't be empty")) + showError(t('settings', "Email can't be empty")) this.loading.mailAddress = false this.editedMail = this.user.email } else { - this.$store.dispatch('setUserData', { - userid: this.user.id, - key: 'email', - value: this.editedMail, - }).then(() => { - this.loading.mailAddress = false + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'email', + value: this.editedMail, + }) + if (this.editedMail === this.user.email) { - showSuccess(t('setting', 'Email was successfully changed')) + showSuccess(t('settings', 'Email was successfully changed')) } - }) + } finally { + this.loading.mailAddress = false + } } }, @@ -689,17 +784,16 @@ export default { * @param {string} gid Group id */ async createGroup({ name: gid }) { - this.loading = { groups: true, subadmins: true } + this.loading.groups = true try { await this.$store.dispatch('addGroup', gid) const userid = this.user.id await this.$store.dispatch('addUserGroup', { userid, gid }) + this.userGroups.push({ id: gid, name: gid }) } catch (error) { - console.error(error) - } finally { - this.loading = { groups: false, subadmins: false } + logger.error(t('settings', 'Failed to create group'), { error }) } - return this.$store.getters.getGroups[this.groups.length] + this.loading.groups = false }, /** @@ -713,19 +807,19 @@ export default { // Ignore return } - this.loading.groups = true const userid = this.user.id const gid = group.id if (group.canAdd === false) { - return false + return } + this.loading.groups = true try { await this.$store.dispatch('addUserGroup', { userid, gid }) + this.userGroups.push(group) } catch (error) { console.error(error) - } finally { - this.loading.groups = false } + this.loading.groups = false }, /** @@ -745,6 +839,7 @@ export default { userid, gid, }) + this.userGroups = this.userGroups.filter(group => group.id !== gid) this.loading.groups = false // remove user from current list if current list is the removed group if (this.$route.params.selectedGroup === gid) { @@ -769,10 +864,11 @@ export default { userid, gid, }) - this.loading.subadmins = false + this.userSubAdminGroups.push(group) } catch (error) { console.error(error) } + this.loading.subadmins = false }, /** @@ -790,6 +886,7 @@ export default { userid, gid, }) + this.userSubAdminGroups = this.userSubAdminGroups.filter(group => group.id !== gid) } catch (error) { console.error(error) } finally { @@ -879,7 +976,7 @@ export default { sendWelcomeMail() { this.loading.all = true this.$store.dispatch('sendWelcomeMail', this.user.id) - .then(() => showSuccess(t('setting', 'Welcome mail sent!'), { timeout: 2000 })) + .then(() => showSuccess(t('settings', 'Welcome mail sent!'), { timeout: 2000 })) .finally(() => { this.loading.all = false }) @@ -890,6 +987,8 @@ export default { if (this.editing) { await this.$nextTick() this.$refs.displayNameField?.$refs?.inputField?.$refs?.input?.focus() + this.loadGroupsDetails() + this.loadSubAdminGroupsDetails() } if (this.editedDisplayName !== this.user.displayname) { this.editedDisplayName = this.user.displayname @@ -902,10 +1001,10 @@ export default { </script> <style lang="scss" scoped> -@import './shared/styles.scss'; +@use './shared/styles'; .user-list__row { - @include row; + @include styles.row; &:hover { background-color: var(--color-background-hover); @@ -922,7 +1021,7 @@ export default { } .row { - @include cell; + @include styles.cell; &__cell { border-bottom: 1px solid var(--color-border); diff --git a/apps/settings/src/components/Users/UserRowActions.vue b/apps/settings/src/components/Users/UserRowActions.vue index 1bacd79e8a1..efd70d879a7 100644 --- a/apps/settings/src/components/Users/UserRowActions.vue +++ b/apps/settings/src/components/Users/UserRowActions.vue @@ -35,11 +35,11 @@ import type { PropType } from 'vue' import { defineComponent } from 'vue' import isSvg from 'is-svg' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import SvgCheck from '@mdi/svg/svg/check.svg?raw' -import SvgPencil from '@mdi/svg/svg/pencil.svg?raw' +import SvgPencil from '@mdi/svg/svg/pencil-outline.svg?raw' interface UserAction { action: (event: MouseEvent, user: Record<string, unknown>) => void, diff --git a/apps/settings/src/components/Users/UserSettingsDialog.vue b/apps/settings/src/components/Users/UserSettingsDialog.vue index 4d412146f9a..94c77d320dd 100644 --- a/apps/settings/src/components/Users/UserSettingsDialog.vue +++ b/apps/settings/src/components/Users/UserSettingsDialog.vue @@ -25,6 +25,11 @@ {{ t('settings', 'Show storage path') }} </NcCheckboxRadioSwitch> <NcCheckboxRadioSwitch type="switch" + data-test="showFirstLogin" + :checked.sync="showFirstLogin"> + {{ t('settings', 'Show first login') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch type="switch" data-test="showLastLogin" :checked.sync="showLastLogin"> {{ t('settings', 'Show last login') }} @@ -38,6 +43,9 @@ </NcNoteCard> <fieldset> <legend>{{ t('settings', 'Group list sorting') }}</legend> + <NcNoteCard class="dialog__note" + type="info" + :text="t('settings', 'Sorting only applies to the currently loaded groups for performance reasons. Groups will be loaded as you navigate or search through the list.')" /> <NcCheckboxRadioSwitch type="radio" :checked.sync="groupSorting" data-test="sortGroupsByMemberCount" @@ -70,13 +78,14 @@ <NcAppSettingsSection id="default-settings" :name="t('settings', 'Defaults')"> <NcSelect v-model="defaultQuota" + :clearable="false" + :create-option="validateQuota" + :filter-by="filterQuotas" :input-label="t('settings', 'Default quota')" - placement="top" - :taggable="true" :options="quotaOptions" - :create-option="validateQuota" + placement="top" :placeholder="t('settings', 'Select default quota')" - :clearable="false" + taggable @option:selected="setDefaultQuota" /> </NcAppSettingsSection> </NcAppSettingsDialog> @@ -87,14 +96,15 @@ import { formatFileSize, parseFileSize } from '@nextcloud/files' import { generateUrl } from '@nextcloud/router' import axios from '@nextcloud/axios' -import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js' -import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog' +import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import NcSelect from '@nextcloud/vue/components/NcSelect' import { GroupSorting } from '../../constants/GroupManagement.ts' import { unlimitedQuota } from '../../utils/userUtils.ts' +import logger from '../../logger.ts' export default { name: 'UserSettingsDialog', @@ -164,6 +174,15 @@ export default { }, }, + showFirstLogin: { + get() { + return this.showConfig.showFirstLogin + }, + set(status) { + this.setShowConfig('showFirstLogin', status) + }, + }, + showLastLogin: { get() { return this.showConfig.showLastLogin @@ -229,8 +248,8 @@ export default { newUserSendEmail: value, }) await axios.post(generateUrl('/settings/users/preferences/newUser.sendEmail'), { value: value ? 'yes' : 'no' }) - } catch (e) { - console.error('could not update newUser.sendEmail preference: ' + e.message, e) + } catch (error) { + logger.error('Could not update newUser.sendEmail preference', { error }) } finally { this.loadingSendMail = false } @@ -239,6 +258,22 @@ export default { }, methods: { + /** + * Check if a quota matches the current search. + * This is a custom filter function to allow to map "1GB" to the label "1 GB" (ignoring whitespaces). + * + * @param option The quota to check + * @param label The label of the quota + * @param search The search string + */ + filterQuotas(option, label, search) { + const searchValue = search.toLocaleLowerCase().replaceAll(/\s/g, '') + return (label || '') + .toLocaleLowerCase() + .replaceAll(/\s/g, '') + .indexOf(searchValue) > -1 + }, + setShowConfig(key, status) { this.$store.commit('setShowConfig', { key, value: status }) }, @@ -254,14 +289,13 @@ export default { quota = quota?.id || quota.label } // only used for new presets sent through @Tag - const validQuota = parseFileSize(quota) + const validQuota = parseFileSize(quota, true) if (validQuota === null) { return unlimitedQuota - } else { - // unify format output - quota = formatFileSize(parseFileSize(quota)) - return { id: quota, label: quota } } + // unify format output + quota = formatFileSize(validQuota) + return { id: quota, label: quota } }, /** @@ -291,6 +325,12 @@ export default { </script> <style scoped lang="scss"> +.dialog { + &__note { + font-weight: normal; + } +} + fieldset { font-weight: bold; } diff --git a/apps/settings/src/components/Users/VirtualList.vue b/apps/settings/src/components/Users/VirtualList.vue index 37e82b3a747..20dc70ef830 100644 --- a/apps/settings/src/components/Users/VirtualList.vue +++ b/apps/settings/src/components/Users/VirtualList.vue @@ -157,6 +157,7 @@ export default Vue.extend({ display: block; overflow: auto; height: 100%; + will-change: scroll-position; &__header, &__footer { @@ -171,7 +172,7 @@ export default Vue.extend({ } &__footer { - left: 0; + inset-inline-start: 0; } &__body { diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss index 1b7faa78031..4dfdd58af6d 100644 --- a/apps/settings/src/components/Users/shared/styles.scss +++ b/apps/settings/src/components/Users/shared/styles.scss @@ -40,17 +40,17 @@ } &--avatar { - left: 0; + inset-inline-start: 0; } &--displayname { - left: var(--avatar-cell-width); - border-right: 1px solid var(--color-border); + inset-inline-start: var(--avatar-cell-width); + border-inline-end: 1px solid var(--color-border); } } &--username { - padding-left: calc(var(--default-grid-baseline) * 3); + padding-inline-start: calc(var(--default-grid-baseline) * 3); } &--avatar { @@ -92,7 +92,7 @@ &--actions { position: sticky; - right: 0; + inset-inline-end: 0; z-index: var(--sticky-column-z-index); display: flex; flex-direction: row; @@ -100,7 +100,7 @@ min-width: 110px; width: 110px; background-color: var(--color-main-background); - border-left: 1px solid var(--color-border); + border-inline-start: 1px solid var(--color-border); } } diff --git a/apps/settings/src/components/WebAuthn/AddDevice.vue b/apps/settings/src/components/WebAuthn/AddDevice.vue index 818341ba5fc..db00bae451a 100644 --- a/apps/settings/src/components/WebAuthn/AddDevice.vue +++ b/apps/settings/src/components/WebAuthn/AddDevice.vue @@ -50,8 +50,8 @@ <script> import { showError } from '@nextcloud/dialogs' import { confirmPassword } from '@nextcloud/password-confirmation' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcTextField from '@nextcloud/vue/components/NcTextField' import logger from '../../logger.ts' import { @@ -59,6 +59,8 @@ import { finishRegistration, } from '../../service/WebAuthnRegistrationSerice.ts' +import '@nextcloud/password-confirmation/dist/style.css' + const logAndPass = (text) => (data) => { logger.debug(text) return data @@ -177,8 +179,7 @@ export default { .webauthn-loading { display: inline-block; vertical-align: sub; - margin-left: 2px; - margin-right: 2px; + margin-inline: 2px; } .new-webauthn-device { diff --git a/apps/settings/src/components/WebAuthn/Device.vue b/apps/settings/src/components/WebAuthn/Device.vue index d755d0a76ba..4e10c1f234d 100644 --- a/apps/settings/src/components/WebAuthn/Device.vue +++ b/apps/settings/src/components/WebAuthn/Device.vue @@ -16,8 +16,8 @@ </template> <script> -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' export default { name: 'Device', diff --git a/apps/settings/src/components/WebAuthn/Section.vue b/apps/settings/src/components/WebAuthn/Section.vue index bbeb880b8b9..fa818c24355 100644 --- a/apps/settings/src/components/WebAuthn/Section.vue +++ b/apps/settings/src/components/WebAuthn/Section.vue @@ -37,8 +37,7 @@ <script> import { browserSupportsWebAuthn } from '@simplewebauthn/browser' import { confirmPassword } from '@nextcloud/password-confirmation' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' -import '@nextcloud/password-confirmation/dist/style.css' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' import sortBy from 'lodash/fp/sortBy.js' import AddDevice from './AddDevice.vue' @@ -46,6 +45,8 @@ import Device from './Device.vue' import logger from '../../logger.ts' import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js' +import '@nextcloud/password-confirmation/dist/style.css' + const sortByName = sortBy('name') export default { |