diff options
Diffstat (limited to 'apps/settings/src')
114 files changed, 3635 insertions, 1269 deletions
diff --git a/apps/settings/src/admin.js b/apps/settings/src/admin.js index d788e7424b4..66848162d28 100644 --- a/apps/settings/src/admin.js +++ b/apps/settings/src/admin.js @@ -2,9 +2,14 @@ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ + +import { generateUrl } from '@nextcloud/router' +import $ from 'jquery' +import axios from '@nextcloud/axios' + window.addEventListener('DOMContentLoaded', () => { $('#loglevel').change(function() { - $.post(OC.generateUrl('/settings/admin/log/level'), { level: $(this).val() }, () => { + $.post(generateUrl('/settings/admin/log/level'), { level: $(this).val() }, () => { OC.Log.reload() }) }) @@ -44,17 +49,12 @@ window.addEventListener('DOMContentLoaded', () => { } OC.msg.startSaving('#mail_settings_msg') - $.ajax({ - url: OC.generateUrl('/settings/admin/mailsettings'), - type: 'POST', - data: $('#mail_general_settings_form').serialize(), - success: () => { + axios.post(generateUrl('/settings/admin/mailsettings'), $('#mail_general_settings_form').serialize()) + .then(() => { OC.msg.finishedSuccess('#mail_settings_msg', t('settings', 'Saved')) - }, - error: (xhr) => { - OC.msg.finishedError('#mail_settings_msg', xhr.responseJSON) - }, - }) + }).catch((error) => { + OC.msg.finishedError('#mail_settings_msg', error) + }) } const toggleEmailCredentials = function() { @@ -64,17 +64,12 @@ window.addEventListener('DOMContentLoaded', () => { } OC.msg.startSaving('#mail_settings_msg') - $.ajax({ - url: OC.generateUrl('/settings/admin/mailsettings/credentials'), - type: 'POST', - data: $('#mail_credentials_settings').serialize(), - success: () => { + axios.post(generateUrl('/settings/admin/mailsettings/credentials'), $('#mail_credentials_settings').serialize()) + .then(() => { OC.msg.finishedSuccess('#mail_settings_msg', t('settings', 'Saved')) - }, - error: (xhr) => { - OC.msg.finishedError('#mail_settings_msg', xhr.responseJSON) - }, - }) + }).catch((error) => { + OC.msg.finishedError('#mail_settings_msg', error) + }) } $('#mail_general_settings_form').change(changeEmailSettings) @@ -90,16 +85,12 @@ window.addEventListener('DOMContentLoaded', () => { event.preventDefault() OC.msg.startAction('#sendtestmail_msg', t('settings', 'Sending…')) - $.ajax({ - url: OC.generateUrl('/settings/admin/mailtest'), - type: 'POST', - success: () => { + axios.post(generateUrl('/settings/admin/mailtest')) + .then(() => { OC.msg.finishedSuccess('#sendtestmail_msg', t('settings', 'Email sent')) - }, - error: (xhr) => { - OC.msg.finishedError('#sendtestmail_msg', xhr.responseJSON) - }, - }) + }).catch((error) => { + OC.msg.finishedError('#sendtestmail_msg', error) + }) }) const setupChecks = () => { @@ -110,7 +101,6 @@ window.addEventListener('DOMContentLoaded', () => { const $el = $('#postsetupchecks') $('#security-warning-state-loading').addClass('hidden') - let hasMessages = false const $errorsEl = $el.find('.errors') const $warningsEl = $el.find('.warnings') const $infoEl = $el.find('.info') @@ -129,33 +119,30 @@ window.addEventListener('DOMContentLoaded', () => { } } + let hasErrors = false + let hasWarnings = false + if ($errorsEl.find('li').length > 0) { $errorsEl.removeClass('hidden') - hasMessages = true + hasErrors = true } if ($warningsEl.find('li').length > 0) { $warningsEl.removeClass('hidden') - hasMessages = true + hasWarnings = true } if ($infoEl.find('li').length > 0) { $infoEl.removeClass('hidden') - hasMessages = true } - if (hasMessages) { + if (hasErrors || hasWarnings) { $('#postsetupchecks-hint').removeClass('hidden') - if ($errorsEl.find('li').length > 0) { + if (hasErrors) { $('#security-warning-state-failure').removeClass('hidden') } else { $('#security-warning-state-warning').removeClass('hidden') } } else { - const securityWarning = $('#security-warning') - if (securityWarning.children('ul').children().length === 0) { - $('#security-warning-state-ok').removeClass('hidden') - } else { - $('#security-warning-state-failure').removeClass('hidden') - } + $('#security-warning-state-ok').removeClass('hidden') } }) } diff --git a/apps/settings/src/app-types.ts b/apps/settings/src/app-types.ts index 604e250df3d..0c448ca907c 100644 --- a/apps/settings/src/app-types.ts +++ b/apps/settings/src/app-types.ts @@ -41,14 +41,78 @@ export interface IAppstoreApp { preview?: string screenshot?: string + app_api: boolean active: boolean internal: boolean - removeable: boolean + removable: boolean installed: boolean canInstall: boolean - canUninstall: boolean + canUnInstall: boolean isCompatible: boolean + needsDownload: boolean + update?: string appstoreData: Record<string, never> releases?: IAppstoreAppRelease[] } + +export interface IComputeDevice { + id: string, + label: string, +} + +export interface IDeployConfig { + computeDevice: IComputeDevice, + net: string, + nextcloud_url: string, +} + +export interface IDeployDaemon { + accepts_deploy_id: string, + deploy_config: IDeployConfig, + display_name: string, + host: string, + id: number, + name: string, + protocol: string, + exAppsCount: number, +} + +export interface IExAppStatus { + action: string + deploy: number + deploy_start_time: number + error: string + init: number + init_start_time: number + type: string +} + +export interface IDeployEnv { + envName: string + displayName: string + description: string + default?: string +} + +export interface IDeployMount { + hostPath: string + containerPath: string + readOnly: boolean +} + +export interface IDeployOptions { + environment_variables: IDeployEnv[] + mounts: IDeployMount[] +} + +export interface IAppstoreExAppRelease extends IAppstoreAppRelease { + environmentVariables?: IDeployEnv[] +} + +export interface IAppstoreExApp extends IAppstoreApp { + daemon: IDeployDaemon | null | undefined + status: IExAppStatus | Record<string, never> + error: string + releases: IAppstoreExAppRelease[] +} 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 af67eecf307..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,19 @@ </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' -import { snakeCase, debounce } from 'lodash' interface IShareSettings { enabled: boolean @@ -208,6 +245,7 @@ interface IShareSettings { allowPublicUpload: boolean allowResharing: boolean allowShareDialogUserEnumeration: boolean + allowFederationOnPublicShares: boolean restrictUserEnumerationToGroup: boolean restrictUserEnumerationToPhone: boolean restrictUserEnumerationFullMatch: boolean @@ -215,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 @@ -224,7 +262,7 @@ interface IShareSettings { enforceExpireDate: boolean excludeGroups: string excludeGroupsList: string[] - publicShareDisclaimerText?: string + publicShareDisclaimerText: string enableLinkPasswordByDefault: boolean defaultPermissions: number defaultInternalExpireDate: boolean @@ -233,6 +271,8 @@ interface IShareSettings { defaultRemoteExpireDate: boolean remoteExpireAfterNDays: string enforceRemoteExpireDate: boolean + allowCustomTokens: boolean + allowViewWithoutDownload: boolean } export default defineComponent({ @@ -240,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: { @@ -265,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')) @@ -294,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) @@ -304,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> @@ -347,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 d4d92897d17..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,17 +64,17 @@ </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.js' +import { handleError } from '../../../utils/handlers.ts' import { ACCOUNT_PROPERTY_READABLE_ENUM, VERIFICATION_ENUM } from '../../../constants/AccountPropertyConstants.js' import { @@ -133,10 +133,10 @@ export default { setup() { return { mdiArrowLeft, - mdiLock, + mdiLockOutline, mdiStar, mdiStarOutline, - mdiTrashCan, + mdiTrashCanOutline, saveAdditionalEmailScope, } }, @@ -262,7 +262,7 @@ export default { } } } - }, 500), + }, 1000), async deleteEmail() { if (this.primary) { @@ -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 14ef1c998f1..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" @@ -53,10 +53,10 @@ import HeaderBar from '../shared/HeaderBar.vue' import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE, NAME_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' import { savePrimaryEmail, removeAdditionalEmail } from '../../../service/PersonalInfo/EmailService.js' import { validateEmail } from '../../../utils/validate.js' -import { handleError } from '../../../utils/handlers.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 4f462ee3fff..8f42b2771c0 100644 --- a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue +++ b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue @@ -27,9 +27,9 @@ import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js' import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' import { validateLanguage } from '../../../utils/validate.js' -import { handleError } from '../../../utils/handlers.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 3b65177009f..73300756472 100644 --- a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue +++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue @@ -32,12 +32,12 @@ <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' import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' -import { handleError } from '../../../utils/handlers.js' +import { handleError } from '../../../utils/handlers.ts' export default { name: 'Locale', 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 a43f44acd0d..6eb7cf8c34c 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue @@ -19,8 +19,8 @@ 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 { handleError } from '../../../utils/handlers.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import { handleError } from '../../../utils/handlers.ts' export default { name: 'ProfileCheckbox', 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 d56e0e07e76..aaa13e63e92 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue @@ -23,11 +23,11 @@ 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' -import { handleError } from '../../../utils/handlers.js' +import { handleError } from '../../../utils/handlers.ts' const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) @@ -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 65c9686e36c..d039641ec72 100644 --- a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue +++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue @@ -46,13 +46,13 @@ <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' import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' -import { handleError } from '../../../utils/handlers.js' +import { handleError } from '../../../utils/handlers.ts' export default { name: 'AccountPropertySection', @@ -148,13 +148,14 @@ export default { return } await this.updateProperty(value) - }, 500) + }, 1000) }, }, 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 ee0aa80d209..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 { @@ -46,7 +46,7 @@ import { UNPUBLISHED_READABLE_PROPERTIES, } from '../../../constants/AccountPropertyConstants.js' import { savePrimaryAccountPropertyScope } from '../../../service/PersonalInfo/PersonalInfoService.js' -import { handleError } from '../../../utils/handlers.js' +import { handleError } from '../../../utils/handlers.ts' const { federationEnabled, @@ -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 ba9f89c63ce..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', 'Groups (required)') : t('settings', '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', 'Administered groups')" + :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 33b57beca19..20dc70ef830 100644 --- a/apps/settings/src/components/Users/VirtualList.vue +++ b/apps/settings/src/components/Users/VirtualList.vue @@ -35,7 +35,7 @@ <script lang="ts"> import Vue from 'vue' import { vElementVisibility } from '@vueuse/components' -import { debounce } from 'debounce' +import debounce from 'debounce' import logger from '../../logger.ts' @@ -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 { diff --git a/apps/settings/src/composables/useAppIcon.ts b/apps/settings/src/composables/useAppIcon.ts index 76efea267a8..b5e211aa1bc 100644 --- a/apps/settings/src/composables/useAppIcon.ts +++ b/apps/settings/src/composables/useAppIcon.ts @@ -5,7 +5,7 @@ import type { Ref } from 'vue' import type { IAppstoreApp } from '../app-types.ts' -import { mdiCog } from '@mdi/js' +import { mdiCog, mdiCogOutline } from '@mdi/js' import { computed, ref, watchEffect } from 'vue' import AppstoreCategoryIcons from '../constants/AppstoreCategoryIcons.ts' import logger from '../logger.ts' @@ -23,11 +23,17 @@ export function useAppIcon(app: Ref<IAppstoreApp>) { * Fallback value if no app icon available */ const categoryIcon = computed(() => { - const path = [app.value?.category ?? []].flat() - .map((name) => AppstoreCategoryIcons[name]) - .filter((icon) => !!icon) - .at(0) - ?? mdiCog + let path: string + if (app.value?.app_api) { + // Use different default icon for ExApps (AppAPI) + path = mdiCogOutline + } else { + path = [app.value?.category ?? []].flat() + .map((name) => AppstoreCategoryIcons[name]) + .filter((icon) => !!icon) + .at(0) + ?? (!app.value?.app_api ? mdiCog : mdiCogOutline) + } return path ? `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="${path}" /></svg>` : null }) diff --git a/apps/settings/src/composables/useGroupsNavigation.ts b/apps/settings/src/composables/useGroupsNavigation.ts index fc4e71bb6b2..d9f0637843b 100644 --- a/apps/settings/src/composables/useGroupsNavigation.ts +++ b/apps/settings/src/composables/useGroupsNavigation.ts @@ -17,14 +17,12 @@ function formatGroupMenu(group?: IGroup) { return null } - const item = { + return { id: group.id, title: group.name, - usercount: group.usercount, - count: Math.max(0, group.usercount - group.disabled), + usercount: group.usercount ?? 0, + count: Math.max(0, (group.usercount ?? 0) - (group.disabled ?? 0)), } - - return item } export const useFormatGroups = (groups: Ref<IGroup[]>|ComputedRef<IGroup[]>) => { @@ -34,7 +32,7 @@ export const useFormatGroups = (groups: Ref<IGroup[]>|ComputedRef<IGroup[]>) => const userGroups = computed(() => { const formatted = groups.value // filter out disabled and admin - .filter(group => group.id !== 'disabled' && group.id !== 'admin') + .filter(group => group.id !== 'disabled' && group.id !== '__nc_internal_recent' && group.id !== 'admin') // format group .map(group => formatGroupMenu(group)) // remove invalid @@ -52,5 +50,10 @@ export const useFormatGroups = (groups: Ref<IGroup[]>|ComputedRef<IGroup[]>) => */ const disabledGroup = computed(() => formatGroupMenu(groups.value.find(group => group.id === 'disabled'))) - return { adminGroup, disabledGroup, userGroups } + /** + * The group of recent users + */ + const recentGroup = computed(() => formatGroupMenu(groups.value.find(group => group.id === '__nc_internal_recent'))) + + return { adminGroup, recentGroup, disabledGroup, userGroups } } diff --git a/apps/settings/src/constants/AccountPropertyConstants.js b/apps/settings/src/constants/AccountPropertyConstants.ts index 3aee0006bc6..575a2744cc6 100644 --- a/apps/settings/src/constants/AccountPropertyConstants.js +++ b/apps/settings/src/constants/AccountPropertyConstants.ts @@ -7,7 +7,7 @@ * SYNC to be kept in sync with `lib/public/Accounts/IAccountManager.php` */ -import { mdiAccountGroup, mdiCellphone, mdiLock, mdiWeb } from '@mdi/js' +import { mdiAccountGroupOutline, mdiCellphone, mdiLockOutline, mdiWeb } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' /** Enum of account properties */ @@ -15,19 +15,21 @@ export const ACCOUNT_PROPERTY_ENUM = Object.freeze({ ADDRESS: 'address', AVATAR: 'avatar', BIOGRAPHY: 'biography', + BIRTHDATE: 'birthdate', DISPLAYNAME: 'displayname', EMAIL_COLLECTION: 'additional_mail', EMAIL: 'email', + FEDIVERSE: 'fediverse', HEADLINE: 'headline', NOTIFICATION_EMAIL: 'notify_email', - FEDIVERSE: 'fediverse', ORGANISATION: 'organisation', PHONE: 'phone', PROFILE_ENABLED: 'profile_enabled', + PRONOUNS: 'pronouns', ROLE: 'role', TWITTER: 'twitter', + BLUESKY: 'bluesky', WEBSITE: 'website', - BIRTHDATE: 'birthdate', }) /** Enum of account properties to human readable account property names */ @@ -35,18 +37,20 @@ export const ACCOUNT_PROPERTY_READABLE_ENUM = Object.freeze({ ADDRESS: t('settings', 'Location'), AVATAR: t('settings', 'Profile picture'), BIOGRAPHY: t('settings', 'About'), + BIRTHDATE: t('settings', 'Date of birth'), DISPLAYNAME: t('settings', 'Full name'), EMAIL_COLLECTION: t('settings', 'Additional email'), EMAIL: t('settings', 'Email'), + FEDIVERSE: t('settings', 'Fediverse (e.g. Mastodon)'), HEADLINE: t('settings', 'Headline'), ORGANISATION: t('settings', 'Organisation'), PHONE: t('settings', 'Phone number'), PROFILE_ENABLED: t('settings', 'Profile'), + PRONOUNS: t('settings', 'Pronouns'), ROLE: t('settings', 'Role'), TWITTER: t('settings', 'X (formerly Twitter)'), - FEDIVERSE: t('settings', 'Fediverse (e.g. Mastodon)'), + BLUESKY: t('settings', 'Bluesky'), WEBSITE: t('settings', 'Website'), - BIRTHDATE: t('settings', 'Date of birth'), }) export const NAME_READABLE_ENUM = Object.freeze({ @@ -62,9 +66,11 @@ export const NAME_READABLE_ENUM = Object.freeze({ [ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED]: ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED, [ACCOUNT_PROPERTY_ENUM.ROLE]: ACCOUNT_PROPERTY_READABLE_ENUM.ROLE, [ACCOUNT_PROPERTY_ENUM.TWITTER]: ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER, + [ACCOUNT_PROPERTY_ENUM.BLUESKY]: ACCOUNT_PROPERTY_READABLE_ENUM.BLUESKY, [ACCOUNT_PROPERTY_ENUM.FEDIVERSE]: ACCOUNT_PROPERTY_READABLE_ENUM.FEDIVERSE, [ACCOUNT_PROPERTY_ENUM.WEBSITE]: ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE, [ACCOUNT_PROPERTY_ENUM.BIRTHDATE]: ACCOUNT_PROPERTY_READABLE_ENUM.BIRTHDATE, + [ACCOUNT_PROPERTY_ENUM.PRONOUNS]: ACCOUNT_PROPERTY_READABLE_ENUM.PRONOUNS, }) /** Enum of profile specific sections to human readable names */ @@ -86,9 +92,11 @@ export const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({ [ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED]: ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED, [ACCOUNT_PROPERTY_READABLE_ENUM.ROLE]: ACCOUNT_PROPERTY_ENUM.ROLE, [ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER]: ACCOUNT_PROPERTY_ENUM.TWITTER, + [ACCOUNT_PROPERTY_READABLE_ENUM.BLUESKY]: ACCOUNT_PROPERTY_ENUM.BLUESKY, [ACCOUNT_PROPERTY_READABLE_ENUM.FEDIVERSE]: ACCOUNT_PROPERTY_ENUM.FEDIVERSE, [ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE]: ACCOUNT_PROPERTY_ENUM.WEBSITE, [ACCOUNT_PROPERTY_READABLE_ENUM.BIRTHDATE]: ACCOUNT_PROPERTY_ENUM.BIRTHDATE, + [ACCOUNT_PROPERTY_READABLE_ENUM.PRONOUNS]: ACCOUNT_PROPERTY_ENUM.PRONOUNS, }) /** @@ -99,21 +107,23 @@ export const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({ export const ACCOUNT_SETTING_PROPERTY_ENUM = Object.freeze({ LANGUAGE: 'language', LOCALE: 'locale', + FIRST_DAY_OF_WEEK: 'first_day_of_week', }) /** Enum of account setting properties to human readable setting properties */ export const ACCOUNT_SETTING_PROPERTY_READABLE_ENUM = Object.freeze({ LANGUAGE: t('settings', 'Language'), LOCALE: t('settings', 'Locale'), + FIRST_DAY_OF_WEEK: t('settings', 'First day of week'), }) /** Enum of scopes */ -export const SCOPE_ENUM = Object.freeze({ - PRIVATE: 'v2-private', - LOCAL: 'v2-local', - FEDERATED: 'v2-federated', - PUBLISHED: 'v2-published', -}) +export enum SCOPE_ENUM { + PRIVATE = 'v2-private', + LOCAL = 'v2-local', + FEDERATED = 'v2-federated', + PUBLISHED = 'v2-published', +} /** Enum of readable account properties to supported scopes */ export const PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM = Object.freeze({ @@ -129,9 +139,11 @@ export const PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM = Object.freeze({ [ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], [ACCOUNT_PROPERTY_READABLE_ENUM.ROLE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], [ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.BLUESKY]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], [ACCOUNT_PROPERTY_READABLE_ENUM.FEDIVERSE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], [ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], [ACCOUNT_PROPERTY_READABLE_ENUM.BIRTHDATE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.PRONOUNS]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], }) /** List of readable account properties which aren't published to the lookup server */ @@ -164,14 +176,14 @@ export const SCOPE_PROPERTY_ENUM = Object.freeze({ displayName: t('settings', 'Local'), tooltip: t('settings', 'Only visible to people on this instance and guests'), // tooltipDisabled is not required here as this scope is supported by all account properties - icon: mdiLock, + icon: mdiLockOutline, }, [SCOPE_ENUM.FEDERATED]: { name: SCOPE_ENUM.FEDERATED, displayName: t('settings', 'Federated'), tooltip: t('settings', 'Only synchronize to trusted servers'), tooltipDisabled: t('settings', 'Not available as federation has been disabled for your account, contact your system administration if you have any questions'), - icon: mdiAccountGroup, + icon: mdiAccountGroupOutline, }, [SCOPE_ENUM.PUBLISHED]: { name: SCOPE_ENUM.PUBLISHED, @@ -186,11 +198,11 @@ export const SCOPE_PROPERTY_ENUM = Object.freeze({ export const DEFAULT_ADDITIONAL_EMAIL_SCOPE = SCOPE_ENUM.LOCAL /** Enum of verification constants, according to IAccountManager */ -export const VERIFICATION_ENUM = Object.freeze({ - NOT_VERIFIED: 0, - VERIFICATION_IN_PROGRESS: 1, - VERIFIED: 2, -}) +export enum VERIFICATION_ENUM { + NOT_VERIFIED = 0, + VERIFICATION_IN_PROGRESS = 1, + VERIFIED = 2, +} /** * Email validation regex @@ -199,3 +211,12 @@ export const VERIFICATION_ENUM = Object.freeze({ */ // eslint-disable-next-line no-control-regex export const VALIDATE_EMAIL_REGEX = /^(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){255,})(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){65,}@)(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22))(?:\.(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-+[a-z0-9]+)*\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-+[a-z0-9]+)*)|(?:\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\]))$/i + +export interface IAccountProperty { + name: string + value: string + scope: SCOPE_ENUM + verified: VERIFICATION_ENUM +} + +export type AccountProperties = Record<(typeof ACCOUNT_PROPERTY_ENUM)[keyof (typeof ACCOUNT_PROPERTY_ENUM)], IAccountProperty> diff --git a/apps/settings/src/constants/AppstoreCategoryIcons.ts b/apps/settings/src/constants/AppstoreCategoryIcons.ts index 4e39796fd23..989ffe79c22 100644 --- a/apps/settings/src/constants/AppstoreCategoryIcons.ts +++ b/apps/settings/src/constants/AppstoreCategoryIcons.ts @@ -3,29 +3,30 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ import { - mdiAccount, - mdiAccountMultiple, - mdiArchive, + mdiAccountMultipleOutline, + mdiAccountOutline, + mdiArchiveOutline, mdiCheck, - mdiClipboardFlow, + mdiClipboardFlowOutline, mdiClose, - mdiCog, - mdiControllerClassic, + mdiCogOutline, + mdiControllerClassicOutline, + mdiCreationOutline, mdiDownload, mdiFileDocumentEdit, mdiFolder, - mdiKey, + mdiKeyOutline, mdiMagnify, mdiMonitorEye, mdiMultimedia, - mdiOfficeBuilding, + mdiOfficeBuildingOutline, mdiOpenInApp, mdiSecurity, mdiStar, mdiStarCircleOutline, - mdiStarShooting, + mdiStarShootingOutline, mdiTools, - mdiViewDashboard, + mdiViewColumnOutline, } from '@mdi/js' /** @@ -34,28 +35,29 @@ import { export default Object.freeze({ // system special categories discover: mdiStarCircleOutline, - installed: mdiAccount, + installed: mdiAccountOutline, enabled: mdiCheck, disabled: mdiClose, - bundles: mdiArchive, - supported: mdiStarShooting, + bundles: mdiArchiveOutline, + supported: mdiStarShootingOutline, featured: mdiStar, updates: mdiDownload, - // generic categories - auth: mdiKey, - customization: mdiCog, - dashboard: mdiViewDashboard, + // generic category + ai: mdiCreationOutline, + auth: mdiKeyOutline, + customization: mdiCogOutline, + dashboard: mdiViewColumnOutline, files: mdiFolder, - games: mdiControllerClassic, + games: mdiControllerClassicOutline, integration: mdiOpenInApp, monitoring: mdiMonitorEye, multimedia: mdiMultimedia, office: mdiFileDocumentEdit, - organization: mdiOfficeBuilding, + organization: mdiOfficeBuildingOutline, search: mdiMagnify, security: mdiSecurity, - social: mdiAccountMultiple, + social: mdiAccountMultipleOutline, tools: mdiTools, - workflow: mdiClipboardFlow, + workflow: mdiClipboardFlowOutline, }) diff --git a/apps/settings/src/main-admin-ai.js b/apps/settings/src/main-admin-ai.js index d1813d03b50..79bc785a4f6 100644 --- a/apps/settings/src/main-admin-ai.js +++ b/apps/settings/src/main-admin-ai.js @@ -2,13 +2,13 @@ * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ - +import { getCSPNonce } from '@nextcloud/auth' import Vue from 'vue' import ArtificialIntelligence from './components/AdminAI.vue' // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(OC.requestToken) +__webpack_nonce__ = getCSPNonce() Vue.prototype.t = t diff --git a/apps/settings/src/main-admin-basic-settings.js b/apps/settings/src/main-admin-basic-settings.js index 9be0ab3eaa9..80f9c44a35a 100644 --- a/apps/settings/src/main-admin-basic-settings.js +++ b/apps/settings/src/main-admin-basic-settings.js @@ -4,7 +4,7 @@ */ import Vue from 'vue' -import { getRequestToken } from '@nextcloud/auth' +import { getCSPNonce } from '@nextcloud/auth' import { loadState } from '@nextcloud/initial-state' import { translate as t } from '@nextcloud/l10n' @@ -13,7 +13,7 @@ import logger from './logger.ts' import ProfileSettings from './components/BasicSettings/ProfileSettings.vue' import BackgroundJob from './components/BasicSettings/BackgroundJob.vue' -__webpack_nonce__ = btoa(getRequestToken()) +__webpack_nonce__ = getCSPNonce() const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', true) diff --git a/apps/settings/src/main-admin-security.js b/apps/settings/src/main-admin-security.js index 2893c7fa048..26961dcc13e 100644 --- a/apps/settings/src/main-admin-security.js +++ b/apps/settings/src/main-admin-security.js @@ -2,16 +2,16 @@ * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ - +import { getCSPNonce } from '@nextcloud/auth' import { loadState } from '@nextcloud/initial-state' import Vue from 'vue' import AdminTwoFactor from './components/AdminTwoFactor.vue' -import Encryption from './components/Encryption.vue' +import EncryptionSettings from './components/Encryption/EncryptionSettings.vue' import store from './store/admin-security.js' // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(OC.requestToken) +__webpack_nonce__ = getCSPNonce() Vue.prototype.t = t @@ -28,5 +28,5 @@ new View({ store, }).$mount('#two-factor-auth-settings') -const EncryptionView = Vue.extend(Encryption) +const EncryptionView = Vue.extend(EncryptionSettings) new EncryptionView().$mount('#vue-admin-encryption') diff --git a/apps/settings/src/main-apps-users-management.ts b/apps/settings/src/main-apps-users-management.ts index 650290cf443..62ea009de11 100644 --- a/apps/settings/src/main-apps-users-management.ts +++ b/apps/settings/src/main-apps-users-management.ts @@ -4,29 +4,30 @@ */ import Vue from 'vue' -import VTooltip from 'v-tooltip' +import Vuex from 'vuex' +import VTooltipPlugin from 'v-tooltip' import { sync } from 'vuex-router-sync' -import { translate as t, translatePlural as n } from '@nextcloud/l10n' +import { t, n } from '@nextcloud/l10n' import SettingsApp from './views/SettingsApp.vue' import router from './router/index.ts' import { useStore } from './store/index.js' -import { getRequestToken } from '@nextcloud/auth' +import { getCSPNonce } from '@nextcloud/auth' import { PiniaVuePlugin, createPinia } from 'pinia' -Vue.use(VTooltip, { defaultHtml: false }) - -const store = useStore() -sync(store, router) - // CSP config for webpack dynamic chunk loading // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(getRequestToken() ?? '') +__webpack_nonce__ = getCSPNonce() // bind to window Vue.prototype.t = t Vue.prototype.n = n Vue.use(PiniaVuePlugin) +Vue.use(VTooltipPlugin, { defaultHtml: false }) +Vue.use(Vuex) + +const store = useStore() +sync(store, router) const pinia = createPinia() diff --git a/apps/settings/src/main-declarative-settings-forms.ts b/apps/settings/src/main-declarative-settings-forms.ts index 4644f3e7d87..d6f5973baea 100644 --- a/apps/settings/src/main-declarative-settings-forms.ts +++ b/apps/settings/src/main-declarative-settings-forms.ts @@ -2,10 +2,13 @@ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ -import Vue from 'vue'; -import { loadState } from '@nextcloud/initial-state'; -import { translate as t, translatePlural as n } from '@nextcloud/l10n'; -import DeclarativeSection from './components/DeclarativeSettings/DeclarativeSection.vue'; +import type { ComponentInstance } from 'vue' + +import { loadState } from '@nextcloud/initial-state' +import { t, n } from '@nextcloud/l10n' +import Vue from 'vue' +import DeclarativeSection from './components/DeclarativeSettings/DeclarativeSection.vue' +import logger from './logger' interface DeclarativeFormField { id: string, @@ -14,9 +17,10 @@ interface DeclarativeFormField { type: string, placeholder: string, label: string, - options: Array<any>|null, - value: any, - default: any, + options: Array<unknown>|null, + value: unknown, + default: unknown, + sensitive: boolean, } interface DeclarativeForm { @@ -32,23 +36,27 @@ interface DeclarativeForm { fields: Array<DeclarativeFormField>, } -const forms = loadState('settings', 'declarative-settings-forms', []) as Array<DeclarativeForm>; -console.debug('Loaded declarative forms:', forms); +const forms = loadState<DeclarativeForm[]>('settings', 'declarative-settings-forms', []) -function renderDeclarativeSettingsSections(forms: Array<DeclarativeForm>): void { +/** + * @param forms The forms to render + */ +function renderDeclarativeSettingsSections(forms: Array<DeclarativeForm>): ComponentInstance[] { Vue.mixin({ methods: { t, n } }) - const DeclarativeSettingsSection = Vue.extend(<any>DeclarativeSection); - for (const form of forms) { + const DeclarativeSettingsSection = Vue.extend(DeclarativeSection as never) + + return forms.map((form) => { const el = `#${form.app}_${form.id}` - new DeclarativeSettingsSection({ - el: el, + return new DeclarativeSettingsSection({ + el, propsData: { form, }, }) - } + }) } document.addEventListener('DOMContentLoaded', () => { - renderDeclarativeSettingsSections(forms); -}); + logger.debug('Loaded declarative forms', { forms }) + renderDeclarativeSettingsSections(forms) +}) diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js index 7519b00b4d8..5ccfc9848c0 100644 --- a/apps/settings/src/main-personal-info.js +++ b/apps/settings/src/main-personal-info.js @@ -4,30 +4,33 @@ */ import Vue from 'vue' -import { getRequestToken } from '@nextcloud/auth' +import { getCSPNonce } from '@nextcloud/auth' import { loadState } from '@nextcloud/initial-state' import { translate as t } from '@nextcloud/l10n' import AvatarSection from './components/PersonalInfo/AvatarSection.vue' +import BiographySection from './components/PersonalInfo/BiographySection.vue' +import BirthdaySection from './components/PersonalInfo/BirthdaySection.vue' import DetailsSection from './components/PersonalInfo/DetailsSection.vue' import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue' import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue' -import PhoneSection from './components/PersonalInfo/PhoneSection.vue' -import LocationSection from './components/PersonalInfo/LocationSection.vue' -import WebsiteSection from './components/PersonalInfo/WebsiteSection.vue' -import TwitterSection from './components/PersonalInfo/TwitterSection.vue' import FediverseSection from './components/PersonalInfo/FediverseSection.vue' +import FirstDayOfWeekSection from './components/PersonalInfo/FirstDayOfWeekSection.vue' +import HeadlineSection from './components/PersonalInfo/HeadlineSection.vue' import LanguageSection from './components/PersonalInfo/LanguageSection/LanguageSection.vue' import LocaleSection from './components/PersonalInfo/LocaleSection/LocaleSection.vue' -import ProfileSection from './components/PersonalInfo/ProfileSection/ProfileSection.vue' +import LocationSection from './components/PersonalInfo/LocationSection.vue' import OrganisationSection from './components/PersonalInfo/OrganisationSection.vue' -import RoleSection from './components/PersonalInfo/RoleSection.vue' -import HeadlineSection from './components/PersonalInfo/HeadlineSection.vue' -import BiographySection from './components/PersonalInfo/BiographySection.vue' +import PhoneSection from './components/PersonalInfo/PhoneSection.vue' +import ProfileSection from './components/PersonalInfo/ProfileSection/ProfileSection.vue' import ProfileVisibilitySection from './components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue' -import BirthdaySection from './components/PersonalInfo/BirthdaySection.vue' +import PronounsSection from './components/PersonalInfo/PronounsSection.vue' +import RoleSection from './components/PersonalInfo/RoleSection.vue' +import TwitterSection from './components/PersonalInfo/TwitterSection.vue' +import BlueskySection from './components/PersonalInfo/BlueskySection.vue' +import WebsiteSection from './components/PersonalInfo/WebsiteSection.vue' -__webpack_nonce__ = btoa(getRequestToken()) +__webpack_nonce__ = getCSPNonce() const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', true) @@ -38,17 +41,20 @@ Vue.mixin({ }) const AvatarView = Vue.extend(AvatarSection) +const BirthdayView = Vue.extend(BirthdaySection) const DetailsView = Vue.extend(DetailsSection) const DisplayNameView = Vue.extend(DisplayNameSection) const EmailView = Vue.extend(EmailSection) -const PhoneView = Vue.extend(PhoneSection) -const LocationView = Vue.extend(LocationSection) -const WebsiteView = Vue.extend(WebsiteSection) -const TwitterView = Vue.extend(TwitterSection) const FediverseView = Vue.extend(FediverseSection) +const FirstDayOfWeekView = Vue.extend(FirstDayOfWeekSection) const LanguageView = Vue.extend(LanguageSection) const LocaleView = Vue.extend(LocaleSection) -const BirthdayView = Vue.extend(BirthdaySection) +const LocationView = Vue.extend(LocationSection) +const PhoneView = Vue.extend(PhoneSection) +const PronounsView = Vue.extend(PronounsSection) +const TwitterView = Vue.extend(TwitterSection) +const BlueskyView = Vue.extend(BlueskySection) +const WebsiteView = Vue.extend(WebsiteSection) new AvatarView().$mount('#vue-avatar-section') new DetailsView().$mount('#vue-details-section') @@ -58,10 +64,13 @@ new PhoneView().$mount('#vue-phone-section') new LocationView().$mount('#vue-location-section') new WebsiteView().$mount('#vue-website-section') new TwitterView().$mount('#vue-twitter-section') +new BlueskyView().$mount('#vue-bluesky-section') new FediverseView().$mount('#vue-fediverse-section') new LanguageView().$mount('#vue-language-section') new LocaleView().$mount('#vue-locale-section') +new FirstDayOfWeekView().$mount('#vue-fdow-section') new BirthdayView().$mount('#vue-birthday-section') +new PronounsView().$mount('#vue-pronouns-section') if (profileEnabledGlobally) { const ProfileView = Vue.extend(ProfileSection) diff --git a/apps/settings/src/main-personal-password.js b/apps/settings/src/main-personal-password.js index 3c0fd18eea5..b74f5f71aa2 100644 --- a/apps/settings/src/main-personal-password.js +++ b/apps/settings/src/main-personal-password.js @@ -2,14 +2,14 @@ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ +import { getCSPNonce } from '@nextcloud/auth' +import { t, n } from '@nextcloud/l10n' import Vue from 'vue' - import PasswordSection from './components/PasswordSection.vue' -import { translate as t, translatePlural as n } from '@nextcloud/l10n' // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(OC.requestToken) +__webpack_nonce__ = getCSPNonce() Vue.prototype.t = t Vue.prototype.n = n diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js index 54e761ae680..583a375fb0e 100644 --- a/apps/settings/src/main-personal-security.js +++ b/apps/settings/src/main-personal-security.js @@ -3,22 +3,22 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ +import { getCSPNonce } from '@nextcloud/auth' +import { PiniaVuePlugin, createPinia } from 'pinia' +import VTooltipPlugin from 'v-tooltip' import Vue from 'vue' -import VTooltip from 'v-tooltip' import AuthTokenSection from './components/AuthTokenSection.vue' -import { getRequestToken } from '@nextcloud/auth' -import { PiniaVuePlugin, createPinia } from 'pinia' import '@nextcloud/password-confirmation/dist/style.css' // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(getRequestToken()) +__webpack_nonce__ = getCSPNonce() const pinia = createPinia() Vue.use(PiniaVuePlugin) -Vue.use(VTooltip, { defaultHtml: false }) +Vue.use(VTooltipPlugin, { defaultHtml: false }) Vue.prototype.t = t const View = Vue.extend(AuthTokenSection) diff --git a/apps/settings/src/main-personal-webauth.js b/apps/settings/src/main-personal-webauth.js index 4f5397f257c..f451fa8c73b 100644 --- a/apps/settings/src/main-personal-webauth.js +++ b/apps/settings/src/main-personal-webauth.js @@ -2,14 +2,14 @@ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ - -import Vue from 'vue' +import { getCSPNonce } from '@nextcloud/auth' import { loadState } from '@nextcloud/initial-state' +import Vue from 'vue' import WebAuthnSection from './components/WebAuthn/Section.vue' // eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(OC.requestToken) +__webpack_nonce__ = getCSPNonce() Vue.prototype.t = t diff --git a/apps/settings/src/mixins/AppManagement.js b/apps/settings/src/mixins/AppManagement.js index c63041f45c9..3822658589d 100644 --- a/apps/settings/src/mixins/AppManagement.js +++ b/apps/settings/src/mixins/AppManagement.js @@ -12,16 +12,76 @@ export default { return this.app.groups.map(group => { return { id: group, name: group } }) }, installing() { + if (this.app?.app_api) { + return this.app && this?.appApiStore.getLoading('install') === true + } return this.$store.getters.loading('install') }, isLoading() { + if (this.app?.app_api) { + return this.app && this?.appApiStore.getLoading(this.app.id) === true + } return this.app && this.$store.getters.loading(this.app.id) }, + isInitializing() { + if (this.app?.app_api) { + return this.app && (this.app?.status?.action === 'init' || this.app?.status?.action === 'healthcheck') + } + return false + }, + isDeploying() { + if (this.app?.app_api) { + return this.app && this.app?.status?.action === 'deploy' + } + return false + }, + isManualInstall() { + if (this.app?.app_api) { + return this.app?.daemon?.accepts_deploy_id === 'manual-install' + } + return false + }, + updateButtonText() { + if (this.app?.app_api && this.app?.daemon?.accepts_deploy_id === 'manual-install') { + return t('settings', 'Manually installed apps cannot be updated') + } + return t('settings', 'Update to {version}', { version: this.app?.update }) + }, enableButtonText() { - if (this.app.needsDownload) { - return t('settings', 'Download and enable') + if (this.app?.app_api) { + if (this.app && this.app?.status?.action && this.app?.status?.action === 'deploy') { + return t('settings', '{progress}% Deploying …', { progress: this.app?.status?.deploy ?? 0 }) + } + if (this.app && this.app?.status?.action && this.app?.status?.action === 'init') { + return t('settings', '{progress}% Initializing …', { progress: this.app?.status?.init ?? 0 }) + } + if (this.app && this.app?.status?.action && this.app?.status?.action === 'healthcheck') { + return t('settings', 'Health checking') + } + if (this.app.needsDownload) { + return t('settings', 'Deploy and Enable') + } + return t('settings', 'Enable') + } else { + if (this.app.needsDownload) { + return t('settings', 'Download and enable') + } + return t('settings', 'Enable') + } + }, + disableButtonText() { + if (this.app?.app_api) { + if (this.app && this.app?.status?.action && this.app?.status?.action === 'deploy') { + return t('settings', '{progress}% Deploying …', { progress: this.app?.status?.deploy }) + } + if (this.app && this.app?.status?.action && this.app?.status?.action === 'init') { + return t('settings', '{progress}% Initializing …', { progress: this.app?.status?.init }) + } + if (this.app && this.app?.status?.action && this.app?.status?.action === 'healthcheck') { + return t('settings', 'Health checking') + } } - return t('settings', 'Enable') + return t('settings', 'Disable') }, forceEnableButtonText() { if (this.app.needsDownload) { @@ -30,7 +90,7 @@ export default { return t('settings', 'Allow untested app') }, enableButtonTooltip() { - if (this.app.needsDownload) { + if (!this.app?.app_api && this.app.needsDownload) { return t('settings', 'The app will be downloaded from the App Store') } return null @@ -42,6 +102,19 @@ export default { } return base }, + defaultDeployDaemonAccessible() { + if (this.app?.app_api) { + if (this.app?.daemon && this.app?.daemon?.accepts_deploy_id === 'manual-install') { + return true + } + if (this.app?.daemon?.accepts_deploy_id === 'docker-install' + && this.appApiStore.getDefaultDaemon?.name === this.app?.daemon?.name) { + return this?.appApiStore.getDaemonAccessible === true + } + return this?.appApiStore.getDaemonAccessible + } + return true + }, }, data() { @@ -61,12 +134,15 @@ export default { return this.$store.dispatch('getGroups', { search: query, limit: 5, offset: 0 }) }, isLimitedToGroups(app) { - if (this.app.groups.length || this.groupCheckedAppsData) { - return true + if (this.app?.app_api) { + return false } - return false + return this.app.groups.length || this.groupCheckedAppsData }, setGroupLimit() { + if (this.app?.app_api) { + return // not supported for app_api apps + } if (!this.groupCheckedAppsData) { this.$store.dispatch('enableApp', { appId: this.app.id, groups: [] }) } @@ -76,17 +152,24 @@ export default { || app.types.includes('prelogin') || app.types.includes('authentication') || app.types.includes('logging') - || app.types.includes('prevent_group_restriction')) { + || app.types.includes('prevent_group_restriction') + || app?.app_api) { return false } return true }, addGroupLimitation(groupArray) { + if (this.app?.app_api) { + return // not supported for app_api apps + } const group = groupArray.pop() const groups = this.app.groups.concat([]).concat([group.id]) this.$store.dispatch('enableApp', { appId: this.app.id, groups }) }, removeGroupLimitation(group) { + if (this.app?.app_api) { + return // not supported for app_api apps + } const currentGroups = this.app.groups.concat([]) const index = currentGroups.indexOf(group.id) if (index > -1) { @@ -95,34 +178,74 @@ export default { this.$store.dispatch('enableApp', { appId: this.app.id, groups: currentGroups }) }, forceEnable(appId) { - this.$store.dispatch('forceEnableApp', { appId, groups: [] }) - .then((response) => { rebuildNavigation() }) - .catch((error) => { showError(error) }) + if (this.app?.app_api) { + this.appApiStore.forceEnableApp(appId) + .then(() => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } else { + this.$store.dispatch('forceEnableApp', { appId, groups: [] }) + .then((response) => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } }, - enable(appId) { - this.$store.dispatch('enableApp', { appId, groups: [] }) - .then((response) => { rebuildNavigation() }) - .catch((error) => { showError(error) }) + enable(appId, daemon = null, deployOptions = {}) { + if (this.app?.app_api) { + this.appApiStore.enableApp(appId, daemon, deployOptions) + .then(() => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } else { + this.$store.dispatch('enableApp', { appId, groups: [] }) + .then((response) => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } }, disable(appId) { - this.$store.dispatch('disableApp', { appId }) - .then((response) => { rebuildNavigation() }) - .catch((error) => { showError(error) }) + if (this.app?.app_api) { + this.appApiStore.disableApp(appId) + .then(() => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } else { + this.$store.dispatch('disableApp', { appId }) + .then((response) => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } }, - remove(appId) { - this.$store.dispatch('uninstallApp', { appId }) - .then((response) => { rebuildNavigation() }) - .catch((error) => { showError(error) }) + async remove(appId, removeData = false) { + try { + if (this.app?.app_api) { + await this.appApiStore.uninstallApp(appId, removeData) + } else { + await this.$store.dispatch('uninstallApp', { appId, removeData }) + } + await rebuildNavigation() + } catch (error) { + showError(error) + } }, install(appId) { - this.$store.dispatch('enableApp', { appId }) - .then((response) => { rebuildNavigation() }) - .catch((error) => { showError(error) }) + if (this.app?.app_api) { + this.appApiStore.enableApp(appId) + .then(() => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } else { + this.$store.dispatch('enableApp', { appId }) + .then((response) => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } }, update(appId) { - this.$store.dispatch('updateApp', { appId }) - .then((response) => { rebuildNavigation() }) - .catch((error) => { showError(error) }) + if (this.app?.app_api) { + this.appApiStore.updateApp(appId) + .then(() => { rebuildNavigation() }) + .catch((error) => { showError(error) }) + } else { + this.$store.dispatch('updateApp', { appId }) + .catch((error) => { showError(error) }) + .then(() => { + rebuildNavigation() + this.store.updateCount = Math.max(this.store.updateCount - 1, 0) + }) + } }, }, } diff --git a/apps/settings/src/mixins/UserRowMixin.js b/apps/settings/src/mixins/UserRowMixin.js index a06b310bcca..9e46d8e25d7 100644 --- a/apps/settings/src/mixins/UserRowMixin.js +++ b/apps/settings/src/mixins/UserRowMixin.js @@ -3,6 +3,9 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ +import { formatFileSize } from '@nextcloud/files' +import { useFormatDateTime } from '@nextcloud/vue' + export default { props: { user: { @@ -13,14 +16,6 @@ export default { type: Object, default: () => ({}), }, - groups: { - type: Array, - default: () => [], - }, - subAdminsGroups: { - type: Array, - default: () => [], - }, quotaOptions: { type: Array, default: () => [], @@ -34,45 +29,37 @@ export default { default: () => [], }, }, + setup(props) { + const { formattedFullTime } = useFormatDateTime(props.user.firstLoginTimestamp * 1000, { + relativeTime: false, + format: { + timeStyle: 'short', + dateStyle: 'short', + }, + }) + return { + formattedFullTime, + } + }, + data() { + return { + selectedGroups: this.user.groups.map(id => ({ id, name: id })), + selectedSubAdminGroups: this.user.subadmin.map(id => ({ id, name: id })), + userGroups: this.user.groups.map(id => ({ id, name: id })), + userSubAdminGroups: this.user.subadmin.map(id => ({ id, name: id })), + } + }, computed: { showConfig() { return this.$store.getters.getShowConfig }, - /* GROUPS MANAGEMENT */ - userGroups() { - const userGroups = this.groups.filter(group => this.user.groups.includes(group.id)) - return userGroups - }, - userSubAdminsGroups() { - const userSubAdminsGroups = this.subAdminsGroups.filter(group => this.user.subadmin.includes(group.id)) - return userSubAdminsGroups - }, - availableGroups() { - return this.groups.map((group) => { - // clone object because we don't want - // to edit the original groups - const groupClone = Object.assign({}, group) - - // two settings here: - // 1. user NOT in group but no permission to add - // 2. user is in group but no permission to remove - groupClone.$isDisabled - = (group.canAdd === false - && !this.user.groups.includes(group.id)) - || (group.canRemove === false - && this.user.groups.includes(group.id)) - return groupClone - }) - }, - /* QUOTA MANAGEMENT */ usedSpace() { - if (this.user.quota.used) { - return t('settings', '{size} used', { size: OC.Util.humanFileSize(this.user.quota.used) }) - } - return t('settings', '{size} used', { size: OC.Util.humanFileSize(0) }) + const quotaUsed = this.user.quota.used > 0 ? this.user.quota.used : 0 + return t('settings', '{size} used', { size: formatFileSize(quotaUsed, true) }) }, + usedQuota() { let quota = this.user.quota.quota if (quota > 0) { @@ -84,11 +71,12 @@ export default { } return isNaN(quota) ? 0 : quota }, + // Mapping saved values to objects userQuota() { if (this.user.quota.quota >= 0) { // if value is valid, let's map the quotaOptions or return custom quota - const humanQuota = OC.Util.humanFileSize(this.user.quota.quota) + const humanQuota = formatFileSize(this.user.quota.quota) const userQuota = this.quotaOptions.find(quota => quota.id === humanQuota) return userQuota || { id: humanQuota, label: humanQuota } } else if (this.user.quota.quota === 'default') { @@ -118,16 +106,26 @@ export default { return userLang }, + userFirstLogin() { + if (this.user.firstLoginTimestamp > 0) { + return this.formattedFullTime + } + if (this.user.firstLoginTimestamp < 0) { + return t('settings', 'Unknown') + } + return t('settings', 'Never') + }, + /* LAST LOGIN */ userLastLoginTooltip() { - if (this.user.lastLogin > 0) { - return OC.Util.formatDate(this.user.lastLogin) + if (this.user.lastLoginTimestamp > 0) { + return OC.Util.formatDate(this.user.lastLoginTimestamp * 1000) } return '' }, userLastLogin() { - if (this.user.lastLogin > 0) { - return OC.Util.relativeModifiedDate(this.user.lastLogin) + if (this.user.lastLoginTimestamp > 0) { + return OC.Util.relativeModifiedDate(this.user.lastLoginTimestamp * 1000) } return t('settings', 'Never') }, diff --git a/apps/settings/src/router/routes.ts b/apps/settings/src/router/routes.ts index 7182a606309..35b3b1306d5 100644 --- a/apps/settings/src/router/routes.ts +++ b/apps/settings/src/router/routes.ts @@ -3,6 +3,9 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ import type { RouteConfig } from 'vue-router' +import { loadState } from '@nextcloud/initial-state' + +const appstoreEnabled = loadState<boolean>('settings', 'appstoreEnabled', true) // Dynamic loading const AppStore = () => import(/* webpackChunkName: 'settings-apps-view' */'../views/AppStore.vue') @@ -31,11 +34,10 @@ const routes: RouteConfig[] = [ { path: '/:index(index.php/)?settings/apps', name: 'apps', - // redirect to our default route - the app discover section redirect: { name: 'apps-category', params: { - category: 'discover', + category: appstoreEnabled ? 'discover' : 'installed', }, }, components: { diff --git a/apps/settings/src/service/PersonalInfo/EmailService.js b/apps/settings/src/service/PersonalInfo/EmailService.js index 5439e7cc1b1..0adbe5225bc 100644 --- a/apps/settings/src/service/PersonalInfo/EmailService.js +++ b/apps/settings/src/service/PersonalInfo/EmailService.js @@ -3,13 +3,14 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import axios from '@nextcloud/axios' import { getCurrentUser } from '@nextcloud/auth' import { generateOcsUrl } from '@nextcloud/router' import { confirmPassword } from '@nextcloud/password-confirmation' -import '@nextcloud/password-confirmation/dist/style.css' +import axios from '@nextcloud/axios' -import { ACCOUNT_PROPERTY_ENUM, SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.js' +import { ACCOUNT_PROPERTY_ENUM, SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.ts' + +import '@nextcloud/password-confirmation/dist/style.css' /** * Save the primary email of the user diff --git a/apps/settings/src/service/PersonalInfo/PersonalInfoService.js b/apps/settings/src/service/PersonalInfo/PersonalInfoService.js index 6f0e02bf1a5..f2eaac91301 100644 --- a/apps/settings/src/service/PersonalInfo/PersonalInfoService.js +++ b/apps/settings/src/service/PersonalInfo/PersonalInfoService.js @@ -3,13 +3,14 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import axios from '@nextcloud/axios' import { getCurrentUser } from '@nextcloud/auth' import { generateOcsUrl } from '@nextcloud/router' import { confirmPassword } from '@nextcloud/password-confirmation' -import '@nextcloud/password-confirmation/dist/style.css' +import axios from '@nextcloud/axios' -import { SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.js' +import { SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.ts' + +import '@nextcloud/password-confirmation/dist/style.css' /** * Save the primary account property value for the user diff --git a/apps/settings/src/service/WebAuthnRegistrationSerice.ts b/apps/settings/src/service/WebAuthnRegistrationSerice.ts index 8ab82fbe28f..0d1689ab90a 100644 --- a/apps/settings/src/service/WebAuthnRegistrationSerice.ts +++ b/apps/settings/src/service/WebAuthnRegistrationSerice.ts @@ -3,14 +3,13 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import type { RegistrationResponseJSON } from '@simplewebauthn/types' +import type { PublicKeyCredentialCreationOptionsJSON, RegistrationResponseJSON } from '@simplewebauthn/browser' import { translate as t } from '@nextcloud/l10n' import { generateUrl } from '@nextcloud/router' import { startRegistration as registerWebAuthn } from '@simplewebauthn/browser' -import Axios from 'axios' -import axios from '@nextcloud/axios' +import axios, { isAxiosError } from '@nextcloud/axios' import logger from '../logger' /** @@ -22,13 +21,13 @@ export async function startRegistration() { try { logger.debug('Fetching webauthn registration data') - const { data } = await axios.get(url) + const { data } = await axios.get<PublicKeyCredentialCreationOptionsJSON>(url) logger.debug('Start webauthn registration') - const attrs = await registerWebAuthn(data) + const attrs = await registerWebAuthn({ optionsJSON: data }) return attrs } catch (e) { logger.error(e as Error) - if (Axios.isAxiosError(e)) { + if (isAxiosError(e)) { throw new Error(t('settings', 'Could not register device: Network error')) } else if ((e as Error).name === 'InvalidStateError') { throw new Error(t('settings', 'Could not register device: Probably already registered')) diff --git a/apps/settings/src/service/groups.ts b/apps/settings/src/service/groups.ts new file mode 100644 index 00000000000..a8cfd842451 --- /dev/null +++ b/apps/settings/src/service/groups.ts @@ -0,0 +1,83 @@ +/** + * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import type { IGroup } from '../views/user-types.d.ts' + +import axios from '@nextcloud/axios' +import { generateOcsUrl } from '@nextcloud/router' +import { CancelablePromise } from 'cancelable-promise' + +interface Group { + id: string + displayname: string + usercount: number + disabled: number + canAdd: boolean + canRemove: boolean +} + +const formatGroup = (group: Group): Required<IGroup> => ({ + id: group.id, + name: group.displayname, + usercount: group.usercount, + disabled: group.disabled, + canAdd: group.canAdd, + canRemove: group.canRemove, +}) + +/** + * Search groups + * + * @param {object} options Options + * @param {string} options.search Search query + * @param {number} options.offset Offset + * @param {number} options.limit Limit + */ +export const searchGroups = ({ search, offset, limit }): CancelablePromise<Required<IGroup>[]> => { + const controller = new AbortController() + return new CancelablePromise(async (resolve, reject, onCancel) => { + onCancel(() => controller.abort()) + try { + const { data } = await axios.get( + generateOcsUrl('/cloud/groups/details?search={search}&offset={offset}&limit={limit}', { search, offset, limit }), { + signal: controller.signal, + }, + ) + const groups: Group[] = data.ocs?.data?.groups ?? [] + const formattedGroups = groups.map(formatGroup) + resolve(formattedGroups) + } catch (error) { + reject(error) + } + }) +} + +/** + * Load user groups + * + * @param {object} options Options + * @param {string} options.userId User id + */ +export const loadUserGroups = async ({ userId }): Promise<Required<IGroup>[]> => { + const url = generateOcsUrl('/cloud/users/{userId}/groups/details', { userId }) + const { data } = await axios.get(url) + const groups: Group[] = data.ocs?.data?.groups ?? [] + const formattedGroups = groups.map(formatGroup) + return formattedGroups +} + +/** + * Load user subadmin groups + * + * @param {object} options Options + * @param {string} options.userId User id + */ +export const loadUserSubAdminGroups = async ({ userId }): Promise<Required<IGroup>[]> => { + const url = generateOcsUrl('/cloud/users/{userId}/subadmins/details', { userId }) + const { data } = await axios.get(url) + const groups: Group[] = data.ocs?.data?.groups ?? [] + const formattedGroups = groups.map(formatGroup) + return formattedGroups +} diff --git a/apps/settings/src/store/app-api-store.ts b/apps/settings/src/store/app-api-store.ts new file mode 100644 index 00000000000..769f212ebd7 --- /dev/null +++ b/apps/settings/src/store/app-api-store.ts @@ -0,0 +1,325 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import axios from '@nextcloud/axios' +import { confirmPassword } from '@nextcloud/password-confirmation' +import { showError, showInfo } from '@nextcloud/dialogs' +import { loadState } from '@nextcloud/initial-state' +import { translate as t } from '@nextcloud/l10n' +import { generateUrl } from '@nextcloud/router' +import { defineStore } from 'pinia' + +import api from './api' +import logger from '../logger' + +import type { IAppstoreExApp, IDeployDaemon, IDeployOptions, IExAppStatus } from '../app-types.ts' +import Vue from 'vue' + +interface AppApiState { + apps: IAppstoreExApp[] + updateCount: number + loading: Record<string, boolean> + loadingList: boolean + statusUpdater: number | null | undefined + daemonAccessible: boolean + defaultDaemon: IDeployDaemon | null + dockerDaemons: IDeployDaemon[] +} + +export const useAppApiStore = defineStore('app-api-apps', { + state: (): AppApiState => ({ + apps: [], + updateCount: loadState('settings', 'appstoreExAppUpdateCount', 0), + loading: {}, + loadingList: false, + statusUpdater: null, + daemonAccessible: loadState('settings', 'defaultDaemonConfigAccessible', false), + defaultDaemon: loadState('settings', 'defaultDaemonConfig', null), + dockerDaemons: [], + }), + + getters: { + getLoading: (state) => (id: string) => state.loading[id] ?? false, + getAllApps: (state) => state.apps, + getUpdateCount: (state) => state.updateCount, + getDaemonAccessible: (state) => state.daemonAccessible, + getDefaultDaemon: (state) => state.defaultDaemon, + getAppStatus: (state) => (appId: string) => + state.apps.find((app) => app.id === appId)?.status || null, + getStatusUpdater: (state) => state.statusUpdater, + getInitializingOrDeployingApps: (state) => + state.apps.filter((app) => + app?.status?.action + && (app?.status?.action === 'deploy' || app.status.action === 'init' || app.status.action === 'healthcheck') + && app.status.type !== '', + ), + }, + + actions: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + appsApiFailure(error: any) { + showError(t('settings', 'An error occurred during the request. Unable to proceed.') + '<br>' + error.error.response.data.data.message, { isHTML: true }) + logger.error(error) + }, + + setLoading(id: string, value: boolean) { + Vue.set(this.loading, id, value) + }, + + setError(appId: string | string[], error: string) { + const appIds = Array.isArray(appId) ? appId : [appId] + appIds.forEach((_id) => { + const app = this.apps.find((app) => app.id === _id) + if (app) { + app.error = error + } + }) + }, + + enableApp(appId: string, daemon: IDeployDaemon, deployOptions: IDeployOptions) { + this.setLoading(appId, true) + this.setLoading('install', true) + return confirmPassword().then(() => { + + return axios.post(generateUrl(`/apps/app_api/apps/enable/${appId}/${daemon.name}`), { deployOptions }) + .then((response) => { + this.setLoading(appId, false) + this.setLoading('install', false) + + const app = this.apps.find((app) => app.id === appId) + if (app) { + if (!app.installed) { + app.installed = true + app.needsDownload = false + app.daemon = daemon + app.status = { + type: 'install', + action: 'deploy', + init: 0, + deploy: 0, + } as IExAppStatus + } + app.active = true + app.canUnInstall = false + app.removable = true + app.error = '' + } + + this.updateAppsStatus() + + return axios.get(generateUrl('apps/files')) + .then(() => { + if (response.data.update_required) { + showInfo( + t('settings', 'The app has been enabled but needs to be updated.'), + { + onClick: () => window.location.reload(), + close: false, + }, + ) + setTimeout(() => { + location.reload() + }, 5000) + } + }) + .catch(() => { + this.setError(appId, t('settings', 'Error: This app cannot be enabled because it makes the server unstable')) + }) + }) + .catch((error) => { + this.setLoading(appId, false) + this.setLoading('install', false) + this.setError(appId, error.response.data.data.message) + this.appsApiFailure({ appId, error }) + }) + }).catch(() => { + this.setLoading(appId, false) + this.setLoading('install', false) + }) + }, + + forceEnableApp(appId: string) { + this.setLoading(appId, true) + this.setLoading('install', true) + return confirmPassword().then(() => { + + return api.post(generateUrl('/apps/app_api/apps/force'), { appId }) + .then(() => { + location.reload() + }) + .catch((error) => { + this.setLoading(appId, false) + this.setLoading('install', false) + this.setError(appId, error.response.data.data.message) + this.appsApiFailure({ appId, error }) + }) + }).catch(() => { + this.setLoading(appId, false) + this.setLoading('install', false) + }) + }, + + disableApp(appId: string) { + this.setLoading(appId, true) + return confirmPassword().then(() => { + + return api.get(generateUrl(`apps/app_api/apps/disable/${appId}`)) + .then(() => { + this.setLoading(appId, false) + const app = this.apps.find((app) => app.id === appId) + if (app) { + app.active = false + if (app.removable) { + app.canUnInstall = true + } + } + return true + }) + .catch((error) => { + this.setLoading(appId, false) + this.appsApiFailure({ appId, error }) + }) + }).catch(() => { + this.setLoading(appId, false) + }) + }, + + uninstallApp(appId: string, removeData: boolean) { + this.setLoading(appId, true) + return confirmPassword().then(() => { + + return api.get(generateUrl(`/apps/app_api/apps/uninstall/${appId}?removeData=${removeData}`)) + .then(() => { + this.setLoading(appId, false) + const app = this.apps.find((app) => app.id === appId) + if (app) { + app.active = false + app.needsDownload = true + app.installed = false + app.canUnInstall = false + app.canInstall = true + app.daemon = null + app.status = {} + if (app.update !== null) { + this.updateCount-- + } + app.update = undefined + } + return true + }) + .catch((error) => { + this.setLoading(appId, false) + this.appsApiFailure({ appId, error }) + }) + }) + }, + + updateApp(appId: string) { + this.setLoading(appId, true) + this.setLoading('install', true) + return confirmPassword().then(() => { + + return api.get(generateUrl(`/apps/app_api/apps/update/${appId}`)) + .then(() => { + this.setLoading(appId, false) + this.setLoading('install', false) + const app = this.apps.find((app) => app.id === appId) + if (app) { + const version = app.update + app.update = undefined + app.version = version || app.version + app.status = { + type: 'update', + action: 'deploy', + init: 0, + deploy: 0, + } as IExAppStatus + app.error = '' + } + this.updateCount-- + this.updateAppsStatus() + return true + }) + .catch((error) => { + this.setLoading(appId, false) + this.setLoading('install', false) + this.appsApiFailure({ appId, error }) + }) + }).catch(() => { + this.setLoading(appId, false) + this.setLoading('install', false) + }) + }, + + async fetchAllApps() { + this.loadingList = true + try { + const response = await api.get(generateUrl('/apps/app_api/apps/list')) + this.apps = response.data.apps + this.loadingList = false + return true + } catch (error) { + logger.error(error as string) + showError(t('settings', 'An error occurred during the request. Unable to proceed.')) + this.loadingList = false + } + }, + + async fetchAppStatus(appId: string) { + return api.get(generateUrl(`/apps/app_api/apps/status/${appId}`)) + .then((response) => { + const app = this.apps.find((app) => app.id === appId) + if (app) { + app.status = response.data + } + const initializingOrDeployingApps = this.getInitializingOrDeployingApps + console.debug('initializingOrDeployingApps after setAppStatus', initializingOrDeployingApps) + if (initializingOrDeployingApps.length === 0) { + console.debug('clearing interval') + clearInterval(this.statusUpdater as number) + this.statusUpdater = null + } + if (Object.hasOwn(response.data, 'error') + && response.data.error !== '' + && initializingOrDeployingApps.length === 1) { + clearInterval(this.statusUpdater as number) + this.statusUpdater = null + } + }) + .catch((error) => { + this.appsApiFailure({ appId, error }) + this.apps = this.apps.filter((app) => app.id !== appId) + this.updateAppsStatus() + }) + }, + + async fetchDockerDaemons() { + try { + const { data } = await axios.get(generateUrl('/apps/app_api/daemons')) + this.defaultDaemon = data.daemons.find((daemon: IDeployDaemon) => daemon.name === data.default_daemon_config) + this.dockerDaemons = data.daemons.filter((daemon: IDeployDaemon) => daemon.accepts_deploy_id === 'docker-install') + } catch (error) { + logger.error('[app-api-store] Failed to fetch Docker daemons', { error }) + return false + } + return true + }, + + updateAppsStatus() { + clearInterval(this.statusUpdater as number) + const initializingOrDeployingApps = this.getInitializingOrDeployingApps + if (initializingOrDeployingApps.length === 0) { + return + } + this.statusUpdater = setInterval(() => { + const initializingOrDeployingApps = this.getInitializingOrDeployingApps + console.debug('initializingOrDeployingApps', initializingOrDeployingApps) + initializingOrDeployingApps.forEach(app => { + this.fetchAppStatus(app.id) + }) + }, 2000) as unknown as number + }, + }, +}) diff --git a/apps/settings/src/store/apps.js b/apps/settings/src/store/apps.js index 84310ef8e13..e0068d3892e 100644 --- a/apps/settings/src/store/apps.js +++ b/apps/settings/src/store/apps.js @@ -5,6 +5,7 @@ import api from './api.js' import Vue from 'vue' +import axios from '@nextcloud/axios' import { generateUrl } from '@nextcloud/router' import { showError, showInfo } from '@nextcloud/dialogs' import { loadState } from '@nextcloud/initial-state' @@ -16,6 +17,7 @@ const state = { updateCount: loadState('settings', 'appstoreUpdateCount', 0), loading: {}, gettingCategoriesPromise: null, + appApiEnabled: loadState('settings', 'appApiEnabled', false), } const mutations = { @@ -70,6 +72,9 @@ const mutations = { const app = state.apps.find(app => app.id === appId) app.active = true app.groups = groups + if (app.id === 'app_api') { + state.appApiEnabled = true + } }, setInstallState(state, { appId, canInstall }) { @@ -86,6 +91,9 @@ const mutations = { if (app.removable) { app.canUnInstall = true } + if (app.id === 'app_api') { + state.appApiEnabled = false + } }, uninstallApp(state, appId) { @@ -95,6 +103,9 @@ const mutations = { state.apps.find(app => app.id === appId).installed = false state.apps.find(app => app.id === appId).canUnInstall = false state.apps.find(app => app.id === appId).canInstall = true + if (appId === 'app_api') { + state.appApiEnabled = false + } }, updateApp(state, appId) { @@ -135,6 +146,9 @@ const mutations = { } const getters = { + isAppApiEnabled(state) { + return state.appApiEnabled + }, loading(state) { return function(id) { return state.loading[id] @@ -178,13 +192,13 @@ const actions = { }) // check for server health - return api.get(generateUrl('apps/files/')) + return axios.get(generateUrl('apps/files/')) .then(() => { if (response.data.update_required) { showInfo( t( 'settings', - 'The app has been enabled but needs to be updated. You will be redirected to the update page in 5 seconds.' + 'The app has been enabled but needs to be updated. You will be redirected to the update page in 5 seconds.', ), { onClick: () => window.location.reload(), diff --git a/apps/settings/src/store/authtoken.ts b/apps/settings/src/store/authtoken.ts index efd3b49e32c..daf5583ab8c 100644 --- a/apps/settings/src/store/authtoken.ts +++ b/apps/settings/src/store/authtoken.ts @@ -12,6 +12,8 @@ import { defineStore } from 'pinia' import axios from '@nextcloud/axios' import logger from '../logger' +import '@nextcloud/password-confirmation/dist/style.css' + const BASE_URL = generateUrl('/settings/personal/authtokens') const confirm = () => { diff --git a/apps/settings/src/store/index.js b/apps/settings/src/store/index.js index 910185edb51..9ecda7e37ad 100644 --- a/apps/settings/src/store/index.js +++ b/apps/settings/src/store/index.js @@ -3,16 +3,13 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import Vue from 'vue' -import Vuex, { Store } from 'vuex' +import { Store } from 'vuex' import users from './users.js' import apps from './apps.js' import settings from './users-settings.js' import oc from './oc.js' import { showError } from '@nextcloud/dialogs' -Vue.use(Vuex) - const debug = process.env.NODE_ENV !== 'production' const mutations = { diff --git a/apps/settings/src/store/users.js b/apps/settings/src/store/users.js index bd53aca6704..7e4b9c4aebb 100644 --- a/apps/settings/src/store/users.js +++ b/apps/settings/src/store/users.js @@ -8,15 +8,22 @@ import { getCapabilities } from '@nextcloud/capabilities' import { parseFileSize } from '@nextcloud/files' import { showError } from '@nextcloud/dialogs' import { generateOcsUrl, generateUrl } from '@nextcloud/router' +import { loadState } from '@nextcloud/initial-state' import axios from '@nextcloud/axios' import { GroupSorting } from '../constants/GroupManagement.ts' +import { naturalCollator } from '../utils/sorting.ts' import api from './api.js' import logger from '../logger.ts' +const usersSettings = loadState('settings', 'usersSettings', {}) + const localStorage = getBuilder('settings').persist(true).build() const defaults = { + /** + * @type {import('../views/user-types').IGroup} + */ group: { id: '', name: '', @@ -29,17 +36,21 @@ const defaults = { const state = { users: [], - groups: [], - orderBy: GroupSorting.UserCount, + groups: [ + ...(usersSettings.getSubAdminGroups ?? []), + ...(usersSettings.systemGroups ?? []), + ], + orderBy: usersSettings.sortGroups ?? GroupSorting.UserCount, minPasswordLength: 0, usersOffset: 0, usersLimit: 25, disabledUsersOffset: 0, disabledUsersLimit: 25, - userCount: 0, + userCount: usersSettings.userCount ?? 0, showConfig: { showStoragePath: localStorage.getItem('account_settings__showStoragePath') === 'true', showUserBackend: localStorage.getItem('account_settings__showUserBackend') === 'true', + showFirstLogin: localStorage.getItem('account_settings__showFirstLogin') === 'true', showLastLogin: localStorage.getItem('account_settings__showLastLogin') === 'true', showNewUserForm: localStorage.getItem('account_settings__showNewUserForm') === 'true', showLanguages: localStorage.getItem('account_settings__showLanguages') === 'true', @@ -62,21 +73,17 @@ const mutations = { setPasswordPolicyMinLength(state, length) { state.minPasswordLength = length !== '' ? length : 0 }, - initGroups(state, { groups, orderBy, userCount }) { - state.groups = groups.map(group => Object.assign({}, defaults.group, group)) - state.orderBy = orderBy - state.userCount = userCount - }, - addGroup(state, { gid, displayName }) { + /** + * @param {object} state store state + * @param {import('../views/user-types.js').IGroup} newGroup new group + */ + addGroup(state, newGroup) { try { - if (typeof state.groups.find((group) => group.id === gid) !== 'undefined') { + if (typeof state.groups.find((group) => group.id === newGroup.id) !== 'undefined') { return } // extend group to default values - const group = Object.assign({}, defaults.group, { - id: gid, - name: displayName, - }) + const group = Object.assign({}, defaults.group, newGroup) state.groups.unshift(group) } catch (e) { console.error('Can\'t create group', e) @@ -146,28 +153,37 @@ const mutations = { return } + const recentGroup = state.groups.find(group => group.id === '__nc_internal_recent') const disabledGroup = state.groups.find(group => group.id === 'disabled') switch (actionType) { case 'enable': case 'disable': disabledGroup.usercount += user.enabled ? -1 : 1 // update Disabled Users count + recentGroup.usercount += user.enabled ? 1 : -1 state.userCount += user.enabled ? 1 : -1 // update Active Users count user.groups.forEach(userGroup => { const group = state.groups.find(groupSearch => groupSearch.id === userGroup) + if (!group) { + return + } group.disabled += user.enabled ? -1 : 1 // update group disabled count }) break case 'create': + recentGroup.usercount++ state.userCount++ // increment Active Users count user.groups.forEach(userGroup => { - state.groups - .find(groupSearch => groupSearch.id === userGroup) - .usercount++ // increment group total count + const group = state.groups.find(groupSearch => groupSearch.id === userGroup) + if (!group) { + return + } + group.usercount++ // increment group total count }) break case 'remove': if (user.enabled) { + recentGroup.usercount-- state.userCount-- // decrement Active Users count user.groups.forEach(userGroup => { const group = state.groups.find(groupSearch => groupSearch.id === userGroup) @@ -181,6 +197,9 @@ const mutations = { disabledGroup.usercount-- // decrement Disabled Users count user.groups.forEach(userGroup => { const group = state.groups.find(groupSearch => groupSearch.id === userGroup) + if (!group) { + return + } group.disabled-- // decrement group disabled count }) } @@ -210,6 +229,18 @@ const mutations = { state.disabledUsersOffset = 0 }, + /** + * Reset group list + * + * @param {object} state the store state + */ + resetGroups(state) { + state.groups = [ + ...(usersSettings.getSubAdminGroups ?? []), + ...(usersSettings.systemGroups ?? []), + ] + }, + setShowConfig(state, { key, value }) { localStorage.setItem(`account_settings__${key}`, JSON.stringify(value)) state.showConfig[key] = value @@ -240,20 +271,20 @@ const getters = { getGroups(state) { return state.groups }, - getSubadminGroups(state) { - // Can't be subadmin of admin or disabled - return state.groups.filter(group => group.id !== 'admin' && group.id !== 'disabled') + getSubAdminGroups() { + return usersSettings.subAdminGroups ?? [] }, + getSortedGroups(state) { const groups = [...state.groups] if (state.orderBy === GroupSorting.UserCount) { return groups.sort((a, b) => { const numA = a.usercount - a.disabled const numB = b.usercount - b.disabled - return (numA < numB) ? 1 : (numB < numA ? -1 : a.name.localeCompare(b.name)) + return (numA < numB) ? 1 : (numB < numA ? -1 : naturalCollator.compare(a.name, b.name)) }) } else { - return groups.sort((a, b) => a.name.localeCompare(b.name)) + return groups.sort((a, b) => naturalCollator.compare(a.name, b.name)) } }, getGroupSorting(state) { @@ -384,12 +415,37 @@ const actions = { }, /** + * Get recent users with full details + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {number} options.offset List offset to request + * @param {number} options.limit List number to return from offset + * @param {string} options.search Search query + * @return {Promise<number>} + */ + async getRecentUsers(context, { offset, limit, search }) { + const url = generateOcsUrl('cloud/users/recent?offset={offset}&limit={limit}&search={search}', { offset, limit, search }) + try { + const response = await api.get(url) + const usersCount = Object.keys(response.data.ocs.data.users).length + if (usersCount > 0) { + context.commit('appendUsers', response.data.ocs.data.users) + } + return usersCount + } catch (error) { + context.commit('API_FAILURE', error) + } + }, + + /** * Get disabled users with full details * * @param {object} context store context * @param {object} options destructuring object * @param {number} options.offset List offset to request * @param {number} options.limit List number to return from offset + * @param options.search * @return {Promise<number>} */ async getDisabledUsers(context, { offset, limit, search }) { @@ -414,7 +470,7 @@ const actions = { .then((response) => { if (Object.keys(response.data.ocs.data.groups).length > 0) { response.data.ocs.data.groups.forEach(function(group) { - context.commit('addGroup', { gid: group, displayName: group }) + context.commit('addGroup', { id: group, name: group }) }) return true } @@ -481,7 +537,7 @@ const actions = { return api.requireAdmin().then((response) => { return api.post(generateOcsUrl('cloud/groups'), { groupid: gid }) .then((response) => { - context.commit('addGroup', { gid, displayName: gid }) + context.commit('addGroup', { id: gid, name: gid }) return { gid, displayName: gid } }) .catch((error) => { throw error }) @@ -612,11 +668,14 @@ const actions = { * @param {string} userid User id * @return {Promise} */ - wipeUserDevices(context, userid) { - return api.requireAdmin().then((response) => { - return api.post(generateOcsUrl('cloud/users/{userid}/wipe', { userid })) - .catch((error) => { throw error }) - }).catch((error) => context.commit('API_FAILURE', { userid, error })) + async wipeUserDevices(context, userid) { + try { + await api.requireAdmin() + return await api.post(generateOcsUrl('cloud/users/{userid}/wipe', { userid })) + } catch (error) { + context.commit('API_FAILURE', { userid, error }) + return Promise.reject(new Error('Failed to wipe user devices')) + } }, /** @@ -706,24 +765,27 @@ const actions = { * @param {string} options.value Value of the change * @return {Promise} */ - setUserData(context, { userid, key, value }) { + async setUserData(context, { userid, key, value }) { const allowedEmpty = ['email', 'displayname', 'manager'] - if (['email', 'language', 'quota', 'displayname', 'password', 'manager'].indexOf(key) !== -1) { - // We allow empty email or displayname - if (typeof value === 'string' - && ( - (allowedEmpty.indexOf(key) === -1 && value.length > 0) - || allowedEmpty.indexOf(key) !== -1 - ) - ) { - return api.requireAdmin().then((response) => { - return api.put(generateOcsUrl('cloud/users/{userid}', { userid }), { key, value }) - .then((response) => context.commit('setUserData', { userid, key, value })) - .catch((error) => { throw error }) - }).catch((error) => context.commit('API_FAILURE', { userid, error })) - } + const validKeys = ['email', 'language', 'quota', 'displayname', 'password', 'manager'] + + if (!validKeys.includes(key)) { + throw new Error('Invalid request data') + } + + // If value is empty and the key doesn't allow empty values, throw error + if (value === '' && !allowedEmpty.includes(key)) { + throw new Error('Value cannot be empty for this field') + } + + try { + await api.requireAdmin() + await api.put(generateOcsUrl('cloud/users/{userid}', { userid }), { key, value }) + return context.commit('setUserData', { userid, key, value }) + } catch (error) { + context.commit('API_FAILURE', { userid, error }) + throw error } - return Promise.reject(new Error('Invalid request data')) }, /** diff --git a/apps/settings/src/utils/appDiscoverParser.spec.ts b/apps/settings/src/utils/appDiscoverParser.spec.ts index f025b1346fb..2a631014679 100644 --- a/apps/settings/src/utils/appDiscoverParser.spec.ts +++ b/apps/settings/src/utils/appDiscoverParser.spec.ts @@ -5,7 +5,7 @@ import type { IAppDiscoverElement } from '../constants/AppDiscoverTypes' -import { describe, expect, it } from '@jest/globals' +import { describe, expect, it } from 'vitest' import { filterElements, parseApiResponse } from './appDiscoverParser' describe('App Discover API parser', () => { diff --git a/apps/settings/src/utils/handlers.js b/apps/settings/src/utils/handlers.ts index 276ab675050..edd9a6c0cff 100644 --- a/apps/settings/src/utils/handlers.js +++ b/apps/settings/src/utils/handlers.ts @@ -3,16 +3,17 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ +import type { AxiosError } from '@nextcloud/axios' import { showError } from '@nextcloud/dialogs' import { translate as t } from '@nextcloud/l10n' import logger from '../logger.ts' /** - * @param {import('axios').AxiosError} error the error - * @param {string?} message the message to display + * @param error the error + * @param message the message to display */ -export const handleError = (error, message) => { +export function handleError(error: AxiosError, message: string) { let fullMessage = '' if (message) { @@ -26,6 +27,7 @@ export const handleError = (error, message) => { fullMessage += t('settings', 'There were too many requests from your network. Retry later or contact your administrator if this is an error.') } + fullMessage = fullMessage || t('settings', 'Error') showError(fullMessage) - logger.error(fullMessage || t('Error'), error) + logger.error(fullMessage, { error }) } diff --git a/apps/settings/src/utils/sorting.ts b/apps/settings/src/utils/sorting.ts new file mode 100644 index 00000000000..88f877733cc --- /dev/null +++ b/apps/settings/src/utils/sorting.ts @@ -0,0 +1,14 @@ +/** + * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { getCanonicalLocale, getLanguage } from '@nextcloud/l10n' + +export const naturalCollator = Intl.Collator( + [getLanguage(), getCanonicalLocale()], + { + numeric: true, + usage: 'sort', + }, +) diff --git a/apps/settings/src/utils/userUtils.ts b/apps/settings/src/utils/userUtils.ts index 0d62138d7fe..7d9a516a542 100644 --- a/apps/settings/src/utils/userUtils.ts +++ b/apps/settings/src/utils/userUtils.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ +import { translate as t } from '@nextcloud/l10n' + export const unlimitedQuota = { id: 'none', label: t('settings', 'Unlimited'), @@ -16,10 +18,10 @@ export const defaultQuota = { /** * Return `true` if the logged in user does not have permissions to view the * data of `user` - * @param user - * @param user.id + * @param user The user to check + * @param user.id Id of the user */ -export const isObfuscated = (user: { id: string, [key: string]: any }) => { +export const isObfuscated = (user: { id: string, [key: string]: unknown }) => { const keys = Object.keys(user) return keys.length === 1 && keys.at(0) === 'id' } diff --git a/apps/settings/src/utils/validate.js b/apps/settings/src/utils/validate.js index d13ad52b026..0f76f4e6dc5 100644 --- a/apps/settings/src/utils/validate.js +++ b/apps/settings/src/utils/validate.js @@ -9,7 +9,7 @@ * TODO add nice validation errors for Profile page settings modal */ -import { VALIDATE_EMAIL_REGEX } from '../constants/AccountPropertyConstants.js' +import { VALIDATE_EMAIL_REGEX } from '../constants/AccountPropertyConstants.ts' /** * Validate the email input diff --git a/apps/settings/src/views/AdminSettingsSharing.vue b/apps/settings/src/views/AdminSettingsSharing.vue index 8871beba0d9..d26fba6c8fa 100644 --- a/apps/settings/src/views/AdminSettingsSharing.vue +++ b/apps/settings/src/views/AdminSettingsSharing.vue @@ -16,13 +16,12 @@ </template> <script lang="ts"> -import { - NcNoteCard, - NcSettingsSection, -} from '@nextcloud/vue' import { loadState } from '@nextcloud/initial-state' -import { translate as t } from '@nextcloud/l10n' +import { t } from '@nextcloud/l10n' import { defineComponent } from 'vue' + +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import AdminSettingsSharingForm from '../components/AdminSettingsSharingForm.vue' export default defineComponent({ diff --git a/apps/settings/src/views/AppStore.vue b/apps/settings/src/views/AppStore.vue index 614cb9d2837..82c8c31e75d 100644 --- a/apps/settings/src/views/AppStore.vue +++ b/apps/settings/src/views/AppStore.vue @@ -23,20 +23,22 @@ <script setup lang="ts"> import { translate as t } from '@nextcloud/l10n' -import { computed, getCurrentInstance, onBeforeMount, watchEffect } from 'vue' +import { computed, getCurrentInstance, onBeforeMount, onBeforeUnmount, watchEffect } from 'vue' import { useRoute } from 'vue-router/composables' import { useAppsStore } from '../store/apps-store' import { APPS_SECTION_ENUM } from '../constants/AppsConstants' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' -import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' +import NcAppContent from '@nextcloud/vue/components/NcAppContent' +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' import AppList from '../components/AppList.vue' import AppStoreDiscoverSection from '../components/AppStoreDiscover/AppStoreDiscoverSection.vue' +import { useAppApiStore } from '../store/app-api-store.ts' const route = useRoute() const store = useAppsStore() +const appApiStore = useAppApiStore() /** * ID of the current active category, default is `discover` @@ -60,6 +62,14 @@ onBeforeMount(() => { (instance?.proxy as any).$store.dispatch('getCategories', { shouldRefetchCategories: true }); // eslint-disable-next-line @typescript-eslint/no-explicit-any (instance?.proxy as any).$store.dispatch('getAllApps') + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((instance?.proxy as any).$store.getters.isAppApiEnabled) { + appApiStore.fetchAllApps() + appApiStore.updateAppsStatus() + } +}) +onBeforeUnmount(() => { + clearInterval(appApiStore.getStatusUpdater) }) </script> diff --git a/apps/settings/src/views/AppStoreNavigation.vue b/apps/settings/src/views/AppStoreNavigation.vue index 98aee80a802..83191baac40 100644 --- a/apps/settings/src/views/AppStoreNavigation.vue +++ b/apps/settings/src/views/AppStoreNavigation.vue @@ -6,7 +6,8 @@ <!-- Categories & filters --> <NcAppNavigation :aria-label="t('settings', 'Apps')"> <template #list> - <NcAppNavigationItem id="app-category-discover" + <NcAppNavigationItem v-if="appstoreEnabled" + id="app-category-discover" :to="{ name: 'apps-category', params: { category: 'discover'} }" :name="APPS_SECTION_ENUM.discover"> <template #icon> @@ -34,12 +35,12 @@ <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.disabled" /> </template> </NcAppNavigationItem> - <NcAppNavigationItem v-if="updateCount > 0" + <NcAppNavigationItem v-if="store.updateCount > 0" id="app-category-updates" :to="{ name: 'apps-category', params: { category: 'updates' } }" :name="APPS_SECTION_ENUM.updates"> <template #counter> - <NcCounterBubble>{{ updateCount }}</NcCounterBubble> + <NcCounterBubble>{{ store.updateCount }}</NcCounterBubble> </template> <template #icon> <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.updates" /> @@ -104,16 +105,15 @@ import { computed, onBeforeMount } from 'vue' import { APPS_SECTION_ENUM } from '../constants/AppsConstants' import { useAppsStore } from '../store/apps-store' -import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js' -import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' -import NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer.js' -import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' +import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation' +import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem' +import NcAppNavigationSpacer from '@nextcloud/vue/components/NcAppNavigationSpacer' +import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' import APPSTORE_CATEGORY_ICONS from '../constants/AppstoreCategoryIcons.ts' -const updateCount = loadState<number>('settings', 'appstoreUpdateCount', 0) const appstoreEnabled = loadState<boolean>('settings', 'appstoreEnabled', true) const developerDocsUrl = loadState<string>('settings', 'appstoreDeveloperDocs', '') diff --git a/apps/settings/src/views/AppStoreSidebar.vue b/apps/settings/src/views/AppStoreSidebar.vue index 5811b26b56e..b4041066c67 100644 --- a/apps/settings/src/views/AppStoreSidebar.vue +++ b/apps/settings/src/views/AppStoreSidebar.vue @@ -26,6 +26,7 @@ <!-- Featured/Supported badges --> <div class="app-sidebar__badges"> <AppLevelBadge :level="app.level" /> + <AppDaemonBadge v-if="app.app_api && app.daemon" :daemon="app.daemon" /> <AppScore v-if="hasRating" :score="rating" /> </div> </template> @@ -34,6 +35,7 @@ <AppDescriptionTab :app="app" /> <AppDetailsTab :app="app" /> <AppReleasesTab :app="app" /> + <AppDeployDaemonTab :app="app" /> </NcAppSidebar> </template> @@ -43,21 +45,36 @@ import { computed, onMounted, ref, watch } from 'vue' import { useRoute, useRouter } from 'vue-router/composables' import { useAppsStore } from '../store/apps-store' -import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import AppScore from '../components/AppList/AppScore.vue' import AppDescriptionTab from '../components/AppStoreSidebar/AppDescriptionTab.vue' import AppDetailsTab from '../components/AppStoreSidebar/AppDetailsTab.vue' import AppReleasesTab from '../components/AppStoreSidebar/AppReleasesTab.vue' +import AppDeployDaemonTab from '../components/AppStoreSidebar/AppDeployDaemonTab.vue' import AppLevelBadge from '../components/AppList/AppLevelBadge.vue' +import AppDaemonBadge from '../components/AppList/AppDaemonBadge.vue' import { useAppIcon } from '../composables/useAppIcon.ts' +import { useStore } from '../store' +import { useAppApiStore } from '../store/app-api-store.ts' const route = useRoute() const router = useRouter() const store = useAppsStore() +const appApiStore = useAppApiStore() +const legacyStore = useStore() const appId = computed(() => route.params.id ?? '') -const app = computed(() => store.getAppById(appId.value)!) +const app = computed(() => { + if (legacyStore.getters.isAppApiEnabled) { + const exApp = appApiStore.getAllApps + .find((app) => app.id === appId.value) ?? null + if (exApp) { + return exApp + } + } + return store.getAppById(appId.value)! +}) const hasRating = computed(() => app.value.appstoreData?.ratingNumOverall > 5) const rating = computed(() => app.value.appstoreData?.ratingNumRecent > 5 ? app.value.appstoreData.ratingRecent @@ -69,7 +86,15 @@ const { appIcon } = useAppIcon(app) /** * The second text line shown on the sidebar */ -const licenseText = computed(() => app.value ? t('settings', 'Version {version}, {license}-licensed', { version: app.value.version, license: app.value.licence.toString().toUpperCase() }) : '') +const licenseText = computed(() => { + if (!app.value) { + return '' + } + if (app.value.license !== '') { + return t('settings', 'Version {version}, {license}-licensed', { version: app.value.version, license: app.value.licence.toString().toUpperCase() }) + } + return t('settings', 'Version {version}', { version: app.value.version }) +}) const activeTab = ref('details') watch([app], () => { activeTab.value = 'details' }) diff --git a/apps/settings/src/views/SettingsApp.vue b/apps/settings/src/views/SettingsApp.vue index e8231333a68..7e135175ef6 100644 --- a/apps/settings/src/views/SettingsApp.vue +++ b/apps/settings/src/views/SettingsApp.vue @@ -12,5 +12,5 @@ </template> <script setup lang="ts"> -import NcContent from '@nextcloud/vue/dist/Components/NcContent.js' +import NcContent from '@nextcloud/vue/components/NcContent' </script> diff --git a/apps/settings/src/views/UserManagement.vue b/apps/settings/src/views/UserManagement.vue index 4c1797d8b90..9ab76f921a0 100644 --- a/apps/settings/src/views/UserManagement.vue +++ b/apps/settings/src/views/UserManagement.vue @@ -12,9 +12,10 @@ <script> import { translate as t } from '@nextcloud/l10n' +import { emit } from '@nextcloud/event-bus' import { defineComponent } from 'vue' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' +import NcAppContent from '@nextcloud/vue/components/NcAppContent' import UserList from '../components/UserList.vue' export default defineComponent({ @@ -35,7 +36,7 @@ export default defineComponent({ computed: { pageHeading() { if (this.selectedGroupDecoded === null) { - return t('settings', 'Active accounts') + return t('settings', 'All accounts') } const matchHeading = { admin: t('settings', 'Admins'), @@ -54,11 +55,6 @@ export default defineComponent({ }, beforeMount() { - this.$store.commit('initGroups', { - groups: this.$store.getters.getServerData.groups, - orderBy: this.$store.getters.getServerData.sortGroups, - userCount: this.$store.getters.getServerData.userCount, - }) this.$store.dispatch('getPasswordPolicyMinLength') }, @@ -69,6 +65,7 @@ export default defineComponent({ window.OCA.Settings.UserList = window.OCA.Settings.UserList ?? {} // and add the registerAction method window.OCA.Settings.UserList.registerAction = this.registerAction + emit('settings:user-management:loaded') }, methods: { diff --git a/apps/settings/src/views/UserManagementNavigation.vue b/apps/settings/src/views/UserManagementNavigation.vue index 0c98784135b..95a12ac7c51 100644 --- a/apps/settings/src/views/UserManagementNavigation.vue +++ b/apps/settings/src/views/UserManagementNavigation.vue @@ -3,7 +3,8 @@ - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <NcAppNavigation :aria-label="t('settings', 'Account management')"> + <NcAppNavigation class="account-management__navigation" + :aria-label="t('settings', 'Account management')"> <NcAppNavigationNew button-id="new-user-button" :text="t('settings','New account')" @click="showNewUserMenu" @@ -18,10 +19,10 @@ data-cy-users-settings-navigation-groups="system"> <NcAppNavigationItem id="everyone" :exact="true" - :name="t('settings', 'Active accounts')" + :name="t('settings', 'All accounts')" :to="{ name: 'users' }"> <template #icon> - <NcIconSvgWrapper :path="mdiAccount" /> + <NcIconSvgWrapper :path="mdiAccountOutline" /> </template> <template #counter> <NcCounterBubble v-if="userCount" :type="!selectedGroupDecoded ? 'highlighted' : undefined"> @@ -30,13 +31,13 @@ </template> </NcAppNavigationItem> - <NcAppNavigationItem v-if="isAdmin" + <NcAppNavigationItem v-if="settings.isAdmin" id="admin" :exact="true" :name="t('settings', 'Admins')" :to="{ name: 'group', params: { selectedGroup: 'admin' } }"> <template #icon> - <NcIconSvgWrapper :path="mdiShieldAccount" /> + <NcIconSvgWrapper :path="mdiShieldAccountOutline" /> </template> <template #counter> <NcCounterBubble v-if="adminGroup && adminGroup.count > 0" @@ -46,6 +47,22 @@ </template> </NcAppNavigationItem> + <NcAppNavigationItem v-if="isAdminOrDelegatedAdmin" + id="recent" + :exact="true" + :name="t('settings', 'Recently active')" + :to="{ name: 'group', params: { selectedGroup: '__nc_internal_recent' } }"> + <template #icon> + <NcIconSvgWrapper :path="mdiHistory" /> + </template> + <template #counter> + <NcCounterBubble v-if="recentGroup?.usercount" + :type="selectedGroupDecoded === '__nc_internal_recent' ? 'highlighted' : undefined"> + {{ recentGroup.usercount }} + </NcCounterBubble> + </template> + </NcAppNavigationItem> + <!-- Hide the disabled if none, if we don't have the data (-1) show it --> <NcAppNavigationItem v-if="disabledGroup && (disabledGroup.usercount > 0 || disabledGroup.usercount === -1)" id="disabled" @@ -53,7 +70,7 @@ :name="t('settings', 'Disabled accounts')" :to="{ name: 'group', params: { selectedGroup: 'disabled' } }"> <template #icon> - <NcIconSvgWrapper :path="mdiAccountOff" /> + <NcIconSvgWrapper :path="mdiAccountOffOutline" /> </template> <template v-if="disabledGroup.usercount > 0" #counter> <NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined"> @@ -63,49 +80,14 @@ </NcAppNavigationItem> </NcAppNavigationList> - <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 #actionsTriggerIcon> - <NcLoadingIcon v-if="loadingAddGroup" /> - <NcIconSvgWrapper v-else :path="mdiPlus" /> - </template> - <template #actions> - <NcActionText> - <template #icon> - <AccountGroup :size="20" /> - </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> - - <NcAppNavigationList class="account-management__group-list" data-cy-users-settings-navigation-groups="custom"> - <GroupListItem v-for="group in userGroups" - :id="group.id" - :key="group.id" - :active="selectedGroupDecoded === group.id" - :name="group.title" - :count="group.count" /> - </NcAppNavigationList> + <AppNavigationGroupList /> <template #footer> <NcButton class="account-management__settings-toggle" type="tertiary" @click="isDialogOpen = true"> <template #icon> - <NcIconSvgWrapper :path="mdiCog" /> + <NcIconSvgWrapper :path="mdiCogOutline" /> </template> {{ t('settings', 'Account management settings') }} </NcButton> @@ -115,31 +97,26 @@ </template> <script setup lang="ts"> -import { mdiAccount, mdiAccountOff, mdiCog, mdiPlus, mdiShieldAccount } from '@mdi/js' -import { showError } from '@nextcloud/dialogs' +import { mdiAccountOutline, mdiAccountOffOutline, mdiCogOutline, mdiPlus, mdiShieldAccountOutline, mdiHistory } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' import { computed, ref } from 'vue' -import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js' -import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' -import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js' -import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js' -import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' -import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js' -import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' - -import GroupListItem from '../components/GroupListItem.vue' +import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation' +import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem' +import NcAppNavigationList from '@nextcloud/vue/components/NcAppNavigationList' +import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' + import UserSettingsDialog from '../components/Users/UserSettingsDialog.vue' +import AppNavigationGroupList from '../components/AppNavigationGroupList.vue' + import { useStore } from '../store' -import { useRoute, useRouter } from 'vue-router/composables' +import { useRoute } from 'vue-router/composables' import { useFormatGroups } from '../composables/useGroupsNavigation' const route = useRoute() -const router = useRouter() const store = useStore() /** State of the 'new-account' dialog */ @@ -154,48 +131,12 @@ const selectedGroupDecoded = computed(() => selectedGroup.value ? decodeURICompo const userCount = computed(() => store.getters.getUserCount) /** All available groups */ const groups = computed(() => store.getters.getSortedGroups) -const { adminGroup, disabledGroup, userGroups } = useFormatGroups(groups) - -/** True if the current user is an administrator */ -const isAdmin = computed(() => store.getters.getServerData.isAdmin) +const { adminGroup, recentGroup, disabledGroup } = useFormatGroups(groups) -/** 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('') - -/** - * 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), - }, - }) - newGroupName.value = '' - } catch { - showError(t('settings', 'Failed to create group')) - } - loadingAddGroup.value = false -} +/** 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) /** * Open the new-user form dialog @@ -209,7 +150,12 @@ function showNewUserMenu() { </script> <style scoped lang="scss"> -.account-management{ +.account-management { + &__navigation { + :deep(.app-navigation__body) { + will-change: scroll-position; + } + } &__system-list { height: auto !important; overflow: visible !important; diff --git a/apps/settings/src/views/user-types.d.ts b/apps/settings/src/views/user-types.d.ts index b8cd30e53d9..21c63a13b03 100644 --- a/apps/settings/src/views/user-types.d.ts +++ b/apps/settings/src/views/user-types.d.ts @@ -3,7 +3,14 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ export interface IGroup { + /** + * Id + */ id: string + + /** + * Display name + */ name: string /** @@ -15,4 +22,14 @@ export interface IGroup { * Number of disabled users */ disabled: number + + /** + * True if users can be added to this group + */ + canAdd?: boolean + + /** + * True if users can be removed from this group + */ + canRemove?: boolean } diff --git a/apps/settings/src/webpack.shim.d.ts b/apps/settings/src/webpack.shim.d.ts index ab01418d29b..3d330bb3128 100644 --- a/apps/settings/src/webpack.shim.d.ts +++ b/apps/settings/src/webpack.shim.d.ts @@ -2,4 +2,4 @@ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ -declare let __webpack_nonce__: string +declare let __webpack_nonce__: string | undefined |