diff options
Diffstat (limited to 'apps/settings/src')
146 files changed, 18586 insertions, 0 deletions
diff --git a/apps/settings/src/admin-settings-sharing.ts b/apps/settings/src/admin-settings-sharing.ts new file mode 100644 index 00000000000..ae73cbd519a --- /dev/null +++ b/apps/settings/src/admin-settings-sharing.ts @@ -0,0 +1,12 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import Vue from 'vue' +import AdminSettingsSharing from './views/AdminSettingsSharing.vue' + +export default new Vue({ + name: 'AdminSettingsSharingSection', + el: '#vue-admin-settings-sharing', + render: (h) => h(AdminSettingsSharing), +}) diff --git a/apps/settings/src/admin.js b/apps/settings/src/admin.js new file mode 100644 index 00000000000..66848162d28 --- /dev/null +++ b/apps/settings/src/admin.js @@ -0,0 +1,153 @@ +/** + * 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(generateUrl('/settings/admin/log/level'), { level: $(this).val() }, () => { + OC.Log.reload() + }) + }) + + $('#mail_smtpauth').change(function() { + if (!this.checked) { + $('#mail_credentials').addClass('hidden') + } else { + $('#mail_credentials').removeClass('hidden') + } + }) + + $('#mail_smtpmode').change(function() { + if ($(this).val() !== 'smtp') { + $('#setting_smtpauth').addClass('hidden') + $('#setting_smtphost').addClass('hidden') + $('#mail_smtpsecure_label').addClass('hidden') + $('#mail_smtpsecure').addClass('hidden') + $('#mail_credentials').addClass('hidden') + $('#mail_sendmailmode_label, #mail_sendmailmode').removeClass('hidden') + } else { + $('#setting_smtpauth').removeClass('hidden') + $('#setting_smtphost').removeClass('hidden') + $('#mail_smtpsecure_label').removeClass('hidden') + $('#mail_smtpsecure').removeClass('hidden') + if ($('#mail_smtpauth').is(':checked')) { + $('#mail_credentials').removeClass('hidden') + } + $('#mail_sendmailmode_label, #mail_sendmailmode').addClass('hidden') + } + }) + + const changeEmailSettings = function() { + if (OC.PasswordConfirmation.requiresPasswordConfirmation()) { + OC.PasswordConfirmation.requirePasswordConfirmation(changeEmailSettings) + return + } + + OC.msg.startSaving('#mail_settings_msg') + axios.post(generateUrl('/settings/admin/mailsettings'), $('#mail_general_settings_form').serialize()) + .then(() => { + OC.msg.finishedSuccess('#mail_settings_msg', t('settings', 'Saved')) + }).catch((error) => { + OC.msg.finishedError('#mail_settings_msg', error) + }) + } + + const toggleEmailCredentials = function() { + if (OC.PasswordConfirmation.requiresPasswordConfirmation()) { + OC.PasswordConfirmation.requirePasswordConfirmation(toggleEmailCredentials) + return + } + + OC.msg.startSaving('#mail_settings_msg') + axios.post(generateUrl('/settings/admin/mailsettings/credentials'), $('#mail_credentials_settings').serialize()) + .then(() => { + OC.msg.finishedSuccess('#mail_settings_msg', t('settings', 'Saved')) + }).catch((error) => { + OC.msg.finishedError('#mail_settings_msg', error) + }) + } + + $('#mail_general_settings_form').change(changeEmailSettings) + $('#mail_credentials_settings_submit').click(toggleEmailCredentials) + $('#mail_smtppassword').click(() => { + if (this.type === 'text' && this.value === '********') { + this.type = 'password' + this.value = '' + } + }) + + $('#sendtestemail').click((event) => { + event.preventDefault() + OC.msg.startAction('#sendtestmail_msg', t('settings', 'Sending…')) + + axios.post(generateUrl('/settings/admin/mailtest')) + .then(() => { + OC.msg.finishedSuccess('#sendtestmail_msg', t('settings', 'Email sent')) + }).catch((error) => { + OC.msg.finishedError('#sendtestmail_msg', error) + }) + }) + + const setupChecks = () => { + // run setup checks then gather error messages + $.when( + OC.SetupChecks.checkSetup(), + ).then((messages) => { + const $el = $('#postsetupchecks') + $('#security-warning-state-loading').addClass('hidden') + + const $errorsEl = $el.find('.errors') + const $warningsEl = $el.find('.warnings') + const $infoEl = $el.find('.info') + + for (let i = 0; i < messages.length; i++) { + switch (messages[i].type) { + case OC.SetupChecks.MESSAGE_TYPE_INFO: + $infoEl.append('<li>' + messages[i].msg + '</li>') + break + case OC.SetupChecks.MESSAGE_TYPE_WARNING: + $warningsEl.append('<li>' + messages[i].msg + '</li>') + break + case OC.SetupChecks.MESSAGE_TYPE_ERROR: + default: + $errorsEl.append('<li>' + messages[i].msg + '</li>') + } + } + + let hasErrors = false + let hasWarnings = false + + if ($errorsEl.find('li').length > 0) { + $errorsEl.removeClass('hidden') + hasErrors = true + } + if ($warningsEl.find('li').length > 0) { + $warningsEl.removeClass('hidden') + hasWarnings = true + } + if ($infoEl.find('li').length > 0) { + $infoEl.removeClass('hidden') + } + + if (hasErrors || hasWarnings) { + $('#postsetupchecks-hint').removeClass('hidden') + if (hasErrors) { + $('#security-warning-state-failure').removeClass('hidden') + } else { + $('#security-warning-state-warning').removeClass('hidden') + } + } else { + $('#security-warning-state-ok').removeClass('hidden') + } + }) + } + + if (document.getElementById('security-warning') !== null) { + setupChecks() + } +}) diff --git a/apps/settings/src/app-types.ts b/apps/settings/src/app-types.ts new file mode 100644 index 00000000000..0c448ca907c --- /dev/null +++ b/apps/settings/src/app-types.ts @@ -0,0 +1,118 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +export interface IAppstoreCategory { + /** + * The category ID + */ + id: string + /** + * The display name (can be localized) + */ + displayName: string + /** + * Inline SVG path + */ + icon: string +} + +export interface IAppstoreAppRelease { + version: string + translations: { + [key: string]: { + changelog: string + } + } +} + +export interface IAppstoreApp { + id: string + name: string + summary: string + description: string + licence: string + author: string[] | Record<string, string> + level: number + version: string + category: string|string[] + + preview?: string + screenshot?: string + + app_api: boolean + active: boolean + internal: boolean + removable: boolean + installed: boolean + canInstall: 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/apps.js b/apps/settings/src/apps.js new file mode 100644 index 00000000000..b6431c943b8 --- /dev/null +++ b/apps/settings/src/apps.js @@ -0,0 +1,10 @@ +/** + * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import rebuildNavigation from './service/rebuild-navigation.js' + +window.OC.Settings = window.OC.Settings || {} +window.OC.Settings.Apps = window.OC.Settings.Apps || { + rebuildNavigation, +} diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue new file mode 100644 index 00000000000..0d3e9154bb9 --- /dev/null +++ b/apps/settings/src/components/AdminAI.vue @@ -0,0 +1,257 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <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"> + <div v-for="(providerClass, i) in settings['ai.translation_provider_preferences']" :key="providerClass" class="draggable__item"> + <DragVerticalIcon /> <span class="draggable__number">{{ i + 1 }}</span> {{ translationProviders.find(p => p.class === providerClass)?.name }} + <NcButton aria-label="Move up" type="tertiary" @click="moveUp(i)"> + <template #icon> + <ArrowUpIcon /> + </template> + </NcButton> + <NcButton aria-label="Move down" type="tertiary" @click="moveDown(i)"> + <template #icon> + <ArrowDownIcon /> + </template> + </NcButton> + </div> + </draggable> + </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"> + <NcCheckboxRadioSwitch :key="provider.id" + :checked.sync="settings['ai.text2image_provider']" + :value="provider.id" + name="text2image_provider" + type="radio" + @update:checked="saveChanges"> + {{ provider.name }} + </NcCheckboxRadioSwitch> + </template> + <template v-if="!hasText2ImageProviders"> + <NcNoteCard type="info"> + {{ t('settings', 'None of your currently installed apps provide image generation functionality') }} + </NcNoteCard> + </template> + </NcSettingsSection> + <NcSettingsSection :name="t('settings', 'Text processing')" + :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:') }} {{ 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"> + <template #option="{label}"> + {{ textProcessingProviders.find(p => p.class === label)?.name }} + </template> + <template #selected-option="{label}"> + {{ textProcessingProviders.find(p => p.class === label)?.name }} + </template> + </NcSelect> + <p> </p> + </div> + </template> + <template v-if="tpTaskTypes.length === 0"> + <NcNoteCard type="info"> + <!-- 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> + </div> +</template> + +<script> +import axios from '@nextcloud/axios' +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 { + name: 'AdminAI', + components: { + NcCheckboxRadioSwitch, + NcSettingsSection, + NcSelect, + draggable, + DragVerticalIcon, + ArrowDownIcon, + ArrowUpIcon, + NcButton, + NcNoteCard, + }, + data() { + return { + loading: false, + dirty: false, + groups: [], + loadingGroups: false, + sttProviders: loadState('settings', 'ai-stt-providers'), + translationProviders: loadState('settings', 'ai-translation-providers'), + 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: { + hasTextProcessing() { + return Object.keys(this.settings['ai.textprocessing_provider_preferences']).length > 0 && Array.isArray(this.textProcessingTaskTypes) + }, + tpTaskTypes() { + 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) { + this.settings['ai.translation_provider_preferences'].splice( + Math.min(i - 1, 0), + 0, + ...this.settings['ai.translation_provider_preferences'].splice(i, 1), + ) + this.saveChanges() + }, + moveDown(i) { + this.settings['ai.translation_provider_preferences'].splice( + i + 1, + 0, + ...this.settings['ai.translation_provider_preferences'].splice(i, 1), + ) + this.saveChanges() + }, + async saveChanges() { + this.loading = true + await nextTick() + const data = { settings: this.settings } + try { + await axios.put(generateUrl('/settings/api/admin/ai'), data) + } catch (err) { + console.error('could not save changes', err) + } + this.loading = false + }, + getTextProcessingTaskType(type) { + if (!Array.isArray(this.textProcessingTaskTypes)) { + return null + } + return this.textProcessingTaskTypes.find(taskType => taskType.class === type) + }, + }, +} +</script> +<style scoped> +.draggable__item { + margin-bottom: 5px; + display: flex; + align-items: center; +} + +.draggable__item, +.draggable__item * { + cursor: grab; +} + +.draggable__number { + border-radius: 20px; + border: 2px solid var(--color-primary-element); + color: var(--color-primary-element); + padding: 0px 7px; + 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 new file mode 100644 index 00000000000..521ff8f0155 --- /dev/null +++ b/apps/settings/src/components/AdminDelegating.vue @@ -0,0 +1,47 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcSettingsSection :name="t('settings', 'Administration privileges')" + :description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')" + :doc-url="authorizedSettingsDocLink"> + <div class="setting-list"> + <div v-for="setting in availableSettings" :key="setting.class"> + <label :for="setting.id">{{ setting.sectionName }}</label> + <GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" /> + </div> + </div> + </NcSettingsSection> +</template> + +<script> +import GroupSelect from './AdminDelegation/GroupSelect.vue' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' +import { loadState } from '@nextcloud/initial-state' + +export default { + name: 'AdminDelegating', + components: { + GroupSelect, + NcSettingsSection, + }, + data() { + return { + availableSettings: loadState('settings', 'available-settings'), + availableGroups: loadState('settings', 'available-groups'), + authorizedGroups: loadState('settings', 'authorized-groups'), + authorizedSettingsDocLink: loadState('settings', 'authorized-settings-doc-link'), + } + }, +} +</script> + +<style lang="scss" scoped> +label { + display: block; + font-size: 16px; + margin: 12px 0; + color: var(--color-text-light); +} +</style> diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue new file mode 100644 index 00000000000..28d3deb0afa --- /dev/null +++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue @@ -0,0 +1,76 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcSelect v-model="selected" + :input-id="setting.id" + class="group-select" + :placeholder="t('settings', 'None')" + label="displayName" + :options="availableGroups" + :multiple="true" + :close-on-select="false" /> +</template> + +<script> +import NcSelect from '@nextcloud/vue/components/NcSelect' +import { generateUrl } from '@nextcloud/router' +import axios from '@nextcloud/axios' +import { showError } from '@nextcloud/dialogs' +import logger from '../../logger.ts' + +export default { + name: 'GroupSelect', + components: { + NcSelect, + }, + props: { + availableGroups: { + type: Array, + default: () => [], + }, + setting: { + type: Object, + required: true, + }, + authorizedGroups: { + type: Array, + required: true, + }, + }, + data() { + return { + selected: this.authorizedGroups + .filter((group) => group.class === this.setting.class) + .map((groupToMap) => this.availableGroups.find((group) => group.gid === groupToMap.group_id)) + .filter((group) => group !== undefined), + } + }, + watch: { + selected() { + this.saveGroups() + }, + }, + methods: { + async saveGroups() { + const data = { + newGroups: this.selected, + class: this.setting.class, + } + try { + await axios.post(generateUrl('/apps/settings/') + '/settings/authorizedgroups/saveSettings', data) + } catch (e) { + showError(t('settings', 'Unable to modify setting')) + logger.error('Unable to modify setting', e) + } + }, + }, +} +</script> + +<style lang="scss"> +.group-select { + width: 100%; +} +</style> diff --git a/apps/settings/src/components/AdminSettingsSharingForm.vue b/apps/settings/src/components/AdminSettingsSharingForm.vue new file mode 100644 index 00000000000..b0e142d8480 --- /dev/null +++ b/apps/settings/src/components/AdminSettingsSharingForm.vue @@ -0,0 +1,405 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <form class="sharing"> + <NcCheckboxRadioSwitch aria-controls="settings-sharing-api settings-sharing-api-settings settings-sharing-default-permissions settings-sharing-privary-related" + type="switch" + :checked.sync="settings.enabled"> + {{ t('settings', 'Allow apps to use the Share API') }} + </NcCheckboxRadioSwitch> + + <div v-show="settings.enabled" id="settings-sharing-api-settings" class="sharing__sub-section"> + <NcCheckboxRadioSwitch :checked.sync="settings.allowResharing"> + {{ t('settings', 'Allow resharing') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked.sync="settings.allowGroupSharing"> + {{ t('settings', 'Allow sharing with groups') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked.sync="settings.onlyShareWithGroupMembers"> + {{ t('settings', 'Restrict users to only share with users in their groups') }} + </NcCheckboxRadioSwitch> + <div v-show="settings.onlyShareWithGroupMembers" id="settings-sharing-api-excluded-groups" class="sharing__labeled-entry sharing__input"> + <label for="settings-sharing-only-group-members-excluded-groups">{{ t('settings', 'Ignore the following groups when checking group membership') }}</label> + <NcSettingsSelectGroup id="settings-sharing-only-group-members-excluded-groups" + v-model="settings.onlyShareWithGroupMembersExcludeGroupList" + :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"> + <NcCheckboxRadioSwitch type="switch" + aria-controls="settings-sharing-api-public-link" + :checked.sync="settings.allowLinks"> + {{ t('settings', 'Allow users to share via link and emails') }} + </NcCheckboxRadioSwitch> + <fieldset v-show="settings.allowLinks" id="settings-sharing-api-public-link" class="sharing__sub-section"> + <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.enforceLinksPasswordExcludedGroupsEnabled" class="sharing__labeled-entry sharing__input"> + <span>{{ t('settings', 'Exclude groups from password requirements') }}</span> + <NcSettingsSelectGroup v-model="settings.enforceLinksPasswordExcludedGroups" + style="width: 100%" + :disabled="!settings.enforceLinksPassword || !settings.enableLinkPasswordByDefault" /> + </label> + <label class="sharing__labeled-entry sharing__input"> + <span>{{ t('settings', 'Exclude groups from creating link shares') }}</span> + <NcSettingsSelectGroup v-model="settings.allowLinksExcludeGroups" + :label="t('settings', 'Exclude groups from creating link shares')" + style="width: 100%" /> + </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"> + {{ t('settings', 'Allow sharing for everyone (default)') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked.sync="settings.excludeGroups" + 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"> + {{ t('settings', 'Limit sharing to some groups') }} + </NcCheckboxRadioSwitch> + <div v-show="settings.excludeGroups !== 'no'" class="sharing__labeled-entry sharing__input"> + <NcSettingsSelectGroup id="settings-sharing-excluded-groups" + v-model="settings.excludeGroupsList" + aria-describedby="settings-sharing-excluded-groups-desc" + :label="settings.excludeGroups === 'allow' ? t('settings', 'Groups allowed to share') : t('settings', 'Groups excluded from sharing')" + :disabled="settings.excludeGroups === 'no'" + style="width: 100%" /> + <em id="settings-sharing-excluded-groups-desc">{{ t('settings', 'Not allowed groups will still be able to receive shares, but not to initiate them.') }}</em> + </div> + </div> + + <NcCheckboxRadioSwitch type="switch" + aria-controls="settings-sharing-api-expiration" + :checked.sync="settings.defaultInternalExpireDate"> + {{ 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"> + {{ t('settings', 'Enforce expiration date') }} + </NcCheckboxRadioSwitch> + <NcTextField type="number" + class="sharing__input" + :label="t('settings', 'Default expiration time of new shares in days')" + :placeholder="t('settings', 'Expire shares after x days')" + :value.sync="settings.internalExpireAfterNDays" /> + </fieldset> + + <NcCheckboxRadioSwitch type="switch" + aria-controls="settings-sharing-remote-api-expiration" + :checked.sync="settings.defaultRemoteExpireDate"> + {{ t('settings', 'Set default expiration date for shares to other servers') }} + </NcCheckboxRadioSwitch> + <fieldset v-show="settings.defaultRemoteExpireDate" id="settings-sharing-remote-api-expiration" class="sharing__sub-section"> + <NcCheckboxRadioSwitch :checked.sync="settings.enforceRemoteExpireDate"> + {{ t('settings', 'Enforce expiration date for remote shares') }} + </NcCheckboxRadioSwitch> + <NcTextField type="number" + class="sharing__input" + :label="t('settings', 'Default expiration time of remote shares in days')" + :placeholder="t('settings', 'Expire remote shares after x days')" + :value.sync="settings.remoteExpireAfterNDays" /> + </fieldset> + + <NcCheckboxRadioSwitch type="switch" + aria-controls="settings-sharing-api-api-expiration" + :checked.sync="settings.defaultExpireDate" + :disabled="!settings.allowLinks"> + {{ t('settings', 'Set default expiration date for shares via link or mail') }} + </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 link or mail shares') }} + </NcCheckboxRadioSwitch> + <NcTextField type="number" + class="sharing__input" + :label="t('settings', 'Default expiration time of shares in days')" + :placeholder="t('settings', 'Expire shares after x days')" + :value.sync="settings.expireAfterNDays" /> + </fieldset> + </div> + + <div v-show="settings.enabled" id="settings-sharing-privary-related" class="sharing__section"> + <h3>{{ t('settings', 'Privacy settings for sharing') }}</h3> + + <NcCheckboxRadioSwitch type="switch" + aria-controls="settings-sharing-privacy-user-enumeration" + :checked.sync="settings.allowShareDialogUserEnumeration"> + {{ t('settings', 'Allow account name autocompletion in share dialog and allow access to the system address book') }} + </NcCheckboxRadioSwitch> + <fieldset v-show="settings.allowShareDialogUserEnumeration" id="settings-sharing-privacy-user-enumeration" class="sharing__sub-section"> + <em> + {{ 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', 'Restrict account name autocompletion and system address book access to users within the same groups') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked.sync="settings.restrictUserEnumerationToPhone"> + {{ t('settings', 'Restrict account name autocompletion to users based on phone number integration') }} + </NcCheckboxRadioSwitch> + </fieldset> + + <NcCheckboxRadioSwitch type="switch" :checked.sync="settings.restrictUserEnumerationFullMatch"> + {{ t('settings', 'Allow autocompletion when entering the full name or email address (ignoring missing phonebook match and being in the same group)') }} + </NcCheckboxRadioSwitch> + + <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="publicShareDisclaimerEnabled" + aria-describedby="settings-sharing-privary-related-disclaimer-hint" + class="sharing__sub-section"> + <NcTextArea class="sharing__input" + :label="t('settings', 'Disclaimer text')" + aria-describedby="settings-sharing-privary-related-disclaimer-hint" + :value="settings.publicShareDisclaimerText" + @update:value="onUpdateDisclaimer" /> + <em id="settings-sharing-privary-related-disclaimer-hint" class="sharing__input"> + {{ t('settings', 'This text will be shown on the public link upload page when the file list is hidden.') }} + </em> + </div> + </div> + + <div id="settings-sharing-default-permissions" class="sharing__section"> + <h3>{{ t('settings', 'Default share permissions') }}</h3> + <SelectSharingPermissions :value.sync="settings.defaultPermissions" /> + </div> + </form> +</template> + +<script lang="ts"> +import { showError, showSuccess } from '@nextcloud/dialogs' +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' +import { snakeCase } from 'lodash' +import { defineComponent } from 'vue' +import debounce from 'debounce' + +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import NcSettingsSelectGroup from '@nextcloud/vue/components/NcSettingsSelectGroup' +import NcTextArea from '@nextcloud/vue/components/NcTextArea' +import NcTextField from '@nextcloud/vue/components/NcTextField' +import SelectSharingPermissions from './SelectSharingPermissions.vue' + +interface IShareSettings { + enabled: boolean + allowGroupSharing: boolean + allowLinks: boolean + allowLinksExcludeGroups: unknown + allowPublicUpload: boolean + allowResharing: boolean + allowShareDialogUserEnumeration: boolean + allowFederationOnPublicShares: boolean + restrictUserEnumerationToGroup: boolean + restrictUserEnumerationToPhone: boolean + restrictUserEnumerationFullMatch: boolean + restrictUserEnumerationFullMatchUserId: boolean + restrictUserEnumerationFullMatchEmail: boolean + restrictUserEnumerationFullMatchIgnoreSecondDN: boolean + enforceLinksPassword: boolean + enforceLinksPasswordExcludedGroups: string[] + enforceLinksPasswordExcludedGroupsEnabled: boolean + onlyShareWithGroupMembers: boolean + onlyShareWithGroupMembersExcludeGroupList: string[] + defaultExpireDate: boolean + expireAfterNDays: string + enforceExpireDate: boolean + excludeGroups: string + excludeGroupsList: string[] + publicShareDisclaimerText: string + enableLinkPasswordByDefault: boolean + defaultPermissions: number + defaultInternalExpireDate: boolean + internalExpireAfterNDays: string + enforceInternalExpireDate: boolean + defaultRemoteExpireDate: boolean + remoteExpireAfterNDays: string + enforceRemoteExpireDate: boolean + allowCustomTokens: boolean + allowViewWithoutDownload: boolean +} + +export default defineComponent({ + name: 'AdminSettingsSharingForm', + components: { + NcCheckboxRadioSwitch, + NcSettingsSelectGroup, + NcNoteCard, + NcTextArea, + NcTextField, + SelectSharingPermissions, + }, + data() { + const settingsData = loadState<IShareSettings>('settings', 'sharingSettings') + return { + settingsData, + publicShareDisclaimerEnabled: settingsData.publicShareDisclaimerText !== '', + } + }, + computed: { + settings() { + console.warn('new proxy') + return new Proxy(this.settingsData, { + get(target, property) { + return target[property] + }, + set(target, property: string, newValue) { + const configName = `shareapi_${snakeCase(property)}` + const value = typeof newValue === 'boolean' ? (newValue ? 'yes' : 'no') : (typeof newValue === 'string' ? newValue : JSON.stringify(newValue)) + window.OCP.AppConfig.setValue('core', configName, value) + target[property] = newValue + return true + }, + }) + }, + }, + + watch: { + publicShareDisclaimerEnabled() { + // When disabled we just remove the disclaimer content + if (this.publicShareDisclaimerEnabled === false) { + this.onUpdateDisclaimer('') + } + }, + }, + + methods: { + t, + + onUpdateDisclaimer: debounce(function(value: string) { + const options = { + success() { + if (value !== '') { + showSuccess(t('settings', 'Changed disclaimer text')) + } else { + showSuccess(t('settings', 'Deleted disclaimer text')) + } + }, + error() { + showError(t('settings', 'Could not set disclaimer text')) + }, + } + if (value === '') { + window.OCP.AppConfig.deleteKey('core', 'shareapi_public_link_disclaimertext', options) + } else { + window.OCP.AppConfig.setValue('core', 'shareapi_public_link_disclaimertext', value, options) + } + this.settingsData.publicShareDisclaimerText = value + }, 500) as (v?: string) => void, + onUpdateExcludeGroups: debounce(function(value: string) { + window.OCP.AppConfig.setValue('core', 'excludeGroups', value) + this.settings.excludeGroups = value + }, 500) as (v?: string) => void, + }, +}) +</script> + +<style scoped lang="scss"> +.sharing { + display: flex; + flex-direction: column; + gap: 12px; + + &__labeled-entry { + display: flex; + flex: 1 0; + flex-direction: column; + gap: 4px; + } + + &__section { + display: flex; + flex-direction: column; + gap: 4px; + margin-block-end: 12px + } + + &__sub-section { + display: flex; + flex-direction: column; + gap: 4px; + + margin-inline-start: 44px; + margin-block-end: 12px + } + + &__input { + max-width: 500px; + // align with checkboxes + margin-inline-start: 14px; + + :deep(.v-select.select) { + width: 100%; + } + } + + & &__note { + margin: 2px 0; + } +} + +@media only screen and (max-width: 350px) { + // ensure no overflow happens on small devices (required for WCAG) + .sharing { + &__sub-section { + margin-inline-start: 14px; + } + } +} +</style> diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue new file mode 100644 index 00000000000..e24bee02593 --- /dev/null +++ b/apps/settings/src/components/AdminTwoFactor.vue @@ -0,0 +1,184 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcSettingsSection :name="t('settings', 'Two-Factor Authentication')" + :description="t('settings', 'Two-factor authentication can be enforced for all accounts and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')" + :doc-url="twoFactorAdminDoc"> + <p v-if="loading"> + <span class="icon-loading-small two-factor-loading" /> + <span>{{ t('settings', 'Enforce two-factor authentication') }}</span> + </p> + <NcCheckboxRadioSwitch v-else + id="two-factor-enforced" + :checked.sync="enforced" + type="switch"> + {{ t('settings', 'Enforce two-factor authentication') }} + </NcCheckboxRadioSwitch> + <template v-if="enforced"> + <h3>{{ t('settings', 'Limit to groups') }}</h3> + {{ t('settings', 'Enforcement of two-factor authentication can be set for certain groups only.') }} + <p class="top-margin"> + {{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }} + </p> + <p> + <label for="enforcedGroups"> + <span>{{ t('settings', 'Enforced groups') }}</span> + </label> + <NcSelect v-model="enforcedGroups" + input-id="enforcedGroups" + :options="groups" + :disabled="loading" + :multiple="true" + :loading="loadingGroups" + :close-on-select="false" + @search="searchGroup" /> + </p> + <p class="top-margin"> + {{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }} + </p> + <p> + <label for="excludedGroups"> + <span>{{ t('settings', 'Excluded groups') }}</span> + </label> + <NcSelect v-model="excludedGroups" + input-id="excludedGroups" + :options="groups" + :disabled="loading" + :multiple="true" + :loading="loadingGroups" + :close-on-select="false" + @search="searchGroup" /> + </p> + <p class="top-margin"> + <em> + <!-- this text is also found in the documentation. update it there as well if it ever changes --> + {{ t('settings', 'When groups are selected/excluded, they use the following logic to determine if an account has 2FA enforced: If no groups are selected, 2FA is enabled for everyone except members of the excluded groups. If groups are selected, 2FA is enabled for all members of these. If an account is both in a selected and excluded group, the selected takes precedence and 2FA is enforced.') }} + </em> + </p> + </template> + <p class="top-margin"> + <NcButton v-if="dirty" + type="primary" + :disabled="loading" + @click="saveChanges"> + {{ t('settings', 'Save changes') }} + </NcButton> + </p> + </NcSettingsSection> +</template> + +<script> +import axios from '@nextcloud/axios' +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' +import uniq from 'lodash/uniq.js' +import debounce from 'lodash/debounce.js' +import { generateUrl, generateOcsUrl } from '@nextcloud/router' + +export default { + name: 'AdminTwoFactor', + components: { + NcSelect, + NcButton, + NcCheckboxRadioSwitch, + NcSettingsSection, + }, + data() { + return { + loading: false, + dirty: false, + groups: [], + loadingGroups: false, + twoFactorAdminDoc: loadState('settings', 'two-factor-admin-doc'), + } + }, + computed: { + enforced: { + get() { + return this.$store.state.enforced + }, + set(val) { + this.dirty = true + this.$store.commit('setEnforced', val) + }, + }, + enforcedGroups: { + get() { + return this.$store.state.enforcedGroups + }, + set(val) { + this.dirty = true + this.$store.commit('setEnforcedGroups', val) + }, + }, + excludedGroups: { + get() { + return this.$store.state.excludedGroups + }, + set(val) { + this.dirty = true + this.$store.commit('setExcludedGroups', val) + }, + }, + }, + mounted() { + // Groups are loaded dynamically, but the assigned ones *should* + // be valid groups, so let's add them as initial state + this.groups = sortedUniq(uniq(this.enforcedGroups.concat(this.excludedGroups))) + + // Populate the groups with a first set so the dropdown is not empty + // when opening the page the first time + this.searchGroup('') + }, + methods: { + searchGroup: debounce(function(query) { + this.loadingGroups = true + axios.get(generateOcsUrl('cloud/groups?offset=0&search={query}&limit=20', { query })) + .then(res => res.data.ocs) + .then(ocs => ocs.data.groups) + .then(groups => { this.groups = sortedUniq(uniq(this.groups.concat(groups))) }) + .catch(err => console.error('could not search groups', err)) + .then(() => { this.loadingGroups = false }) + }, 500), + + saveChanges() { + this.loading = true + + const data = { + enforced: this.enforced, + enforcedGroups: this.enforcedGroups, + excludedGroups: this.excludedGroups, + } + axios.put(generateUrl('/settings/api/admin/twofactorauth'), data) + .then(resp => resp.data) + .then(state => { + this.state = state + this.dirty = false + }) + .catch(err => { + console.error('could not save changes', err) + }) + .then(() => { this.loading = false }) + }, + }, +} +</script> + +<style scoped> + .two-factor-loading { + display: inline-block; + vertical-align: sub; + margin-inline: -2px 1px; + } + + .top-margin { + margin-top: 0.5rem; + } +</style> 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 new file mode 100644 index 00000000000..3e40e08b257 --- /dev/null +++ b/apps/settings/src/components/AppList.vue @@ -0,0 +1,411 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div id="app-content-inner"> + <div id="apps-list" + class="apps-list" + :class="{ + 'apps-list--list-view': (useBundleView || useListView), + 'apps-list--store-view': useAppStoreView, + }"> + <template v-if="useListView"> + <div v-if="showUpdateAll" class="apps-list__toolbar"> + {{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }} + <NcButton v-if="showUpdateAll" + id="app-list-update-all" + type="primary" + @click="updateAll"> + {{ n('settings', 'Update', 'Update all', counter) }} + </NcButton> + </div> + + <div v-if="!showUpdateAll" class="apps-list__toolbar"> + {{ t('settings', 'All apps are up-to-date.') }} + </div> + + <TransitionGroup name="apps-list" tag="table" class="apps-list__list-container"> + <tr key="app-list-view-header"> + <th> + <span class="hidden-visually">{{ t('settings', 'Icon') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Name') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Version') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Level') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Actions') }}</span> + </th> + </tr> + <AppItem v-for="app in apps" + :key="app.id" + :app="app" + :category="category" /> + </TransitionGroup> + </template> + + <table v-if="useBundleView" + class="apps-list__list-container"> + <tr key="app-list-view-header"> + <th id="app-table-col-icon"> + <span class="hidden-visually">{{ t('settings', 'Icon') }}</span> + </th> + <th id="app-table-col-name"> + <span class="hidden-visually">{{ t('settings', 'Name') }}</span> + </th> + <th id="app-table-col-version"> + <span class="hidden-visually">{{ t('settings', 'Version') }}</span> + </th> + <th id="app-table-col-level"> + <span class="hidden-visually">{{ t('settings', 'Level') }}</span> + </th> + <th id="app-table-col-actions"> + <span class="hidden-visually">{{ t('settings', 'Actions') }}</span> + </th> + </tr> + <template v-for="bundle in bundles"> + <tr :key="bundle.id"> + <th :id="`app-table-rowgroup-${bundle.id}`" colspan="5" scope="rowgroup"> + <div class="apps-list__bundle-heading"> + <span class="apps-list__bundle-header"> + {{ bundle.name }} + </span> + <NcButton type="secondary" @click="toggleBundle(bundle.id)"> + {{ t('settings', bundleToggleText(bundle.id)) }} + </NcButton> + </div> + </th> + </tr> + <AppItem v-for="app in bundleApps(bundle.id)" + :key="bundle.id + app.id" + :use-bundle-view="true" + :headers="`app-table-rowgroup-${bundle.id}`" + :app="app" + :category="category" /> + </template> + </table> + <ul v-if="useAppStoreView" class="apps-list__store-container"> + <AppItem v-for="app in apps" + :key="app.id" + :app="app" + :category="category" + :list-view="false" /> + </ul> + </div> + + <div id="apps-list-search" class="apps-list apps-list--list-view"> + <div class="apps-list__list-container"> + <table v-if="search !== '' && searchApps.length > 0" class="apps-list__list-container"> + <caption class="apps-list__bundle-header"> + {{ t('settings', 'Results from other categories') }} + </caption> + <tr key="app-list-view-header"> + <th> + <span class="hidden-visually">{{ t('settings', 'Icon') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Name') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Version') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Level') }}</span> + </th> + <th> + <span class="hidden-visually">{{ t('settings', 'Actions') }}</span> + </th> + </tr> + <AppItem v-for="app in searchApps" + :key="app.id" + :app="app" + :category="category" /> + </table> + </div> + </div> + + <div v-if="search !== '' && !loading && searchApps.length === 0 && apps.length === 0" id="apps-list-empty" class="emptycontent emptycontent-search"> + <div id="app-list-empty-icon" class="icon-settings-dark" /> + <h2>{{ t('settings', 'No apps found for your version') }}</h2> + </div> + </div> +</template> + +<script> +import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import pLimit from 'p-limit' +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', + components: { + AppItem, + NcButton, + }, + + mixins: [AppManagement], + + props: { + category: { + type: String, + required: true, + }, + }, + + setup() { + const appApiStore = useAppApiStore() + const store = useAppsStore() + + return { + appApiStore, + store, + } + }, + + data() { + return { + search: '', + } + }, + computed: { + counter() { + return this.apps.filter(app => app.update).length + }, + loading() { + 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 + }, + showUpdateAll() { + return this.hasPendingUpdate && this.useListView + }, + apps() { + // 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 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') { + return apps.filter(app => app.installed) + } + if (this.category === 'enabled') { + return apps.filter(app => app.active && app.installed) + } + if (this.category === 'disabled') { + return apps.filter(app => !app.active && app.installed) + } + if (this.category === 'app-bundles') { + return apps.filter(app => app.bundles) + } + if (this.category === 'updates') { + return apps.filter(app => app.update) + } + if (this.category === 'supported') { + // For customers of the Nextcloud GmbH the app level will be set to `300` for apps that are supported in their subscription + return apps.filter(app => app.level === 300) + } + if (this.category === 'featured') { + // An app level of `200` will be set for apps featured on the app store + return apps.filter(app => app.level === 200) + } + + // filter app store categories + return apps.filter(app => { + return app.appstore && app.category !== undefined + && (app.category === this.category || app.category.indexOf(this.category) > -1) + }) + }, + bundles() { + return this.$store.getters.getAppBundles.filter(bundle => this.bundleApps(bundle.id).length > 0) + }, + bundleApps() { + return function(bundle) { + return this.$store.getters.getAllApps + .filter(app => { + return app.bundleIds !== undefined && app.bundleIds.includes(bundle) + }) + } + }, + searchApps() { + if (this.search === '') { + return [] + } + 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)) + } + return false + }) + }, + useAppStoreView() { + return !this.useListView && !this.useBundleView + }, + useListView() { + return (this.category === 'installed' || this.category === 'enabled' || this.category === 'disabled' || this.category === 'updates' || this.category === 'featured' || this.category === 'supported') + }, + useBundleView() { + return (this.category === 'app-bundles') + }, + allBundlesEnabled() { + return (id) => { + return this.bundleApps(id).filter(app => !app.active).length === 0 + } + }, + bundleToggleText() { + return (id) => { + if (this.allBundlesEnabled(id)) { + return t('settings', 'Disable all') + } + return t('settings', 'Download and enable all') + } + }, + }, + + beforeDestroy() { + unsubscribe('nextcloud:unified-search.search', this.setSearch) + unsubscribe('nextcloud:unified-search.reset', this.resetSearch) + }, + + mounted() { + subscribe('nextcloud:unified-search.search', this.setSearch) + subscribe('nextcloud:unified-search.reset', this.resetSearch) + }, + + methods: { + setSearch({ query }) { + this.search = query + }, + resetSearch() { + this.search = '' + }, + toggleBundle(id) { + if (this.allBundlesEnabled(id)) { + return this.disableBundle(id) + } + return this.enableBundle(id) + }, + enableBundle(id) { + const apps = this.bundleApps(id).map(app => app.id) + this.$store.dispatch('enableApp', { appId: apps, groups: [] }) + .catch((error) => { + console.error(error) + OC.Notification.show(error) + }) + }, + disableBundle(id) { + const apps = this.bundleApps(id).map(app => app.id) + this.$store.dispatch('disableApp', { appId: apps, groups: [] }) + .catch((error) => { + OC.Notification.show(error) + }) + }, + updateAll() { + const limit = pLimit(1) + this.apps + .filter(app => app.update) + .map((app) => limit(() => { + this.update(app.id) + })) + }, + }, +} +</script> + +<style lang="scss" scoped> +$toolbar-padding: 8px; +$toolbar-height: 44px + $toolbar-padding * 2; + +.apps-list { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + + // For transition group + &--move { + transition: transform 1s; + } + + #app-list-update-all { + margin-inline-start: 10px; + } + + &__toolbar { + height: $toolbar-height; + padding: $toolbar-padding; + // Leave room for app-navigation-toggle + padding-inline-start: $toolbar-height; + width: 100%; + background-color: var(--color-main-background); + position: sticky; + top: 0; + z-index: 1; + display: flex; + align-items: center; + } + + &--list-view { + margin-bottom: 100px; + // For positioning link overlay on rows + position: relative; + } + + &__list-container { + width: 100%; + } + + &__store-container { + display: flex; + flex-wrap: wrap; + } + + &__bundle-heading { + display: flex; + align-items: center; + margin-block: 20px; + margin-inline: 0 10px; + } + + &__bundle-header { + margin-block: 0; + margin-inline: 50px 10px; + font-weight: bold; + font-size: 20px; + line-height: 30px; + color: var(--color-text-light); + } +} + +#apps-list-search { + .app-item { + h2 { + margin-bottom: 0; + } + } +} +</style> 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 new file mode 100644 index 00000000000..95a98a93cde --- /dev/null +++ b/apps/settings/src/components/AppList/AppItem.vue @@ -0,0 +1,435 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <component :is="listView ? 'tr' : (inline ? 'article' : 'li')" + class="app-item" + :class="{ + 'app-item--list-view': listView, + 'app-item--store-view': !listView, + 'app-item--selected': isSelected, + 'app-item--with-sidebar': withSidebar, + }"> + <component :is="dataItemTag" + class="app-image app-image-icon" + :headers="getDataItemHeaders(`app-table-col-icon`)"> + <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 && !app.app_api" + width="32" + height="32" + viewBox="0 0 32 32"> + <image x="0" + y="0" + width="32" + height="32" + preserveAspectRatio="xMinYMin meet" + :xlink:href="app.preview" + class="app-icon" /> + </svg> + + <img v-if="!listView && app.screenshot && screenshotLoaded" :src="app.screenshot" alt=""> + </component> + <component :is="dataItemTag" + class="app-name" + :headers="getDataItemHeaders(`app-table-col-name`)"> + <router-link class="app-name--link" + :to="{ + name: 'apps-details', + params: { + category: category, + id: app.id + }, + }" + :aria-label="t('settings', 'Show details for {appName} app', { appName:app.name })"> + {{ app.name }} + </router-link> + </component> + <component :is="dataItemTag" + v-if="!listView" + class="app-summary" + :headers="getDataItemHeaders(`app-version`)"> + {{ app.summary }} + </component> + <component :is="dataItemTag" + v-if="listView" + class="app-version" + :headers="getDataItemHeaders(`app-table-col-version`)"> + <span v-if="app.version">{{ app.version }}</span> + <span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span> + </component> + + <component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)" class="app-level"> + <AppLevelBadge :level="app.level" /> + <AppScore v-if="hasRating && !listView" :score="app.score" /> + </component> + <component :is="dataItemTag" + v-if="!inline" + :headers="getDataItemHeaders(`app-table-col-actions`)" + class="app-actions"> + <div v-if="app.error" class="warning"> + {{ app.error }} + </div> + <div v-if="isLoading || isInitializing" class="icon icon-loading-small" /> + <NcButton v-if="app.update" + type="primary" + :disabled="installing || isLoading || !defaultDeployDaemonAccessible || isManualInstall" + :title="updateButtonText" + @click.stop="update(app.id)"> + {{ t('settings', 'Update to {update}', {update:app.update}) }} + </NcButton> + <NcButton v-if="app.canUnInstall" + class="uninstall" + type="tertiary" + :disabled="installing || isLoading" + @click.stop="remove(app.id)"> + {{ t('settings', 'Remove') }} + </NcButton> + <NcButton v-if="app.active" + :disabled="installing || isLoading || isInitializing || isDeploying" + @click.stop="disable(app.id)"> + {{ disableButtonText }} + </NcButton> + <NcButton v-if="!app.active && (app.canInstall || app.isCompatible)" + :title="enableButtonTooltip" + :aria-label="enableButtonTooltip" + type="primary" + :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 || !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/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', + components: { + AppLevelBadge, + AppScore, + NcButton, + NcIconSvgWrapper, + DaemonSelectionDialog, + }, + mixins: [AppManagement, SvgFilterMixin], + props: { + app: { + type: Object, + required: true, + }, + category: { + type: String, + required: true, + }, + listView: { + type: Boolean, + default: true, + }, + useBundleView: { + type: Boolean, + default: false, + }, + headers: { + type: String, + default: null, + }, + inline: { + type: Boolean, + default: false, + }, + }, + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + mdiCogOutline, + } + }, + data() { + return { + isSelected: false, + scrolled: false, + screenshotLoaded: false, + showSelectDaemonModal: false, + } + }, + computed: { + hasRating() { + return this.app.appstoreData && this.app.appstoreData.ratingNumOverall > 5 + }, + dataItemTag() { + return this.listView ? 'td' : 'div' + }, + withSidebar() { + return !!this.$route.params.id + }, + shouldDisplayDefaultIcon() { + return (this.listView && !this.app.preview) || (!this.listView && !this.screenshotLoaded) + }, + }, + watch: { + '$route.params.id'(id) { + this.isSelected = (this.app.id === id) + }, + }, + mounted() { + this.isSelected = (this.app.id === this.$route.params.id) + if (this.app.releases && this.app.screenshot) { + const image = new Image() + image.onload = () => { + this.screenshotLoaded = true + } + image.src = this.app.screenshot + } + }, + watchers: { + + }, + methods: { + prefix(prefix, content) { + return prefix + '_' + content + }, + + 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> + +<style scoped lang="scss"> +@use '../../../../../core/css/variables.scss' as variables; +@use 'sass:math'; + +.app-item { + position: relative; + + &:hover { + background-color: var(--color-background-dark); + } + + &--list-view { + --app-item-padding: calc(var(--default-grid-baseline) * 2); + --app-item-height: calc(var(--default-clickable-area) + var(--app-item-padding) * 2); + + &.app-item--selected { + background-color: var(--color-background-dark); + } + + > * { + vertical-align: middle; + border-bottom: 1px solid var(--color-border); + padding: var(--app-item-padding); + height: var(--app-item-height); + } + + .app-image { + width: var(--default-clickable-area); + height: auto; + text-align: end; + } + + .app-image-icon svg, + .app-image-icon .icon-settings-dark { + margin-top: 5px; + width: 20px; + height: 20px; + opacity: .5; + background-size: cover; + display: inline-block; + } + + .app-name { + padding: 0 var(--app-item-padding); + } + + .app-name--link { + height: var(--app-item-height); + display: flex; + align-items: center; + } + + // Note: because of Safari bug, we cannot position link overlay relative to the table row + // So we need to manually position it relative to the table container and cell + // See: https://bugs.webkit.org/show_bug.cgi?id=240961 + .app-name--link::after { + content: ''; + position: absolute; + inset-inline: 0; + height: var(--app-item-height); + } + + .app-actions { + display: flex; + gap: var(--app-item-padding); + flex-wrap: wrap; + justify-content: end; + + .icon-loading-small { + display: inline-block; + top: 4px; + margin-inline-end: 10px; + } + } + + /* hide app version and level on narrower screens */ + @media only screen and (max-width: 900px) { + .app-version, + .app-level { + display: none; + } + } + + /* Hide actions on a small screen. Click on app opens fill-screen sidebar with the buttons */ + @media only screen and (max-width: math.div(variables.$breakpoint-mobile, 2)) { + .app-actions { + display: none; + } + } + } + + &--store-view { + padding: 30px; + + .app-image-icon .icon-settings-dark { + width: 100%; + height: 150px; + background-size: 45px; + opacity: 0.5; + } + + .app-image-icon svg { + position: absolute; + bottom: 43px; + /* position halfway vertically */ + width: 64px; + height: 64px; + opacity: .1; + } + + .app-name { + margin: 5px 0; + } + + .app-name--link::after { + content: ''; + position: absolute; + inset-block: 0; + inset-inline: 0; + } + + .app-actions { + margin: 10px 0; + } + + @media only screen and (min-width: 1601px) { + width: 25%; + + &.app-item--with-sidebar { + width: 33%; + } + } + + @media only screen and (max-width: 1600px) { + width: 25%; + + &.app-item--with-sidebar { + width: 33%; + } + } + + @media only screen and (max-width: 1400px) { + width: 33%; + + &.app-item--with-sidebar { + width: 50%; + } + } + + @media only screen and (max-width: 900px) { + width: 50%; + + &.app-item--with-sidebar { + width: 100%; + } + } + + @media only screen and (max-width: variables.$breakpoint-mobile) { + width: 50%; + } + + @media only screen and (max-width: 480px) { + width: 100%; + } + } +} + +.app-icon { + filter: var(--background-invert-if-bright); +} + +.app-image { + position: relative; + height: 150px; + opacity: 1; + overflow: hidden; + + img { + width: 100%; + } +} + +.app-version { + color: var(--color-text-maxcontrast); +} +</style> diff --git a/apps/settings/src/components/AppList/AppLevelBadge.vue b/apps/settings/src/components/AppList/AppLevelBadge.vue new file mode 100644 index 00000000000..8461f5eb6b9 --- /dev/null +++ b/apps/settings/src/components/AppList/AppLevelBadge.vue @@ -0,0 +1,56 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <span v-if="isSupported || isFeatured" + class="app-level-badge" + :class="{ 'app-level-badge--supported': isSupported }" + :title="badgeTitle"> + <NcIconSvgWrapper :path="badgeIcon" :size="20" inline /> + {{ badgeText }} + </span> +</template> + +<script setup lang="ts"> +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' + +import { mdiCheck, mdiStarShootingOutline } from '@mdi/js' +import { translate as t } from '@nextcloud/l10n' +import { computed } from 'vue' + +const props = defineProps<{ + /** + * The app level + */ + level?: number +}>() + +const isSupported = computed(() => props.level === 300) +const isFeatured = computed(() => props.level === 200) +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.') + : t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')) +</script> + +<style scoped lang="scss"> +.app-level-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; + + &--supported { + border-color: var(--color-success); + color: var(--color-success); + } +} +</style> diff --git a/apps/settings/src/components/AppList/AppScore.vue b/apps/settings/src/components/AppList/AppScore.vue new file mode 100644 index 00000000000..a1dd4c03842 --- /dev/null +++ b/apps/settings/src/components/AppList/AppScore.vue @@ -0,0 +1,72 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <span role="img" + :aria-label="title" + :title="title" + class="app-score__wrapper"> + <NcIconSvgWrapper v-for="index in fullStars" + :key="`full-star-${index}`" + :path="mdiStar" + inline /> + <NcIconSvgWrapper v-if="hasHalfStar" :path="mdiStarHalfFull" inline /> + <NcIconSvgWrapper v-for="index in emptyStars" + :key="`empty-star-${index}`" + :path="mdiStarOutline" + inline /> + </span> +</template> +<script lang="ts"> +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' + +export default defineComponent({ + name: 'AppScore', + components: { + NcIconSvgWrapper, + }, + props: { + score: { + type: Number, + required: true, + }, + }, + setup() { + return { + mdiStar, + mdiStarHalfFull, + mdiStarOutline, + } + }, + computed: { + title() { + const appScore = (this.score * 5).toFixed(1) + return t('settings', 'Community rating: {score}/5', { score: appScore }) + }, + fullStars() { + return Math.floor(this.score * 5 + 0.25) + }, + emptyStars() { + return Math.min(Math.floor((1 - this.score) * 5 + 0.25), 5 - this.fullStars) + }, + hasHalfStar() { + return (this.fullStars + this.emptyStars) < 5 + }, + }, +}) +</script> +<style scoped> +.app-score__wrapper { + display: inline-flex; + color: var(--color-favorite, #a08b00); + + > * { + vertical-align: text-bottom; + } +} +</style> 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 new file mode 100644 index 00000000000..703adb9f041 --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/AppLink.vue @@ -0,0 +1,98 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <a v-if="linkProps" v-bind="linkProps"> + <slot /> + </a> + <RouterLink v-else-if="routerProps" v-bind="routerProps"> + <slot /> + </RouterLink> +</template> + +<script lang="ts"> +import type { RouterLinkProps } from 'vue-router/types/router.js' + +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 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 + */ +export default defineComponent({ + name: 'AppLink', + + components: { RouterLink }, + + props: { + href: { + type: String, + required: true, + }, + }, + + data() { + return { + routerProps: undefined as RouterLinkProps|undefined, + linkProps: undefined as Record<string, string>|undefined, + } + }, + + watch: { + href: { + immediate: true, + handler() { + const match = this.href.match(/^app:\/\/([^/]+)(\/.+)?$/) + this.routerProps = undefined + this.linkProps = undefined + + // not an app url + if (match === null) { + this.linkProps = { + href: this.href, + target: '_blank', + rel: 'noreferrer noopener', + } + return + } + + const appId = match[1] + // Check if specific route was requested + if (match[2]) { + // we do no know anything about app internal path so we only allow generic app paths + this.linkProps = { + href: generateUrl(`/apps/${appId}${match[2]}`), + } + return + } + + // If we know any route for that app we open it + if (appId in knownRoutes) { + this.linkProps = { + href: knownRoutes[appId], + } + return + } + + // Fallback to show the app store entry + this.routerProps = { + to: { + name: 'apps-details', + params: { + category: this.$route.params?.category ?? 'discover', + id: appId, + }, + }, + } + }, + }, + }, +}) +</script> diff --git a/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue b/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue new file mode 100644 index 00000000000..bb91940c763 --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue @@ -0,0 +1,119 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <div class="app-discover"> + <NcEmptyContent v-if="hasError" + :name="t('settings', 'Nothing to show')" + :description="t('settings', 'Could not load section content from app store.')"> + <template #icon> + <NcIconSvgWrapper :path="mdiEyeOffOutline" :size="64" /> + </template> + </NcEmptyContent> + <NcEmptyContent v-else-if="elements.length === 0" + :name="t('settings', 'Loading')" + :description="t('settings', 'Fetching the latest news…')"> + <template #icon> + <NcLoadingIcon :size="64" /> + </template> + </NcEmptyContent> + <template v-else> + <component :is="getComponent(entry.type)" + v-for="entry, index in elements" + :key="entry.id ?? index" + v-bind="entry" /> + </template> + </div> +</template> + +<script setup lang="ts"> +import type { IAppDiscoverElements } from '../../constants/AppDiscoverTypes.ts' + +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/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' + +const PostType = defineAsyncComponent(() => import('./PostType.vue')) +const CarouselType = defineAsyncComponent(() => import('./CarouselType.vue')) +const ShowcaseType = defineAsyncComponent(() => import('./ShowcaseType.vue')) + +const hasError = ref(false) +const elements = ref<IAppDiscoverElements[]>([]) + +/** + * Shuffle using the Fisher-Yates algorithm + * @param array The array to shuffle (in place) + */ +const shuffleArray = <T, >(array: T[]): T[] => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]] + } + return array +} + +/** + * Load the app discover section information + */ +onBeforeMount(async () => { + try { + const { data } = await axios.get<Record<string, unknown>[]>(generateUrl('/settings/api/apps/discover')) + if (data.length === 0) { + logger.info('No app discover elements available (empty response)') + hasError.value = true + return + } + // Parse data to ensure dates are useable and then filter out expired or future elements + const parsedElements = data.map(parseApiResponse).filter(filterElements) + // Shuffle elements to make it looks more interesting + const shuffledElements = shuffleArray(parsedElements) + // Sort pinned elements first + shuffledElements.sort((a, b) => (a.order ?? Infinity) < (b.order ?? Infinity) ? -1 : 1) + // Set the elements to the UI + elements.value = shuffledElements + } catch (error) { + hasError.value = true + logger.error(error as Error) + showError(t('settings', 'Could not load app discover section')) + } +}) + +const getComponent = (type) => { + if (type === 'post') { + return PostType + } else if (type === 'carousel') { + return CarouselType + } else if (type === 'showcase') { + return ShowcaseType + } + return defineComponent({ + mounted: () => logger.error('Unknown component requested ', type), + render: (h) => h('div', t('settings', 'Could not render element')), + }) +} +</script> + +<style scoped lang="scss"> +.app-discover { + max-width: 1008px; /* 900px + 2x 54px padding for the carousel controls */ + margin-inline: auto; + padding-inline: 54px; + /* Padding required to make last element not bound to the bottom */ + padding-block-end: var(--default-clickable-area, 44px); + + display: flex; + flex-direction: column; + gap: var(--default-clickable-area, 44px); +} +</style> diff --git a/apps/settings/src/components/AppStoreDiscover/AppType.vue b/apps/settings/src/components/AppStoreDiscover/AppType.vue new file mode 100644 index 00000000000..7263dc71041 --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/AppType.vue @@ -0,0 +1,100 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <AppItem v-if="app" + :app="app" + category="discover" + class="app-discover-app" + inline + :list-view="false" /> + <a v-else + class="app-discover-app app-discover-app__skeleton" + :href="appStoreLink" + target="_blank" + :title="modelValue.appId" + rel="noopener noreferrer"> + <!-- This is a fallback skeleton --> + <span class="skeleton-element" /> + <span class="skeleton-element" /> + <span class="skeleton-element" /> + <span class="skeleton-element" /> + <span class="skeleton-element" /> + </a> +</template> + +<script setup lang="ts"> +import type { IAppDiscoverApp } from '../../constants/AppDiscoverTypes' + +import { computed } from 'vue' +import { useAppsStore } from '../../store/apps-store.ts' + +import AppItem from '../AppList/AppItem.vue' + +const props = defineProps<{ + modelValue: IAppDiscoverApp +}>() + +const store = useAppsStore() +const app = computed(() => store.getAppById(props.modelValue.appId)) + +const appStoreLink = computed(() => props.modelValue.appId ? `https://apps.nextcloud.com/apps/${props.modelValue.appId}` : '#') +</script> + +<style scoped lang="scss"> +.app-discover-app { + width: 100% !important; // full with of the showcase item + + &:hover { + background: var(--color-background-hover); + border-radius: var(--border-radius-rounded); + } + + &__skeleton { + display: flex; + flex-direction: column; + gap: 8px; + + padding: 30px; // Same as AppItem + + > :first-child { + height: 50%; + min-height: 130px; + } + + > :nth-child(2) { + width: 50px; + } + + > :nth-child(5) { + height: 20px; + width: 100px; + } + + > :not(:first-child) { + border-radius: 4px; + } + } +} + +.skeleton-element { + min-height: var(--default-font-size, 15px); + + background: linear-gradient(90deg, var(--color-background-dark), var(--color-background-darker), var(--color-background-dark)); + background-size: 400% 400%; + animation: gradient 6s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +</style> diff --git a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue new file mode 100644 index 00000000000..69393176835 --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue @@ -0,0 +1,206 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <section :aria-roledescription="t('settings', 'Carousel')" :aria-labelledby="headingId ? `${headingId}` : undefined"> + <h3 v-if="headline" :id="headingId"> + {{ translatedHeadline }} + </h3> + <div class="app-discover-carousel__wrapper"> + <div class="app-discover-carousel__button-wrapper"> + <NcButton class="app-discover-carousel__button app-discover-carousel__button--previous" + type="tertiary-no-background" + :aria-label="t('settings', 'Previous slide')" + :disabled="!hasPrevious" + @click="currentIndex -= 1"> + <template #icon> + <NcIconSvgWrapper :path="mdiChevronLeft" /> + </template> + </NcButton> + </div> + + <Transition :name="transitionName" mode="out-in"> + <PostType v-bind="shownElement" + :key="shownElement.id ?? currentIndex" + :aria-labelledby="`${internalId}-tab-${currentIndex}`" + :dom-id="`${internalId}-tabpanel-${currentIndex}`" + inline + role="tabpanel" /> + </Transition> + + <div class="app-discover-carousel__button-wrapper"> + <NcButton class="app-discover-carousel__button app-discover-carousel__button--next" + type="tertiary-no-background" + :aria-label="t('settings', 'Next slide')" + :disabled="!hasNext" + @click="currentIndex += 1"> + <template #icon> + <NcIconSvgWrapper :path="mdiChevronRight" /> + </template> + </NcButton> + </div> + </div> + <div class="app-discover-carousel__tabs" role="tablist" :aria-label="t('settings', 'Choose slide to display')"> + <NcButton v-for="index of content.length" + :id="`${internalId}-tab-${index}`" + :key="index" + :aria-label="t('settings', '{index} of {total}', { index, total: content.length })" + :aria-controls="`${internalId}-tabpanel-${index}`" + :aria-selected="`${currentIndex === (index - 1)}`" + role="tab" + type="tertiary-no-background" + @click="currentIndex = index - 1"> + <template #icon> + <NcIconSvgWrapper :path="currentIndex === (index - 1) ? mdiCircleSlice8 : mdiCircleOutline" /> + </template> + </NcButton> + </div> + </section> +</template> + +<script lang="ts"> +import type { PropType } from 'vue' +import type { IAppDiscoverCarousel } from '../../constants/AppDiscoverTypes.ts' + +import { mdiChevronLeft, mdiChevronRight, mdiCircleOutline, mdiCircleSlice8 } from '@mdi/js' +import { translate as t } from '@nextcloud/l10n' +import { computed, defineComponent, nextTick, ref, watch } from 'vue' +import { commonAppDiscoverProps } from './common.ts' +import { useLocalizedValue } from '../../composables/useGetLocalizedValue.ts' + +import NcButton from '@nextcloud/vue/components/NcButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import PostType from './PostType.vue' + +export default defineComponent({ + name: 'CarouselType', + + components: { + NcButton, + NcIconSvgWrapper, + PostType, + }, + + props: { + ...commonAppDiscoverProps, + + /** + * The content of the carousel + */ + content: { + type: Array as PropType<IAppDiscoverCarousel['content']>, + required: true, + }, + }, + + setup(props) { + const translatedHeadline = useLocalizedValue(computed(() => props.headline)) + + const currentIndex = ref(Math.min(1, props.content.length - 1)) + const shownElement = ref(props.content[currentIndex.value]) + const hasNext = computed(() => currentIndex.value < (props.content.length - 1)) + const hasPrevious = computed(() => currentIndex.value > 0) + + const internalId = computed(() => props.id ?? (Math.random() + 1).toString(36).substring(7)) + const headingId = computed(() => `${internalId.value}-h`) + + const transitionName = ref('slide-in') + watch(() => currentIndex.value, (o, n) => { + if (o < n) { + transitionName.value = 'slide-in' + } else { + transitionName.value = 'slide-out' + } + + // Wait next tick + nextTick(() => { + shownElement.value = props.content[currentIndex.value] + }) + }) + + return { + t, + internalId, + headingId, + + hasNext, + hasPrevious, + currentIndex, + shownElement, + + transitionName, + + translatedHeadline, + + mdiChevronLeft, + mdiChevronRight, + mdiCircleOutline, + mdiCircleSlice8, + } + }, +}) +</script> + +<style scoped lang="scss"> +h3 { + font-size: 24px; + font-weight: 600; + margin-block: 0 1em; +} + +.app-discover-carousel { + &__wrapper { + display: flex; + } + + &__button { + color: var(--color-text-maxcontrast); + position: absolute; + top: calc(50% - 22px); // 50% minus half of button height + + &-wrapper { + position: relative; + } + + // See padding of discover section + &--next { + inset-inline-end: -54px; + } + &--previous { + inset-inline-start: -54px; + } + } + + &__tabs { + display: flex; + flex-direction: row; + justify-content: center; + + > * { + color: var(--color-text-maxcontrast); + } + } +} +</style> + +<style> +.slide-in-enter-active, +.slide-in-leave-active, +.slide-out-enter-active, +.slide-out-leave-active { + transition: all .4s ease-out; +} + +.slide-in-leave-to, +.slide-out-enter { + opacity: 0; + transform: translateX(50%); +} + +.slide-in-enter, +.slide-out-leave-to { + opacity: 0; + transform: translateX(-50%); +} +</style> diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue new file mode 100644 index 00000000000..090e9dee577 --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/PostType.vue @@ -0,0 +1,299 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <article :id="domId" + ref="container" + class="app-discover-post" + :class="{ + 'app-discover-post--reverse': media && media.alignment === 'start', + 'app-discover-post--small': isSmallWidth + }"> + <component :is="link ? 'AppLink' : 'div'" + v-if="headline || text" + :href="link" + class="app-discover-post__text"> + <component :is="inline ? 'h4' : 'h3'"> + {{ translatedHeadline }} + </component> + <p>{{ translatedText }}</p> + </component> + <component :is="mediaLink ? 'AppLink' : 'div'" + v-if="mediaSources" + :href="mediaLink" + class="app-discover-post__media" + :class="{ + 'app-discover-post__media--fullwidth': isFullWidth, + 'app-discover-post__media--start': media?.alignment === 'start', + 'app-discover-post__media--end': media?.alignment === 'end', + }"> + <component :is="isImage ? 'picture' : 'video'" + ref="mediaElement" + class="app-discover-post__media-element" + :muted="!isImage" + :playsinline="!isImage" + :preload="!isImage && 'auto'" + @ended="hasPlaybackEnded = true"> + <source v-for="source of mediaSources" + :key="source.src" + :src="isImage ? undefined : generatePrivacyUrl(source.src)" + :srcset="isImage ? generatePrivacyUrl(source.src) : undefined" + :type="source.mime"> + <img v-if="isImage" + :src="generatePrivacyUrl(mediaSources[0].src)" + :alt="mediaAlt"> + </component> + <div class="app-discover-post__play-icon-wrapper"> + <NcIconSvgWrapper v-if="!isImage && showPlayVideo" + class="app-discover-post__play-icon" + :path="mdiPlayCircleOutline" + :size="92" /> + </div> + </component> + </article> +</template> + +<script lang="ts"> +import type { IAppDiscoverPost } from '../../constants/AppDiscoverTypes.ts' +import type { PropType } from 'vue' + +import { mdiPlayCircleOutline } from '@mdi/js' +import { generateUrl } from '@nextcloud/router' +import { useElementSize, useElementVisibility } from '@vueuse/core' +import { computed, defineComponent, ref, watchEffect } from 'vue' +import { commonAppDiscoverProps } from './common' +import { useLocalizedValue } from '../../composables/useGetLocalizedValue' + +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import AppLink from './AppLink.vue' + +export default defineComponent({ + components: { + AppLink, + NcIconSvgWrapper, + }, + + props: { + ...commonAppDiscoverProps, + + text: { + type: Object as PropType<IAppDiscoverPost['text']>, + required: false, + default: () => null, + }, + + media: { + type: Object as PropType<IAppDiscoverPost['media']>, + required: false, + default: () => null, + }, + + inline: { + type: Boolean, + required: false, + default: false, + }, + + domId: { + type: String, + required: false, + default: null, + }, + }, + + setup(props) { + const translatedHeadline = useLocalizedValue(computed(() => props.headline)) + const translatedText = useLocalizedValue(computed(() => props.text)) + const localizedMedia = useLocalizedValue(computed(() => props.media?.content)) + + const mediaSources = computed(() => localizedMedia.value !== null ? [localizedMedia.value.src].flat() : undefined) + const mediaAlt = computed(() => localizedMedia.value?.alt ?? '') + + const isImage = computed(() => mediaSources?.value?.[0].mime.startsWith('image/') === true) + /** + * Is the media is shown full width + */ + const isFullWidth = computed(() => !translatedHeadline.value && !translatedText.value) + + /** + * Link on the media + * Fallback to post link to prevent link inside link (which is invalid HTML) + */ + const mediaLink = computed(() => localizedMedia.value?.link ?? props.link) + + const hasPlaybackEnded = ref(false) + const showPlayVideo = computed(() => localizedMedia.value?.link && hasPlaybackEnded.value) + + /** + * The content is sized / styles are applied based on the container width + * To make it responsive even for inline usage and when opening / closing the sidebar / navigation + */ + const container = ref<HTMLElement>() + const { width: containerWidth } = useElementSize(container) + const isSmallWidth = computed(() => containerWidth.value < 600) + + /** + * Generate URL for cached media to prevent user can be tracked + * @param url The URL to resolve + */ + const generatePrivacyUrl = (url: string) => url.startsWith('/') ? url : generateUrl('/settings/api/apps/media?fileName={fileName}', { fileName: url }) + + const mediaElement = ref<HTMLVideoElement|HTMLPictureElement>() + const mediaIsVisible = useElementVisibility(mediaElement, { threshold: 0.3 }) + watchEffect(() => { + // Only if media is video + if (!isImage.value && mediaElement.value) { + const video = mediaElement.value as HTMLVideoElement + + if (mediaIsVisible.value) { + // Ensure video is muted - otherwise .play() will be blocked by browsers + video.muted = true + // If visible start playback + video.play() + } else { + // If not visible pause the playback + video.pause() + // If the animation has ended reset + if (video.ended) { + video.currentTime = 0 + hasPlaybackEnded.value = false + } + } + } + }) + + return { + mdiPlayCircleOutline, + + container, + + translatedText, + translatedHeadline, + mediaElement, + mediaSources, + mediaAlt, + mediaLink, + + hasPlaybackEnded, + showPlayVideo, + + isFullWidth, + isSmallWidth, + isImage, + + generatePrivacyUrl, + } + }, +}) +</script> + +<style scoped lang="scss"> +.app-discover-post { + max-height: 300px; + width: 100%; + background-color: var(--color-primary-element-light); + border-radius: var(--border-radius-rounded); + + display: flex; + flex-direction: row; + justify-content: start; + + &--reverse { + flex-direction: row-reverse; + } + + h3, h4 { + font-size: 24px; + font-weight: 600; + margin-block: 0 1em; + } + + &__text { + display: block; + width: 100%; + padding: var(--border-radius-rounded); + overflow-y: scroll; + } + + // If there is media next to the text we do not want a padding on the bottom as this looks weird when scrolling + &:has(&__media) &__text { + padding-block-end: 0; + } + + &__media { + display: block; + overflow: hidden; + + max-width: 450px; + border-radius: var(--border-radius-rounded); + + &--fullwidth { + max-width: unset; + max-height: unset; + } + + &--end { + border-end-start-radius: 0; + border-start-start-radius: 0; + } + + &--start { + border-end-end-radius: 0; + border-start-end-radius: 0; + } + + img, &-element { + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + } + } + + &__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%; + inset-inline-start: -50%; + } + } +} + +.app-discover-post--small { + &.app-discover-post { + flex-direction: column; + max-height: 500px; + + &--reverse { + flex-direction: column-reverse; + } + } + + .app-discover-post { + &__text { + flex: 1 1 50%; + } + + &__media { + min-width: 100%; + + &--end { + border-radius: var(--border-radius-rounded); + border-start-end-radius: 0; + border-start-start-radius: 0; + } + + &--start { + border-radius: var(--border-radius-rounded); + border-end-end-radius: 0; + border-end-start-radius: 0; + } + } + } +} +</style> diff --git a/apps/settings/src/components/AppStoreDiscover/ShowcaseType.vue b/apps/settings/src/components/AppStoreDiscover/ShowcaseType.vue new file mode 100644 index 00000000000..ac057b9ab7d --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/ShowcaseType.vue @@ -0,0 +1,122 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <section ref="container" + class="app-discover-showcase" + :class="{ + 'app-discover-showcase--small': isSmallWidth, + 'app-discover-showcase--extra-small': isExtraSmallWidth, + }"> + <h3 v-if="translatedHeadline"> + {{ translatedHeadline }} + </h3> + <ul class="app-discover-showcase__list"> + <li v-for="(item, index) of content" + :key="item.id ?? index" + class="app-discover-showcase__item"> + <PostType v-if="item.type === 'post'" + v-bind="item" + inline /> + <AppType v-else-if="item.type === 'app'" :model-value="item" /> + </li> + </ul> + </section> +</template> + +<script lang="ts"> +import type { PropType } from 'vue' +import type { IAppDiscoverShowcase } from '../../constants/AppDiscoverTypes.ts' + +import { translate as t } from '@nextcloud/l10n' +import { useElementSize } from '@vueuse/core' +import { computed, defineComponent, ref } from 'vue' +import { commonAppDiscoverProps } from './common.ts' +import { useLocalizedValue } from '../../composables/useGetLocalizedValue.ts' + +import AppType from './AppType.vue' +import PostType from './PostType.vue' + +export default defineComponent({ + name: 'ShowcaseType', + + components: { + AppType, + PostType, + }, + + props: { + ...commonAppDiscoverProps, + + /** + * The content of the carousel + */ + content: { + type: Array as PropType<IAppDiscoverShowcase['content']>, + required: true, + }, + }, + + setup(props) { + const translatedHeadline = useLocalizedValue(computed(() => props.headline)) + + /** + * Make the element responsive based on the container width to also handle open navigation or sidebar + */ + const container = ref<HTMLElement>() + const { width: containerWidth } = useElementSize(container) + const isSmallWidth = computed(() => containerWidth.value < 768) + const isExtraSmallWidth = computed(() => containerWidth.value < 512) + + return { + t, + + container, + isSmallWidth, + isExtraSmallWidth, + translatedHeadline, + } + }, +}) +</script> + +<style scoped lang="scss"> +$item-gap: calc(var(--default-clickable-area, 44px) / 2); + +h3 { + font-size: 24px; + font-weight: 600; + margin-block: 0 1em; +} + +.app-discover-showcase { + &__list { + list-style: none; + + display: flex; + flex-wrap: wrap; + gap: $item-gap; + } + + &__item { + display: flex; + align-items: stretch; + + position: relative; + width: calc(33% - $item-gap); + } +} + +.app-discover-showcase--small { + .app-discover-showcase__item { + width: calc(50% - $item-gap); + } +} + +.app-discover-showcase--extra-small { + .app-discover-showcase__item { + width: 100%; + } +} +</style> diff --git a/apps/settings/src/components/AppStoreDiscover/common.ts b/apps/settings/src/components/AppStoreDiscover/common.ts new file mode 100644 index 00000000000..277d4910e49 --- /dev/null +++ b/apps/settings/src/components/AppStoreDiscover/common.ts @@ -0,0 +1,48 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import type { PropType } from 'vue' +import type { IAppDiscoverElement } from '../../constants/AppDiscoverTypes.ts' + +import { APP_DISCOVER_KNOWN_TYPES } from '../../constants/AppDiscoverTypes.ts' + +/** + * Common Props for all app discover types + */ +export const commonAppDiscoverProps = { + type: { + type: String as PropType<IAppDiscoverElement['type']>, + required: true, + validator: (v: unknown) => typeof v === 'string' && APP_DISCOVER_KNOWN_TYPES.includes(v as never), + }, + + id: { + type: String as PropType<IAppDiscoverElement['id']>, + required: true, + }, + + date: { + type: Number as PropType<IAppDiscoverElement['date']>, + required: false, + default: undefined, + }, + + expiryDate: { + type: Number as PropType<IAppDiscoverElement['expiryDate']>, + required: false, + default: undefined, + }, + + headline: { + type: Object as PropType<IAppDiscoverElement['headline']>, + required: false, + default: () => null, + }, + + link: { + type: String as PropType<IAppDiscoverElement['link']>, + required: false, + default: () => null, + }, +} as const 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 new file mode 100644 index 00000000000..299d084ef9e --- /dev/null +++ b/apps/settings/src/components/AppStoreSidebar/AppDescriptionTab.vue @@ -0,0 +1,38 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcAppSidebarTab id="desc" + :name="t('settings', 'Description')" + :order="0"> + <template #icon> + <NcIconSvgWrapper :path="mdiTextShort" /> + </template> + <div class="app-description"> + <Markdown :text="app.description" :min-heading="4" /> + </div> + </NcAppSidebarTab> +</template> + +<script setup lang="ts"> +import type { IAppstoreApp } from '../../app-types' + +import { mdiTextShort } from '@mdi/js' +import { translate as t } from '@nextcloud/l10n' + +import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import Markdown from '../Markdown.vue' + +defineProps<{ + app: IAppstoreApp, +}>() +</script> + +<style scoped lang="scss"> +.app-description { + padding: 12px; +} +</style> diff --git a/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue b/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue new file mode 100644 index 00000000000..eb66d8f3e3a --- /dev/null +++ b/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue @@ -0,0 +1,495 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcAppSidebarTab id="details" + :name="t('settings', 'Details')" + :order="1"> + <template #icon> + <NcIconSvgWrapper :path="mdiTextBoxOutline" /> + </template> + <div class="app-details"> + <div class="app-details__actions"> + <div v-if="app.active && canLimitToGroups(app)" class="app-details__actions-groups"> + <input :id="`groups_enable_${app.id}`" + v-model="groupCheckedAppsData" + type="checkbox" + :value="app.id" + class="groups-enable__checkbox checkbox" + @change="setGroupLimit"> + <label :for="`groups_enable_${app.id}`">{{ t('settings', 'Limit to groups') }}</label> + <input type="hidden" + class="group_select" + :title="t('settings', 'All')" + value=""> + <br> + <label for="limitToGroups"> + <span>{{ t('settings', 'Limit app usage to groups') }}</span> + </label> + <NcSelect v-if="isLimitedToGroups(app)" + input-id="limitToGroups" + :options="groups" + :value="appGroups" + :limit="5" + label="name" + :multiple="true" + :close-on-select="false" + @option:selected="addGroupLimitation" + @option:deselected="removeGroupLimitation" + @search="asyncFindGroup"> + <span slot="noResult">{{ t('settings', 'No results') }}</span> + </NcSelect> + </div> + <div class="app-details__actions-manage"> + <input v-if="app.update" + class="update primary" + type="button" + :value="t('settings', 'Update to {version}', { version: app.update })" + :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, removeData)"> + <input v-if="app.active" + class="enable" + type="button" + :value="disableButtonText" + :disabled="installing || isLoading || isInitializing || isDeploying" + @click="disable(app.id)"> + <input v-if="!app.active && (app.canInstall || app.isCompatible)" + :title="enableButtonTooltip" + :aria-label="enableButtonTooltip" + class="enable primary" + type="button" + :value="enableButtonText" + :disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying" + @click="enableButtonAction"> + <input v-else-if="!app.active && !app.canInstall" + :title="forceEnableButtonTooltip" + :aria-label="forceEnableButtonTooltip" + class="enable force" + type="button" + :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"> + <li v-if="app.missingMinOwnCloudVersion"> + {{ t('settings', 'This app has no minimum Nextcloud version assigned. This will be an error in the future.') }} + </li> + <li v-if="app.missingMaxOwnCloudVersion"> + {{ t('settings', 'This app has no maximum Nextcloud version assigned. This will be an error in the future.') }} + </li> + <li v-if="!app.canInstall"> + {{ t('settings', 'This app cannot be installed because the following dependencies are not fulfilled:') }} + <ul class="missing-dependencies"> + <li v-for="(dep, index) in app.missingDependencies" :key="index"> + {{ dep }} + </li> + </ul> + </li> + </ul> + + <div v-if="lastModified && !app.shipped" class="app-details__section"> + <h4> + {{ t('settings', 'Latest updated') }} + </h4> + <NcDateTime :timestamp="lastModified" /> + </div> + + <div class="app-details__section"> + <h4> + {{ t('settings', 'Author') }} + </h4> + <p class="app-details__authors"> + {{ appAuthors }} + </p> + </div> + + <div class="app-details__section"> + <h4> + {{ t('settings', 'Categories') }} + </h4> + <p> + {{ appCategories }} + </p> + </div> + + <div v-if="externalResources.length > 0" class="app-details__section"> + <h4>{{ t('settings', 'Resources') }}</h4> + <ul class="app-details__documentation" :aria-label="t('settings', 'Documentation')"> + <li v-for="resource of externalResources" :key="resource.id"> + <a class="appslink" + :href="resource.href" + target="_blank" + rel="noreferrer noopener"> + {{ resource.label }} ↗ + </a> + </li> + </ul> + </div> + + <div class="app-details__section"> + <h4>{{ t('settings', 'Interact') }}</h4> + <div class="app-details__interact"> + <NcButton :disabled="!app.bugs" + :href="app.bugs ?? '#'" + :aria-label="t('settings', 'Report a bug')" + :title="t('settings', 'Report a bug')"> + <template #icon> + <NcIconSvgWrapper :path="mdiBugOutline" /> + </template> + </NcButton> + <NcButton :disabled="!app.bugs" + :href="app.bugs ?? '#'" + :aria-label="t('settings', 'Request feature')" + :title="t('settings', 'Request feature')"> + <template #icon> + <NcIconSvgWrapper :path="mdiFeatureSearchOutline" /> + </template> + </NcButton> + <NcButton v-if="app.appstoreData?.discussion" + :href="app.appstoreData.discussion" + :aria-label="t('settings', 'Ask questions or discuss')" + :title="t('settings', 'Ask questions or discuss')"> + <template #icon> + <NcIconSvgWrapper :path="mdiTooltipQuestionOutline" /> + </template> + </NcButton> + <NcButton v-if="!app.internal" + :href="rateAppUrl" + :aria-label="t('settings', 'Rate the app')" + :title="t('settings', 'Rate')"> + <template #icon> + <NcIconSvgWrapper :path="mdiStar" /> + </template> + </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 { 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 { 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', + + components: { + NcAppSidebarTab, + NcButton, + NcDateTime, + NcIconSvgWrapper, + NcSelect, + NcCheckboxRadioSwitch, + AppDeployOptionsModal, + DaemonSelectionDialog, + }, + mixins: [AppManagement], + + props: { + app: { + type: Object, + required: true, + }, + }, + + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + + mdiBugOutline, + mdiFeatureSearchOutline, + mdiStar, + mdiTextBoxOutline, + mdiTooltipQuestionOutline, + mdiToyBrickPlusOutline, + } + }, + + data() { + return { + groupCheckedAppsData: false, + removeData: false, + showDeployOptionsModal: false, + showSelectDaemonModal: false, + deployOptions: null, + } + }, + + computed: { + lastModified() { + return (this.app.appstoreData?.releases ?? []) + .map(({ lastModified }) => Date.parse(lastModified)) + .sort() + .at(0) ?? null + }, + /** + * App authors as comma separated string + */ + appAuthors() { + console.warn(this.app) + if (!this.app) { + return '' + } + + const authorName = (xmlNode) => { + if (xmlNode['@value']) { + // Complex node (with email or homepage attribute) + return xmlNode['@value'] + } + // Simple text node + return xmlNode + } + + const authors = Array.isArray(this.app.author) + ? this.app.author.map(authorName) + : [authorName(this.app.author)] + + return authors + .sort((a, b) => a.split(' ').at(-1).localeCompare(b.split(' ').at(-1))) + .join(', ') + }, + + appstoreUrl() { + return `https://apps.nextcloud.com/apps/${this.app.id}` + }, + + /** + * Further external resources (e.g. website) + */ + externalResources() { + const resources = [] + if (!this.app.internal) { + resources.push({ + id: 'appstore', + href: this.appstoreUrl, + label: t('settings', 'View in store'), + }) + } + if (this.app.website) { + resources.push({ + id: 'website', + href: this.app.website, + label: t('settings', 'Visit website'), + }) + } + if (this.app.documentation) { + if (this.app.documentation.user) { + resources.push({ + id: 'doc-user', + href: this.app.documentation.user, + label: t('settings', 'Usage documentation'), + }) + } + if (this.app.documentation.admin) { + resources.push({ + id: 'doc-admin', + href: this.app.documentation.admin, + label: t('settings', 'Admin documentation'), + }) + } + if (this.app.documentation.developer) { + resources.push({ + id: 'doc-developer', + href: this.app.documentation.developer, + label: t('settings', 'Developer documentation'), + }) + } + } + return resources + }, + + appCategories() { + return [this.app.category].flat() + .map((id) => this.store.getCategoryById(id)?.displayName ?? id) + .join(', ') + }, + + rateAppUrl() { + return `${this.appstoreUrl}#comments` + }, + appGroups() { + return this.app.groups.map(group => { return { id: group, name: group } }) + }, + groups() { + return this.$store.getters.getGroups + .filter(group => group.id !== 'disabled') + .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> + +<style scoped lang="scss"> +.app-details { + padding: 20px; + + &__actions { + // app management + &-manage { + // if too many, shrink them and ellipsis + display: flex; + align-items: center; + input { + flex: 0 1 auto; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + } + &__authors { + color: var(--color-text-maxcontrast); + } + + &__section { + margin-top: 15px; + + h4 { + font-size: 16px; + font-weight: bold; + margin-block-end: 5px; + } + } + + &__interact { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 12px; + } + + &__documentation { + a { + text-decoration: underline; + } + li { + padding-inline-start: 20px; + + &::before { + width: 5px; + height: 5px; + border-radius: 100%; + background-color: var(--color-main-text); + content: ""; + float: inline-start; + margin-inline-start: -13px; + position: relative; + top: 10px; + } + } + } +} + +.force { + color: var(--color-error); + border-color: var(--color-error); + background: var(--color-main-background); +} + +.force:hover, +.force:active { + color: var(--color-main-background); + border-color: var(--color-error) !important; + background: var(--color-error); +} + +.missing-dependencies { + list-style: initial; + list-style-type: initial; + list-style-position: inside; +} +</style> diff --git a/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue b/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue new file mode 100644 index 00000000000..e65df0341db --- /dev/null +++ b/apps/settings/src/components/AppStoreSidebar/AppReleasesTab.vue @@ -0,0 +1,57 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcAppSidebarTab v-if="hasChangelog" + id="changelog" + :name="t('settings', 'Changelog')" + :order="2"> + <template #icon> + <NcIconSvgWrapper :path="mdiClockFast" :size="24" /> + </template> + <div v-for="release in app.releases" :key="release.version" class="app-sidebar-tabs__release"> + <h2>{{ release.version }}</h2> + <Markdown class="app-sidebar-tabs__release-text" + :text="createChangelogFromRelease(release)" /> + </div> + </NcAppSidebarTab> +</template> + +<script setup lang="ts"> +import type { IAppstoreApp, IAppstoreAppRelease } from '../../app-types.ts' + +import { mdiClockFast } from '@mdi/js' +import { getLanguage, translate as t } from '@nextcloud/l10n' +import { computed } from 'vue' + +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 +const props = defineProps<{ app: IAppstoreApp }>() + +const hasChangelog = computed(() => Object.values(props.app.releases?.[0]?.translations ?? {}).some(({ changelog }) => !!changelog)) + +const createChangelogFromRelease = (release: IAppstoreAppRelease) => release.translations?.[getLanguage()]?.changelog ?? release.translations?.en?.changelog ?? '' +</script> + +<style scoped lang="scss"> +.app-sidebar-tabs__release { + h2 { + border-bottom: 1px solid var(--color-border); + font-size: 24px; + } + + &-text { + // Overwrite changelog heading styles + :deep(h3) { + font-size: 20px; + } + :deep(h4) { + font-size: 17px; + } + } +} +</style> diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/components/AuthToken.vue new file mode 100644 index 00000000000..15286adb135 --- /dev/null +++ b/apps/settings/src/components/AuthToken.vue @@ -0,0 +1,354 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <tr :class="['auth-token', { 'auth-token--wiping': wiping }]" :data-id="token.id"> + <td class="auth-token__name"> + <NcIconSvgWrapper :path="tokenIcon" /> + <div class="auth-token__name-wrapper"> + <form v-if="token.canRename && renaming" + class="auth-token__name-form" + @submit.prevent.stop="rename"> + <NcTextField ref="input" + :value.sync="newName" + :label="t('settings', 'Device name')" + :show-trailing-button="true" + :trailing-button-label="t('settings', 'Cancel renaming')" + @trailing-button-click="cancelRename" + @keyup.esc="cancelRename" /> + <NcButton :aria-label="t('settings', 'Save new name')" type="tertiary" native-type="submit"> + <template #icon> + <NcIconSvgWrapper :path="mdiCheck" /> + </template> + </NcButton> + </form> + <span v-else>{{ tokenLabel }}</span> + <span v-if="wiping" class="wiping-warning">({{ t('settings', 'Marked for remote wipe') }})</span> + </div> + </td> + <td> + <NcDateTime class="auth-token__last-activity" + :ignore-seconds="true" + :timestamp="tokenLastActivity" /> + </td> + <td class="auth-token__actions"> + <NcActions v-if="!token.current" + :title="t('settings', 'Device settings')" + :aria-label="t('settings', 'Device settings')" + :open.sync="actionOpen"> + <NcActionCheckbox v-if="canChangeScope" + :checked="token.scope.filesystem" + @update:checked="updateFileSystemScope"> + <!-- TODO: add text/longtext with some description --> + {{ t('settings', 'Allow filesystem access') }} + </NcActionCheckbox> + <NcActionButton v-if="token.canRename" + icon="icon-rename" + @click.stop.prevent="startRename"> + <!-- TODO: add text/longtext with some description --> + {{ t('settings', 'Rename') }} + </NcActionButton> + + <!-- revoke & wipe --> + <template v-if="token.canDelete"> + <template v-if="token.type !== 2"> + <NcActionButton icon="icon-delete" + @click.stop.prevent="revoke"> + <!-- TODO: add text/longtext with some description --> + {{ t('settings', 'Revoke') }} + </NcActionButton> + <NcActionButton icon="icon-delete" + @click.stop.prevent="wipe"> + {{ t('settings', 'Wipe device') }} + </NcActionButton> + </template> + <NcActionButton v-else-if="token.type === 2" + icon="icon-delete" + :name="t('settings', 'Revoke')" + @click.stop.prevent="revoke"> + {{ t('settings', 'Revoking this token might prevent the wiping of your device if it has not started the wipe yet.') }} + </NcActionButton> + </template> + </NcActions> + </td> + </tr> +</template> + +<script lang="ts"> +import type { PropType } from 'vue' +import type { IToken } from '../store/authtoken' + +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/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 = { + ie: /(?:MSIE|Trident|Trident\/7.0; rv)[ :](\d+)/, + // Microsoft Edge User Agent from https://msdn.microsoft.com/en-us/library/hh869301(v=vs.85).aspx + edge: /^Mozilla\/5\.0 \([^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\) Chrome\/[0-9.]+ (?:Mobile Safari|Safari)\/[0-9.]+ Edge\/[0-9.]+$/, + // Firefox User Agent from https://developer.mozilla.org/en-US/docs/Web/HTTP/Gecko_user_agent_string_reference + firefox: /^Mozilla\/5\.0 \([^)]*(Windows|OS X|Linux)[^)]+\) Gecko\/[0-9.]+ Firefox\/(\d+)(?:\.\d)?$/, + // Chrome User Agent from https://developer.chrome.com/multidevice/user-agent + chrome: /^Mozilla\/5\.0 \([^)]*(Windows|OS X|Linux)[^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\) Chrome\/(\d+)[0-9.]+ (?:Mobile Safari|Safari)\/[0-9.]+$/, + // Safari User Agent from http://www.useragentstring.com/pages/Safari/ + safari: /^Mozilla\/5\.0 \([^)]*(Windows|OS X)[^)]+\) AppleWebKit\/[0-9.]+ \(KHTML, like Gecko\)(?: Version\/([0-9]+)[0-9.]+)? Safari\/[0-9.A-Z]+$/, + // Android Chrome user agent: https://developers.google.com/chrome/mobile/docs/user-agent + androidChrome: /Android.*(?:; (.*) Build\/).*Chrome\/(\d+)[0-9.]+/, + iphone: / *CPU +iPhone +OS +([0-9]+)_(?:[0-9_])+ +like +Mac +OS +X */, + ipad: /\(iPad; *CPU +OS +([0-9]+)_(?:[0-9_])+ +like +Mac +OS +X */, + iosClient: /^Mozilla\/5\.0 \(iOS\) (?:ownCloud|Nextcloud)-iOS.*$/, + androidClient: /^Mozilla\/5\.0 \(Android\) (?:ownCloud|Nextcloud)-android.*$/, + iosTalkClient: /^Mozilla\/5\.0 \(iOS\) Nextcloud-Talk.*$/, + androidTalkClient: /^Mozilla\/5\.0 \(Android\) Nextcloud-Talk.*$/, + // DAVx5/3.3.8-beta2-gplay (2021/01/02; dav4jvm; okhttp/4.9.0) Android/10 + davx5: /DAV(?:droid|x5)\/([^ ]+)/, + // Mozilla/5.0 (U; Linux; Maemo; Jolla; Sailfish; like Android 4.3) AppleWebKit/538.1 (KHTML, like Gecko) WebPirate/2.0 like Mobile Safari/538.1 (compatible) + webPirate: /(Sailfish).*WebPirate\/(\d+)/, + // Mozilla/5.0 (Maemo; Linux; U; Jolla; Sailfish; Mobile; rv:31.0) Gecko/31.0 Firefox/31.0 SailfishBrowser/1.0 + sailfishBrowser: /(Sailfish).*SailfishBrowser\/(\d+)/, + // Neon 1.0.0+1 + neon: /Neon \d+\.\d+\.\d+\+\d+/, +} +const nameMap = { + edge: 'Microsoft Edge', + firefox: 'Firefox', + chrome: 'Google Chrome', + safari: 'Safari', + androidChrome: t('settings', 'Google Chrome for Android'), + iphone: 'iPhone', + ipad: 'iPad', + iosClient: t('settings', '{productName} iOS app', { productName: window.oc_defaults.productName }), + androidClient: t('settings', '{productName} Android app', { productName: window.oc_defaults.productName }), + iosTalkClient: t('settings', '{productName} Talk for iOS', { productName: window.oc_defaults.productName }), + androidTalkClient: t('settings', '{productName} Talk for Android', { productName: window.oc_defaults.productName }), + syncClient: t('settings', 'Sync client'), + davx5: 'DAVx5', + webPirate: 'WebPirate', + sailfishBrowser: 'SailfishBrowser', + neon: 'Neon', +} + +export default defineComponent({ + name: 'AuthToken', + components: { + NcActions, + NcActionButton, + NcActionCheckbox, + NcButton, + NcDateTime, + NcIconSvgWrapper, + NcTextField, + }, + props: { + token: { + type: Object as PropType<IToken>, + required: true, + }, + }, + setup() { + const authTokenStore = useAuthTokenStore() + return { authTokenStore } + }, + data() { + return { + actionOpen: false, + renaming: false, + newName: '', + oldName: '', + mdiCheck, + } + }, + computed: { + canChangeScope() { + return this.token.type === TokenType.PERMANENT_TOKEN + }, + /** + * 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 + const matches = this.token.name.match(/Mozilla\/5\.0 \((\w+)\) (?:mirall|csyncoC)\/(\d+\.\d+\.\d+)/) + + if (matches) { + return { + id: 'syncClient', + os: matches[1], + version: matches[2], + } + } + + for (const client in userAgentMap) { + const matches = this.token.name.match(userAgentMap[client]) + if (matches) { + return { + id: client, + os: matches[2] && matches[1], + version: matches[2] ?? matches[1], + } + } + } + + return null + }, + /** + * Last activity of the token as ECMA timestamp (in ms) + */ + tokenLastActivity() { + return this.token.lastActivity * 1000 + }, + /** + * Icon to use for the current token + */ + tokenIcon() { + // For custom created app tokens / app passwords + if (this.token.type === TokenType.PERMANENT_TOKEN) { + return mdiKeyOutline + } + + switch (this.client?.id) { + case 'edge': + return mdiMicrosoftEdge + case 'firefox': + return mdiFirefox + case 'chrome': + return mdiGoogleChrome + case 'safari': + return mdiAppleSafari + case 'androidChrome': + case 'androidClient': + case 'androidTalkClient': + return mdiAndroid + case 'iphone': + case 'iosClient': + case 'iosTalkClient': + return mdiAppleIos + case 'ipad': + return mdiTablet + case 'davx5': + return mdiCellphone + case 'syncClient': + return mdiMonitor + case 'webPirate': + case 'sailfishBrowser': + default: + return mdiWeb + } + }, + /** + * Label to be shown for current token + */ + tokenLabel() { + if (this.token.current) { + return t('settings', 'This session') + } + if (this.client === null) { + return this.token.name + } + + const name = nameMap[this.client.id] + if (this.client.os) { + return t('settings', '{client} - {version} ({system})', { client: name, system: this.client.os, version: this.client.version }) + } else if (this.client.version) { + return t('settings', '{client} - {version}', { client: name, version: this.client.version }) + } + return name + }, + /** + * If the current token is considered for remote wiping + */ + wiping() { + return this.token.type === TokenType.WIPING_TOKEN + }, + }, + methods: { + t, + updateFileSystemScope(state: boolean) { + this.authTokenStore.setTokenScope(this.token, 'filesystem', state) + }, + startRename() { + // Close action (popover menu) + this.actionOpen = false + + this.oldName = this.token.name + this.newName = this.token.name + this.renaming = true + this.$nextTick(() => { + this.$refs.input!.select() + }) + }, + cancelRename() { + this.renaming = false + }, + revoke() { + this.actionOpen = false + this.authTokenStore.deleteToken(this.token) + }, + rename() { + this.renaming = false + this.authTokenStore.renameToken(this.token, this.newName) + }, + wipe() { + this.actionOpen = false + this.authTokenStore.wipeToken(this.token) + }, + }, +}) +</script> + +<style lang="scss" scoped> +.auth-token { + border-top: 2px solid var(--color-border); + max-width: 200px; + white-space: normal; + vertical-align: middle; + position: relative; + + &--wiping { + background-color: var(--color-background-dark); + } + + &__name { + padding-block: 10px; + display: flex; + align-items: center; + gap: 6px; + min-width: 355px; // ensure no jumping when renaming + } + + &__name-wrapper { + display: flex; + flex-direction: column; + } + + &__name-form { + align-items: end; + display: flex; + gap: 4px; + } + + &__actions { + padding: 0 10px; + } + + &__last-activity { + padding-inline-start: 10px; + } + + .wiping-warning { + color: var(--color-text-maxcontrast); + } +} +</style> diff --git a/apps/settings/src/components/AuthTokenList.vue b/apps/settings/src/components/AuthTokenList.vue new file mode 100644 index 00000000000..dbe3b9596d8 --- /dev/null +++ b/apps/settings/src/components/AuthTokenList.vue @@ -0,0 +1,77 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <table id="app-tokens-table" class="token-list"> + <thead> + <tr> + <th class="token-list__header-device"> + {{ t('settings', 'Device') }} + </th> + <th class="toke-list__header-activity"> + {{ t('settings', 'Last activity') }} + </th> + <th> + <span class="hidden-visually"> + {{ t('settings', 'Actions') }} + </span> + </th> + </tr> + </thead> + <tbody class="token-list__body"> + <AuthToken v-for="token in sortedTokens" + :key="token.id" + :token="token" /> + </tbody> + </table> +</template> + +<script lang="ts"> +import { translate as t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' +import { useAuthTokenStore } from '../store/authtoken' + +import AuthToken from './AuthToken.vue' + +export default defineComponent({ + name: 'AuthTokenList', + components: { + AuthToken, + }, + setup() { + const authTokenStore = useAuthTokenStore() + return { authTokenStore } + }, + computed: { + sortedTokens() { + return [...this.authTokenStore.tokens].sort((t1, t2) => t2.lastActivity - t1.lastActivity) + }, + }, + methods: { + t, + }, +}) +</script> + +<style lang="scss" scoped> +.token-list { + width: 100%; + min-height: 50px; + padding-top: 5px; + max-width: fit-content; + + th { + padding-block: 10px; + padding-inline-start: 10px; + } + + #{&}__header-device { + padding-inline-start: 50px; // 44px icon + 6px padding + } + &__header-activity { + text-align: end; + } +} +</style> diff --git a/apps/settings/src/components/AuthTokenSection.vue b/apps/settings/src/components/AuthTokenSection.vue new file mode 100644 index 00000000000..3a216f6407f --- /dev/null +++ b/apps/settings/src/components/AuthTokenSection.vue @@ -0,0 +1,40 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div id="security" class="section"> + <h2>{{ t('settings', 'Devices & sessions', {}, undefined, {sanitize: false}) }}</h2> + <p class="settings-hint hidden-when-empty"> + {{ t('settings', 'Web, desktop and mobile clients currently logged in to your account.') }} + </p> + <AuthTokenList /> + <AuthTokenSetup v-if="canCreateToken" /> + </div> +</template> + +<script lang="ts"> +import { loadState } from '@nextcloud/initial-state' +import { translate as t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' + +import AuthTokenList from './AuthTokenList.vue' +import AuthTokenSetup from './AuthTokenSetup.vue' + +export default defineComponent({ + name: 'AuthTokenSection', + components: { + AuthTokenList, + AuthTokenSetup, + }, + data() { + return { + canCreateToken: loadState('settings', 'can_create_app_token'), + } + }, + methods: { + t, + }, +}) +</script> diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/components/AuthTokenSetup.vue new file mode 100644 index 00000000000..b93086c9e88 --- /dev/null +++ b/apps/settings/src/components/AuthTokenSetup.vue @@ -0,0 +1,97 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <form id="generate-app-token-section" + class="row spacing" + @submit.prevent="submit"> + <!-- Port to TextField component when available --> + <NcTextField :value.sync="deviceName" + type="text" + :maxlength="120" + :disabled="loading" + class="app-name-text-field" + :label="t('settings', 'App name')" + :placeholder="t('settings', 'App name')" /> + <NcButton type="primary" + :disabled="loading || deviceName.length === 0" + native-type="submit"> + {{ t('settings', 'Create new app password') }} + </NcButton> + + <AuthTokenSetupDialog :token="newToken" @close="newToken = null" /> + </form> +</template> + +<script lang="ts"> +import { showError } from '@nextcloud/dialogs' +import { translate as t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' +import { useAuthTokenStore, type ITokenResponse } from '../store/authtoken' + +import NcButton from '@nextcloud/vue/components/NcButton' +import NcTextField from '@nextcloud/vue/components/NcTextField' + +import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue' +import logger from '../logger' + +export default defineComponent({ + name: 'AuthTokenSetup', + components: { + NcButton, + NcTextField, + AuthTokenSetupDialog, + }, + setup() { + const authTokenStore = useAuthTokenStore() + return { authTokenStore } + }, + data() { + return { + deviceName: '', + loading: false, + newToken: null as ITokenResponse|null, + } + }, + methods: { + t, + reset() { + this.loading = false + this.deviceName = '' + this.newToken = null + }, + async submit() { + try { + this.loading = true + this.newToken = await this.authTokenStore.addToken(this.deviceName) + } catch (error) { + logger.error(error as Error) + showError(t('settings', 'Error while creating device token')) + this.reset() + } finally { + this.loading = false + } + }, + }, +}) +</script> + +<style lang="scss" scoped> + .app-name-text-field { + height: 44px !important; + padding-inline-start: 12px; + margin-inline-end: 12px; + width: 200px; + } + + .row { + display: flex; + align-items: center; + } + + .spacing { + padding-top: 16px; + } +</style> diff --git a/apps/settings/src/components/AuthTokenSetupDialog.vue b/apps/settings/src/components/AuthTokenSetupDialog.vue new file mode 100644 index 00000000000..3b8fac8dc1d --- /dev/null +++ b/apps/settings/src/components/AuthTokenSetupDialog.vue @@ -0,0 +1,203 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcDialog :open.sync="open" + :name="t('settings', 'New app password')" + content-classes="token-dialog"> + <p> + {{ t('settings', 'Use the credentials below to configure your app or device. For security reasons this password will only be shown once.') }} + </p> + <div class="token-dialog__name"> + <NcTextField :label="t('settings', 'Login')" :value="loginName" readonly /> + <NcButton type="tertiary" + :title="copyLoginNameLabel" + :aria-label="copyLoginNameLabel" + @click="copyLoginName"> + <template #icon> + <NcIconSvgWrapper :path="copyNameIcon" /> + </template> + </NcButton> + </div> + <div class="token-dialog__password"> + <NcTextField ref="appPassword" + :label="t('settings', 'Password')" + :value="appPassword" + readonly /> + <NcButton type="tertiary" + :title="copyPasswordLabel" + :aria-label="copyPasswordLabel" + @click="copyPassword"> + <template #icon> + <NcIconSvgWrapper :path="copyPasswordIcon" /> + </template> + </NcButton> + </div> + <div class="token-dialog__qrcode"> + <NcButton v-if="!showQRCode" @click="showQRCode = true"> + {{ t('settings', 'Show QR code for mobile apps') }} + </NcButton> + <QR v-else :value="qrUrl" /> + </div> + </NcDialog> +</template> + +<script lang="ts"> +import type { ITokenResponse } from '../store/authtoken' + +import { mdiCheck, mdiContentCopy } from '@mdi/js' +import { showError } from '@nextcloud/dialogs' +import { translate as t } from '@nextcloud/l10n' +import { getRootUrl } from '@nextcloud/router' +import { defineComponent, type PropType } from 'vue' + +import QR from '@chenfengyuan/vue-qrcode' +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' + +export default defineComponent({ + name: 'AuthTokenSetupDialog', + components: { + NcButton, + NcDialog, + NcIconSvgWrapper, + NcTextField, + QR, + }, + props: { + token: { + type: Object as PropType<ITokenResponse|null>, + required: false, + default: null, + }, + }, + data() { + return { + isNameCopied: false, + isPasswordCopied: false, + showQRCode: false, + } + }, + computed: { + open: { + get() { + return this.token !== null + }, + set(value: boolean) { + if (!value) { + this.$emit('close') + } + }, + }, + copyPasswordIcon() { + return this.isPasswordCopied ? mdiCheck : mdiContentCopy + }, + copyNameIcon() { + return this.isNameCopied ? mdiCheck : mdiContentCopy + }, + appPassword() { + return this.token?.token ?? '' + }, + loginName() { + return this.token?.loginName ?? '' + }, + qrUrl() { + const server = window.location.protocol + '//' + window.location.host + getRootUrl() + return `nc://login/user:${this.loginName}&password:${this.appPassword}&server:${server}` + }, + copyPasswordLabel() { + if (this.isPasswordCopied) { + return t('settings', 'App password copied!') + } + return t('settings', 'Copy app password') + }, + copyLoginNameLabel() { + if (this.isNameCopied) { + return t('settings', 'Login name copied!') + } + return t('settings', 'Copy login name') + }, + }, + watch: { + token() { + // reset showing the QR code on token change + this.showQRCode = false + }, + open() { + if (this.open) { + this.$nextTick(() => { + this.$refs.appPassword!.select() + }) + } + }, + }, + methods: { + t, + async copyPassword() { + try { + await navigator.clipboard.writeText(this.appPassword) + this.isPasswordCopied = true + } catch (e) { + this.isPasswordCopied = false + logger.error(e as Error) + showError(t('settings', 'Could not copy app password. Please copy it manually.')) + } finally { + setTimeout(() => { + this.isPasswordCopied = false + }, 4000) + } + }, + async copyLoginName() { + try { + await navigator.clipboard.writeText(this.loginName) + this.isNameCopied = true + } catch (e) { + this.isNameCopied = false + logger.error(e as Error) + showError(t('settings', 'Could not copy login name. Please copy it manually.')) + } finally { + setTimeout(() => { + this.isNameCopied = false + }, 4000) + } + }, + }, +}) +</script> + +<style scoped lang="scss"> +:deep(.token-dialog) { + display: flex; + flex-direction: column; + gap: 12px; + + padding-inline: 22px; + padding-block-end: 20px; + + > * { + box-sizing: border-box; + } +} + +.token-dialog { + &__name, &__password { + align-items: end; + display: flex; + gap: 10px; + + :deep(input) { + font-family: monospace; + } + } + + &__qrcode { + display: flex; + justify-content: center; + } +} +</style> diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue new file mode 100644 index 00000000000..a9a3cbb9cef --- /dev/null +++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue @@ -0,0 +1,201 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcSettingsSection :name="t('settings', 'Background jobs')" + :description="t('settings', 'For the server to work properly, it\'s important to configure background jobs correctly. Cron is the recommended setting. Please see the documentation for more information.')" + :doc-url="backgroundJobsDocUrl"> + <template v-if="lastCron !== 0"> + <NcNoteCard v-if="oldExecution" type="error"> + {{ t('settings', 'Last job execution ran {time}. Something seems wrong.', {time: relativeTime}) }} + </NcNoteCard> + + <NcNoteCard v-else-if="longExecutionCron" type="warning"> + {{ t('settings', "Some jobs have not been executed since {maxAgeRelativeTime}. Please consider increasing the execution frequency.", {maxAgeRelativeTime}) }} + </NcNoteCard> + + <NcNoteCard v-else-if="longExecutionNotCron" type="warning"> + {{ t('settings', "Some jobs have not been executed since {maxAgeRelativeTime}. Please consider switching to system cron.", {maxAgeRelativeTime}) }} + </NcNoteCard> + + <NcNoteCard v-else type="success"> + {{ t('settings', 'Last job ran {relativeTime}.', {relativeTime}) }} + </NcNoteCard> + </template> + + <NcNoteCard v-else type="error"> + {{ t('settings', 'Background job did not run yet!') }} + </NcNoteCard> + + <NcCheckboxRadioSwitch type="radio" + :checked.sync="backgroundJobsMode" + name="backgroundJobsMode" + value="ajax" + class="ajaxSwitch" + @update:checked="onBackgroundJobModeChanged"> + {{ t('settings', 'AJAX') }} + </NcCheckboxRadioSwitch> + <em>{{ t('settings', 'Execute one task with each page loaded. Use case: Single account instance.') }}</em> + + <NcCheckboxRadioSwitch type="radio" + :checked.sync="backgroundJobsMode" + name="backgroundJobsMode" + value="webcron" + @update:checked="onBackgroundJobModeChanged"> + {{ t('settings', 'Webcron') }} + </NcCheckboxRadioSwitch> + <em>{{ t('settings', 'cron.php is registered at a webcron service to call cron.php every 5 minutes over HTTP. Use case: Very small instance (1–5 accounts depending on the usage).') }}</em> + + <NcCheckboxRadioSwitch type="radio" + :disabled="!cliBasedCronPossible" + :checked.sync="backgroundJobsMode" + value="cron" + name="backgroundJobsMode" + @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> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { showError } from '@nextcloud/dialogs' +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') +const cronMaxAge = loadState('settings', 'cronMaxAge', '') +const backgroundJobsMode = loadState('settings', 'backgroundJobsMode', 'cron') +const cliBasedCronPossible = loadState('settings', 'cliBasedCronPossible', true) +const cliBasedCronUser = loadState('settings', 'cliBasedCronUser', 'www-data') +const backgroundJobsDocUrl = loadState('settings', 'backgroundJobsDocUrl') + +export default { + name: 'BackgroundJob', + + components: { + NcCheckboxRadioSwitch, + NcSettingsSection, + NcNoteCard, + }, + + data() { + return { + lastCron, + cronMaxAge, + backgroundJobsMode, + cliBasedCronPossible, + cliBasedCronUser, + backgroundJobsDocUrl, + relativeTime: moment(lastCron * 1000).fromNow(), + maxAgeRelativeTime: moment(cronMaxAge * 1000).fromNow(), + } + }, + computed: { + cronLabel() { + let desc = t('settings', 'Use system cron service to call the cron.php file every 5 minutes.') + if (this.cliBasedCronPossible) { + desc += '<br>' + t('settings', 'The cron.php needs to be executed by the system account "{user}".', { user: this.cliBasedCronUser }) + } else { + 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 }) + } + return desc + }, + oldExecution() { + return Date.now() / 1000 - this.lastCron > 600 + }, + longExecutionNotCron() { + return Date.now() / 1000 - this.cronMaxAge > 12 * 3600 && this.backgroundJobsMode !== 'cron' + }, + longExecutionCron() { + return Date.now() / 1000 - this.cronMaxAge > 24 * 3600 && this.backgroundJobsMode === 'cron' + }, + }, + methods: { + async onBackgroundJobModeChanged(backgroundJobsMode) { + const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', { + appId: 'core', + key: 'backgroundjobs_mode', + }) + + await confirmPassword() + + try { + const { data } = await axios.post(url, { + value: backgroundJobsMode, + }) + this.handleResponse({ + status: data.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update background job mode'), + error: e, + }) + } + }, + async handleResponse({ status, errorMessage, error }) { + if (status === 'ok') { + await this.deleteError() + } else { + showError(errorMessage) + console.error(errorMessage, error) + } + }, + async deleteError() { + // clear cron errors on background job mode change + const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', { + appId: 'core', + key: 'cronErrors', + }) + + await confirmPassword() + + try { + await axios.delete(url) + } catch (error) { + console.error(error) + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.error { + margin-top: 8px; + padding: 5px; + border-radius: var(--border-radius); + color: var(--color-primary-element-text); + background-color: var(--color-error); + width: initial; +} + +.warning { + margin-top: 8px; + padding: 5px; + border-radius: var(--border-radius); + color: var(--color-primary-element-text); + background-color: var(--color-warning); + width: initial; +} + +.ajaxSwitch { + margin-top: 1rem; +} +</style> diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue new file mode 100644 index 00000000000..276448cd97b --- /dev/null +++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue @@ -0,0 +1,82 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div id="profile-settings" + class="section"> + <h2 class="inlineblock"> + {{ t('settings', 'Profile') }} + </h2> + + <p class="settings-hint"> + {{ t('settings', 'Enable or disable profile by default for new accounts.') }} + </p> + + <NcCheckboxRadioSwitch type="switch" + :checked.sync="initialProfileEnabledByDefault" + @update:checked="onProfileDefaultChange"> + {{ t('settings', 'Enable') }} + </NcCheckboxRadioSwitch> + </div> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { showError } from '@nextcloud/dialogs' + +import { saveProfileDefault } from '../../service/ProfileService.js' +import { validateBoolean } from '../../utils/validate.js' +import logger from '../../logger.ts' + +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' + +const profileEnabledByDefault = loadState('settings', 'profileEnabledByDefault', true) + +export default { + name: 'ProfileSettings', + + components: { + NcCheckboxRadioSwitch, + }, + + data() { + return { + initialProfileEnabledByDefault: profileEnabledByDefault, + } + }, + + methods: { + async onProfileDefaultChange(isEnabled) { + if (validateBoolean(isEnabled)) { + await this.updateProfileDefault(isEnabled) + } + }, + + async updateProfileDefault(isEnabled) { + try { + const responseData = await saveProfileDefault(isEnabled) + this.handleResponse({ + isEnabled, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update profile default setting'), + error: e, + }) + } + }, + + handleResponse({ isEnabled, status, errorMessage, error }) { + if (status === 'ok') { + this.initialProfileEnabledByDefault = isEnabled + } else { + showError(errorMessage) + logger.error(errorMessage, error) + } + }, + }, +} +</script> diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue new file mode 100644 index 00000000000..9ee1680516e --- /dev/null +++ b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue @@ -0,0 +1,275 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <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" + :aria-label="t('settings', '{app}\'s declarative setting field: {name}', { app: formApp, name: t(formApp, formField.title) })" + :class="{ + 'declarative-form-field-text': isTextFormField(formField), + 'declarative-form-field-select': formField.type === 'select', + 'declarative-form-field-multi-select': formField.type === 'multi-select', + 'declarative-form-field-checkbox': formField.type === 'checkbox', + '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" + :label="t(formApp, formField.title)" + :value.sync="formFieldsData[formField.id].value" + :placeholder="t(formApp, formField.placeholder)" + @update:value="onChangeDebounced(formField)" + @submit="updateDeclarativeSettingsValue(formField)" /> + </div> + <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'" + :options="formField.options" + :placeholder="t(formApp, formField.placeholder)" + :label-outside="true" + :value="formFieldsData[formField.id].value" + @input="(value) => updateFormFieldDataValue(value, formField, true)" /> + </div> + <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'" + :options="formField.options" + :placeholder="t(formApp, formField.placeholder)" + :multiple="true" + :label-outside="true" + :value="formFieldsData[formField.id].value" + @input="(value) => { + formFieldsData[formField.id].value = value + updateDeclarativeSettingsValue(formField, JSON.stringify(formFieldsData[formField.id].value)) + } + " /> + </div> + <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span> + </template> + + <template v-if="formField.type === 'checkbox'"> + <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 ?? formField.title) }} + </NcCheckboxRadioSwitch> + <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" + :id="formField.id + '_field_' + option.value" + :key="option.value" + :checked="formFieldsData[formField.id].value[option.value]" + @update:checked="(value) => { + formFieldsData[formField.id].value[option.value] = value + // 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 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" + :key="option.value" + :value="option.value" + type="radio" + :checked="formFieldsData[formField.id].value" + @update:checked="(value) => updateFormFieldDataValue(value, formField, true)"> + {{ t(formApp, option.name) }} + </NcCheckboxRadioSwitch> + <span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span> + </template> + </div> + </NcSettingsSection> +</template> + +<script> +import axios from '@nextcloud/axios' +import { generateOcsUrl } from '@nextcloud/router' +import { showError } from '@nextcloud/dialogs' +import debounce from 'debounce' +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', + components: { + NcSettingsSection, + NcInputField, + NcSelect, + NcCheckboxRadioSwitch, + }, + props: { + form: { + type: Object, + required: true, + }, + }, + data() { + return { + formFieldsData: {}, + } + }, + computed: { + formApp() { + return this.form.app || '' + }, + formFields() { + return this.form.fields || [] + }, + }, + beforeMount() { + this.initFormFieldsData() + }, + methods: { + initFormFieldsData() { + this.form.fields.forEach((formField) => { + if (formField.type === 'checkbox') { + // convert bool to number using unary plus (+) operator + this.$set(formField, 'value', +formField.value) + } + if (formField.type === 'multi-checkbox') { + if (formField.value === '') { + // Init formFieldsData from options + this.$set(formField, 'value', {}) + formField.options.forEach(option => { + this.$set(formField.value, option.value, false) + }) + } else { + this.$set(formField, 'value', JSON.parse(formField.value)) + // Merge possible new options + formField.options.forEach(option => { + if (!Object.prototype.hasOwnProperty.call(formField.value, option.value)) { + this.$set(formField.value, option.value, false) + } + }) + // Remove options that are not in the form anymore + Object.keys(formField.value).forEach(key => { + if (!formField.options.find(option => option.value === key)) { + delete formField.value[key] + } + }) + } + } + if (formField.type === 'multi-select') { + if (formField.value === '') { + // Init empty array for multi-select + this.$set(formField, 'value', []) + } else { + // JSON decode an array of multiple values set + this.$set(formField, 'value', JSON.parse(formField.value)) + } + } + this.$set(this.formFieldsData, formField.id, { + value: formField.value, + }) + }) + }, + + updateFormFieldDataValue(value, formField, update = false) { + this.formFieldsData[formField.id].value = value + if (update) { + this.updateDeclarativeSettingsValue(formField) + } + }, + + async updateDeclarativeSettingsValue(formField, value = null) { + try { + 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')) + } + }, + + onChangeDebounced: debounce(function(formField) { + this.updateDeclarativeSettingsValue(formField) + }, 1000), + + isTextFormField(formField) { + return ['text', 'password', 'email', 'tel', 'url', 'number'].includes(formField.type) + }, + }, +} +</script> + +<style lang="scss" scoped> +.declarative-form-field { + padding: 10px 0; + + .input-wrapper { + width: 100%; + max-width: 400px; + } + + &:last-child { + border-bottom: none; + } + + .hint { + display: inline-block; + color: var(--color-text-maxcontrast); + margin-inline-start: 8px; + padding-block-start: 5px; + } + + &-radio, &-multi_checkbox { + max-height: 250px; + overflow-y: auto; + } + + &-multi-select, &-select { + display: flex; + flex-direction: column; + + label { + margin-bottom: 5px; + } + } +} +</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 new file mode 100644 index 00000000000..69bb8a3f575 --- /dev/null +++ b/apps/settings/src/components/GroupListItem.vue @@ -0,0 +1,209 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <Fragment> + <NcModal v-if="showRemoveGroupModal" + @close="showRemoveGroupModal = false"> + <div class="modal__content"> + <h2 class="modal__header"> + {{ t('settings', 'Please confirm the group removal') }} + </h2> + <NcNoteCard type="warning" + show-alert> + {{ 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" + @click="showRemoveGroupModal = false"> + {{ t('settings', 'Cancel') }} + </NcButton> + <NcButton type="primary" + @click="removeGroup"> + {{ t('settings', 'Confirm') }} + </NcButton> + </div> + </div> + </NcModal> + + <NcAppNavigationItem :key="id" + ref="listItem" + :exact="true" + :name="name" + :to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }" + :loading="loadingRenameGroup" + :menu-open="openGroupMenu" + @update:menuOpen="handleGroupMenuOpen"> + <template #icon> + <AccountGroup :size="20" /> + </template> + <template #counter> + <NcCounterBubble v-if="count" + :type="active ? 'highlighted' : undefined"> + {{ count }} + </NcCounterBubble> + </template> + <template #actions> + <NcActionInput v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)" + ref="displayNameInput" + :trailing-button-label="t('settings', 'Submit')" + type="text" + :value="name" + :label=" t('settings', 'Rename group')" + @submit="renameGroup(id)"> + <template #icon> + <Pencil :size="20" /> + </template> + </NcActionInput> + <NcActionButton v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)" + @click="showRemoveGroupModal = true"> + <template #icon> + <Delete :size="20" /> + </template> + {{ t('settings', 'Delete group') }} + </NcActionButton> + </template> + </NcAppNavigationItem> + </Fragment> +</template> + +<script> +import { Fragment } from 'vue-frag' + +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/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' + +export default { + name: 'GroupListItem', + components: { + AccountGroup, + Delete, + Fragment, + NcActionButton, + NcActionInput, + NcAppNavigationItem, + NcButton, + NcCounterBubble, + NcModal, + NcNoteCard, + Pencil, + }, + props: { + /** + * If this group is currently selected + */ + active: { + type: Boolean, + required: true, + }, + /** + * Number of members within this group + */ + count: { + type: Number, + default: null, + }, + /** + * Identifier of this group + */ + id: { + type: String, + required: true, + }, + /** + * Name of this group + */ + name: { + type: String, + required: true, + }, + }, + data() { + return { + loadingRenameGroup: false, + openGroupMenu: false, + showRemoveGroupModal: false, + } + }, + computed: { + settings() { + return this.$store.getters.getServerData + }, + }, + methods: { + handleGroupMenuOpen() { + this.openGroupMenu = true + }, + async renameGroup(gid) { + // check if group id is valid + if (gid.trim() === '') { + return + } + + const displayName = this.$refs.displayNameInput.$el.querySelector('input[type="text"]').value + + // check if group name is valid + if (displayName.trim() === '') { + return + } + + try { + this.openGroupMenu = false + this.loadingRenameGroup = true + await this.$store.dispatch('renameGroup', { + groupid: gid.trim(), + displayName: displayName.trim(), + }) + + this.loadingRenameGroup = false + } catch { + this.openGroupMenu = true + this.loadingRenameGroup = false + } + }, + async removeGroup() { + try { + await this.$store.dispatch('removeGroup', this.id) + this.showRemoveGroupModal = false + } catch (error) { + showError(t('settings', 'Failed to delete group "{group}"', { group: this.name })) + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.modal { + &__header { + margin: 0; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + gap: 4px 0; + } + + &__button-row { + display: flex; + width: 100%; + justify-content: space-between; + } +} +</style> 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 new file mode 100644 index 00000000000..36535e46763 --- /dev/null +++ b/apps/settings/src/components/Markdown.vue @@ -0,0 +1,155 @@ +<!-- + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<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> + +<script> +import { marked } from 'marked' +import dompurify from 'dompurify' + +export default { + name: 'Markdown', + props: { + text: { + type: String, + default: '', + }, + minHeading: { + type: Number, + default: 1, + }, + }, + computed: { + renderMarkdown() { + const renderer = new marked.Renderer() + renderer.link = function({ href, title, text }) { + let prot + try { + prot = decodeURIComponent(unescape(href)) + .replace(/[^\w:]/g, '') + .toLowerCase() + } catch (e) { + return '' + } + + if (prot.indexOf('http:') !== 0 && prot.indexOf('https:') !== 0) { + return '' + } + + let out = '<a href="' + href + '" rel="noreferrer noopener"' + if (title) { + out += ' title="' + title + '"' + } + out += '>' + text + '</a>' + return out + } + renderer.heading = ({ text, depth }) => { + depth = Math.min(6, depth + (this.minHeading - 1)) + return `<h${depth}>${text}</h${depth}>` + } + renderer.image = ({ title, text }) => { + if (text) { + return text + } + return title + } + renderer.blockquote = ({ text }) => { + return `<blockquote>${text}</blockquote>` + } + return dompurify.sanitize( + marked(this.text.trim(), { + renderer, + gfm: false, + highlight: false, + tables: false, + breaks: false, + pedantic: false, + sanitize: true, + smartLists: true, + smartypants: false, + }), + { + SAFE_FOR_JQUERY: true, + ALLOWED_TAGS: [ + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'strong', + 'p', + 'a', + 'ul', + 'ol', + 'li', + 'em', + 'del', + 'blockquote', + ], + }, + ) + }, + }, +} +</script> + +<style scoped lang="scss"> +.settings-markdown :deep { + a { + text-decoration: underline; + &::after { + content: '↗'; + padding-inline: calc(var(--default-grid-baseline) / 2); + } + } + + pre { + white-space: pre; + overflow-x: auto; + background-color: var(--color-background-dark); + border-radius: var(--border-radius); + padding: 1em 1.3em; + margin-bottom: 1em; + } + + p code { + background-color: var(--color-background-dark); + border-radius: var(--border-radius); + padding: .1em .3em; + } + + li { + position: relative; + } + + ul, ol { + padding-inline-start: 10px; + margin-inline-start: 10px; + } + + ul li { + list-style-type: disc; + } + + ul > li > ul > li { + list-style-type: circle; + } + + ul > li > ul > li ul li { + list-style-type: square; + } + + blockquote { + padding-inline-start: 1em; + border-inline-start: 4px solid var(--color-primary-element); + color: var(--color-text-maxcontrast); + margin-inline: 0; + } +} +</style> diff --git a/apps/settings/src/components/PasswordSection.vue b/apps/settings/src/components/PasswordSection.vue new file mode 100644 index 00000000000..44845c51ff4 --- /dev/null +++ b/apps/settings/src/components/PasswordSection.vue @@ -0,0 +1,82 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcSettingsSection :name="t('settings', 'Password')"> + <form id="passwordform" method="POST" @submit.prevent="changePassword"> + <NcPasswordField id="old-pass" + :label="t('settings', 'Current password')" + name="oldpassword" + :value.sync="oldPass" + autocomplete="current-password" + autocapitalize="none" + spellcheck="false" /> + + <NcPasswordField id="new-pass" + :label="t('settings', 'New password')" + :value.sync="newPass" + :maxlength="469" + autocomplete="new-password" + autocapitalize="none" + spellcheck="false" + :check-password-strength="true" /> + + <NcButton type="primary" + native-type="submit" + :disabled="newPass.length === 0 || oldPass.length === 0"> + {{ t('settings', 'Change password') }} + </NcButton> + </form> + </NcSettingsSection> +</template> + +<script> +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' + +export default { + name: 'PasswordSection', + components: { + NcSettingsSection, + NcButton, + NcPasswordField, + }, + data() { + return { + oldPass: '', + newPass: '', + } + }, + methods: { + changePassword() { + axios.post(generateUrl('/settings/personal/changepassword'), { + oldpassword: this.oldPass, + newpassword: this.newPass, + }) + .then(res => res.data) + .then(data => { + if (data.status === 'error') { + this.errorMessage = data.data.message + showError(data.data.message) + } else { + showSuccess(data.data.message) + } + }) + }, + }, +} +</script> + +<style> + #passwordform { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 400px; + } +</style> diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue new file mode 100644 index 00000000000..a99f228668c --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue @@ -0,0 +1,309 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section id="vue-avatar-section"> + <HeaderBar :is-heading="true" + :readable="avatar.readable" + :scope.sync="avatar.scope" /> + + <div v-if="!showCropper" class="avatar__container"> + <div class="avatar__preview"> + <NcAvatar v-if="!loading" + :key="version" + :user="userId" + :aria-label="t('settings', 'Your profile picture')" + :disable-tooltip="true" + :show-user-status="false" + :size="180" /> + <div v-else class="icon-loading" /> + </div> + <template v-if="avatarChangeSupported"> + <div class="avatar__buttons"> + <NcButton :aria-label="t('settings', 'Upload profile picture')" + @click="activateLocalFilePicker"> + <template #icon> + <Upload :size="20" /> + </template> + </NcButton> + <NcButton :aria-label="t('settings', 'Choose profile picture from Files')" + @click="openFilePicker"> + <template #icon> + <Folder :size="20" /> + </template> + </NcButton> + <NcButton v-if="!isGenerated" + :aria-label="t('settings', 'Remove profile picture')" + @click="removeAvatar"> + <template #icon> + <Delete :size="20" /> + </template> + </NcButton> + </div> + <span>{{ t('settings', 'The file must be a PNG or JPG') }}</span> + <input ref="input" + type="file" + :accept="validMimeTypes.join(',')" + @change="onChange"> + </template> + <span v-else> + {{ t('settings', 'Picture provided by original account') }} + </span> + </div> + + <!-- Use v-show to ensure early cropper ref availability --> + <div v-show="showCropper" class="avatar__container"> + <VueCropper ref="cropper" + class="avatar__cropper" + v-bind="cropperOptions" /> + <div class="avatar__cropper-buttons"> + <NcButton @click="cancel"> + {{ t('settings', 'Cancel') }} + </NcButton> + <NcButton type="primary" + @click="saveAvatar"> + {{ t('settings', 'Set as profile picture') }} + </NcButton> + </div> + <span>{{ t('settings', 'Please note that it can take up to 24 hours for your profile picture to be updated everywhere.') }}</span> + </div> + </section> +</template> + +<script> +import axios from '@nextcloud/axios' +import { loadState } from '@nextcloud/initial-state' +import { generateUrl } from '@nextcloud/router' +import { getCurrentUser } from '@nextcloud/auth' +import { getFilePickerBuilder, showError } from '@nextcloud/dialogs' +import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus' + +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/DeleteOutline.vue' + +import HeaderBar from './shared/HeaderBar.vue' +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { avatar } = loadState('settings', 'personalInfoParameters', {}) +const { avatarChangeSupported } = loadState('settings', 'accountParameters', {}) + +const VALID_MIME_TYPES = ['image/png', 'image/jpeg'] + +const picker = getFilePickerBuilder(t('settings', 'Choose your profile picture')) + .setMultiSelect(false) + .setMimeTypeFilter(VALID_MIME_TYPES) + .setType(1) + .allowDirectories(false) + .build() + +export default { + name: 'AvatarSection', + + components: { + Delete, + Folder, + HeaderBar, + NcAvatar, + NcButton, + Upload, + VueCropper, + }, + + data() { + return { + avatar: { ...avatar, readable: NAME_READABLE_ENUM[avatar.name] }, + avatarChangeSupported, + showCropper: false, + loading: false, + userId: getCurrentUser().uid, + displayName: getCurrentUser().displayName, + version: oc_userconfig.avatar.version, + isGenerated: oc_userconfig.avatar.generated, + validMimeTypes: VALID_MIME_TYPES, + cropperOptions: { + aspectRatio: 1 / 1, + viewMode: 1, + guides: false, + center: false, + highlight: false, + autoCropArea: 1, + minContainerWidth: 300, + minContainerHeight: 300, + }, + } + }, + + created() { + subscribe('settings:display-name:updated', this.handleDisplayNameUpdate) + }, + + beforeDestroy() { + unsubscribe('settings:display-name:updated', this.handleDisplayNameUpdate) + }, + + methods: { + activateLocalFilePicker() { + // Set to null so that selecting the same file will trigger the change event + this.$refs.input.value = null + this.$refs.input.click() + }, + + onChange(e) { + this.loading = true + const file = e.target.files[0] + if (!this.validMimeTypes.includes(file.type)) { + showError(t('settings', 'Please select a valid png or jpg file')) + this.cancel() + return + } + + const reader = new FileReader() + reader.onload = (e) => { + this.$refs.cropper.replace(e.target.result) + this.showCropper = true + } + reader.readAsDataURL(file) + }, + + async openFilePicker() { + const path = await picker.pick() + this.loading = true + try { + const { data } = await axios.post(generateUrl('/avatar'), { path }) + if (data.status === 'success') { + this.handleAvatarUpdate(false) + } else if (data.data === 'notsquare') { + const tempAvatar = generateUrl('/avatar/tmp') + '?requesttoken=' + encodeURIComponent(OC.requestToken) + '#' + Math.floor(Math.random() * 1000) + this.$refs.cropper.replace(tempAvatar) + this.showCropper = true + } else { + showError(data.data.message) + this.cancel() + } + } catch (e) { + showError(t('settings', 'Error setting profile picture')) + this.cancel() + } + }, + + saveAvatar() { + this.showCropper = false + this.loading = true + + const canvasData = this.$refs.cropper.getCroppedCanvas() + const scaleFactor = canvasData.width > 512 ? 512 / canvasData.width : 1 + + this.$refs.cropper.scale(scaleFactor, scaleFactor).getCroppedCanvas().toBlob(async (blob) => { + if (blob === null) { + showError(t('settings', 'Error cropping profile picture')) + this.cancel() + return + } + + const formData = new FormData() + formData.append('files[]', blob) + try { + await axios.post(generateUrl('/avatar'), formData) + this.handleAvatarUpdate(false) + } catch (e) { + showError(t('settings', 'Error saving profile picture')) + this.handleAvatarUpdate(this.isGenerated) + } + }) + }, + + async removeAvatar() { + this.loading = true + try { + await axios.delete(generateUrl('/avatar')) + this.handleAvatarUpdate(true) + } catch (e) { + showError(t('settings', 'Error removing profile picture')) + this.handleAvatarUpdate(this.isGenerated) + } + }, + + cancel() { + this.showCropper = false + this.loading = false + }, + + handleAvatarUpdate(isGenerated) { + // Update the avatar version so that avatar update handlers refresh correctly + this.version = oc_userconfig.avatar.version = Date.now() + this.isGenerated = oc_userconfig.avatar.generated = isGenerated + this.loading = false + emit('settings:avatar:updated', oc_userconfig.avatar.version) + }, + + handleDisplayNameUpdate() { + this.version = oc_userconfig.avatar.version + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + grid-row: 1/3; + padding: 10px 10px; +} + +.avatar { + &__container { + margin: calc(var(--default-grid-baseline) * 2) auto 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px 0; + width: min(100%, 300px); + + span { + color: var(--color-text-lighter); + } + } + + &__preview { + display: flex; + justify-content: center; + align-items: center; + width: 180px; + height: 180px; + } + + &__buttons { + display: flex; + gap: 0 10px; + } + + &__cropper { + width: 300px; + height: 300px; + overflow: hidden; + + &-buttons { + width: 100%; + display: flex; + justify-content: space-between; + } + + :deep(.cropper-view-box) { + border-radius: 50%; + } + } +} + +input[type="file"] { + display: none; +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/BiographySection.vue b/apps/settings/src/components/PersonalInfo/BiographySection.vue new file mode 100644 index 00000000000..bbfb25e25cc --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/BiographySection.vue @@ -0,0 +1,34 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="biography" + :placeholder="t('settings', 'Your biography. Markdown is supported.')" + :multi-line="true" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { biography } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'BiographySection', + + components: { + AccountPropertySection, + }, + + data() { + return { + biography: { ...biography, readable: NAME_READABLE_ENUM[biography.name] }, + } + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/BirthdaySection.vue b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue new file mode 100644 index 00000000000..f55f09c95e5 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue @@ -0,0 +1,132 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <section> + <HeaderBar :scope="birthdate.scope" + :input-id="inputId" + :readable="birthdate.readable" /> + + <NcDateTimePickerNative :id="inputId" + type="date" + label="" + :value="value" + @input="onInput" /> + + <p class="property__helper-text-message"> + {{ t('settings', 'Enter your date of birth') }} + </p> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' +import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService' +import { handleError } from '../../utils/handlers' + +import debounce from 'debounce' + +import NcDateTimePickerNative from '@nextcloud/vue/components/NcDateTimePickerNative' +import HeaderBar from './shared/HeaderBar.vue' + +const { birthdate } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'BirthdaySection', + + components: { + NcDateTimePickerNative, + HeaderBar, + }, + + data() { + let initialValue = null + if (birthdate.value) { + initialValue = new Date(birthdate.value) + } + + return { + birthdate: { + ...birthdate, + readable: NAME_READABLE_ENUM[birthdate.name], + }, + initialValue, + } + }, + + computed: { + inputId() { + return `account-property-${birthdate.name}` + }, + value: { + get() { + return new Date(this.birthdate.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}` + }, + }, + }, + + methods: { + onInput(e) { + this.value = e + this.debouncePropertyChange(this.value) + }, + + debouncePropertyChange: debounce(async function(value) { + await this.updateProperty(value) + }, 500), + + async updateProperty(value) { + try { + const responseData = await savePrimaryAccountProperty( + this.birthdate.name, + value, + ) + this.handleResponse({ + value, + status: responseData.ocs?.meta?.status, + }) + } catch (error) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update date of birth'), + error, + }) + } + }, + + handleResponse({ value, status, errorMessage, error }) { + if (status === 'ok') { + this.initialValue = value + } else { + this.$emit('update:value', this.initialValue) + handleError(error, errorMessage) + } + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + padding: 10px 10px; + + :deep(button:disabled) { + cursor: default; + } + + .property__helper-text-message { + color: var(--color-text-maxcontrast); + padding: 4px 0; + display: flex; + align-items: center; + } +} +</style> 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 new file mode 100644 index 00000000000..d4bb0ce16ec --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/DetailsSection.vue @@ -0,0 +1,114 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section> + <HeaderBar :is-heading="true" :readable="t('settings', 'Details')" /> + + <div class="details"> + <div class="details__groups"> + <Account :size="20" /> + <div class="details__groups-info"> + <p>{{ t('settings', 'You are a member of the following groups:') }}</p> + <p class="details__groups-list"> + {{ groups.join(', ') }} + </p> + </div> + </div> + <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" + :error="usageRelative > 80" /> + </div> + </div> + </div> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { t } from '@nextcloud/l10n' + +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' + +/** SYNC to be kept in sync with `lib/public/Files/FileInfo.php` */ +const SPACE_UNLIMITED = -3 + +const { groups, quota, totalSpace, usage, usageRelative } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'DetailsSection', + + components: { + Account, + CircleSlice, + HeaderBar, + NcProgressBar, + }, + + data() { + return { + groups, + usageRelative, + } + }, + + computed: { + quotaText() { + if (quota === SPACE_UNLIMITED) { + return t('settings', 'You are using {s}{usage}{/s}', { usage, s: '<strong>', '/s': '</strong>' }, undefined, { escape: false }) + } + return t( + 'settings', + 'You are using {s}{usage}{/s} of {s}{totalSpace}{/s} ({s}{usageRelative}%{/s})', + { usage, totalSpace, usageRelative, s: '<strong>', '/s': '</strong>' }, + undefined, + { escape: false }, + ) + }, + }, +} +</script> + +<style lang="scss" scoped> +.details { + display: flex; + flex-direction: column; + margin-block: 10px; + margin-inline: 0 32px; + gap: 16px 0; + color: var(--color-text-maxcontrast); + + &__groups, + &__quota { + display: flex; + gap: 0 10px; + + &-info { + display: flex; + flex-direction: column; + width: 100%; + gap: 4px 0; + } + + &-list { + font-weight: bold; + } + + &:deep(.material-design-icon) { + align-self: flex-start; + margin-top: 2px; + } + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue new file mode 100644 index 00000000000..431dfbecc9a --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue @@ -0,0 +1,54 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="displayName" + :placeholder="t('settings', 'Your full name')" + autocomplete="username" + :is-editable="displayNameChangeSupported" + :on-validate="onValidate" + :on-save="onSave" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { emit } from '@nextcloud/event-bus' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { displayName } = loadState('settings', 'personalInfoParameters', {}) +const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {}) + +export default { + name: 'DisplayNameSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + displayName: { ...displayName, readable: NAME_READABLE_ENUM[displayName.name] }, + displayNameChangeSupported, + } + }, + + methods: { + onValidate(value) { + return value !== '' + }, + + onSave(value) { + if (oc_userconfig.avatar.generated) { + // Update the avatar version so that avatar update handlers refresh correctly + oc_userconfig.avatar.version = Date.now() + } + emit('settings:display-name:updated', value) + }, + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue new file mode 100644 index 00000000000..6a6baef8817 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue @@ -0,0 +1,420 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div> + <div class="email" :class="{ 'email--additional': !primary }"> + <div v-if="!primary" class="email__label-container"> + <label :for="inputIdWithDefault">{{ inputPlaceholder }}</label> + <FederationControl v-if="!federationDisabled && !primary" + :readable="propertyReadable" + :additional="true" + :additional-value="email" + :disabled="federationDisabled" + :handle-additional-scope-change="saveAdditionalEmailScope" + :scope.sync="localScope" + @update:scope="onScopeChange" /> + </div> + <div class="email__input-container"> + <NcTextField :id="inputIdWithDefault" + ref="email" + class="email__input" + autocapitalize="none" + autocomplete="email" + :error="hasError || !!helperText" + :helper-text="helperTextWithNonConfirmed" + label-outside + :placeholder="inputPlaceholder" + spellcheck="false" + :success="isSuccess" + type="email" + :value.sync="emailAddress" /> + + <div class="email__actions"> + <NcActions :aria-label="actionsLabel"> + <NcActionButton v-if="!primary || !isNotificationEmail" + close-after-click + :disabled="!isConfirmedAddress" + @click="setNotificationMail"> + <template #icon> + <NcIconSvgWrapper v-if="isNotificationEmail" :path="mdiStar" /> + <NcIconSvgWrapper v-else :path="mdiStarOutline" /> + </template> + {{ setNotificationMailLabel }} + </NcActionButton> + <NcActionButton close-after-click + :disabled="deleteDisabled" + @click="deleteEmail"> + <template #icon> + <NcIconSvgWrapper :path="mdiTrashCanOutline" /> + </template> + {{ deleteEmailLabel }} + </NcActionButton> + </NcActions> + </div> + </div> + </div> + + <em v-if="isNotificationEmail"> + {{ t('settings', 'Primary email for password reset and notifications') }} + </em> + </div> +</template> + +<script> +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, mdiLockOutline, mdiStar, mdiStarOutline, mdiTrashCanOutline } from '@mdi/js' + +import FederationControl from '../shared/FederationControl.vue' +import { handleError } from '../../../utils/handlers.ts' + +import { ACCOUNT_PROPERTY_READABLE_ENUM, VERIFICATION_ENUM } from '../../../constants/AccountPropertyConstants.js' +import { + removeAdditionalEmail, + saveAdditionalEmail, + saveAdditionalEmailScope, + saveNotificationEmail, + savePrimaryEmail, + updateAdditionalEmail, +} from '../../../service/PersonalInfo/EmailService.js' +import { validateEmail } from '../../../utils/validate.js' + +export default { + name: 'Email', + + components: { + NcActions, + NcActionButton, + NcIconSvgWrapper, + NcTextField, + FederationControl, + }, + + props: { + email: { + type: String, + required: true, + }, + index: { + type: Number, + default: 0, + }, + primary: { + type: Boolean, + default: false, + }, + scope: { + type: String, + required: true, + }, + activeNotificationEmail: { + type: String, + default: '', + }, + localVerificationState: { + type: Number, + default: VERIFICATION_ENUM.NOT_VERIFIED, + }, + inputId: { + type: String, + required: false, + default: '', + }, + }, + + setup() { + return { + mdiArrowLeft, + mdiLockOutline, + mdiStar, + mdiStarOutline, + mdiTrashCanOutline, + saveAdditionalEmailScope, + } + }, + + data() { + return { + hasError: false, + helperText: null, + initialEmail: this.email, + isSuccess: false, + localScope: this.scope, + propertyReadable: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL, + showFederationSettings: false, + } + }, + + computed: { + actionsLabel() { + if (this.primary) { + return t('settings', 'Email options') + } else { + return t('settings', 'Options for additional email address {index}', { index: this.index + 1 }) + } + }, + + deleteDisabled() { + if (this.primary) { + // Disable for empty primary email as there is nothing to delete + // OR when initialEmail (reflects server state) and email (current input) are not the same + return this.email === '' || this.initialEmail !== this.email + } else if (this.initialEmail !== '') { + return this.initialEmail !== this.email + } + return false + }, + + deleteEmailLabel() { + if (this.primary) { + return t('settings', 'Remove primary email') + } + return t('settings', 'Delete email') + }, + + isConfirmedAddress() { + return this.primary || this.localVerificationState === VERIFICATION_ENUM.VERIFIED + }, + + isNotConfirmedHelperText() { + if (!this.isConfirmedAddress) { + return t('settings', 'This address is not confirmed') + } + return '' + }, + + helperTextWithNonConfirmed() { + if (this.helperText || this.hasError || this.isSuccess) { + return this.helperText || '' + } + return this.isNotConfirmedHelperText + }, + + setNotificationMailLabel() { + if (this.isNotificationEmail) { + return t('settings', 'Unset as primary email') + } + return t('settings', 'Set as primary email') + }, + + federationDisabled() { + return !this.initialEmail + }, + + inputIdWithDefault() { + return this.inputId || `account-property-email--${this.index}` + }, + + inputPlaceholder() { + // Primary email has implicit linked <label> + return !this.primary ? t('settings', 'Additional email address {index}', { index: this.index + 1 }) : undefined + }, + + isNotificationEmail() { + return (this.email && this.email === this.activeNotificationEmail) + || (this.primary && this.activeNotificationEmail === '') + }, + + emailAddress: { + get() { + return this.email + }, + set(value) { + this.$emit('update:email', value) + this.debounceEmailChange(value.trim()) + }, + }, + }, + + mounted() { + if (!this.primary && this.initialEmail === '') { + // $nextTick is needed here, otherwise it may not always work + // https://stackoverflow.com/questions/51922767/autofocus-input-on-mount-vue-ios/63485725#63485725 + this.$nextTick(() => this.$refs.email?.focus()) + } + }, + + methods: { + debounceEmailChange: debounce(async function(email) { + // TODO: provide method to get native input in NcTextField + this.helperText = this.$refs.email.$refs.inputField.$refs.input.validationMessage || null + if (this.helperText !== null) { + return + } + if (validateEmail(email) || email === '') { + if (this.primary) { + await this.updatePrimaryEmail(email) + } else { + if (email) { + if (this.initialEmail === '') { + await this.addAdditionalEmail(email) + } else { + await this.updateAdditionalEmail(email) + } + } + } + } + }, 1000), + + async deleteEmail() { + if (this.primary) { + this.$emit('update:email', '') + await this.updatePrimaryEmail('') + } else { + await this.deleteAdditionalEmail() + } + }, + + async updatePrimaryEmail(email) { + try { + const responseData = await savePrimaryEmail(email) + this.handleResponse({ + email, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + if (email === '') { + this.handleResponse({ + errorMessage: t('settings', 'Unable to delete primary email address'), + error: e, + }) + } else { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update primary email address'), + error: e, + }) + } + } + }, + + async addAdditionalEmail(email) { + try { + const responseData = await saveAdditionalEmail(email) + this.handleResponse({ + email, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to add additional email address'), + error: e, + }) + } + }, + + async setNotificationMail() { + try { + const newNotificationMailValue = (this.primary || this.isNotificationEmail) ? '' : this.initialEmail + const responseData = await saveNotificationEmail(newNotificationMailValue) + this.handleResponse({ + notificationEmail: newNotificationMailValue, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: 'Unable to choose this email for notifications', + error: e, + }) + } + }, + + async updateAdditionalEmail(email) { + try { + const responseData = await updateAdditionalEmail(this.initialEmail, email) + this.handleResponse({ + email, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update additional email address'), + error: e, + }) + } + }, + + async deleteAdditionalEmail() { + try { + const responseData = await removeAdditionalEmail(this.initialEmail) + this.handleDeleteAdditionalEmail(responseData.ocs?.meta?.status) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to delete additional email address'), + error: e, + }) + } + }, + + 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'), + }) + } + }, + + handleResponse({ email, notificationEmail, status, errorMessage, error }) { + if (status === 'ok') { + // Ensure that local state reflects server state + if (email) { + this.initialEmail = email + } else if (notificationEmail !== undefined) { + this.$emit('update:notification-email', notificationEmail) + } + this.isSuccess = true + setTimeout(() => { this.isSuccess = false }, 2000) + } else { + handleError(error, errorMessage) + this.hasError = true + setTimeout(() => { this.hasError = false }, 2000) + } + }, + + onScopeChange(scope) { + this.$emit('update:scope', scope) + }, + }, +} +</script> + +<style lang="scss" scoped> +.email { + &__label-container { + height: var(--default-clickable-area); + display: flex; + flex-direction: row; + align-items: center; + gap: calc(var(--default-grid-baseline) * 2); + } + + &__input-container { + position: relative; + } + + &__input { + // TODO: provide a way to hide status icon or combine it with trailing button in NcInputField + :deep(.input-field__icon--trailing) { + display: none; + } + } + + &__actions { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue new file mode 100644 index 00000000000..f9674a3163b --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue @@ -0,0 +1,189 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section class="section-emails"> + <HeaderBar :input-id="inputId" + :readable="primaryEmail.readable" + :is-editable="true" + :is-multi-value-supported="true" + :is-valid-section="isValidSection" + :scope.sync="primaryEmail.scope" + @add-additional="onAddAdditionalEmail" /> + + <template v-if="emailChangeSupported"> + <Email :input-id="inputId" + :primary="true" + :scope.sync="primaryEmail.scope" + :email.sync="primaryEmail.value" + :active-notification-email.sync="notificationEmail" + @update:email="onUpdateEmail" + @update:notification-email="onUpdateNotificationEmail" /> + </template> + + <span v-else> + {{ primaryEmail.value || t('settings', 'No email address set') }} + </span> + + <template v-if="additionalEmails.length"> + <!-- TODO use unique key for additional email when uniqueness can be guaranteed, see https://github.com/nextcloud/server/issues/26866 --> + <Email v-for="(additionalEmail, index) in additionalEmails" + :key="additionalEmail.key" + class="section-emails__additional-email" + :index="index" + :scope.sync="additionalEmail.scope" + :email.sync="additionalEmail.value" + :local-verification-state="parseInt(additionalEmail.locallyVerified, 10)" + :active-notification-email.sync="notificationEmail" + @update:email="onUpdateEmail" + @update:notification-email="onUpdateNotificationEmail" + @delete-additional-email="onDeleteAdditionalEmail(index)" /> + </template> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import Email from './Email.vue' +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.ts' + +const { emailMap: { additionalEmails, primaryEmail, notificationEmail } } = loadState('settings', 'personalInfoParameters', {}) +const { emailChangeSupported } = loadState('settings', 'accountParameters', {}) + +export default { + name: 'EmailSection', + + components: { + HeaderBar, + Email, + }, + + data() { + return { + accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL, + additionalEmails: additionalEmails.map(properties => ({ ...properties, key: this.generateUniqueKey() })), + emailChangeSupported, + primaryEmail: { ...primaryEmail, readable: NAME_READABLE_ENUM[primaryEmail.name] }, + notificationEmail, + } + }, + + computed: { + firstAdditionalEmail() { + if (this.additionalEmails.length) { + return this.additionalEmails[0].value + } + return null + }, + + inputId() { + return `account-property-${this.primaryEmail.name}` + }, + + isValidSection() { + return validateEmail(this.primaryEmail.value) + && this.additionalEmails.map(({ value }) => value).every(validateEmail) + }, + + primaryEmailValue: { + get() { + return this.primaryEmail.value + }, + set(value) { + this.primaryEmail.value = value + }, + }, + }, + + methods: { + onAddAdditionalEmail() { + if (this.isValidSection) { + this.additionalEmails.push({ value: '', scope: DEFAULT_ADDITIONAL_EMAIL_SCOPE, key: this.generateUniqueKey() }) + } + }, + + onDeleteAdditionalEmail(index) { + this.$delete(this.additionalEmails, index) + }, + + async onUpdateEmail() { + if (this.primaryEmailValue === '' && this.firstAdditionalEmail) { + const deletedEmail = this.firstAdditionalEmail + await this.deleteFirstAdditionalEmail() + this.primaryEmailValue = deletedEmail + await this.updatePrimaryEmail() + } + }, + + async onUpdateNotificationEmail(email) { + this.notificationEmail = email + }, + + async updatePrimaryEmail() { + try { + const responseData = await savePrimaryEmail(this.primaryEmailValue) + this.handleResponse(responseData.ocs?.meta?.status) + } catch (e) { + this.handleResponse( + 'error', + t('settings', 'Unable to update primary email address'), + e, + ) + } + }, + + async deleteFirstAdditionalEmail() { + try { + const responseData = await removeAdditionalEmail(this.firstAdditionalEmail) + this.handleDeleteFirstAdditionalEmail(responseData.ocs?.meta?.status) + } catch (e) { + this.handleResponse( + 'error', + t('settings', 'Unable to delete additional email address'), + e, + ) + } + }, + + handleDeleteFirstAdditionalEmail(status) { + if (status === 'ok') { + this.$delete(this.additionalEmails, 0) + } else { + this.handleResponse( + 'error', + t('settings', 'Unable to delete additional email address'), + {}, + ) + } + }, + + handleResponse(status, errorMessage, error) { + if (status !== 'ok') { + handleError(error, errorMessage) + } + }, + + generateUniqueKey() { + return Math.random().toString(36).substring(2) + }, + }, +} +</script> + +<style lang="scss" scoped> +.section-emails { + padding: 10px 10px; + + &__additional-email { + margin-top: calc(var(--default-grid-baseline) * 3); + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/FediverseSection.vue b/apps/settings/src/components/PersonalInfo/FediverseSection.vue new file mode 100644 index 00000000000..043fa6e64b9 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/FediverseSection.vue @@ -0,0 +1,50 @@ +<!-- + - 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', 'Your 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.js' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +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/HeadlineSection.vue b/apps/settings/src/components/PersonalInfo/HeadlineSection.vue new file mode 100644 index 00000000000..25fbde5b2f5 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/HeadlineSection.vue @@ -0,0 +1,33 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="headline" + :placeholder="t('settings', 'Your headline')" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { headline } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'HeadlineSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + headline: { ...headline, readable: NAME_READABLE_ENUM[headline.name] }, + } + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue new file mode 100644 index 00000000000..8f42b2771c0 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue @@ -0,0 +1,127 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div class="language"> + <NcSelect :aria-label-listbox="t('settings', 'Languages')" + class="language__select" + :clearable="false" + :input-id="inputId" + label="name" + label-outside + :options="allLanguages" + :value="language" + @option:selected="onLanguageChange" /> + + <a href="https://www.transifex.com/nextcloud/nextcloud/" + target="_blank" + rel="noreferrer noopener"> + <em>{{ t('settings', 'Help translate') }}</em> + </a> + </div> +</template> + +<script> +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.ts' + +import NcSelect from '@nextcloud/vue/components/NcSelect' + +export default { + name: 'Language', + + components: { + NcSelect, + }, + + props: { + inputId: { + type: String, + default: null, + }, + commonLanguages: { + type: Array, + required: true, + }, + otherLanguages: { + type: Array, + required: true, + }, + language: { + type: Object, + required: true, + }, + }, + + data() { + return { + initialLanguage: this.language, + } + }, + + computed: { + /** + * All available languages, sorted like: current, common, other + */ + allLanguages() { + const common = this.commonLanguages.filter(l => l.code !== this.language.code) + const other = this.otherLanguages.filter(l => l.code !== this.language.code) + return [this.language, ...common, ...other] + }, + }, + + methods: { + async onLanguageChange(language) { + this.$emit('update:language', language) + + if (validateLanguage(language)) { + await this.updateLanguage(language) + } + }, + + async updateLanguage(language) { + try { + const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE, language.code) + this.handleResponse({ + language, + status: responseData.ocs?.meta?.status, + }) + window.location.reload() + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update language'), + error: e, + }) + } + }, + + handleResponse({ language, status, errorMessage, error }) { + if (status === 'ok') { + // Ensure that local state reflects server state + this.initialLanguage = language + } else { + handleError(error, errorMessage) + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.language { + display: grid; + + #{&}__select { + margin-top: 6px; // align with other inputs + } + + a { + text-decoration: none; + width: max-content; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue new file mode 100644 index 00000000000..4e92436fd63 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue @@ -0,0 +1,72 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section> + <HeaderBar :input-id="inputId" + :readable="propertyReadable" /> + + <Language v-if="isEditable" + :input-id="inputId" + :common-languages="commonLanguages" + :other-languages="otherLanguages" + :language.sync="language" /> + + <span v-else> + {{ t('settings', 'No language set') }} + </span> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import Language from './Language.vue' +import HeaderBar from '../shared/HeaderBar.vue' + +import { ACCOUNT_SETTING_PROPERTY_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' + +const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'LanguageSection', + + components: { + Language, + HeaderBar, + }, + + setup() { + // Non reactive instance properties + return { + commonLanguages, + otherLanguages, + propertyReadable: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LANGUAGE, + } + }, + + data() { + return { + language: activeLanguage, + } + }, + + computed: { + inputId() { + return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}` + }, + + isEditable() { + return Boolean(this.language) + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + padding: 10px 10px; +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue new file mode 100644 index 00000000000..73300756472 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/LocaleSection/Locale.vue @@ -0,0 +1,157 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div class="locale"> + <NcSelect :aria-label-listbox="t('settings', 'Locales')" + class="locale__select" + :clearable="false" + :input-id="inputId" + label="name" + label-outside + :options="allLocales" + :value="locale" + @option:selected="updateLocale" /> + + <div class="example"> + <MapClock :size="20" /> + <div class="example__text"> + <p> + <span>{{ example.date }}</span> + <span>{{ example.time }}</span> + </p> + <p> + {{ t('settings', 'Week starts on {firstDayOfWeek}', { firstDayOfWeek: example.firstDayOfWeek }) }} + </p> + </div> + </div> + </div> +</template> + +<script> +import moment from '@nextcloud/moment' +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.ts' + +export default { + name: 'Locale', + + components: { + MapClock, + NcSelect, + }, + + props: { + inputId: { + type: String, + default: null, + }, + locale: { + type: Object, + required: true, + }, + localesForLanguage: { + type: Array, + required: true, + }, + otherLocales: { + type: Array, + required: true, + }, + }, + + data() { + return { + initialLocale: this.locale, + intervalId: 0, + example: { + date: moment().format('L'), + time: moment().format('LTS'), + firstDayOfWeek: window.dayNames[window.firstDay], + }, + } + }, + + computed: { + /** + * All available locale, sorted like: current, common, other + */ + allLocales() { + const common = this.localesForLanguage.filter(l => l.code !== this.locale.code) + const other = this.otherLocales.filter(l => l.code !== this.locale.code) + return [this.locale, ...common, ...other] + }, + }, + + mounted() { + this.intervalId = window.setInterval(this.refreshExample, 1000) + }, + + beforeDestroy() { + window.clearInterval(this.intervalId) + }, + + methods: { + async updateLocale(locale) { + try { + const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, locale.code) + this.handleResponse({ + locale, + status: responseData.ocs?.meta?.status, + }) + window.location.reload() + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update locale'), + error: e, + }) + } + }, + + handleResponse({ locale, status, errorMessage, error }) { + if (status === 'ok') { + this.initialLocale = locale + } else { + this.$emit('update:locale', this.initialLocale) + handleError(error, errorMessage) + } + }, + + refreshExample() { + this.example = { + date: moment().format('L'), + time: moment().format('LTS'), + firstDayOfWeek: window.dayNames[window.firstDay], + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.locale { + display: grid; + + #{&}__select { + margin-top: 6px; // align with other inputs + } +} + +.example { + margin: 10px 0; + display: flex; + gap: 0 10px; + color: var(--color-text-maxcontrast); + + &:deep(.material-design-icon) { + align-self: flex-start; + margin-top: 2px; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue new file mode 100644 index 00000000000..d4488e77efd --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue @@ -0,0 +1,66 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section> + <HeaderBar :input-id="inputId" + :readable="propertyReadable" /> + + <Locale v-if="isEditable" + :input-id="inputId" + :locales-for-language="localesForLanguage" + :other-locales="otherLocales" + :locale.sync="locale" /> + + <span v-else> + {{ t('settings', 'No locale set') }} + </span> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import Locale from './Locale.vue' +import HeaderBar from '../shared/HeaderBar.vue' + +import { ACCOUNT_SETTING_PROPERTY_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' + +const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'LocaleSection', + + components: { + Locale, + HeaderBar, + }, + + data() { + return { + propertyReadable: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LOCALE, + localesForLanguage, + otherLocales, + locale: activeLocale, + } + }, + + computed: { + inputId() { + return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}` + }, + + isEditable() { + return Boolean(this.locale) + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + padding: 10px 10px; +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/LocationSection.vue b/apps/settings/src/components/PersonalInfo/LocationSection.vue new file mode 100644 index 00000000000..a32f86b3442 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/LocationSection.vue @@ -0,0 +1,34 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="location" + autocomplete="address-level1" + :placeholder="t('settings', 'Your city')" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { location } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'LocationSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + location: { ...location, readable: NAME_READABLE_ENUM[location.name] }, + } + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/OrganisationSection.vue b/apps/settings/src/components/PersonalInfo/OrganisationSection.vue new file mode 100644 index 00000000000..b951b938919 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/OrganisationSection.vue @@ -0,0 +1,34 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="organisation" + autocomplete="organization" + :placeholder="t('settings', 'Your organisation')" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { organisation } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'OrganisationSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + organisation: { ...organisation, readable: NAME_READABLE_ENUM[organisation.name] }, + } + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/PhoneSection.vue b/apps/settings/src/components/PersonalInfo/PhoneSection.vue new file mode 100644 index 00000000000..8ddeada960e --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/PhoneSection.vue @@ -0,0 +1,53 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="phone" + :placeholder="t('settings', 'Your phone number')" + autocomplete="tel" + type="tel" + :on-validate="onValidate" /> +</template> + +<script> +import { isValidPhoneNumber } from 'libphonenumber-js' +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { + defaultPhoneRegion, + phone, +} = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'PhoneSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + phone: { ...phone, readable: NAME_READABLE_ENUM[phone.name] }, + } + }, + + methods: { + onValidate(value) { + if (value === '') { + return true + } + + if (defaultPhoneRegion) { + return isValidPhoneNumber(value, defaultPhoneRegion) + } + return isValidPhoneNumber(value) + }, + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue new file mode 100644 index 00000000000..3deb5340751 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue @@ -0,0 +1,83 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <a :class="{ disabled }" + href="#profile-visibility" + v-on="$listeners"> + <ChevronDownIcon class="anchor-icon" + :size="22" /> + {{ t('settings', 'Edit your Profile visibility') }} + </a> +</template> + +<script> +import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue' + +export default { + name: 'EditProfileAnchorLink', + + components: { + ChevronDownIcon, + }, + + props: { + profileEnabled: { + type: Boolean, + required: true, + }, + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + }, +} +</script> + +<style lang="scss"> +html { + scroll-behavior: smooth; + + @media screen and (prefers-reduced-motion: reduce) { + scroll-behavior: auto; + } +} +</style> + +<style lang="scss" scoped> +a { + display: block; + height: 44px; + width: min(100%, 290px); + overflow: hidden; + text-overflow: ellipsis; + line-height: 44px; + padding: 0 16px; + margin: 14px auto; + border-radius: var(--border-radius-pill); + color: var(--color-text-maxcontrast); + background-color: transparent; + + .anchor-icon { + display: inline-block; + vertical-align: middle; + margin-top: 6px; + margin-inline-end: 8px; + } + + &:hover, + &:focus, + &:active { + color: var(--color-main-text); + background-color: var(--color-background-dark); + } + + &.disabled { + pointer-events: none; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue new file mode 100644 index 00000000000..6eb7cf8c34c --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue @@ -0,0 +1,73 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div class="checkbox-container"> + <NcCheckboxRadioSwitch type="switch" + :checked.sync="isProfileEnabled" + :loading="loading" + @update:checked="saveEnableProfile"> + {{ t('settings', 'Enable profile') }} + </NcCheckboxRadioSwitch> + </div> +</template> + +<script> +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/components/NcCheckboxRadioSwitch' +import { handleError } from '../../../utils/handlers.ts' + +export default { + name: 'ProfileCheckbox', + + components: { + NcCheckboxRadioSwitch, + }, + + props: { + profileEnabled: { + type: Boolean, + required: true, + }, + }, + + data() { + return { + isProfileEnabled: this.profileEnabled, + loading: false, + } + }, + + methods: { + async saveEnableProfile() { + this.loading = true + try { + const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED, this.isProfileEnabled) + this.handleResponse({ + isProfileEnabled: this.isProfileEnabled, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update profile enabled state'), + error: e, + }) + } + }, + + handleResponse({ isProfileEnabled, status, errorMessage, error }) { + if (status === 'ok') { + emit('settings:profile-enabled:updated', isProfileEnabled) + } else { + handleError(error, errorMessage) + } + this.loading = false + }, + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue new file mode 100644 index 00000000000..47894f64f34 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -0,0 +1,173 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <a class="preview-card" + :class="{ disabled }" + :href="profilePageLink"> + <NcAvatar class="preview-card__avatar" + :user="userId" + :size="48" + :show-user-status="true" + :show-user-status-compact="false" + :disable-menu="true" + :disable-tooltip="true" /> + <div class="preview-card__header"> + <span>{{ displayName }}</span> + </div> + <div class="preview-card__footer"> + <span>{{ organisation }}</span> + </div> + </a> +</template> + +<script> +import { getCurrentUser } from '@nextcloud/auth' +import { generateUrl } from '@nextcloud/router' + +import NcAvatar from '@nextcloud/vue/components/NcAvatar' + +export default { + name: 'ProfilePreviewCard', + + components: { + NcAvatar, + }, + + props: { + displayName: { + type: String, + required: true, + }, + organisation: { + type: String, + required: true, + }, + profileEnabled: { + type: Boolean, + required: true, + }, + userId: { + type: String, + required: true, + }, + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + + profilePageLink() { + if (this.profileEnabled) { + return generateUrl('/u/{userId}', { userId: getCurrentUser().uid }) + } + // Since an anchor element is used rather than a button for better UX, + // this hack removes href if the profile is disabled so that disabling pointer-events is not needed to prevent a click from opening a page + // and to allow the hover event (which disabling pointer-events wouldn't allow) for styling + return null + }, + }, +} +</script> + +<style lang="scss" scoped> +.preview-card { + display: flex; + flex-direction: column; + position: relative; + width: min(100%, 290px); + height: 116px; + margin: 14px auto; + border-radius: var(--border-radius-large); + background-color: var(--color-main-background); + font-weight: bold; + box-shadow: 0 2px 9px var(--color-box-shadow); + + &:hover, + &:focus, + &:active { + box-shadow: 0 2px 12px var(--color-box-shadow); + } + + &:focus-visible { + outline: var(--color-main-text) solid 1px; + outline-offset: 3px; + } + + &.disabled { + filter: grayscale(1); + opacity: 0.5; + cursor: default; + box-shadow: 0 0 3px var(--color-box-shadow); + + & *, + &:deep(*) { + cursor: default; + } + } + + &__avatar { + // Override Avatar component position to fix positioning on rerender + position: absolute !important; + top: 40px; + inset-inline-start: 18px; + z-index: 1; + + &:not(.avatardiv--unknown) { + box-shadow: 0 0 0 3px var(--color-main-background) !important; + } + } + + &__header, + &__footer { + position: relative; + width: auto; + + span { + position: absolute; + inset-inline-start: 78px; + overflow: hidden; + text-overflow: ellipsis; + overflow-wrap: anywhere; + + @supports (-webkit-line-clamp: 2) { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + } + + &__header { + height: 70px; + border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; + background-color: var(--color-primary-element); + + span { + bottom: 0; + color: var(--color-primary-element-text); + font-size: 18px; + font-weight: bold; + margin-block: 0 8px; + margin-inline: 0 4px; + } + } + + &__footer { + height: 46px; + + span { + top: 0; + color: var(--color-text-maxcontrast); + font-size: 14px; + font-weight: normal; + margin-block: 4px 0; + margin-inline: 0 4px; + line-height: 1.3; + } + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue new file mode 100644 index 00000000000..22c03f72697 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue @@ -0,0 +1,89 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section> + <HeaderBar :is-heading="true" :readable="propertyReadable" /> + + <ProfileCheckbox :profile-enabled.sync="profileEnabled" /> + + <ProfilePreviewCard :organisation="organisation" + :display-name="displayName" + :profile-enabled="profileEnabled" + :user-id="userId" /> + + <EditProfileAnchorLink :profile-enabled="profileEnabled" /> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' + +import EditProfileAnchorLink from './EditProfileAnchorLink.vue' +import HeaderBar from '../shared/HeaderBar.vue' +import ProfileCheckbox from './ProfileCheckbox.vue' +import ProfilePreviewCard from './ProfilePreviewCard.vue' + +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' + +const { + organisation: { value: organisation }, + displayName: { value: displayName }, + profileEnabled, + userId, +} = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'ProfileSection', + + components: { + EditProfileAnchorLink, + HeaderBar, + ProfileCheckbox, + ProfilePreviewCard, + }, + + data() { + return { + propertyReadable: ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED, + organisation, + displayName, + profileEnabled, + userId, + } + }, + + mounted() { + subscribe('settings:display-name:updated', this.handleDisplayNameUpdate) + subscribe('settings:organisation:updated', this.handleOrganisationUpdate) + }, + + beforeDestroy() { + unsubscribe('settings:display-name:updated', this.handleDisplayNameUpdate) + unsubscribe('settings:organisation:updated', this.handleOrganisationUpdate) + }, + + methods: { + handleDisplayNameUpdate(displayName) { + this.displayName = displayName + }, + + handleOrganisationUpdate(organisation) { + this.organisation = organisation + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + padding: 10px 10px; + + &:deep(button:disabled) { + cursor: default; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue new file mode 100644 index 00000000000..8acec883842 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue @@ -0,0 +1,128 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <!-- TODO remove this inline margin placeholder once the settings layout is updated --> + <section id="profile-visibility" + :style="{ marginLeft }"> + <HeaderBar :is-heading="true" :readable="heading" /> + + <em :class="{ disabled }"> + {{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }} + </em> + + <div class="visibility-dropdowns" + :style="{ + gridTemplateRows: `repeat(${rows}, 44px)`, + }"> + <VisibilityDropdown v-for="param in visibilityParams" + :key="param.id" + :param-id="param.id" + :display-id="param.displayId" + :visibility.sync="param.visibility" /> + </div> + </section> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' + +import HeaderBar from '../shared/HeaderBar.vue' +import VisibilityDropdown from './VisibilityDropdown.vue' +import { PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' + +const { profileConfig } = loadState('settings', 'profileParameters', {}) +const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) + +const compareParams = (a, b) => { + if (a.appId === b.appId || (a.appId !== 'core' && b.appId !== 'core')) { + return a.displayId.localeCompare(b.displayId) + } else if (a.appId === 'core') { + return 1 + } else { + return -1 + } +} + +export default { + name: 'ProfileVisibilitySection', + + components: { + HeaderBar, + VisibilityDropdown, + }, + + data() { + return { + heading: PROFILE_READABLE_ENUM.PROFILE_VISIBILITY, + profileEnabled, + visibilityParams: Object.entries(profileConfig) + .map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility })) + .sort(compareParams), + // TODO remove this when not used once the settings layout is updated + marginLeft: window.matchMedia('(min-width: 1600px)').matches + ? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim() + : '0px', + } + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + + rows() { + return Math.ceil(this.visibilityParams.length / 2) + }, + }, + + mounted() { + subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + // TODO remove this when not used once the settings layout is updated + window.onresize = () => { + this.marginLeft = window.matchMedia('(min-width: 1600px)').matches + ? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim() + : '0px' + } + }, + + beforeDestroy() { + unsubscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + methods: { + handleProfileEnabledUpdate(profileEnabled) { + this.profileEnabled = profileEnabled + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + padding: 30px; + max-width: 900px; + width: 100%; + + em { + display: block; + margin: 16px 0; + + &.disabled { + filter: grayscale(1); + opacity: 0.5; + cursor: default; + pointer-events: none; + + & *, + &:deep(*) { + cursor: default; + pointer-events: none; + } + } + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue new file mode 100644 index 00000000000..aaa13e63e92 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue @@ -0,0 +1,162 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div class="visibility-container" + :class="{ disabled }"> + <label :for="inputId"> + {{ displayId }} + </label> + <NcSelect :input-id="inputId" + class="visibility-container__select" + :clearable="false" + :options="visibilityOptions" + :value="visibilityObject" + label-outside + @option:selected="onVisibilityChange" /> + </div> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' + +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.ts' + +const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) + +export default { + name: 'VisibilityDropdown', + + components: { + NcSelect, + }, + + props: { + paramId: { + type: String, + required: true, + }, + displayId: { + type: String, + required: true, + }, + visibility: { + type: String, + required: true, + }, + }, + + data() { + return { + initialVisibility: this.visibility, + profileEnabled, + } + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + + inputId() { + return `profile-visibility-${this.paramId}` + }, + + visibilityObject() { + return VISIBILITY_PROPERTY_ENUM[this.visibility] + }, + + visibilityOptions() { + return Object.values(VISIBILITY_PROPERTY_ENUM) + }, + }, + + mounted() { + subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + beforeDestroy() { + unsubscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + methods: { + async onVisibilityChange(visibilityObject) { + // This check is needed as the argument is null when selecting the same option + if (visibilityObject !== null) { + const { name: visibility } = visibilityObject + this.$emit('update:visibility', visibility) + + if (visibility !== '') { + await this.updateVisibility(visibility) + } + } + }, + + async updateVisibility(visibility) { + try { + const responseData = await saveProfileParameterVisibility(this.paramId, visibility) + this.handleResponse({ + visibility, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update visibility of {displayId}', { displayId: this.displayId }), + error: e, + }) + } + }, + + handleResponse({ visibility, status, errorMessage, error }) { + if (status === 'ok') { + // Ensure that local state reflects server state + this.initialVisibility = visibility + } else { + handleError(error, errorMessage) + } + }, + + handleProfileEnabledUpdate(profileEnabled) { + this.profileEnabled = profileEnabled + }, + }, +} +</script> + +<style lang="scss" scoped> +.visibility-container { + display: flex; + flex-wrap: wrap; + + &.disabled { + filter: grayscale(1); + opacity: 0.5; + cursor: default; + pointer-events: none; + + & *, + &:deep(*) { + cursor: default; + pointer-events: none; + } + } + + label { + color: var(--color-text-lighter); + width: 150px; + line-height: 50px; + } + + &__select { + width: 270px; + max-width: 40vw; + } +} +</style> 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/RoleSection.vue b/apps/settings/src/components/PersonalInfo/RoleSection.vue new file mode 100644 index 00000000000..3581112fe1b --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/RoleSection.vue @@ -0,0 +1,34 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="role" + autocomplete="organization-title" + :placeholder="t('settings', 'Your role')" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' + +const { role } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'RoleSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + role: { ...role, readable: NAME_READABLE_ENUM[role.name] }, + } + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/TwitterSection.vue b/apps/settings/src/components/PersonalInfo/TwitterSection.vue new file mode 100644 index 00000000000..43d08f81e3f --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/TwitterSection.vue @@ -0,0 +1,34 @@ +<!-- + - 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', 'Your X (formerly Twitter) 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 { twitter } = loadState<AccountProperties>('settings', 'personalInfoParameters') + +const value = ref({ ...twitter }) +const 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/WebsiteSection.vue b/apps/settings/src/components/PersonalInfo/WebsiteSection.vue new file mode 100644 index 00000000000..762909139dd --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/WebsiteSection.vue @@ -0,0 +1,43 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <AccountPropertySection v-bind.sync="website" + :placeholder="t('settings', 'Your website')" + autocomplete="url" + type="url" + :on-validate="onValidate" /> +</template> + +<script> +import { loadState } from '@nextcloud/initial-state' + +import AccountPropertySection from './shared/AccountPropertySection.vue' + +import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' +import { validateUrl } from '../../utils/validate.js' + +const { website } = loadState('settings', 'personalInfoParameters', {}) + +export default { + name: 'WebsiteSection', + + components: { + AccountPropertySection, + }, + + data() { + return { + website: { ...website, readable: NAME_READABLE_ENUM[website.name] }, + } + }, + + methods: { + onValidate(value) { + return validateUrl(value) + }, + }, +} +</script> diff --git a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue new file mode 100644 index 00000000000..d039641ec72 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue @@ -0,0 +1,243 @@ +<!-- + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <section> + <HeaderBar :scope="scope" + :readable="readable" + :input-id="inputId" + :is-editable="isEditable" + @update:scope="(scope) => $emit('update:scope', scope)" /> + + <div v-if="isEditable" class="property"> + <NcTextArea v-if="multiLine" + :id="inputId" + autocapitalize="none" + autocomplete="off" + :error="hasError || !!helperText" + :helper-text="helperText" + label-outside + :placeholder="placeholder" + rows="8" + spellcheck="false" + :success="isSuccess" + :value.sync="inputValue" /> + <NcInputField v-else + :id="inputId" + ref="input" + autocapitalize="none" + :autocomplete="autocomplete" + :error="hasError || !!helperText" + :helper-text="helperText" + label-outside + :placeholder="placeholder" + spellcheck="false" + :success="isSuccess" + :type="type" + :value.sync="inputValue" /> + </div> + <span v-else> + {{ value || t('settings', 'No {property} set', { property: readable.toLocaleLowerCase() }) }} + </span> + </section> +</template> + +<script> +import debounce from 'debounce' +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.ts' + +export default { + name: 'AccountPropertySection', + + components: { + HeaderBar, + NcInputField, + NcTextArea, + }, + + props: { + name: { + type: String, + required: true, + }, + value: { + type: String, + required: true, + }, + scope: { + type: String, + required: true, + }, + readable: { + type: String, + required: true, + }, + placeholder: { + type: String, + required: true, + }, + type: { + type: String, + default: 'text', + }, + isEditable: { + type: Boolean, + default: true, + }, + multiLine: { + type: Boolean, + default: false, + }, + onValidate: { + type: Function, + default: null, + }, + onSave: { + type: Function, + default: null, + }, + autocomplete: { + type: String, + default: null, + }, + }, + + emits: ['update:scope', 'update:value'], + + data() { + return { + initialValue: this.value, + helperText: '', + isSuccess: false, + hasError: false, + } + }, + + computed: { + inputId() { + return `account-property-${this.name}` + }, + + inputValue: { + get() { + return this.value + }, + set(value) { + this.$emit('update:value', value) + this.debouncePropertyChange(value.trim()) + }, + }, + + debouncePropertyChange() { + return debounce(async function(value) { + this.helperText = this.$refs.input?.$refs.input?.validationMessage || '' + if (this.helperText !== '') { + return + } + this.hasError = this.onValidate && !this.onValidate(value) + if (this.hasError) { + this.helperText = t('settings', 'Invalid value') + return + } + await this.updateProperty(value) + }, 1000) + }, + }, + + methods: { + async updateProperty(value) { + try { + this.hasError = false + const responseData = await savePrimaryAccountProperty( + this.name, + value, + ) + this.handleResponse({ + value, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update {property}', { property: this.readable.toLocaleLowerCase() }), + error: e, + }) + } + }, + + handleResponse({ value, status, errorMessage, error }) { + if (status === 'ok') { + this.initialValue = value + if (this.onSave) { + this.onSave(value) + } + this.isSuccess = true + setTimeout(() => { this.isSuccess = false }, 2000) + } else { + handleError(error, errorMessage) + this.hasError = true + } + }, + }, +} +</script> + +<style lang="scss" scoped> +section { + padding: 10px 10px; + + .property { + display: flex; + flex-direction: row; + align-items: start; + gap: 4px; + + .property__actions-container { + margin-top: 6px; + justify-self: flex-end; + align-self: flex-end; + + display: flex; + gap: 0 2px; + margin-inline-end: 5px; + margin-bottom: 5px; + } + } + + .property__helper-text-message { + padding: 4px 0; + display: flex; + align-items: center; + + &__icon { + margin-inline-end: 8px; + align-self: start; + margin-top: 4px; + } + + &--error { + color: var(--color-error); + } + } + + .fade-enter, + .fade-leave-to { + opacity: 0; + } + + .fade-enter-active { + transition: opacity 200ms ease-out; + } + + .fade-leave-active { + transition: opacity 300ms ease-out; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue new file mode 100644 index 00000000000..e55a50056d3 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue @@ -0,0 +1,206 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcActions ref="federationActions" + class="federation-actions" + :aria-label="ariaLabel" + :disabled="disabled"> + <template #icon> + <NcIconSvgWrapper :path="scopeIcon" /> + </template> + + <NcActionButton v-for="federationScope in federationScopes" + :key="federationScope.name" + :close-after-click="true" + :disabled="!supportedScopes.includes(federationScope.name)" + :name="federationScope.displayName" + type="radio" + :value="federationScope.name" + :model-value="scope" + @update:modelValue="changeScope"> + <template #icon> + <NcIconSvgWrapper :path="federationScope.icon" /> + </template> + {{ supportedScopes.includes(federationScope.name) ? federationScope.tooltip : federationScope.tooltipDisabled }} + </NcActionButton> + </NcActions> +</template> + +<script> +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 { + ACCOUNT_PROPERTY_READABLE_ENUM, + ACCOUNT_SETTING_PROPERTY_READABLE_ENUM, + PROFILE_READABLE_ENUM, + PROPERTY_READABLE_KEYS_ENUM, + PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM, + SCOPE_PROPERTY_ENUM, + SCOPE_ENUM, + UNPUBLISHED_READABLE_PROPERTIES, +} from '../../../constants/AccountPropertyConstants.js' +import { savePrimaryAccountPropertyScope } from '../../../service/PersonalInfo/PersonalInfoService.js' +import { handleError } from '../../../utils/handlers.ts' + +const { + federationEnabled, + lookupServerUploadEnabled, +} = loadState('settings', 'accountParameters', {}) + +export default { + name: 'FederationControl', + + components: { + NcActions, + NcActionButton, + NcIconSvgWrapper, + }, + + props: { + readable: { + type: String, + required: true, + validator: (value) => Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(value) || Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(value) || value === PROFILE_READABLE_ENUM.PROFILE_VISIBILITY, + }, + additional: { + type: Boolean, + default: false, + }, + additionalValue: { + type: String, + default: '', + }, + disabled: { + type: Boolean, + default: false, + }, + handleAdditionalScopeChange: { + type: Function, + default: null, + }, + scope: { + type: String, + required: true, + }, + }, + + emits: ['update:scope'], + + data() { + return { + readableLowerCase: this.readable.toLocaleLowerCase(), + initialScope: this.scope, + } + }, + + computed: { + ariaLabel() { + return t('settings', 'Change scope level of {property}, current scope is {scope}', { property: this.readableLowerCase, scope: this.scopeDisplayNameLowerCase }) + }, + + scopeDisplayNameLowerCase() { + return SCOPE_PROPERTY_ENUM[this.scope].displayName.toLocaleLowerCase() + }, + + scopeIcon() { + return SCOPE_PROPERTY_ENUM[this.scope].icon + }, + + federationScopes() { + return Object.values(SCOPE_PROPERTY_ENUM) + }, + + supportedScopes() { + const scopes = PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM[this.readable] + + if (UNPUBLISHED_READABLE_PROPERTIES.includes(this.readable)) { + return scopes + } + + if (federationEnabled) { + scopes.push(SCOPE_ENUM.FEDERATED) + } + + if (lookupServerUploadEnabled) { + scopes.push(SCOPE_ENUM.PUBLISHED) + } + + return scopes + }, + }, + + methods: { + async changeScope(scope) { + this.$emit('update:scope', scope) + + if (!this.additional) { + await this.updatePrimaryScope(scope) + } else { + await this.updateAdditionalScope(scope) + } + + // TODO: provide focus method from NcActions + this.$refs.federationActions.$refs?.triggerButton?.$el?.focus?.() + }, + + async updatePrimaryScope(scope) { + try { + const responseData = await savePrimaryAccountPropertyScope(PROPERTY_READABLE_KEYS_ENUM[this.readable], scope) + this.handleResponse({ + scope, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update federation scope of the primary {property}', { property: this.readableLowerCase }), + error: e, + }) + } + }, + + async updateAdditionalScope(scope) { + try { + const responseData = await this.handleAdditionalScopeChange(this.additionalValue, scope) + this.handleResponse({ + scope, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update federation scope of additional {property}', { property: this.readableLowerCase }), + error: e, + }) + } + }, + + handleResponse({ scope, status, errorMessage, error }) { + if (status === 'ok') { + this.initialScope = scope + } else { + this.$emit('update:scope', this.initialScope) + handleError(error, errorMessage) + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.federation-actions { + &--additional { + &:deep(button) { + // TODO remove this hack + height: 30px !important; + min-height: 30px !important; + width: 30px !important; + min-width: 30px !important; + } + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue new file mode 100644 index 00000000000..7c95c2b8f4c --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue @@ -0,0 +1,153 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }"> + <h3 v-if="isHeading" class="headerbar__heading"> + <!-- Already translated as required by prop validator --> + {{ readable }} + </h3> + <label v-else :for="inputId"> + <!-- Already translated as required by prop validator --> + {{ readable }} + </label> + + <template v-if="scope"> + <FederationControl class="federation-control" + :readable="readable" + :scope.sync="localScope" + @update:scope="onScopeChange" /> + </template> + + <template v-if="isEditable && isMultiValueSupported"> + <NcButton type="tertiary" + :disabled="!isValidSection" + :aria-label="t('settings', 'Add additional email')" + @click.stop.prevent="onAddAdditional"> + <template #icon> + <Plus :size="20" /> + </template> + {{ t('settings', 'Add') }} + </NcButton> + </template> + </div> +</template> + +<script> +import NcButton from '@nextcloud/vue/components/NcButton' +import Plus from 'vue-material-design-icons/Plus.vue' + +import FederationControl from './FederationControl.vue' + +import { + ACCOUNT_PROPERTY_READABLE_ENUM, + PROFILE_READABLE_ENUM, +} from '../../../constants/AccountPropertyConstants.js' + +export default { + name: 'HeaderBar', + + components: { + FederationControl, + NcButton, + Plus, + }, + + props: { + scope: { + type: String, + default: null, + }, + readable: { + type: String, + required: true, + }, + inputId: { + type: String, + default: null, + }, + isEditable: { + type: Boolean, + default: true, + }, + isMultiValueSupported: { + type: Boolean, + default: false, + }, + isValidSection: { + type: Boolean, + default: true, + }, + isHeading: { + type: Boolean, + default: false, + }, + }, + + data() { + return { + localScope: this.scope, + } + }, + + computed: { + isProfileProperty() { + return this.readable === ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED + }, + + isSettingProperty() { + return !Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(this.readable) && !Object.values(PROFILE_READABLE_ENUM).includes(this.readable) + }, + }, + + methods: { + onAddAdditional() { + this.$emit('add-additional') + }, + + onScopeChange(scope) { + this.$emit('update:scope', scope) + }, + }, +} +</script> + +<style lang="scss" scoped> + .headerbar-label { + font-weight: normal; + display: inline-flex; + width: 100%; + margin: 12px 0 0 0; + gap: 8px; + align-items: center; + font-size: 16px; + color: var(--color-text-light); + + &.profile-property { + height: 38px; + } + + &.setting-property { + height: 34px; + } + + label { + cursor: pointer; + } + } + + .headerbar__heading { + margin: 0; + } + + .federation-control { + margin: 0; + } + + .button-vue { + 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 new file mode 100644 index 00000000000..ef24bcda026 --- /dev/null +++ b/apps/settings/src/components/SelectSharingPermissions.vue @@ -0,0 +1,83 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <fieldset class="permissions-select"> + <NcCheckboxRadioSwitch :checked="canCreate" @update:checked="toggle(PERMISSION_CREATE)"> + {{ t('settings', 'Create') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked="canUpdate" @update:checked="toggle(PERMISSION_UPDATE)"> + {{ t('settings', 'Change') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked="canDelete" @update:checked="toggle(PERMISSION_DELETE)"> + {{ t('settings', 'Delete') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch :checked="canShare" @update:checked="toggle(PERMISSION_SHARE)"> + {{ t('settings', 'Reshare') }} + </NcCheckboxRadioSwitch> + </fieldset> +</template> + +<script lang="ts"> +import { translate } from '@nextcloud/l10n' +import { defineComponent } from 'vue' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' + +export default defineComponent({ + name: 'SelectSharingPermissions', + components: { + NcCheckboxRadioSwitch, + }, + props: { + value: { + type: Number, + required: true, + }, + }, + emits: { + 'update:value': (value: number) => typeof value === 'number', + }, + data() { + return { + PERMISSION_UPDATE: 2, + PERMISSION_CREATE: 4, + PERMISSION_DELETE: 8, + PERMISSION_SHARE: 16, + } + }, + computed: { + canCreate() { + return (this.value & this.PERMISSION_CREATE) !== 0 + }, + canUpdate() { + return (this.value & this.PERMISSION_UPDATE) !== 0 + }, + canDelete() { + return (this.value & this.PERMISSION_DELETE) !== 0 + }, + canShare() { + return (this.value & this.PERMISSION_SHARE) !== 0 + }, + }, + methods: { + t: translate, + /** + * Toggle a permission + * @param permission The permission (bit) to toggle + */ + toggle(permission: number) { + // xor to toggle the bit + this.$emit('update:value', this.value ^ permission) + }, + }, +}) +</script> + +<style scoped> +.permissions-select { + display: flex; + flex-wrap: wrap; + gap: 4px; +} +</style> diff --git a/apps/settings/src/components/SvgFilterMixin.vue b/apps/settings/src/components/SvgFilterMixin.vue new file mode 100644 index 00000000000..004ab7b1857 --- /dev/null +++ b/apps/settings/src/components/SvgFilterMixin.vue @@ -0,0 +1,23 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<script> +export default { + name: 'SvgFilterMixin', + data() { + return { + filterId: '', + } + }, + computed: { + filterUrl() { + return `url(#${this.filterId})` + }, + }, + mounted() { + this.filterId = 'invertIconApps-' + Math.random().toString(36).substring(2) + }, +} +</script> diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue new file mode 100644 index 00000000000..459548fad26 --- /dev/null +++ b/apps/settings/src/components/UserList.vue @@ -0,0 +1,409 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <Fragment> + <NewUserDialog v-if="showConfig.showNewUserForm" + :loading="loading" + :new-user="newUser" + :quota-options="quotaOptions" + @reset="resetForm" + @closing="closeDialog" /> + + <NcEmptyContent v-if="filteredUsers.length === 0" + class="empty" + :name="isInitialLoad && loading.users ? null : t('settings', 'No accounts')"> + <template #icon> + <NcLoadingIcon v-if="isInitialLoad && loading.users" + :name="t('settings', 'Loading accounts …')" + :size="64" /> + <NcIconSvgWrapper v-else :path="mdiAccountGroupOutline" :size="64" /> + </template> + </NcEmptyContent> + + <VirtualList v-else + :data-component="UserRow" + :data-sources="filteredUsers" + data-key="id" + data-cy-user-list + :item-height="rowHeight" + :style="style" + :extra-props="{ + users, + settings, + hasObfuscated, + quotaOptions, + languages, + externalActions, + }" + @scroll-end="handleScrollEnd"> + <template #before> + <caption class="hidden-visually"> + {{ t('settings', 'List of accounts. This list is not fully rendered for performance reasons. The accounts will be rendered as you navigate through the list.') }} + </caption> + </template> + + <template #header> + <UserListHeader :has-obfuscated="hasObfuscated" /> + </template> + + <template #footer> + <UserListFooter :loading="loading.users" + :filtered-users="filteredUsers" /> + </template> + </VirtualList> + </Fragment> +</template> + +<script> +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/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' +import UserListFooter from './Users/UserListFooter.vue' +import UserListHeader from './Users/UserListHeader.vue' +import UserRow from './Users/UserRow.vue' + +import { defaultQuota, isObfuscated, unlimitedQuota } from '../utils/userUtils.ts' +import logger from '../logger.ts' + +const newUser = Object.freeze({ + id: '', + displayName: '', + password: '', + mailAddress: '', + groups: [], + manager: '', + subAdminsGroups: [], + quota: defaultQuota, + language: { + code: 'en', + name: t('settings', 'Default language'), + }, +}) + +export default { + name: 'UserList', + + components: { + Fragment, + NcEmptyContent, + NcIconSvgWrapper, + NcLoadingIcon, + NewUserDialog, + UserListFooter, + UserListHeader, + VirtualList, + }, + + props: { + selectedGroup: { + type: String, + default: null, + }, + externalActions: { + type: Array, + default: () => [], + }, + }, + + setup() { + // non reactive properties + return { + mdiAccountGroupOutline, + rowHeight: 55, + + UserRow, + } + }, + + data() { + return { + loading: { + all: false, + groups: false, + users: false, + }, + newUser: { ...newUser }, + isInitialLoad: true, + searchQuery: '', + } + }, + + computed: { + showConfig() { + return this.$store.getters.getShowConfig + }, + + settings() { + return this.$store.getters.getServerData + }, + + style() { + return { + '--row-height': `${this.rowHeight}px`, + } + }, + + hasObfuscated() { + return this.filteredUsers.some(user => isObfuscated(user)) + }, + + users() { + return this.$store.getters.getUsers + }, + + filteredUsers() { + if (this.selectedGroup === 'disabled') { + return this.users.filter(user => user.enabled === false) + } + return this.users.filter(user => user.enabled !== false) + }, + + groups() { + return this.$store.getters.getSortedGroups + .filter(group => group.id !== '__nc_internal_recent' && group.id !== 'disabled') + }, + + quotaOptions() { + // convert the preset array into objects + const quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({ + id: cur, + label: cur, + }), []) + // add default presets + if (this.settings.allowUnlimitedQuota) { + quotaPreset.unshift(unlimitedQuota) + } + quotaPreset.unshift(defaultQuota) + return quotaPreset + }, + + usersOffset() { + return this.$store.getters.getUsersOffset + }, + + usersLimit() { + return this.$store.getters.getUsersLimit + }, + + disabledUsersOffset() { + return this.$store.getters.getDisabledUsersOffset + }, + + disabledUsersLimit() { + return this.$store.getters.getDisabledUsersLimit + }, + + usersCount() { + return this.users.length + }, + + /* LANGUAGES */ + languages() { + return [ + { + label: t('settings', 'Common languages'), + languages: this.settings.languages.commonLanguages, + }, + { + label: t('settings', 'Other languages'), + languages: this.settings.languages.otherLanguages, + }, + ] + }, + }, + + watch: { + // watch url change and group select + async selectedGroup(val) { + this.isInitialLoad = true + // if selected is the disabled group but it's empty + await this.redirectIfDisabled() + this.$store.commit('resetUsers') + await this.loadUsers() + this.setNewUserDefaultGroup(val) + }, + + filteredUsers(filteredUsers) { + logger.debug(`${filteredUsers.length} filtered user(s)`) + }, + }, + + async created() { + await this.loadUsers() + }, + + async mounted() { + if (!this.settings.canChangePassword) { + OC.Notification.showTemporary(t('settings', 'Password change is disabled because the master key is disabled')) + } + + /** + * Reset and init new user form + */ + this.resetForm() + + /** + * Register search + */ + subscribe('nextcloud:unified-search.search', this.search) + subscribe('nextcloud:unified-search.reset', this.resetSearch) + + /** + * If disabled group but empty, redirect + */ + await this.redirectIfDisabled() + }, + + beforeDestroy() { + unsubscribe('nextcloud:unified-search.search', this.search) + unsubscribe('nextcloud:unified-search.reset', this.resetSearch) + }, + + methods: { + async handleScrollEnd() { + await this.loadUsers() + }, + + async loadUsers() { + this.loading.users = true + try { + if (this.selectedGroup === 'disabled') { + await this.$store.dispatch('getDisabledUsers', { + offset: this.disabledUsersOffset, + 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, + limit: this.usersLimit, + group: this.selectedGroup, + search: this.searchQuery, + }) + } + logger.debug(`${this.users.length} total user(s) loaded`) + } catch (error) { + logger.error('Failed to load accounts', { error }) + showError('Failed to load accounts') + } + this.loading.users = false + this.isInitialLoad = false + }, + + closeDialog() { + this.$store.commit('setShowConfig', { + key: 'showNewUserForm', + value: false, + }) + }, + + async search({ query }) { + this.searchQuery = query + this.$store.commit('resetUsers') + await this.loadUsers() + }, + + resetSearch() { + this.search({ query: '' }) + }, + + resetForm() { + // revert form to original state + this.newUser = Object.assign({}, newUser) + + /** + * Init default language from server data. The use of this.settings + * requires a computed variable, which break the v-model binding of the form, + * this is a much easier solution than getter and setter on a computed var + */ + if (this.settings.defaultLanguage) { + Vue.set(this.newUser.language, 'code', this.settings.defaultLanguage) + } + + /** + * In case the user directly loaded the user list within a group + * the watch won't be triggered. We need to initialize it. + */ + this.setNewUserDefaultGroup(this.selectedGroup) + + this.loading.all = false + }, + + setNewUserDefaultGroup(value) { + // 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) { + this.newUser.groups = [currentGroup] + return + } + } + // fallback, empty selected group + this.newUser.groups = [] + }, + + /** + * If the selected group is the disabled group but the count is 0 + * redirect to the all users page. + * we only check for 0 because we don't have the count on ldap + * and we therefore set the usercount to -1 in this specific case + */ + async redirectIfDisabled() { + const allGroups = this.$store.getters.getGroups + if (this.selectedGroup === 'disabled' + && allGroups.findIndex(group => group.id === 'disabled' && group.usercount === 0) > -1) { + // disabled group is empty, redirection to all users + this.$router.push({ name: 'users' }) + await this.loadUsers() + } + }, + }, +} +</script> + +<style lang="scss" scoped> +@use './Users/shared/styles' as *; + +.empty { + :deep { + .icon-vue { + width: 64px; + height: 64px; + + svg { + max-width: 64px; + max-height: 64px; + } + } + } +} +</style> diff --git a/apps/settings/src/components/Users/NewUserDialog.vue b/apps/settings/src/components/Users/NewUserDialog.vue new file mode 100644 index 00000000000..ef401b565fa --- /dev/null +++ b/apps/settings/src/components/Users/NewUserDialog.vue @@ -0,0 +1,436 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcDialog class="dialog" + size="small" + :name="t('settings', 'New account')" + out-transition + v-on="$listeners"> + <form id="new-user-form" + class="dialog__form" + data-test="form" + :disabled="loading.all" + @submit.prevent="createUser"> + <NcTextField ref="username" + class="dialog__item" + data-test="username" + :value.sync="newUser.id" + :disabled="settings.newUserGenerateUserID" + :label="usernameLabel" + autocapitalize="none" + autocomplete="off" + spellcheck="false" + pattern="[a-zA-Z0-9 _\.@\-']+" + required /> + <NcTextField class="dialog__item" + data-test="displayName" + :value.sync="newUser.displayName" + :label="t('settings', 'Display name')" + autocapitalize="none" + autocomplete="off" + spellcheck="false" /> + <span v-if="!settings.newUserRequireEmail" + id="password-email-hint" + class="dialog__hint"> + {{ t('settings', 'Either password or email is required') }} + </span> + <NcPasswordField ref="password" + class="dialog__item" + data-test="password" + :value.sync="newUser.password" + :minlength="minPasswordLength" + :maxlength="469" + aria-describedby="password-email-hint" + :label="newUser.mailAddress === '' ? t('settings', 'Password (required)') : t('settings', 'Password')" + autocapitalize="none" + autocomplete="new-password" + spellcheck="false" + :required="newUser.mailAddress === ''" /> + <NcTextField class="dialog__item" + data-test="email" + type="email" + :value.sync="newUser.mailAddress" + aria-describedby="password-email-hint" + :label="newUser.password === '' || settings.newUserRequireEmail ? t('settings', 'Email (required)') : t('settings', 'Email')" + autocapitalize="none" + autocomplete="off" + spellcheck="false" + :required="newUser.password === '' || settings.newUserRequireEmail" /> + <div class="dialog__item"> + <NcSelect class="dialog__select" + 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="availableGroups" + :value="newUser.groups" + label="name" + :close-on-select="false" + :multiple="true" + :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 class="dialog__item"> + <NcSelect v-model="newUser.subAdminsGroups" + class="dialog__select" + :input-label="t('settings', 'Admin of the following groups')" + :placeholder="t('settings', 'Set account as admin for …')" + :disabled="loading.groups || loading.all" + :options="availableGroups" + :close-on-select="false" + :multiple="true" + label="name" + @search="searchGroups" /> + </div> + <div class="dialog__item"> + <NcSelect v-model="newUser.quota" + class="dialog__select" + :input-label="t('settings', 'Quota')" + :placeholder="t('settings', 'Set account quota')" + :options="quotaOptions" + :clearable="false" + :taggable="true" + :create-option="validateQuota" /> + </div> + <div v-if="showConfig.showLanguages" + class="dialog__item"> + <NcSelect v-model="newUser.language" + class="dialog__select" + :input-label="t('settings', 'Language')" + :placeholder="t('settings', 'Set default language')" + :clearable="false" + :selectable="option => !option.languages" + :filter-by="languageFilterBy" + :options="languages" + label="name" /> + </div> + <div :class="['dialog__item dialog__managers', { 'icon-loading-small': loading.manager }]"> + <NcSelect v-model="newUser.manager" + class="dialog__select" + :input-label="managerInputLabel" + :placeholder="managerLabel" + :options="possibleManagers" + :user-select="true" + label="displayname" + @search="searchUserManager" /> + </div> + </form> + + <template #actions> + <NcButton class="dialog__submit" + data-test="submit" + form="new-user-form" + type="primary" + native-type="submit"> + {{ t('settings', 'Add new account') }} + </NcButton> + </template> + </NcDialog> +</template> + +<script> +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', + + components: { + NcButton, + NcDialog, + NcPasswordField, + NcSelect, + NcTextField, + }, + + props: { + loading: { + type: Object, + required: true, + }, + + newUser: { + type: Object, + required: true, + }, + + quotaOptions: { + type: Array, + required: true, + }, + }, + + data() { + return { + possibleManagers: [], + // 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 line manager'), + // Cancelable promise for search groups request + promise: null, + } + }, + + computed: { + showConfig() { + return this.$store.getters.getShowConfig + }, + + settings() { + return this.$store.getters.getServerData + }, + + usernameLabel() { + if (this.settings.newUserGenerateUserID) { + return t('settings', 'Account name will be autogenerated') + } + return t('settings', 'Account name (required)') + }, + + minPasswordLength() { + return this.$store.getters.getPasswordPolicyMinLength + }, + + 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') + }, + + languages() { + return [ + { + name: t('settings', 'Common languages'), + languages: this.settings.languages.commonLanguages, + }, + ...this.settings.languages.commonLanguages, + { + name: t('settings', 'Other languages'), + languages: this.settings.languages.otherLanguages, + }, + ...this.settings.languages.otherLanguages, + ] + }, + }, + + async beforeMount() { + await this.searchUserManager() + }, + + mounted() { + this.$refs.username?.focus?.() + }, + + methods: { + async createUser() { + this.loading.all = true + try { + await this.$store.dispatch('addUser', { + userid: this.newUser.id, + password: this.newUser.password, + displayName: this.newUser.displayName, + email: this.newUser.mailAddress, + groups: this.newUser.groups.map(group => group.id), + subadmin: this.newUser.subAdminsGroups.map(group => group.id), + quota: this.newUser.quota.id, + language: this.newUser.language.code, + manager: this.newUser.manager.id, + }) + + this.$emit('reset') + this.$refs.username?.focus?.() + this.$emit('closing') + } catch (error) { + this.loading.all = false + if (error.response && error.response.data && error.response.data.ocs && error.response.data.ocs.meta) { + const statuscode = error.response.data.ocs.meta.statuscode + if (statuscode === 102) { + // wrong username + this.$refs.username?.focus?.() + } else if (statuscode === 107) { + // wrong password + this.$refs.password?.focus?.() + } + } + } + }, + + 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) + }, + + /** + * Create a new group + * + * @param {any} group Group + * @param {string} group.name Group id + */ + async createGroup({ name: gid }) { + this.loading.groups = true + try { + await this.$store.dispatch('addGroup', gid) + this.newUser.groups.push({ id: gid, name: gid }) + } catch (error) { + 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) + }, + + /** + * Validate quota string to make sure it's a valid human file size + * + * @param {string} quota Quota in readable format '5 GB' + * @return {object} + */ + validateQuota(quota) { + // only used for new presets sent through @Tag + const validQuota = OC.Util.computerFileSize(quota) + if (validQuota !== null && validQuota >= 0) { + // unify format output + quota = formatFileSize(parseFileSize(quota, true)) + this.newUser.quota = { id: quota, label: quota } + return this.newUser.quota + } + // Default is unlimited + this.newUser.quota = this.quotaOptions[0] + return this.quotaOptions[0] + }, + + languageFilterBy(option, label, search) { + // Show group header of the language + if (option.languages) { + return option.languages.some( + ({ name }) => name.toLocaleLowerCase().includes(search.toLocaleLowerCase()), + ) + } + + return (label || '').toLocaleLowerCase().includes(search.toLocaleLowerCase()) + }, + + async searchUserManager(query) { + await this.$store.dispatch( + 'searchUsers', + { + offset: 0, + limit: 10, + search: query, + }, + ).then(response => { + const users = response?.data ? Object.values(response?.data.ocs.data.users) : [] + if (users.length > 0) { + this.possibleManagers = users + } + }) + }, + }, +} +</script> + +<style lang="scss" scoped> +.dialog { + &__form { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 8px; + gap: 4px 0; + } + + &__item { + width: 100%; + + &:not(:focus):not(:active) { + border-color: var(--color-border-dark); + } + } + + &__hint { + color: var(--color-text-maxcontrast); + margin-top: 8px; + align-self: flex-start; + } + + &__label { + display: block; + padding: 4px 0; + } + + &__select { + width: 100%; + } + + &__managers { + margin-bottom: 12px; + } + + &__submit { + margin-top: 4px; + margin-bottom: 8px; + } + + :deep { + .dialog__actions { + margin: auto; + } + } +} +</style> diff --git a/apps/settings/src/components/Users/UserListFooter.vue b/apps/settings/src/components/Users/UserListFooter.vue new file mode 100644 index 00000000000..bf9aa43b6d3 --- /dev/null +++ b/apps/settings/src/components/Users/UserListFooter.vue @@ -0,0 +1,112 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <tr class="footer"> + <th scope="row"> + <!-- TRANSLATORS Label for a table footer which summarizes the columns of the table --> + <span class="hidden-visually">{{ t('settings', 'Total rows summary') }}</span> + </th> + <td class="footer__cell footer__cell--loading"> + <NcLoadingIcon v-if="loading" + :title="t('settings', 'Loading accounts …')" + :size="32" /> + </td> + <td class="footer__cell footer__cell--count footer__cell--multiline"> + <span aria-describedby="user-count-desc">{{ userCount }}</span> + <span id="user-count-desc" + class="hidden-visually"> + {{ t('settings', 'Scroll to load more rows') }} + </span> + </td> + </tr> +</template> + +<script lang="ts"> +import Vue from 'vue' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' + +import { + translate as t, + translatePlural as n, +} from '@nextcloud/l10n' + +export default Vue.extend({ + name: 'UserListFooter', + + components: { + NcLoadingIcon, + }, + + props: { + loading: { + type: Boolean, + required: true, + }, + filteredUsers: { + type: Array, + required: true, + }, + }, + + computed: { + userCount(): string { + if (this.loading) { + return this.n( + 'settings', + '{userCount} account …', + '{userCount} accounts …', + this.filteredUsers.length, + { + userCount: this.filteredUsers.length, + }, + ) + } + return this.n( + 'settings', + '{userCount} account', + '{userCount} accounts', + this.filteredUsers.length, + { + userCount: this.filteredUsers.length, + }, + ) + }, + }, + + methods: { + t, + n, + }, +}) +</script> + +<style lang="scss" scoped> +@use './shared/styles'; + +.footer { + @include styles.row; + @include styles.cell; + + &__cell { + position: sticky; + color: var(--color-text-maxcontrast); + + &--loading { + inset-inline-start: 0; + min-width: var(--avatar-cell-width); + width: var(--avatar-cell-width); + align-items: center; + padding: 0; + } + + &--count { + inset-inline-start: var(--avatar-cell-width); + min-width: var(--cell-width); + width: var(--cell-width); + } + } +} +</style> diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue new file mode 100644 index 00000000000..a85306d84d3 --- /dev/null +++ b/apps/settings/src/components/Users/UserListHeader.vue @@ -0,0 +1,152 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <tr class="header"> + <th class="header__cell header__cell--avatar" + data-cy-user-list-header-avatar + scope="col"> + <span class="hidden-visually"> + {{ t('settings', 'Avatar') }} + </span> + </th> + <th class="header__cell header__cell--displayname" + data-cy-user-list-header-displayname + scope="col"> + <strong> + {{ t('settings', 'Display name') }} + </strong> + </th> + <th class="header__cell header__cell--username" + data-cy-user-list-header-username + scope="col"> + <span> + {{ t('settings', 'Account name') }} + </span> + </th> + <th class="header__cell" + :class="{ 'header__cell--obfuscated': hasObfuscated }" + data-cy-user-list-header-password + scope="col"> + <span>{{ passwordLabel }}</span> + </th> + <th class="header__cell" + data-cy-user-list-header-email + scope="col"> + <span>{{ t('settings', 'Email') }}</span> + </th> + <th class="header__cell header__cell--large" + data-cy-user-list-header-groups + scope="col"> + <span>{{ t('settings', 'Groups') }}</span> + </th> + <th v-if="settings.isAdmin || settings.isDelegatedAdmin" + class="header__cell header__cell--large" + data-cy-user-list-header-subadmins + scope="col"> + <span>{{ t('settings', 'Group admin for') }}</span> + </th> + <th class="header__cell" + data-cy-user-list-header-quota + scope="col"> + <span>{{ t('settings', 'Quota') }}</span> + </th> + <th v-if="showConfig.showLanguages" + class="header__cell header__cell--large" + data-cy-user-list-header-languages + scope="col"> + <span>{{ t('settings', 'Language') }}</span> + </th> + <th v-if="showConfig.showUserBackend || showConfig.showStoragePath" + class="header__cell header__cell--large" + data-cy-user-list-header-storage-location + scope="col"> + <span v-if="showConfig.showUserBackend"> + {{ t('settings', 'Account backend') }} + </span> + <span v-if="showConfig.showStoragePath" + class="header__subtitle"> + {{ 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 + scope="col"> + <span>{{ t('settings', 'Last login') }}</span> + </th> + <th class="header__cell header__cell--large header__cell--fill" + data-cy-user-list-header-manager + scope="col"> + <!-- TRANSLATORS This string describes a manager in the context of an organization --> + <span>{{ t('settings', 'Manager') }}</span> + </th> + <th class="header__cell header__cell--actions" + data-cy-user-list-header-actions + scope="col"> + <span class="hidden-visually"> + {{ t('settings', 'Account actions') }} + </span> + </th> + </tr> +</template> + +<script lang="ts"> +import Vue from 'vue' + +import { translate as t } from '@nextcloud/l10n' + +export default Vue.extend({ + name: 'UserListHeader', + + props: { + hasObfuscated: { + type: Boolean, + required: true, + }, + }, + + computed: { + showConfig() { + // @ts-expect-error: allow untyped $store + return this.$store.getters.getShowConfig + }, + + settings() { + // @ts-expect-error: allow untyped $store + return this.$store.getters.getServerData + }, + + 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 + return t('settings', 'Password or insufficient permissions message') + } + return t('settings', 'Password') + }, + }, + + methods: { + t, + }, +}) +</script> + +<style lang="scss" scoped> +@use './shared/styles'; + +.header { + 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 new file mode 100644 index 00000000000..43668725972 --- /dev/null +++ b/apps/settings/src/components/Users/UserRow.vue @@ -0,0 +1,1049 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <tr class="user-list__row" + :data-cy-user-row="user.id"> + <td class="row__cell row__cell--avatar" data-cy-user-list-cell-avatar> + <NcLoadingIcon v-if="isLoadingUser" + :name="t('settings', 'Loading account …')" + :size="32" /> + <NcAvatar v-else-if="visible" + disable-menu + :show-user-status="false" + :user="user.id" /> + </td> + + <td class="row__cell row__cell--displayname" data-cy-user-list-cell-displayname> + <template v-if="editing && user.backendCapabilities.setDisplayName"> + <NcTextField ref="displayNameField" + class="user-row-text-field" + data-cy-user-list-input-displayname + :data-loading="loading.displayName || undefined" + :trailing-button-label="t('settings', 'Submit')" + :class="{ 'icon-loading-small': loading.displayName }" + :show-trailing-button="true" + :disabled="loading.displayName || isLoadingField" + :label="t('settings', 'Change display name')" + trailing-button-icon="arrowRight" + :value.sync="editedDisplayName" + autocapitalize="off" + autocomplete="off" + spellcheck="false" + @trailing-button-click="updateDisplayName" /> + </template> + <strong v-else-if="!isObfuscated" + :title="user.displayname?.length > 20 ? user.displayname : null"> + {{ user.displayname }} + </strong> + </td> + + <td class="row__cell row__cell--username" data-cy-user-list-cell-username> + <span class="row__subtitle">{{ user.id }}</span> + </td> + + <td data-cy-user-list-cell-password + class="row__cell" + :class="{ 'row__cell--obfuscated': hasObfuscated }"> + <template v-if="editing && settings.canChangePassword && user.backendCapabilities.setPassword"> + <NcTextField class="user-row-text-field" + data-cy-user-list-input-password + :data-loading="loading.password || undefined" + :trailing-button-label="t('settings', 'Submit')" + :class="{'icon-loading-small': loading.password}" + :show-trailing-button="true" + :disabled="loading.password || isLoadingField" + :minlength="minPasswordLength" + maxlength="469" + :label="t('settings', 'Set new password')" + trailing-button-icon="arrowRight" + :value.sync="editedPassword" + autocapitalize="off" + autocomplete="new-password" + required + spellcheck="false" + type="password" + @trailing-button-click="updatePassword" /> + </template> + <span v-else-if="isObfuscated"> + {{ t('settings', 'You do not have permissions to see the details of this account') }} + </span> + </td> + + <td class="row__cell" data-cy-user-list-cell-email> + <template v-if="editing"> + <NcTextField class="user-row-text-field" + :class="{'icon-loading-small': loading.mailAddress}" + data-cy-user-list-input-email + :data-loading="loading.mailAddress || undefined" + :show-trailing-button="true" + :trailing-button-label="t('settings', 'Submit')" + :label="t('settings', 'Set new email address')" + :disabled="loading.mailAddress || isLoadingField" + trailing-button-icon="arrowRight" + :value.sync="editedMail" + autocapitalize="off" + autocomplete="email" + spellcheck="false" + type="email" + @trailing-button-click="updateEmail" /> + </template> + <span v-else-if="!isObfuscated" + :title="user.email?.length > 20 ? user.email : null"> + {{ user.email }} + </span> + </td> + + <td class="row__cell row__cell--large row__cell--multiline" data-cy-user-list-cell-groups> + <template v-if="editing"> + <label class="hidden-visually" + :for="'groups' + uniqueId"> + {{ t('settings', 'Add account to group') }} + </label> + <NcSelect data-cy-user-list-input-groups + :data-loading="loading.groups || undefined" + :input-id="'groups' + uniqueId" + :close-on-select="false" + :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 || settings.isDelegatedAdmin" + :value="userGroups" + label="name" + :no-wrap="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" /> + </template> + <span v-else-if="!isObfuscated" + :title="userGroupsLabels?.length > 40 ? userGroupsLabels : null"> + {{ userGroupsLabels }} + </span> + </td> + + <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 || settings.isDelegatedAdmin)"> + <label class="hidden-visually" + :for="'subadmins' + uniqueId"> + {{ t('settings', 'Set account as admin for') }} + </label> + <NcSelect data-cy-user-list-input-subadmins + :data-loading="loading.subadmins || undefined" + :input-id="'subadmins' + uniqueId" + :close-on-select="false" + :disabled="isLoadingField || loading.subAdminGroupsDetails" + :loading="loading.subadmins" + label="name" + :append-to-body="false" + :multiple="true" + :no-wrap="true" + :options="availableSubAdminGroups" + :placeholder="t('settings', 'Set account as admin for')" + :value="userSubAdminGroups" + @search="searchGroups" + @option:deselected="removeUserSubAdmin" + @option:selected="options => addUserSubAdmin(options.at(-1))" /> + </template> + <span v-else-if="!isObfuscated" + :title="userSubAdminGroupsLabels?.length > 40 ? userSubAdminGroupsLabels : null"> + {{ userSubAdminGroupsLabels }} + </span> + </td> + + <td class="row__cell" data-cy-user-list-cell-quota> + <template v-if="editing"> + <label class="hidden-visually" + :for="'quota' + uniqueId"> + {{ t('settings', 'Select account quota') }} + </label> + <NcSelect v-model="editedUserQuota" + :close-on-select="true" + :create-option="validateQuota" + data-cy-user-list-input-quota + :data-loading="loading.quota || undefined" + :disabled="isLoadingField" + :loading="loading.quota" + :append-to-body="false" + :clearable="false" + :input-id="'quota' + uniqueId" + :options="quotaOptions" + :placeholder="t('settings', 'Select account quota')" + :taggable="true" + @option:selected="setUserQuota" /> + </template> + <template v-else-if="!isObfuscated"> + <span :id="'quota-progress' + uniqueId">{{ userQuota }} ({{ usedSpace }})</span> + <NcProgressBar :aria-labelledby="'quota-progress' + uniqueId" + class="row__progress" + :class="{ + 'row__progress--warn': usedQuota > 80, + }" + :value="usedQuota" /> + </template> + </td> + + <td v-if="showConfig.showLanguages" + class="row__cell row__cell--large" + data-cy-user-list-cell-language> + <template v-if="editing"> + <label class="hidden-visually" + :for="'language' + uniqueId"> + {{ t('settings', 'Set the language') }} + </label> + <NcSelect :id="'language' + uniqueId" + data-cy-user-list-input-language + :data-loading="loading.languages || undefined" + :allow-empty="false" + :disabled="isLoadingField" + :loading="loading.languages" + :clearable="false" + :append-to-body="false" + :options="availableLanguages" + :placeholder="t('settings', 'No language set')" + :value="userLanguage" + label="name" + @input="setUserLanguage" /> + </template> + <span v-else-if="!isObfuscated"> + {{ userLanguage.name }} + </span> + </td> + + <td v-if="showConfig.showUserBackend || showConfig.showStoragePath" + data-cy-user-list-cell-storage-location + class="row__cell row__cell--large"> + <template v-if="!isObfuscated"> + <span v-if="showConfig.showUserBackend">{{ user.backend }}</span> + <span v-if="showConfig.showStoragePath" + :title="user.storageLocation" + class="row__subtitle"> + {{ user.storageLocation }} + </span> + </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" + data-cy-user-list-cell-last-login> + <span v-if="!isObfuscated">{{ userLastLogin }}</span> + </td> + + <td class="row__cell row__cell--large row__cell--fill" data-cy-user-list-cell-manager> + <template v-if="editing"> + <label class="hidden-visually" + :for="'manager' + uniqueId"> + {{ managerLabel }} + </label> + <NcSelect v-model="currentManager" + class="select--fill" + data-cy-user-list-input-manager + :data-loading="loading.manager || undefined" + :input-id="'manager' + uniqueId" + :disabled="isLoadingField" + :loading="loadingPossibleManagers || loading.manager" + :options="possibleManagers" + :placeholder="managerLabel" + label="displayname" + :filterable="false" + :internal-search="false" + :clearable="true" + @open="searchInitialUserManager" + @search="searchUserManager" + @update:model-value="updateUserManager" /> + </template> + <span v-else-if="!isObfuscated"> + {{ user.manager }} + </span> + </td> + + <td class="row__cell row__cell--actions" data-cy-user-list-cell-actions> + <UserRowActions v-if="visible && !isObfuscated && canEdit && !loading.all" + :actions="userActions" + :disabled="isLoadingField" + :edit="editing" + :user="user" + @update:edit="toggleEdit" /> + </td> + </tr> +</template> + +<script> +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/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 { searchGroups, loadUserGroups, loadUserSubAdminGroups } from '../../service/groups.ts' +import logger from '../../logger.ts' + +export default { + name: 'UserRow', + + components: { + NcAvatar, + NcLoadingIcon, + NcProgressBar, + NcSelect, + NcTextField, + UserRowActions, + }, + + mixins: [ + UserRowMixin, + ], + + props: { + user: { + type: Object, + required: true, + }, + visible: { + type: Boolean, + required: true, + }, + users: { + type: Array, + required: true, + }, + hasObfuscated: { + type: Boolean, + required: true, + }, + quotaOptions: { + type: Array, + required: true, + }, + languages: { + type: Array, + required: true, + }, + settings: { + type: Object, + required: true, + }, + externalActions: { + type: Array, + default: () => [], + }, + }, + + data() { + return { + selectedQuota: false, + rand: Math.random().toString(36).substring(2), + loadingPossibleManagers: false, + possibleManagers: [], + currentManager: '', + editing: false, + loading: { + all: false, + displayName: false, + password: false, + mailAddress: false, + groups: false, + groupsDetails: false, + subAdminGroupsDetails: false, + subadmins: false, + quota: false, + delete: false, + disable: false, + languages: false, + wipe: false, + manager: false, + }, + editedDisplayName: this.user.displayname, + editedPassword: '', + editedMail: this.user.email ?? '', + // Cancelable promise for search groups request + promise: null, + } + }, + + computed: { + managerLabel() { + // TRANSLATORS This string describes a person's manager in the context of an organization + return t('settings', 'Set line manager') + }, + + isObfuscated() { + return isObfuscated(this.user) + }, + + showConfig() { + return this.$store.getters.getShowConfig + }, + + isLoadingUser() { + return this.loading.delete || this.loading.disable || this.loading.wipe + }, + + isLoadingField() { + return this.loading.delete || this.loading.disable || this.loading.all + }, + + uniqueId() { + 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 => { + // 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(', ') + }, + + 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(', ') + }, + + usedSpace() { + if (this.user.quota?.used) { + return t('settings', '{size} used', { size: formatFileSize(this.user.quota?.used) }) + } + return t('settings', '{size} used', { size: formatFileSize(0) }) + }, + + canEdit() { + return getCurrentUser().uid !== this.user.id || this.settings.isAdmin || this.settings.isDelegatedAdmin + }, + + userQuota() { + let quota = this.user.quota?.quota + + if (quota === 'default') { + quota = this.settings.defaultQuota + if (quota !== 'none') { + // convert to numeric value to match what the server would usually return + quota = parseFileSize(quota, true) + } + } + + // when the default quota is unlimited, the server returns -3 here, map it to "none" + if (quota === 'none' || quota === -3) { + return t('settings', 'Unlimited') + } else if (quota >= 0) { + return formatFileSize(quota) + } + return formatFileSize(0) + }, + + userActions() { + const actions = [ + { + icon: 'icon-delete', + text: t('settings', 'Delete account'), + action: this.deleteUser, + }, + { + icon: 'icon-delete', + text: t('settings', 'Disconnect all devices and delete local data'), + action: this.wipeUserDevices, + }, + { + icon: this.user.enabled ? 'icon-close' : 'icon-add', + text: this.user.enabled ? t('settings', 'Disable account') : t('settings', 'Enable account'), + action: this.enableDisableUser, + }, + ] + if (this.user.email !== null && this.user.email !== '') { + actions.push({ + icon: 'icon-mail', + text: t('settings', 'Resend welcome email'), + action: this.sendWelcomeMail, + }) + } + return actions.concat(this.externalActions) + }, + + // mapping saved values to objects + editedUserQuota: { + get() { + if (this.selectedQuota !== false) { + return this.selectedQuota + } + if (this.settings.defaultQuota !== unlimitedQuota.id && parseFileSize(this.settings.defaultQuota, true) >= 0) { + // if value is valid, let's map the quotaOptions or return custom quota + return { id: this.settings.defaultQuota, label: this.settings.defaultQuota } + } + return unlimitedQuota // unlimited + }, + set(quota) { + this.selectedQuota = quota + }, + }, + + availableLanguages() { + return this.languages[0].languages.concat(this.languages[1].languages) + }, + }, + async beforeMount() { + if (this.user.manager) { + await this.initManager(this.user.manager) + } + }, + + methods: { + 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'), + { + type: OC.dialogs.YES_NO_BUTTONS, + confirm: t('settings', 'Wipe {userid}\'s devices', { userid }), + confirmClasses: 'error', + cancel: t('settings', 'Cancel'), + }, + (result) => { + if (result) { + this.loading.wipe = true + this.loading.all = true + this.$store.dispatch('wipeUserDevices', userid) + .then(() => showSuccess(t('settings', 'Wiped {userid}\'s devices', { userid })), { timeout: 2000 }) + .finally(() => { + this.loading.wipe = false + this.loading.all = false + }) + } + }, + true, + ) + }, + + filterManagers(managers) { + return managers.filter((manager) => manager.id !== this.user.id) + }, + + async initManager(userId) { + await this.$store.dispatch('getUser', userId).then(response => { + this.currentManager = response?.data.ocs.data + }) + }, + + async searchInitialUserManager() { + this.loadingPossibleManagers = true + await this.searchUserManager() + 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)) : [] + if (users.length > 0) { + this.possibleManagers = users + } + }) + }, + + 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, + key: 'manager', + value: this.currentManager ? this.currentManager.id : '', + }) + } catch (error) { + // TRANSLATORS This string describes a line manager in the context of an organization + 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 + } + }, + + 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'), + { + type: OC.dialogs.YES_NO_BUTTONS, + confirm: t('settings', 'Delete {userid}\'s account', { userid }), + confirmClasses: 'error', + cancel: t('settings', 'Cancel'), + }, + (result) => { + if (result) { + this.loading.delete = true + this.loading.all = true + return this.$store.dispatch('deleteUser', userid) + .then(() => { + this.loading.delete = false + this.loading.all = false + }) + } + }, + true, + ) + }, + + enableDisableUser() { + this.loading.delete = true + this.loading.all = true + const userid = this.user.id + const enabled = !this.user.enabled + return this.$store.dispatch('enableDisableUser', { + userid, + enabled, + }) + .then(() => { + this.loading.delete = false + this.loading.all = false + }) + }, + + /** + * Set user displayName + */ + async updateDisplayName() { + this.loading.displayName = true + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'displayname', + value: this.editedDisplayName, + }) + + if (this.editedDisplayName === this.user.displayname) { + showSuccess(t('settings', 'Display name was successfully changed')) + } + } finally { + this.loading.displayName = false + } + }, + + /** + * Set user password + */ + async updatePassword() { + this.loading.password = true + if (this.editedPassword.length === 0) { + showError(t('settings', "Password can't be empty")) + this.loading.password = false + } else { + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'password', + value: this.editedPassword, + }) + this.editedPassword = '' + showSuccess(t('settings', 'Password was successfully changed')) + } finally { + this.loading.password = false + } + } + }, + + /** + * Set user mailAddress + */ + async updateEmail() { + this.loading.mailAddress = true + if (this.editedMail === '') { + showError(t('settings', "Email can't be empty")) + this.loading.mailAddress = false + this.editedMail = this.user.email + } else { + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'email', + value: this.editedMail, + }) + + if (this.editedMail === this.user.email) { + showSuccess(t('settings', 'Email was successfully changed')) + } + } finally { + this.loading.mailAddress = false + } + } + }, + + /** + * Create a new group and add user to it + * + * @param {string} gid Group id + */ + async createGroup({ name: gid }) { + 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) { + logger.error(t('settings', 'Failed to create group'), { error }) + } + this.loading.groups = false + }, + + /** + * Add user to group + * + * @param {object} group Group object + */ + async addUserGroup(group) { + if (group.isCreating) { + // This is NcSelect's internal value for a new inputted group name + // Ignore + return + } + const userid = this.user.id + const gid = group.id + if (group.canAdd === false) { + return + } + this.loading.groups = true + try { + await this.$store.dispatch('addUserGroup', { userid, gid }) + this.userGroups.push(group) + } catch (error) { + console.error(error) + } + this.loading.groups = false + }, + + /** + * Remove user from group + * + * @param {object} group Group object + */ + async removeUserGroup(group) { + if (group.canRemove === false) { + return false + } + this.loading.groups = true + const userid = this.user.id + const gid = group.id + try { + await this.$store.dispatch('removeUserGroup', { + 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) { + this.$store.commit('deleteUser', userid) + } + } catch { + this.loading.groups = false + } + }, + + /** + * Add user to group + * + * @param {object} group Group object + */ + async addUserSubAdmin(group) { + this.loading.subadmins = true + const userid = this.user.id + const gid = group.id + try { + await this.$store.dispatch('addUserSubAdmin', { + userid, + gid, + }) + this.userSubAdminGroups.push(group) + } catch (error) { + console.error(error) + } + this.loading.subadmins = false + }, + + /** + * Remove user from group + * + * @param {object} group Group object + */ + async removeUserSubAdmin(group) { + this.loading.subadmins = true + const userid = this.user.id + const gid = group.id + + try { + await this.$store.dispatch('removeUserSubAdmin', { + userid, + gid, + }) + this.userSubAdminGroups = this.userSubAdminGroups.filter(group => group.id !== gid) + } catch (error) { + console.error(error) + } finally { + this.loading.subadmins = false + } + }, + + /** + * Dispatch quota set request + * + * @param {string | object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'} + * @return {string} + */ + async setUserQuota(quota = 'none') { + // Make sure correct label is set for unlimited quota + if (quota === 'none') { + quota = unlimitedQuota + } + this.loading.quota = true + + // ensure we only send the preset id + quota = quota.id ? quota.id : quota + + try { + // If human readable format, convert to raw float format + // Else just send the raw string + const value = (parseFileSize(quota, true) || quota).toString() + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'quota', + value, + }) + } catch (error) { + console.error(error) + } finally { + this.loading.quota = false + } + return quota + }, + + /** + * Validate quota string to make sure it's a valid human file size + * + * @param {string | object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'} + * @return {object} The validated quota object or unlimited quota if input is invalid + */ + validateQuota(quota) { + if (typeof quota === 'object') { + quota = quota?.id || quota.label + } + // only used for new presets sent through @Tag + const validQuota = parseFileSize(quota, true) + if (validQuota === null) { + return unlimitedQuota + } else { + // unify format output + quota = formatFileSize(parseFileSize(quota, true)) + return { id: quota, label: quota } + } + }, + + /** + * Dispatch language set request + * + * @param {object} lang language object {code:'en', name:'English'} + * @return {object} + */ + async setUserLanguage(lang) { + this.loading.languages = true + // ensure we only send the preset id + try { + await this.$store.dispatch('setUserData', { + userid: this.user.id, + key: 'language', + value: lang.code, + }) + this.loading.languages = false + } catch (error) { + console.error(error) + } + return lang + }, + + /** + * Dispatch new welcome mail request + */ + sendWelcomeMail() { + this.loading.all = true + this.$store.dispatch('sendWelcomeMail', this.user.id) + .then(() => showSuccess(t('settings', 'Welcome mail sent!'), { timeout: 2000 })) + .finally(() => { + this.loading.all = false + }) + }, + + async toggleEdit() { + this.editing = !this.editing + 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 + } else if (this.editedMail !== this.user.email) { + this.editedMail = this.user.email ?? '' + } + }, + }, +} +</script> + +<style lang="scss" scoped> +@use './shared/styles'; + +.user-list__row { + @include styles.row; + + &:hover { + background-color: var(--color-background-hover); + + .row__cell:not(.row__cell--actions) { + background-color: var(--color-background-hover); + } + } + + // Limit width of select in fill cell + .select--fill { + max-width: calc(var(--cell-width-large) - (2 * var(--cell-padding))); + } +} + +.row { + @include styles.cell; + + &__cell { + border-bottom: 1px solid var(--color-border); + + :deep { + .v-select.select { + min-width: var(--cell-min-width); + } + } + } + + &__progress { + margin-top: 4px; + + &--warn { + &::-moz-progress-bar { + background: var(--color-warning) !important; + } + &::-webkit-progress-value { + background: var(--color-warning) !important; + } + } + } +} +</style> diff --git a/apps/settings/src/components/Users/UserRowActions.vue b/apps/settings/src/components/Users/UserRowActions.vue new file mode 100644 index 00000000000..efd70d879a7 --- /dev/null +++ b/apps/settings/src/components/Users/UserRowActions.vue @@ -0,0 +1,119 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcActions :aria-label="t('settings', 'Toggle account actions menu')" + :disabled="disabled" + :inline="1"> + <NcActionButton :data-cy-user-list-action-toggle-edit="`${edit}`" + :disabled="disabled" + @click="toggleEdit"> + {{ edit ? t('settings', 'Done') : t('settings', 'Edit') }} + <template #icon> + <NcIconSvgWrapper :key="editSvg" :svg="editSvg" aria-hidden="true" /> + </template> + </NcActionButton> + <NcActionButton v-for="({ action, icon, text }, index) in enabledActions" + :key="index" + :disabled="disabled" + :aria-label="text" + :icon="icon" + close-after-click + @click="(event) => action(event, { ...user })"> + {{ text }} + <template v-if="isSvg(icon)" #icon> + <NcIconSvgWrapper :svg="icon" aria-hidden="true" /> + </template> + </NcActionButton> + </NcActions> +</template> + +<script lang="ts"> +import type { PropType } from 'vue' +import { defineComponent } from 'vue' +import isSvg from 'is-svg' + +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-outline.svg?raw' + +interface UserAction { + action: (event: MouseEvent, user: Record<string, unknown>) => void, + enabled?: (user: Record<string, unknown>) => boolean, + icon: string, + text: string, +} + +export default defineComponent({ + components: { + NcActionButton, + NcActions, + NcIconSvgWrapper, + }, + + props: { + /** + * Array of user actions + */ + actions: { + type: Array as PropType<readonly UserAction[]>, + required: true, + }, + + /** + * The state whether the row is currently disabled + */ + disabled: { + type: Boolean, + required: true, + }, + + /** + * The state whether the row is currently edited + */ + edit: { + type: Boolean, + required: true, + }, + + /** + * Target of this actions + */ + user: { + type: Object, + required: true, + }, + }, + + computed: { + /** + * Current MDI logo to show for edit toggle + */ + editSvg(): string { + return this.edit ? SvgCheck : SvgPencil + }, + + /** + * Enabled user row actions + */ + enabledActions(): UserAction[] { + return this.actions.filter(action => typeof action.enabled === 'function' ? action.enabled(this.user) : true) + }, + }, + + methods: { + isSvg, + + /** + * Toggle edit mode by emitting the update event + */ + toggleEdit() { + this.$emit('update:edit', !this.edit) + }, + }, +}) +</script> diff --git a/apps/settings/src/components/Users/UserSettingsDialog.vue b/apps/settings/src/components/Users/UserSettingsDialog.vue new file mode 100644 index 00000000000..94c77d320dd --- /dev/null +++ b/apps/settings/src/components/Users/UserSettingsDialog.vue @@ -0,0 +1,337 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcAppSettingsDialog :open.sync="isModalOpen" + :show-navigation="true" + :name="t('settings', 'Account management settings')"> + <NcAppSettingsSection id="visibility-settings" + :name="t('settings', 'Visibility')"> + <NcCheckboxRadioSwitch type="switch" + data-test="showLanguages" + :checked.sync="showLanguages"> + {{ t('settings', 'Show language') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch type="switch" + data-test="showUserBackend" + :checked.sync="showUserBackend"> + {{ t('settings', 'Show account backend') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch type="switch" + data-test="showStoragePath" + :checked.sync="showStoragePath"> + {{ 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') }} + </NcCheckboxRadioSwitch> + </NcAppSettingsSection> + + <NcAppSettingsSection id="groups-sorting" + :name="t('settings', 'Sorting')"> + <NcNoteCard v-if="isGroupSortingEnforced" type="warning"> + {{ t('settings', 'The system config enforces sorting the groups by name. This also disables showing the member count.') }} + </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" + :disabled="isGroupSortingEnforced" + name="group-sorting-mode" + value="member-count"> + {{ t('settings', 'By member count') }} + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch type="radio" + :checked.sync="groupSorting" + data-test="sortGroupsByName" + :disabled="isGroupSortingEnforced" + name="group-sorting-mode" + value="name"> + {{ t('settings', 'By name') }} + </NcCheckboxRadioSwitch> + </fieldset> + </NcAppSettingsSection> + + <NcAppSettingsSection id="email-settings" + :name="t('settings', 'Send email')"> + <NcCheckboxRadioSwitch type="switch" + data-test="sendWelcomeMail" + :checked.sync="sendWelcomeMail" + :disabled="loadingSendMail"> + {{ t('settings', 'Send welcome email to new accounts') }} + </NcCheckboxRadioSwitch> + </NcAppSettingsSection> + + <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')" + :options="quotaOptions" + placement="top" + :placeholder="t('settings', 'Select default quota')" + taggable + @option:selected="setDefaultQuota" /> + </NcAppSettingsSection> + </NcAppSettingsDialog> +</template> + +<script> +import { formatFileSize, parseFileSize } from '@nextcloud/files' +import { generateUrl } from '@nextcloud/router' + +import axios from '@nextcloud/axios' +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', + + components: { + NcAppSettingsDialog, + NcAppSettingsSection, + NcCheckboxRadioSwitch, + NcNoteCard, + NcSelect, + }, + + props: { + open: { + type: Boolean, + required: true, + }, + }, + + data() { + return { + selectedQuota: false, + loadingSendMail: false, + } + }, + + computed: { + groupSorting: { + get() { + return this.$store.getters.getGroupSorting === GroupSorting.GroupName ? 'name' : 'member-count' + }, + set(sorting) { + this.$store.commit('setGroupSorting', sorting === 'name' ? GroupSorting.GroupName : GroupSorting.UserCount) + }, + }, + + /** + * Admin has configured `sort_groups_by_name` in the system config + */ + isGroupSortingEnforced() { + return this.$store.getters.getServerData.forceSortGroupByName + }, + + isModalOpen: { + get() { + return this.open + }, + set(open) { + this.$emit('update:open', open) + }, + }, + + showConfig() { + return this.$store.getters.getShowConfig + }, + + settings() { + return this.$store.getters.getServerData + }, + + showLanguages: { + get() { + return this.showConfig.showLanguages + }, + set(status) { + this.setShowConfig('showLanguages', status) + }, + }, + + showFirstLogin: { + get() { + return this.showConfig.showFirstLogin + }, + set(status) { + this.setShowConfig('showFirstLogin', status) + }, + }, + + showLastLogin: { + get() { + return this.showConfig.showLastLogin + }, + set(status) { + this.setShowConfig('showLastLogin', status) + }, + }, + + showUserBackend: { + get() { + return this.showConfig.showUserBackend + }, + set(status) { + this.setShowConfig('showUserBackend', status) + }, + }, + + showStoragePath: { + get() { + return this.showConfig.showStoragePath + }, + set(status) { + this.setShowConfig('showStoragePath', status) + }, + }, + + quotaOptions() { + // convert the preset array into objects + const quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({ id: cur, label: cur }), []) + // add default presets + if (this.settings.allowUnlimitedQuota) { + quotaPreset.unshift(unlimitedQuota) + } + return quotaPreset + }, + + defaultQuota: { + get() { + if (this.selectedQuota !== false) { + return this.selectedQuota + } + if (this.settings.defaultQuota !== unlimitedQuota.id && OC.Util.computerFileSize(this.settings.defaultQuota) >= 0) { + // if value is valid, let's map the quotaOptions or return custom quota + return { id: this.settings.defaultQuota, label: this.settings.defaultQuota } + } + return unlimitedQuota // unlimited + }, + set(quota) { + this.selectedQuota = quota + }, + }, + + sendWelcomeMail: { + get() { + return this.settings.newUserSendEmail + }, + async set(value) { + try { + this.loadingSendMail = true + this.$store.commit('setServerData', { + ...this.settings, + newUserSendEmail: value, + }) + await axios.post(generateUrl('/settings/users/preferences/newUser.sendEmail'), { value: value ? 'yes' : 'no' }) + } catch (error) { + logger.error('Could not update newUser.sendEmail preference', { error }) + } finally { + this.loadingSendMail = false + } + }, + }, + }, + + 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 }) + }, + + /** + * Validate quota string to make sure it's a valid human file size + * + * @param {string | object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'} + * @return {object} The validated quota object or unlimited quota if input is invalid + */ + validateQuota(quota) { + if (typeof quota === 'object') { + quota = quota?.id || quota.label + } + // only used for new presets sent through @Tag + const validQuota = parseFileSize(quota, true) + if (validQuota === null) { + return unlimitedQuota + } + // unify format output + quota = formatFileSize(validQuota) + return { id: quota, label: quota } + }, + + /** + * Dispatch default quota set request + * + * @param {string | object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'} + */ + setDefaultQuota(quota = 'none') { + // Make sure correct label is set for unlimited quota + if (quota === 'none') { + quota = unlimitedQuota + } + this.$store.dispatch('setAppConfig', { + app: 'files', + key: 'default_quota', + // ensure we only send the preset id + value: quota.id ? quota.id : quota, + }).then(() => { + if (typeof quota !== 'object') { + quota = { id: quota, label: quota } + } + this.defaultQuota = quota + }) + }, + }, +} +</script> + +<style scoped lang="scss"> +.dialog { + &__note { + font-weight: normal; + } +} + +fieldset { + font-weight: bold; +} +</style> diff --git a/apps/settings/src/components/Users/VirtualList.vue b/apps/settings/src/components/Users/VirtualList.vue new file mode 100644 index 00000000000..20dc70ef830 --- /dev/null +++ b/apps/settings/src/components/Users/VirtualList.vue @@ -0,0 +1,184 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <table class="user-list"> + <slot name="before" /> + + <thead ref="thead" + role="rowgroup" + class="user-list__header"> + <slot name="header" /> + </thead> + + <tbody :style="tbodyStyle" + class="user-list__body"> + <component :is="dataComponent" + v-for="(item, i) in renderedItems" + :key="item[dataKey]" + :user="item" + :visible="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)" + v-bind="extraProps" /> + </tbody> + + <tfoot ref="tfoot" + v-element-visibility="handleFooterVisibility" + role="rowgroup" + class="user-list__footer"> + <slot name="footer" /> + </tfoot> + </table> +</template> + +<script lang="ts"> +import Vue from 'vue' +import { vElementVisibility } from '@vueuse/components' +import debounce from 'debounce' + +import logger from '../../logger.ts' + +Vue.directive('elementVisibility', vElementVisibility) + +// Items to render before and after the visible area +const bufferItems = 3 + +export default Vue.extend({ + name: 'VirtualList', + + props: { + dataComponent: { + type: [Object, Function], + required: true, + }, + dataKey: { + type: String, + required: true, + }, + dataSources: { + type: Array, + required: true, + }, + itemHeight: { + type: Number, + required: true, + }, + extraProps: { + type: Object, + default: () => ({}), + }, + }, + + data() { + return { + bufferItems, + index: 0, + headerHeight: 0, + tableHeight: 0, + resizeObserver: null as ResizeObserver | null, + } + }, + + computed: { + startIndex() { + return Math.max(0, this.index - bufferItems) + }, + + shownItems() { + return Math.ceil((this.tableHeight - this.headerHeight) / this.itemHeight) + bufferItems * 2 + }, + + renderedItems() { + return this.dataSources.slice(this.startIndex, this.startIndex + this.shownItems) + }, + + tbodyStyle() { + const isOverScrolled = this.startIndex + this.shownItems > this.dataSources.length + const lastIndex = this.dataSources.length - this.startIndex - this.shownItems + const hiddenAfterItems = Math.min(this.dataSources.length - this.startIndex, lastIndex) + return { + paddingTop: `${this.startIndex * this.itemHeight}px`, + paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * this.itemHeight}px`, + } + }, + }, + + mounted() { + const root = this.$el as HTMLElement + const tfoot = this.$refs?.tfoot as HTMLElement + const thead = this.$refs?.thead as HTMLElement + + this.resizeObserver = new ResizeObserver(debounce(() => { + this.headerHeight = thead?.clientHeight ?? 0 + this.tableHeight = root?.clientHeight ?? 0 + logger.debug('VirtualList resizeObserver updated') + this.onScroll() + }, 100, false)) + + this.resizeObserver.observe(root) + this.resizeObserver.observe(tfoot) + this.resizeObserver.observe(thead) + + this.$el.addEventListener('scroll', this.onScroll) + }, + + beforeDestroy() { + if (this.resizeObserver) { + this.resizeObserver.disconnect() + } + }, + + methods: { + handleFooterVisibility(visible: boolean) { + if (visible) { + this.$emit('scroll-end') + } + }, + + onScroll() { + // Max 0 to prevent negative index + this.index = Math.max(0, Math.round(this.$el.scrollTop / this.itemHeight)) + }, + }, +}) +</script> + +<style lang="scss" scoped> +.user-list { + --avatar-cell-width: 48px; + --cell-padding: 7px; + --cell-width: 200px; + --cell-width-large: 300px; + --cell-min-width: calc(var(--cell-width) - (2 * var(--cell-padding))); + --sticky-column-z-index: calc(var(--vs-dropdown-z-index) + 1); // Keep the sticky column on top of the select dropdown + + // Necessary for virtual scroll optimized rendering + display: block; + overflow: auto; + height: 100%; + will-change: scroll-position; + + &__header, + &__footer { + position: sticky; + // Fix sticky positioning in Firefox + display: block; + } + + &__header { + top: 0; + z-index: calc(var(--sticky-column-z-index) + 1); + } + + &__footer { + inset-inline-start: 0; + } + + &__body { + display: flex; + flex-direction: column; + width: 100%; + } +} +</style> diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss new file mode 100644 index 00000000000..4dfdd58af6d --- /dev/null +++ b/apps/settings/src/components/Users/shared/styles.scss @@ -0,0 +1,110 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +@mixin row { + position: relative; + display: flex; + min-width: 100%; + width: fit-content; + height: var(--row-height); + background-color: var(--color-main-background); +} + +@mixin cell { + &__cell { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 var(--cell-padding); + min-width: var(--cell-width); + width: var(--cell-width); + color: var(--color-main-text); + + strong, + span, + label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow-wrap: anywhere; + } + + @media (min-width: 670px) { /* Show one &--large column between stickied columns */ + &--avatar, + &--displayname { + position: sticky; + z-index: var(--sticky-column-z-index); + background-color: var(--color-main-background); + } + + &--avatar { + inset-inline-start: 0; + } + + &--displayname { + inset-inline-start: var(--avatar-cell-width); + border-inline-end: 1px solid var(--color-border); + } + } + + &--username { + padding-inline-start: calc(var(--default-grid-baseline) * 3); + } + + &--avatar { + min-width: var(--avatar-cell-width); + width: var(--avatar-cell-width); + align-items: center; + padding: 0; + user-select: none; + } + + &--multiline { + span { + line-height: 1.3em; + white-space: unset; + + @supports (-webkit-line-clamp: 2) { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + } + + &--large { + min-width: var(--cell-width-large); + width: var(--cell-width-large); + } + + &--obfuscated { + min-width: 400px; + width: 400px; + } + + // Fill remaining row space with cell + &--fill { + min-width: var(--cell-width-large); + width: 100%; + } + + &--actions { + position: sticky; + inset-inline-end: 0; + z-index: var(--sticky-column-z-index); + display: flex; + flex-direction: row; + align-items: center; + min-width: 110px; + width: 110px; + background-color: var(--color-main-background); + border-inline-start: 1px solid var(--color-border); + } + } + + &__subtitle { + color: var(--color-text-maxcontrast); + } +} diff --git a/apps/settings/src/components/WebAuthn/AddDevice.vue b/apps/settings/src/components/WebAuthn/AddDevice.vue new file mode 100644 index 00000000000..db00bae451a --- /dev/null +++ b/apps/settings/src/components/WebAuthn/AddDevice.vue @@ -0,0 +1,194 @@ +<!-- + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div v-if="!isHttps && !isLocalhost"> + {{ t('settings', 'Passwordless authentication requires a secure connection.') }} + </div> + <div v-else> + <NcButton v-if="step === RegistrationSteps.READY" + type="primary" + @click="start"> + {{ t('settings', 'Add WebAuthn device') }} + </NcButton> + + <div v-else-if="step === RegistrationSteps.REGISTRATION" + class="new-webauthn-device"> + <span class="icon-loading-small webauthn-loading" /> + {{ t('settings', 'Please authorize your WebAuthn device.') }} + </div> + + <div v-else-if="step === RegistrationSteps.NAMING" + class="new-webauthn-device"> + <span class="icon-loading-small webauthn-loading" /> + <form @submit.prevent="submit"> + <NcTextField ref="nameInput" + class="new-webauthn-device__name" + :label="t('settings', 'Device name')" + :value.sync="name" + show-trailing-button + :trailing-button-label="t('settings', 'Add')" + trailing-button-icon="arrowRight" + @trailing-button-click="submit" /> + </form> + </div> + + <div v-else-if="step === RegistrationSteps.PERSIST" + class="new-webauthn-device"> + <span class="icon-loading-small webauthn-loading" /> + {{ t('settings', 'Adding your device …') }} + </div> + + <div v-else> + Invalid registration step. This should not have happened. + </div> + </div> +</template> + +<script> +import { showError } from '@nextcloud/dialogs' +import { confirmPassword } from '@nextcloud/password-confirmation' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcTextField from '@nextcloud/vue/components/NcTextField' + +import logger from '../../logger.ts' +import { + startRegistration, + finishRegistration, +} from '../../service/WebAuthnRegistrationSerice.ts' + +import '@nextcloud/password-confirmation/dist/style.css' + +const logAndPass = (text) => (data) => { + logger.debug(text) + return data +} + +const RegistrationSteps = Object.freeze({ + READY: 1, + REGISTRATION: 2, + NAMING: 3, + PERSIST: 4, +}) + +export default { + name: 'AddDevice', + + components: { + NcButton, + NcTextField, + }, + + props: { + httpWarning: Boolean, + isHttps: { + type: Boolean, + default: false, + }, + isLocalhost: { + type: Boolean, + default: false, + }, + }, + + setup() { + // non reactive props + return { + RegistrationSteps, + } + }, + + data() { + return { + name: '', + credential: {}, + step: RegistrationSteps.READY, + } + }, + + watch: { + /** + * Auto focus the name input when naming a device + */ + step() { + if (this.step === RegistrationSteps.NAMING) { + this.$nextTick(() => this.$refs.nameInput?.focus()) + } + }, + }, + + methods: { + /** + * Start the registration process by loading the authenticator parameters + * The next step is the naming of the device + */ + async start() { + this.step = RegistrationSteps.REGISTRATION + console.debug('Starting WebAuthn registration') + + try { + await confirmPassword() + this.credential = await startRegistration() + this.step = RegistrationSteps.NAMING + } catch (err) { + showError(err) + this.step = RegistrationSteps.READY + } + }, + + /** + * Save the new device with the given name on the server + */ + submit() { + this.step = RegistrationSteps.PERSIST + + return confirmPassword() + .then(logAndPass('confirmed password')) + .then(this.saveRegistrationData) + .then(logAndPass('registration data saved')) + .then(() => this.reset()) + .then(logAndPass('app reset')) + .catch(console.error) + }, + + async saveRegistrationData() { + try { + const device = await finishRegistration(this.name, this.credential) + + logger.info('new device added', { device }) + + this.$emit('added', device) + } catch (err) { + logger.error('Error persisting webauthn registration', { error: err }) + throw new Error(t('settings', 'Server error while trying to complete WebAuthn device registration')) + } + }, + + reset() { + this.name = '' + this.registrationData = {} + this.step = RegistrationSteps.READY + }, + }, +} +</script> + +<style scoped lang="scss"> +.webauthn-loading { + display: inline-block; + vertical-align: sub; + margin-inline: 2px; +} + +.new-webauthn-device { + display: flex; + gap: 22px; + align-items: center; + + &__name { + max-width: min(100vw, 400px); + } +} +</style> diff --git a/apps/settings/src/components/WebAuthn/Device.vue b/apps/settings/src/components/WebAuthn/Device.vue new file mode 100644 index 00000000000..4e10c1f234d --- /dev/null +++ b/apps/settings/src/components/WebAuthn/Device.vue @@ -0,0 +1,49 @@ +<!-- + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <li class="webauthn-device"> + <span class="icon-webauthn-device" /> + {{ name || t('settings', 'Unnamed device') }} + <NcActions :force-menu="true"> + <NcActionButton icon="icon-delete" @click="$emit('delete')"> + {{ t('settings', 'Delete') }} + </NcActionButton> + </NcActions> + </li> +</template> + +<script> +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' + +export default { + name: 'Device', + components: { + NcActionButton, + NcActions, + }, + props: { + name: { + type: String, + required: true, + }, + }, +} +</script> + +<style scoped> + .webauthn-device { + line-height: 300%; + display: flex; + } + + .icon-webauthn-device { + display: inline-block; + background-size: 100%; + padding: 3px; + margin: 3px; + } +</style> diff --git a/apps/settings/src/components/WebAuthn/Section.vue b/apps/settings/src/components/WebAuthn/Section.vue new file mode 100644 index 00000000000..fa818c24355 --- /dev/null +++ b/apps/settings/src/components/WebAuthn/Section.vue @@ -0,0 +1,114 @@ +<!-- + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <div id="security-webauthn" class="section"> + <h2>{{ t('settings', 'Passwordless Authentication') }}</h2> + <p class="settings-hint hidden-when-empty"> + {{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }} + </p> + <NcNoteCard v-if="devices.length === 0" type="info"> + {{ t('settings', 'No devices configured.') }} + </NcNoteCard> + + <h3 v-else id="security-webauthn__active-devices"> + {{ t('settings', 'The following devices are configured for your account:') }} + </h3> + <ul aria-labelledby="security-webauthn__active-devices" class="security-webauthn__device-list"> + <Device v-for="device in sortedDevices" + :key="device.id" + :name="device.name" + @delete="deleteDevice(device.id)" /> + </ul> + + <NcNoteCard v-if="!supportsWebauthn" type="warning"> + {{ t('settings', 'Your browser does not support WebAuthn.') }} + </NcNoteCard> + + <AddDevice v-if="supportsWebauthn" + :is-https="isHttps" + :is-localhost="isLocalhost" + @added="deviceAdded" /> + </div> +</template> + +<script> +import { browserSupportsWebAuthn } from '@simplewebauthn/browser' +import { confirmPassword } from '@nextcloud/password-confirmation' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import sortBy from 'lodash/fp/sortBy.js' + +import AddDevice from './AddDevice.vue' +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 { + components: { + AddDevice, + Device, + NcNoteCard, + }, + props: { + initialDevices: { + type: Array, + required: true, + }, + isHttps: { + type: Boolean, + default: false, + }, + isLocalhost: { + type: Boolean, + default: false, + }, + }, + + setup() { + // Non reactive properties + return { + supportsWebauthn: browserSupportsWebAuthn(), + } + }, + + data() { + return { + devices: this.initialDevices, + } + }, + computed: { + sortedDevices() { + return sortByName(this.devices) + }, + }, + methods: { + deviceAdded(device) { + logger.debug(`adding new device to the list ${device.id}`) + + this.devices.push(device) + }, + async deleteDevice(id) { + logger.info(`deleting webauthn device ${id}`) + + await confirmPassword() + await removeRegistration(id) + + this.devices = this.devices.filter(d => d.id !== id) + + logger.info(`webauthn device ${id} removed successfully`) + }, + }, +} +</script> + +<style scoped> +.security-webauthn__device-list { + margin-block: 12px 18px; +} +</style> diff --git a/apps/settings/src/composables/useAppIcon.ts b/apps/settings/src/composables/useAppIcon.ts new file mode 100644 index 00000000000..b5e211aa1bc --- /dev/null +++ b/apps/settings/src/composables/useAppIcon.ts @@ -0,0 +1,62 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import type { Ref } from 'vue' +import type { IAppstoreApp } from '../app-types.ts' + +import { mdiCog, mdiCogOutline } from '@mdi/js' +import { computed, ref, watchEffect } from 'vue' +import AppstoreCategoryIcons from '../constants/AppstoreCategoryIcons.ts' +import logger from '../logger.ts' + +/** + * Get the app icon raw SVG for use with `NcIconSvgWrapper` (do never use without sanitizing) + * It has a fallback to the categroy icon. + * + * @param app The app to get the icon for + */ +export function useAppIcon(app: Ref<IAppstoreApp>) { + const appIcon = ref<string|null>(null) + + /** + * Fallback value if no app icon available + */ + const categoryIcon = computed(() => { + 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 + }) + + watchEffect(async () => { + // Note: Only variables until the first `await` will be watched! + if (!app.value?.preview) { + appIcon.value = categoryIcon.value + } else { + appIcon.value = null + // Now try to load the real app icon + try { + const response = await window.fetch(app.value.preview) + const blob = await response.blob() + const rawSvg = await blob.text() + appIcon.value = rawSvg.replaceAll(/fill="#(fff|ffffff)([a-z0-9]{1,2})?"/ig, 'fill="currentColor"') + } catch (error) { + appIcon.value = categoryIcon.value + logger.error('Could not load app icon', { error }) + } + } + }) + + return { + appIcon, + } +} diff --git a/apps/settings/src/composables/useGetLocalizedValue.ts b/apps/settings/src/composables/useGetLocalizedValue.ts new file mode 100644 index 00000000000..a8a6f39f380 --- /dev/null +++ b/apps/settings/src/composables/useGetLocalizedValue.ts @@ -0,0 +1,29 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import type { ILocalizedValue } from '../constants/AppDiscoverTypes' + +import { getLanguage } from '@nextcloud/l10n' +import { computed, type Ref } from 'vue' + +/** + * Helper to get the localized value for the current users language + * @param dict The dictionary to get the value from + * @param language The language to use + */ +const getLocalizedValue = <T, >(dict: ILocalizedValue<T>, language: string) => dict[language] ?? dict[language.split('_')[0]] ?? dict.en ?? null + +/** + * Get the localized value of the dictionary provided + * @param dict Dictionary + * @return String or null if invalid dictionary + */ +export const useLocalizedValue = <T, >(dict: Ref<ILocalizedValue<T|undefined>|undefined|null>) => { + /** + * Language of the current user + */ + const language = getLanguage() + + return computed(() => !dict?.value ? null : getLocalizedValue<T>(dict.value as ILocalizedValue<T>, language)) +} diff --git a/apps/settings/src/composables/useGroupsNavigation.ts b/apps/settings/src/composables/useGroupsNavigation.ts new file mode 100644 index 00000000000..d9f0637843b --- /dev/null +++ b/apps/settings/src/composables/useGroupsNavigation.ts @@ -0,0 +1,59 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import type { ComputedRef, Ref } from 'vue' +import type { IGroup } from '../views/user-types' + +import { computed } from 'vue' + +/** + * Format a group to a menu entry + * + * @param group the group + */ +function formatGroupMenu(group?: IGroup) { + if (typeof group === 'undefined') { + return null + } + + return { + id: group.id, + title: group.name, + usercount: group.usercount ?? 0, + count: Math.max(0, (group.usercount ?? 0) - (group.disabled ?? 0)), + } +} + +export const useFormatGroups = (groups: Ref<IGroup[]>|ComputedRef<IGroup[]>) => { + /** + * All non-disabled non-admin groups + */ + const userGroups = computed(() => { + const formatted = groups.value + // filter out disabled and admin + .filter(group => group.id !== 'disabled' && group.id !== '__nc_internal_recent' && group.id !== 'admin') + // format group + .map(group => formatGroupMenu(group)) + // remove invalid + .filter(group => group !== null) + return formatted as NonNullable<ReturnType<typeof formatGroupMenu>>[] + }) + + /** + * The admin group if found otherwise null + */ + const adminGroup = computed(() => formatGroupMenu(groups.value.find(group => group.id === 'admin'))) + + /** + * The group of disabled users + */ + const disabledGroup = computed(() => formatGroupMenu(groups.value.find(group => group.id === 'disabled'))) + + /** + * 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.ts b/apps/settings/src/constants/AccountPropertyConstants.ts new file mode 100644 index 00000000000..575a2744cc6 --- /dev/null +++ b/apps/settings/src/constants/AccountPropertyConstants.ts @@ -0,0 +1,222 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/* + * SYNC to be kept in sync with `lib/public/Accounts/IAccountManager.php` + */ + +import { mdiAccountGroupOutline, mdiCellphone, mdiLockOutline, mdiWeb } from '@mdi/js' +import { translate as t } from '@nextcloud/l10n' + +/** Enum of account properties */ +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', + ORGANISATION: 'organisation', + PHONE: 'phone', + PROFILE_ENABLED: 'profile_enabled', + PRONOUNS: 'pronouns', + ROLE: 'role', + TWITTER: 'twitter', + BLUESKY: 'bluesky', + WEBSITE: 'website', +}) + +/** Enum of account properties to human readable account property names */ +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)'), + BLUESKY: t('settings', 'Bluesky'), + WEBSITE: t('settings', 'Website'), +}) + +export const NAME_READABLE_ENUM = Object.freeze({ + [ACCOUNT_PROPERTY_ENUM.ADDRESS]: ACCOUNT_PROPERTY_READABLE_ENUM.ADDRESS, + [ACCOUNT_PROPERTY_ENUM.AVATAR]: ACCOUNT_PROPERTY_READABLE_ENUM.AVATAR, + [ACCOUNT_PROPERTY_ENUM.BIOGRAPHY]: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY, + [ACCOUNT_PROPERTY_ENUM.DISPLAYNAME]: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME, + [ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION]: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL_COLLECTION, + [ACCOUNT_PROPERTY_ENUM.EMAIL]: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL, + [ACCOUNT_PROPERTY_ENUM.HEADLINE]: ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE, + [ACCOUNT_PROPERTY_ENUM.ORGANISATION]: ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION, + [ACCOUNT_PROPERTY_ENUM.PHONE]: ACCOUNT_PROPERTY_READABLE_ENUM.PHONE, + [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 */ +export const PROFILE_READABLE_ENUM = Object.freeze({ + PROFILE_VISIBILITY: t('settings', 'Profile visibility'), +}) + +/** Enum of readable account properties to account property keys used by the server */ +export const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({ + [ACCOUNT_PROPERTY_READABLE_ENUM.ADDRESS]: ACCOUNT_PROPERTY_ENUM.ADDRESS, + [ACCOUNT_PROPERTY_READABLE_ENUM.AVATAR]: ACCOUNT_PROPERTY_ENUM.AVATAR, + [ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY]: ACCOUNT_PROPERTY_ENUM.BIOGRAPHY, + [ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME]: ACCOUNT_PROPERTY_ENUM.DISPLAYNAME, + [ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL_COLLECTION]: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION, + [ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL]: ACCOUNT_PROPERTY_ENUM.EMAIL, + [ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE]: ACCOUNT_PROPERTY_ENUM.HEADLINE, + [ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION]: ACCOUNT_PROPERTY_ENUM.ORGANISATION, + [ACCOUNT_PROPERTY_READABLE_ENUM.PHONE]: ACCOUNT_PROPERTY_ENUM.PHONE, + [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, +}) + +/** + * Enum of account setting properties + * + * Account setting properties unlike account properties do not support scopes* + */ +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 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({ + [ACCOUNT_PROPERTY_READABLE_ENUM.ADDRESS]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.AVATAR]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME]: [SCOPE_ENUM.LOCAL], + [ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL_COLLECTION]: [SCOPE_ENUM.LOCAL], + [ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL]: [SCOPE_ENUM.LOCAL], + [ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [ACCOUNT_PROPERTY_READABLE_ENUM.PHONE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE], + [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 */ +export const UNPUBLISHED_READABLE_PROPERTIES = Object.freeze([ + ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY, + ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE, + ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION, + ACCOUNT_PROPERTY_READABLE_ENUM.ROLE, + ACCOUNT_PROPERTY_READABLE_ENUM.BIRTHDATE, +]) + +/** Scope suffix */ +export const SCOPE_SUFFIX = 'Scope' + +/** + * Enum of scope names to properties + * + * Used for federation control* + */ +export const SCOPE_PROPERTY_ENUM = Object.freeze({ + [SCOPE_ENUM.PRIVATE]: { + name: SCOPE_ENUM.PRIVATE, + displayName: t('settings', 'Private'), + tooltip: t('settings', 'Only visible to people matched via phone number integration through Talk on mobile'), + tooltipDisabled: t('settings', 'Not available as this property is required for core functionality including file sharing and calendar invitations'), + icon: mdiCellphone, + }, + [SCOPE_ENUM.LOCAL]: { + name: SCOPE_ENUM.LOCAL, + 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: 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: mdiAccountGroupOutline, + }, + [SCOPE_ENUM.PUBLISHED]: { + name: SCOPE_ENUM.PUBLISHED, + displayName: t('settings', 'Published'), + tooltip: t('settings', 'Synchronize to trusted servers and the global and public address book'), + tooltipDisabled: t('settings', 'Not available as publishing account specific data to the lookup server is not allowed, contact your system administration if you have any questions'), + icon: mdiWeb, + }, +}) + +/** Default additional email scope */ +export const DEFAULT_ADDITIONAL_EMAIL_SCOPE = SCOPE_ENUM.LOCAL + +/** Enum of verification constants, according to IAccountManager */ +export enum VERIFICATION_ENUM { + NOT_VERIFIED = 0, + VERIFICATION_IN_PROGRESS = 1, + VERIFIED = 2, +} + +/** + * Email validation regex + * + * Sourced from https://github.com/mpyw/FILTER_VALIDATE_EMAIL.js/blob/71e62ca48841d2246a1b531e7e84f5a01f15e615/src/regexp/ascii.ts* + */ +// 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/AppDiscoverTypes.ts b/apps/settings/src/constants/AppDiscoverTypes.ts new file mode 100644 index 00000000000..bc2736eac9f --- /dev/null +++ b/apps/settings/src/constants/AppDiscoverTypes.ts @@ -0,0 +1,117 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/** + * Currently known types of app discover section elements + */ +export const APP_DISCOVER_KNOWN_TYPES = ['post', 'showcase', 'carousel'] as const + +/** + * Helper for localized values + */ +export type ILocalizedValue<T> = Record<string, T | undefined> & { en: T } + +export interface IAppDiscoverElement { + /** + * Type of the element + */ + type: typeof APP_DISCOVER_KNOWN_TYPES[number] + + /** + * Identifier for this element + */ + id: string, + + /** + * Order of this element to pin elements (smaller = shown on top) + */ + order?: number + + /** + * Optional, localized, headline for the element + */ + headline?: ILocalizedValue<string> + + /** + * Optional link target for the element + */ + link?: string + + /** + * Optional date when this element will get valid (only show since then) + */ + date?: number + + /** + * Optional date when this element will be invalid (only show until then) + */ + expiryDate?: number +} + +/** Wrapper for media source and MIME type */ +type MediaSource = { src: string, mime: string } + +/** + * Media content type for posts + */ +interface IAppDiscoverMediaContent { + /** + * The media source to show - either one or a list of sources with their MIME type for fallback options + */ + src: MediaSource | MediaSource[] + + /** + * Alternative text for the media + */ + alt: string + + /** + * Optional link target for the media (e.g. to the full video) + */ + link?: string +} + +/** + * Wrapper for post media + */ +interface IAppDiscoverMedia { + /** + * The alignment of the media element + */ + alignment?: 'start' | 'end' | 'center' + + /** + * The (localized) content + */ + content: ILocalizedValue<IAppDiscoverMediaContent> +} + +/** + * An app element only used for the showcase type + */ +export interface IAppDiscoverApp { + /** The App ID */ + type: 'app' + appId: string +} + +export interface IAppDiscoverPost extends IAppDiscoverElement { + type: 'post' + text?: ILocalizedValue<string> + media?: IAppDiscoverMedia +} + +export interface IAppDiscoverShowcase extends IAppDiscoverElement { + type: 'showcase' + content: (IAppDiscoverPost | IAppDiscoverApp)[] +} + +export interface IAppDiscoverCarousel extends IAppDiscoverElement { + type: 'carousel' + text?: ILocalizedValue<string> + content: IAppDiscoverPost[] +} + +export type IAppDiscoverElements = IAppDiscoverPost | IAppDiscoverCarousel | IAppDiscoverShowcase diff --git a/apps/settings/src/constants/AppsConstants.js b/apps/settings/src/constants/AppsConstants.js new file mode 100644 index 00000000000..c90e35c84ce --- /dev/null +++ b/apps/settings/src/constants/AppsConstants.js @@ -0,0 +1,18 @@ +/** + * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { translate as t } from '@nextcloud/l10n' + +/** Enum of verification constants, according to Apps */ +export const APPS_SECTION_ENUM = Object.freeze({ + discover: t('settings', 'Discover'), + installed: t('settings', 'Your apps'), + enabled: t('settings', 'Active apps'), + disabled: t('settings', 'Disabled apps'), + updates: t('settings', 'Updates'), + 'app-bundles': t('settings', 'App bundles'), + featured: t('settings', 'Featured apps'), + supported: t('settings', 'Supported apps'), // From subscription +}) diff --git a/apps/settings/src/constants/AppstoreCategoryIcons.ts b/apps/settings/src/constants/AppstoreCategoryIcons.ts new file mode 100644 index 00000000000..989ffe79c22 --- /dev/null +++ b/apps/settings/src/constants/AppstoreCategoryIcons.ts @@ -0,0 +1,63 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import { + mdiAccountMultipleOutline, + mdiAccountOutline, + mdiArchiveOutline, + mdiCheck, + mdiClipboardFlowOutline, + mdiClose, + mdiCogOutline, + mdiControllerClassicOutline, + mdiCreationOutline, + mdiDownload, + mdiFileDocumentEdit, + mdiFolder, + mdiKeyOutline, + mdiMagnify, + mdiMonitorEye, + mdiMultimedia, + mdiOfficeBuildingOutline, + mdiOpenInApp, + mdiSecurity, + mdiStar, + mdiStarCircleOutline, + mdiStarShootingOutline, + mdiTools, + mdiViewColumnOutline, +} from '@mdi/js' + +/** + * SVG paths used for appstore category icons + */ +export default Object.freeze({ + // system special categories + discover: mdiStarCircleOutline, + installed: mdiAccountOutline, + enabled: mdiCheck, + disabled: mdiClose, + bundles: mdiArchiveOutline, + supported: mdiStarShootingOutline, + featured: mdiStar, + updates: mdiDownload, + + // generic category + ai: mdiCreationOutline, + auth: mdiKeyOutline, + customization: mdiCogOutline, + dashboard: mdiViewColumnOutline, + files: mdiFolder, + games: mdiControllerClassicOutline, + integration: mdiOpenInApp, + monitoring: mdiMonitorEye, + multimedia: mdiMultimedia, + office: mdiFileDocumentEdit, + organization: mdiOfficeBuildingOutline, + search: mdiMagnify, + security: mdiSecurity, + social: mdiAccountMultipleOutline, + tools: mdiTools, + workflow: mdiClipboardFlowOutline, +}) diff --git a/apps/settings/src/constants/GroupManagement.ts b/apps/settings/src/constants/GroupManagement.ts new file mode 100644 index 00000000000..51ecac27383 --- /dev/null +++ b/apps/settings/src/constants/GroupManagement.ts @@ -0,0 +1,12 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/** + * https://github.com/nextcloud/server/blob/208e38e84e1a07a49699aa90dc5b7272d24489f0/lib/private/Group/MetaData.php#L34 + */ +export enum GroupSorting { + UserCount = 1, + GroupName = 2 +} diff --git a/apps/settings/src/constants/ProfileConstants.js b/apps/settings/src/constants/ProfileConstants.js new file mode 100644 index 00000000000..896adce8708 --- /dev/null +++ b/apps/settings/src/constants/ProfileConstants.js @@ -0,0 +1,33 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/* + * SYNC to be kept in sync with `core/Db/ProfileConfig.php` + */ + +/** Enum of profile visibility constants */ +export const VISIBILITY_ENUM = Object.freeze({ + SHOW: 'show', + SHOW_USERS_ONLY: 'show_users_only', + HIDE: 'hide', +}) + +/** + * Enum of profile visibility constants to properties + */ +export const VISIBILITY_PROPERTY_ENUM = Object.freeze({ + [VISIBILITY_ENUM.SHOW]: { + name: VISIBILITY_ENUM.SHOW, + label: t('settings', 'Show to everyone'), + }, + [VISIBILITY_ENUM.SHOW_USERS_ONLY]: { + name: VISIBILITY_ENUM.SHOW_USERS_ONLY, + label: t('settings', 'Show to logged in accounts only'), + }, + [VISIBILITY_ENUM.HIDE]: { + name: VISIBILITY_ENUM.HIDE, + label: t('settings', 'Hide'), + }, +}) diff --git a/apps/settings/src/logger.ts b/apps/settings/src/logger.ts new file mode 100644 index 00000000000..44019a2b586 --- /dev/null +++ b/apps/settings/src/logger.ts @@ -0,0 +1,11 @@ +/** + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { getLoggerBuilder } from '@nextcloud/logger' + +export default getLoggerBuilder() + .setApp('settings') + .detectUser() + .build() diff --git a/apps/settings/src/main-admin-ai.js b/apps/settings/src/main-admin-ai.js new file mode 100644 index 00000000000..79bc785a4f6 --- /dev/null +++ b/apps/settings/src/main-admin-ai.js @@ -0,0 +1,20 @@ +/** + * 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__ = getCSPNonce() + +Vue.prototype.t = t + +// Not used here but required for legacy templates +window.OC = window.OC || {} +window.OC.Settings = window.OC.Settings || {} + +const View = Vue.extend(ArtificialIntelligence) +new View().$mount('#ai-settings') diff --git a/apps/settings/src/main-admin-basic-settings.js b/apps/settings/src/main-admin-basic-settings.js new file mode 100644 index 00000000000..80f9c44a35a --- /dev/null +++ b/apps/settings/src/main-admin-basic-settings.js @@ -0,0 +1,35 @@ +/** + * SPDX-FileCopyrightText: 2022 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 { translate as t } from '@nextcloud/l10n' + +import logger from './logger.ts' + +import ProfileSettings from './components/BasicSettings/ProfileSettings.vue' +import BackgroundJob from './components/BasicSettings/BackgroundJob.vue' + +__webpack_nonce__ = getCSPNonce() + +const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', true) + +Vue.mixin({ + props: { + logger, + }, + methods: { + t, + }, +}) + +const BackgroundJobView = Vue.extend(BackgroundJob) +new BackgroundJobView().$mount('#vue-admin-background-job') + +if (profileEnabledGlobally) { + const ProfileSettingsView = Vue.extend(ProfileSettings) + new ProfileSettingsView().$mount('#vue-admin-profile-settings') +} diff --git a/apps/settings/src/main-admin-delegation.js b/apps/settings/src/main-admin-delegation.js new file mode 100644 index 00000000000..c6b7ae1e5a2 --- /dev/null +++ b/apps/settings/src/main-admin-delegation.js @@ -0,0 +1,15 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import Vue from 'vue' +import App from './components/AdminDelegating.vue' + +// bind to window +Vue.prototype.OC = OC +Vue.prototype.t = t + +const View = Vue.extend(App) +const accessibility = new View() +accessibility.$mount('#admin-right-sub-granting') diff --git a/apps/settings/src/main-admin-security.js b/apps/settings/src/main-admin-security.js new file mode 100644 index 00000000000..26961dcc13e --- /dev/null +++ b/apps/settings/src/main-admin-security.js @@ -0,0 +1,32 @@ +/** + * 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 EncryptionSettings from './components/Encryption/EncryptionSettings.vue' +import store from './store/admin-security.js' + +// eslint-disable-next-line camelcase +__webpack_nonce__ = getCSPNonce() + +Vue.prototype.t = t + +// Not used here but required for legacy templates +window.OC = window.OC || {} +window.OC.Settings = window.OC.Settings || {} + +store.replaceState( + loadState('settings', 'mandatory2FAState'), +) + +const View = Vue.extend(AdminTwoFactor) +new View({ + store, +}).$mount('#two-factor-auth-settings') + +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 new file mode 100644 index 00000000000..62ea009de11 --- /dev/null +++ b/apps/settings/src/main-apps-users-management.ts @@ -0,0 +1,40 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import Vue from 'vue' +import Vuex from 'vuex' +import VTooltipPlugin from 'v-tooltip' +import { sync } from 'vuex-router-sync' +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 { getCSPNonce } from '@nextcloud/auth' +import { PiniaVuePlugin, createPinia } from 'pinia' + +// CSP config for webpack dynamic chunk loading +// eslint-disable-next-line camelcase +__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() + +export default new Vue({ + router, + store, + pinia, + render: h => h(SettingsApp), + el: '#content', +}) diff --git a/apps/settings/src/main-declarative-settings-forms.ts b/apps/settings/src/main-declarative-settings-forms.ts new file mode 100644 index 00000000000..d6f5973baea --- /dev/null +++ b/apps/settings/src/main-declarative-settings-forms.ts @@ -0,0 +1,62 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +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, + title: string, + description: string, + type: string, + placeholder: string, + label: string, + options: Array<unknown>|null, + value: unknown, + default: unknown, + sensitive: boolean, +} + +interface DeclarativeForm { + id: number, + priority: number, + section_type: string, + section_id: string, + storage_type: string, + title: string, + description: string, + doc_url: string, + app: string, + fields: Array<DeclarativeFormField>, +} + +const forms = loadState<DeclarativeForm[]>('settings', 'declarative-settings-forms', []) + +/** + * @param forms The forms to render + */ +function renderDeclarativeSettingsSections(forms: Array<DeclarativeForm>): ComponentInstance[] { + Vue.mixin({ methods: { t, n } }) + const DeclarativeSettingsSection = Vue.extend(DeclarativeSection as never) + + return forms.map((form) => { + const el = `#${form.app}_${form.id}` + return new DeclarativeSettingsSection({ + el, + propsData: { + form, + }, + }) + }) +} + +document.addEventListener('DOMContentLoaded', () => { + logger.debug('Loaded declarative forms', { forms }) + renderDeclarativeSettingsSections(forms) +}) diff --git a/apps/settings/src/main-nextcloud-pdf.js b/apps/settings/src/main-nextcloud-pdf.js new file mode 100644 index 00000000000..55d689c0f4a --- /dev/null +++ b/apps/settings/src/main-nextcloud-pdf.js @@ -0,0 +1,20 @@ +/** + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { loadState } from '@nextcloud/initial-state' + +const hasPdf = loadState('settings', 'has-reasons-use-nextcloud-pdf') === true + +window.addEventListener('DOMContentLoaded', function() { + const link = document.getElementById('open-reasons-use-nextcloud-pdf') + if (link && hasPdf) { + link.addEventListener('click', function(event) { + event.preventDefault() + OCA.Viewer.open({ + path: '/Reasons to use Nextcloud.pdf', + }) + }) + } +}) diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js new file mode 100644 index 00000000000..5ccfc9848c0 --- /dev/null +++ b/apps/settings/src/main-personal-info.js @@ -0,0 +1,89 @@ +/** + * SPDX-FileCopyrightText: 2021 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 { 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 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 LocationSection from './components/PersonalInfo/LocationSection.vue' +import OrganisationSection from './components/PersonalInfo/OrganisationSection.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 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__ = getCSPNonce() + +const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', true) + +Vue.mixin({ + methods: { + t, + }, +}) + +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 FediverseView = Vue.extend(FediverseSection) +const FirstDayOfWeekView = Vue.extend(FirstDayOfWeekSection) +const LanguageView = Vue.extend(LanguageSection) +const LocaleView = Vue.extend(LocaleSection) +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') +new DisplayNameView().$mount('#vue-displayname-section') +new EmailView().$mount('#vue-email-section') +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) + const OrganisationView = Vue.extend(OrganisationSection) + const RoleView = Vue.extend(RoleSection) + const HeadlineView = Vue.extend(HeadlineSection) + const BiographyView = Vue.extend(BiographySection) + const ProfileVisibilityView = Vue.extend(ProfileVisibilitySection) + + new ProfileView().$mount('#vue-profile-section') + new OrganisationView().$mount('#vue-organisation-section') + new RoleView().$mount('#vue-role-section') + new HeadlineView().$mount('#vue-headline-section') + new BiographyView().$mount('#vue-biography-section') + new ProfileVisibilityView().$mount('#vue-profile-visibility-section') +} diff --git a/apps/settings/src/main-personal-password.js b/apps/settings/src/main-personal-password.js new file mode 100644 index 00000000000..b74f5f71aa2 --- /dev/null +++ b/apps/settings/src/main-personal-password.js @@ -0,0 +1,21 @@ +/** + * 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' + +// eslint-disable-next-line camelcase +__webpack_nonce__ = getCSPNonce() + +Vue.prototype.t = t +Vue.prototype.n = n + +export default new Vue({ + el: '#security-password', + name: 'main-personal-password', + render: h => h(PasswordSection), +}) diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js new file mode 100644 index 00000000000..583a375fb0e --- /dev/null +++ b/apps/settings/src/main-personal-security.js @@ -0,0 +1,25 @@ +/** + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * 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 AuthTokenSection from './components/AuthTokenSection.vue' + +import '@nextcloud/password-confirmation/dist/style.css' + +// eslint-disable-next-line camelcase +__webpack_nonce__ = getCSPNonce() + +const pinia = createPinia() + +Vue.use(PiniaVuePlugin) +Vue.use(VTooltipPlugin, { defaultHtml: false }) +Vue.prototype.t = t + +const View = Vue.extend(AuthTokenSection) +new View({ pinia }).$mount('#security-authtokens') diff --git a/apps/settings/src/main-personal-webauth.js b/apps/settings/src/main-personal-webauth.js new file mode 100644 index 00000000000..f451fa8c73b --- /dev/null +++ b/apps/settings/src/main-personal-webauth.js @@ -0,0 +1,24 @@ +/** + * SPDX-FileCopyrightText: 2020 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 WebAuthnSection from './components/WebAuthn/Section.vue' + +// eslint-disable-next-line camelcase +__webpack_nonce__ = getCSPNonce() + +Vue.prototype.t = t + +const View = Vue.extend(WebAuthnSection) +const devices = loadState('settings', 'webauthn-devices') +new View({ + propsData: { + initialDevices: devices, + isHttps: window.location.protocol === 'https:', + isLocalhost: window.location.hostname === 'localhost', + }, +}).$mount('#security-webauthn') diff --git a/apps/settings/src/mixins/AppManagement.js b/apps/settings/src/mixins/AppManagement.js new file mode 100644 index 00000000000..3822658589d --- /dev/null +++ b/apps/settings/src/mixins/AppManagement.js @@ -0,0 +1,251 @@ +/** + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { showError } from '@nextcloud/dialogs' +import rebuildNavigation from '../service/rebuild-navigation.js' + +export default { + computed: { + appGroups() { + 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?.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', 'Disable') + }, + forceEnableButtonText() { + if (this.app.needsDownload) { + return t('settings', 'Allow untested app') + } + return t('settings', 'Allow untested app') + }, + enableButtonTooltip() { + if (!this.app?.app_api && this.app.needsDownload) { + return t('settings', 'The app will be downloaded from the App Store') + } + return null + }, + forceEnableButtonTooltip() { + const base = t('settings', 'This app is not marked as compatible with your Nextcloud version. If you continue you will still be able to install the app. Note that the app might not work as expected.') + if (this.app.needsDownload) { + return base + ' ' + t('settings', 'The app will be downloaded from the App Store') + } + 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() { + return { + groupCheckedAppsData: false, + } + }, + + mounted() { + if (this.app && this.app.groups && this.app.groups.length > 0) { + this.groupCheckedAppsData = true + } + }, + + methods: { + asyncFindGroup(query) { + return this.$store.dispatch('getGroups', { search: query, limit: 5, offset: 0 }) + }, + isLimitedToGroups(app) { + if (this.app?.app_api) { + 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: [] }) + } + }, + canLimitToGroups(app) { + if ((app.types && app.types.includes('filesystem')) + || app.types.includes('prelogin') + || app.types.includes('authentication') + || app.types.includes('logging') + || 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) { + currentGroups.splice(index, 1) + } + this.$store.dispatch('enableApp', { appId: this.app.id, groups: currentGroups }) + }, + forceEnable(appId) { + 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, 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) { + 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) }) + } + }, + 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) { + 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) { + 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 new file mode 100644 index 00000000000..9e46d8e25d7 --- /dev/null +++ b/apps/settings/src/mixins/UserRowMixin.js @@ -0,0 +1,133 @@ +/** + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { formatFileSize } from '@nextcloud/files' +import { useFormatDateTime } from '@nextcloud/vue' + +export default { + props: { + user: { + type: Object, + required: true, + }, + settings: { + type: Object, + default: () => ({}), + }, + quotaOptions: { + type: Array, + default: () => [], + }, + languages: { + type: Array, + required: true, + }, + externalActions: { + type: Array, + 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 + }, + + /* QUOTA MANAGEMENT */ + usedSpace() { + 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) { + quota = Math.min(100, Math.round(this.user.quota.used / quota * 100)) + } else { + const usedInGB = this.user.quota.used / (10 * Math.pow(2, 30)) + // asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota + quota = 95 * (1 - (1 / (usedInGB + 1))) + } + 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 = 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') { + // default quota is replaced by the proper value on load + return this.quotaOptions[0] + } + return this.quotaOptions[1] // unlimited + }, + + /* PASSWORD POLICY? */ + minPasswordLength() { + return this.$store.getters.getPasswordPolicyMinLength + }, + + /* LANGUAGE */ + userLanguage() { + const availableLanguages = this.languages[0].languages.concat(this.languages[1].languages) + const userLang = availableLanguages.find(lang => lang.code === this.user.language) + if (typeof userLang !== 'object' && this.user.language !== '') { + return { + code: this.user.language, + name: this.user.language, + } + } else if (this.user.language === '') { + return false + } + 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.lastLoginTimestamp > 0) { + return OC.Util.formatDate(this.user.lastLoginTimestamp * 1000) + } + return '' + }, + userLastLogin() { + if (this.user.lastLoginTimestamp > 0) { + return OC.Util.relativeModifiedDate(this.user.lastLoginTimestamp * 1000) + } + return t('settings', 'Never') + }, + }, +} diff --git a/apps/settings/src/router/index.ts b/apps/settings/src/router/index.ts new file mode 100644 index 00000000000..9afa2e78146 --- /dev/null +++ b/apps/settings/src/router/index.ts @@ -0,0 +1,22 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import Vue from 'vue' +import Router from 'vue-router' +import { generateUrl } from '@nextcloud/router' +import routes from './routes.ts' + +Vue.use(Router) + +const router = new Router({ + mode: 'history', + // if index.php is in the url AND we got this far, then it's working: + // let's keep using index.php in the url + base: generateUrl(''), + linkActiveClass: 'active', + routes, +}) + +export default router diff --git a/apps/settings/src/router/routes.ts b/apps/settings/src/router/routes.ts new file mode 100644 index 00000000000..35b3b1306d5 --- /dev/null +++ b/apps/settings/src/router/routes.ts @@ -0,0 +1,63 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * 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') +const AppStoreNavigation = () => import(/* webpackChunkName: 'settings-apps-view' */'../views/AppStoreNavigation.vue') +const AppStoreSidebar = () => import(/* webpackChunkName: 'settings-apps-view' */'../views/AppStoreSidebar.vue') + +const UserManagement = () => import(/* webpackChunkName: 'settings-users' */'../views/UserManagement.vue') +const UserManagementNavigation = () => import(/* webpackChunkName: 'settings-users' */'../views/UserManagementNavigation.vue') + +const routes: RouteConfig[] = [ + { + name: 'users', + path: '/:index(index.php/)?settings/users', + components: { + default: UserManagement, + navigation: UserManagementNavigation, + }, + props: true, + children: [ + { + path: ':selectedGroup', + name: 'group', + }, + ], + }, + { + path: '/:index(index.php/)?settings/apps', + name: 'apps', + redirect: { + name: 'apps-category', + params: { + category: appstoreEnabled ? 'discover' : 'installed', + }, + }, + components: { + default: AppStore, + navigation: AppStoreNavigation, + sidebar: AppStoreSidebar, + }, + children: [ + { + path: ':category', + name: 'apps-category', + children: [ + { + path: ':id', + name: 'apps-details', + }, + ], + }, + ], + }, +] + +export default routes diff --git a/apps/settings/src/service/PersonalInfo/EmailService.js b/apps/settings/src/service/PersonalInfo/EmailService.js new file mode 100644 index 00000000000..0adbe5225bc --- /dev/null +++ b/apps/settings/src/service/PersonalInfo/EmailService.js @@ -0,0 +1,137 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { getCurrentUser } from '@nextcloud/auth' +import { generateOcsUrl } from '@nextcloud/router' +import { confirmPassword } from '@nextcloud/password-confirmation' +import axios from '@nextcloud/axios' + +import { ACCOUNT_PROPERTY_ENUM, SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.ts' + +import '@nextcloud/password-confirmation/dist/style.css' + +/** + * Save the primary email of the user + * + * @param {string} email the primary email + * @return {object} + */ +export const savePrimaryEmail = async (email) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}', { userId }) + + await confirmPassword() + + const res = await axios.put(url, { + key: ACCOUNT_PROPERTY_ENUM.EMAIL, + value: email, + }) + + return res.data +} + +/** + * Save an additional email of the user + * + * Will be appended to the user's additional emails* + * + * @param {string} email the additional email + * @return {object} + */ +export const saveAdditionalEmail = async (email) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}', { userId }) + + await confirmPassword() + + const res = await axios.put(url, { + key: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION, + value: email, + }) + + return res.data +} + +/** + * Save the notification email of the user + * + * @param {string} email the notification email + * @return {object} + */ +export const saveNotificationEmail = async (email) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}', { userId }) + + await confirmPassword() + + const res = await axios.put(url, { + key: ACCOUNT_PROPERTY_ENUM.NOTIFICATION_EMAIL, + value: email, + }) + + return res.data +} + +/** + * Remove an additional email of the user + * + * @param {string} email the additional email + * @return {object} + */ +export const removeAdditionalEmail = async (email) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}/{collection}', { userId, collection: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION }) + + await confirmPassword() + + const res = await axios.put(url, { + key: email, + value: '', + }) + + return res.data +} + +/** + * Update an additional email of the user + * + * @param {string} prevEmail the additional email to be updated + * @param {string} newEmail the new additional email + * @return {object} + */ +export const updateAdditionalEmail = async (prevEmail, newEmail) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}/{collection}', { userId, collection: ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION }) + + await confirmPassword() + + const res = await axios.put(url, { + key: prevEmail, + value: newEmail, + }) + + return res.data +} + +/** + * Save the federation scope for the additional email of the user + * + * @param {string} email the additional email + * @param {string} scope the federation scope + * @return {object} + */ +export const saveAdditionalEmailScope = async (email, scope) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}/{collectionScope}', { userId, collectionScope: `${ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION}${SCOPE_SUFFIX}` }) + + await confirmPassword() + + const res = await axios.put(url, { + key: email, + value: scope, + }) + + return res.data +} diff --git a/apps/settings/src/service/PersonalInfo/PersonalInfoService.js b/apps/settings/src/service/PersonalInfo/PersonalInfoService.js new file mode 100644 index 00000000000..f2eaac91301 --- /dev/null +++ b/apps/settings/src/service/PersonalInfo/PersonalInfoService.js @@ -0,0 +1,61 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { getCurrentUser } from '@nextcloud/auth' +import { generateOcsUrl } from '@nextcloud/router' +import { confirmPassword } from '@nextcloud/password-confirmation' +import axios from '@nextcloud/axios' + +import { SCOPE_SUFFIX } from '../../constants/AccountPropertyConstants.ts' + +import '@nextcloud/password-confirmation/dist/style.css' + +/** + * Save the primary account property value for the user + * + * @param {string} accountProperty the account property + * @param {string|boolean} value the primary value + * @return {object} + */ +export const savePrimaryAccountProperty = async (accountProperty, value) => { + // TODO allow boolean values on backend route handler + // Convert boolean to string for compatibility + if (typeof value === 'boolean') { + value = value ? '1' : '0' + } + + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}', { userId }) + + await confirmPassword() + + const res = await axios.put(url, { + key: accountProperty, + value, + }) + + return res.data +} + +/** + * Save the federation scope of the primary account property for the user + * + * @param {string} accountProperty the account property + * @param {string} scope the federation scope + * @return {object} + */ +export const savePrimaryAccountPropertyScope = async (accountProperty, scope) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('cloud/users/{userId}', { userId }) + + await confirmPassword() + + const res = await axios.put(url, { + key: `${accountProperty}${SCOPE_SUFFIX}`, + value: scope, + }) + + return res.data +} diff --git a/apps/settings/src/service/ProfileService.js b/apps/settings/src/service/ProfileService.js new file mode 100644 index 00000000000..3e6c7cd622f --- /dev/null +++ b/apps/settings/src/service/ProfileService.js @@ -0,0 +1,55 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * 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' + +/** + * Save the visibility of the profile parameter + * + * @param {string} paramId the profile parameter ID + * @param {string} visibility the visibility + * @return {object} + */ +export const saveProfileParameterVisibility = async (paramId, visibility) => { + const userId = getCurrentUser().uid + const url = generateOcsUrl('/profile/{userId}', { userId }) + + await confirmPassword() + + const res = await axios.put(url, { + paramId, + visibility, + }) + + return res.data +} + +/** + * Save profile default + * + * @param {boolean} isEnabled the default + * @return {object} + */ +export const saveProfileDefault = async (isEnabled) => { + // Convert to string for compatibility + isEnabled = isEnabled ? '1' : '0' + + const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', { + appId: 'settings', + key: 'profile_enabled_by_default', + }) + + await confirmPassword() + + const res = await axios.post(url, { + value: isEnabled, + }) + + return res.data +} diff --git a/apps/settings/src/service/WebAuthnRegistrationSerice.ts b/apps/settings/src/service/WebAuthnRegistrationSerice.ts new file mode 100644 index 00000000000..0d1689ab90a --- /dev/null +++ b/apps/settings/src/service/WebAuthnRegistrationSerice.ts @@ -0,0 +1,57 @@ +/** + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +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, { isAxiosError } from '@nextcloud/axios' +import logger from '../logger' + +/** + * Start registering a new device + * @return The device attributes + */ +export async function startRegistration() { + const url = generateUrl('/settings/api/personal/webauthn/registration') + + try { + logger.debug('Fetching webauthn registration data') + const { data } = await axios.get<PublicKeyCredentialCreationOptionsJSON>(url) + logger.debug('Start webauthn registration') + const attrs = await registerWebAuthn({ optionsJSON: data }) + return attrs + } catch (e) { + logger.error(e as Error) + 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')) + } + throw new Error(t('settings', 'Could not register device')) + } +} + +/** + * @param name Name of the device + * @param data Device attributes + */ +export async function finishRegistration(name: string, data: RegistrationResponseJSON) { + const url = generateUrl('/settings/api/personal/webauthn/registration') + + const resp = await axios.post(url, { name, data: JSON.stringify(data) }) + return resp.data +} + +/** + * @param id Remove registered device with that id + */ +export async function removeRegistration(id: string | number) { + const url = generateUrl(`/settings/api/personal/webauthn/registration/${id}`) + + await axios.delete(url) +} 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/service/rebuild-navigation.js b/apps/settings/src/service/rebuild-navigation.js new file mode 100644 index 00000000000..56317f7f5e1 --- /dev/null +++ b/apps/settings/src/service/rebuild-navigation.js @@ -0,0 +1,19 @@ +/** + * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import axios from '@nextcloud/axios' +import { generateOcsUrl } from '@nextcloud/router' +import { emit } from '@nextcloud/event-bus' + +export default () => { + return axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json') + .then(({ data }) => { + if (data.ocs.meta.statuscode !== 200) { + return + } + + emit('nextcloud:app-menu.refresh', { apps: data.ocs.data }) + window.dispatchEvent(new Event('resize')) + }) +} diff --git a/apps/settings/src/store/admin-security.js b/apps/settings/src/store/admin-security.js new file mode 100644 index 00000000000..2cb5eb101ef --- /dev/null +++ b/apps/settings/src/store/admin-security.js @@ -0,0 +1,33 @@ +/** + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import Vue from 'vue' +import Vuex, { Store } from 'vuex' + +Vue.use(Vuex) + +const state = { + enforced: false, + enforcedGroups: [], + excludedGroups: [], +} + +const mutations = { + setEnforced(state, enabled) { + Vue.set(state, 'enforced', enabled) + }, + setEnforcedGroups(state, total) { + Vue.set(state, 'enforcedGroups', total) + }, + setExcludedGroups(state, used) { + Vue.set(state, 'excludedGroups', used) + }, +} + +export default new Store({ + strict: process.env.NODE_ENV !== 'production', + state, + mutations, +}) diff --git a/apps/settings/src/store/api.js b/apps/settings/src/store/api.js new file mode 100644 index 00000000000..f36d44cc5c0 --- /dev/null +++ b/apps/settings/src/store/api.js @@ -0,0 +1,65 @@ +/** + * SPDX-FileCopyrightText: 2018 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 '@nextcloud/password-confirmation/dist/style.css' + +const sanitize = function(url) { + return url.replace(/\/$/, '') // Remove last url slash +} + +export default { + + /** + * This Promise is used to chain a request that require an admin password confirmation + * Since chaining Promise have a very precise behavior concerning catch and then, + * you'll need to be careful when using it. + * e.g + * // store + * action(context) { + * return api.requireAdmin().then((response) => { + * return api.get('url') + * .then((response) => {API success}) + * .catch((error) => {API failure}); + * }).catch((error) => {requireAdmin failure}); + * } + * // vue + * this.$store.dispatch('action').then(() => {always executed}) + * + * Since Promise.then().catch().then() will always execute the last then + * this.$store.dispatch('action').then will always be executed + * + * If you want requireAdmin failure to also catch the API request failure + * you will need to throw a new error in the api.get.catch() + * + * e.g + * api.requireAdmin().then((response) => { + * api.get('url') + * .then((response) => {API success}) + * .catch((error) => {throw error;}); + * }).catch((error) => {requireAdmin OR API failure}); + * + * @return {Promise} + */ + requireAdmin() { + return confirmPassword() + }, + get(url, options) { + return axios.get(sanitize(url), options) + }, + post(url, data) { + return axios.post(sanitize(url), data) + }, + patch(url, data) { + return axios.patch(sanitize(url), data) + }, + put(url, data) { + return axios.put(sanitize(url), data) + }, + delete(url, data) { + return axios.delete(sanitize(url), { params: data }) + }, +} 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-store.ts b/apps/settings/src/store/apps-store.ts new file mode 100644 index 00000000000..eaf8a0d7f86 --- /dev/null +++ b/apps/settings/src/store/apps-store.ts @@ -0,0 +1,87 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import type { IAppstoreApp, IAppstoreCategory } from '../app-types.ts' + +import { showError } 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 axios from '@nextcloud/axios' + +import logger from '../logger' +import APPSTORE_CATEGORY_ICONS from '../constants/AppstoreCategoryIcons.ts' + +const showApiError = () => showError(t('settings', 'An error occurred during the request. Unable to proceed.')) + +export const useAppsStore = defineStore('settings-apps', { + state: () => ({ + apps: [] as IAppstoreApp[], + categories: [] as IAppstoreCategory[], + updateCount: loadState<number>('settings', 'appstoreUpdateCount', 0), + loading: { + apps: false, + categories: false, + }, + loadingList: false, + gettingCategoriesPromise: null, + }), + + actions: { + async loadCategories(force = false) { + if (this.categories.length > 0 && !force) { + return + } + + try { + this.loading.categories = true + const { data: categories } = await axios.get<IAppstoreCategory[]>(generateUrl('settings/apps/categories')) + + for (const category of categories) { + category.icon = APPSTORE_CATEGORY_ICONS[category.id] ?? '' + } + + this.$patch({ + categories, + }) + } catch (error) { + logger.error(error as Error) + showApiError() + } finally { + this.loading.categories = false + } + }, + + async loadApps(force = false) { + if (this.apps.length > 0 && !force) { + return + } + + try { + this.loading.apps = true + const { data } = await axios.get<{ apps: IAppstoreApp[] }>(generateUrl('settings/apps/list')) + + this.$patch({ + apps: data.apps, + }) + } catch (error) { + logger.error(error as Error) + showApiError() + } finally { + this.loading.apps = false + } + }, + + getCategoryById(categoryId: string) { + return this.categories.find(({ id }) => id === categoryId) ?? null + }, + + getAppById(appId: string): IAppstoreApp|null { + return this.apps.find(({ id }) => id === appId) ?? null + }, + }, +}) diff --git a/apps/settings/src/store/apps.js b/apps/settings/src/store/apps.js new file mode 100644 index 00000000000..e0068d3892e --- /dev/null +++ b/apps/settings/src/store/apps.js @@ -0,0 +1,357 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +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' + +const state = { + apps: [], + bundles: loadState('settings', 'appstoreBundles', []), + categories: [], + updateCount: loadState('settings', 'appstoreUpdateCount', 0), + loading: {}, + gettingCategoriesPromise: null, + appApiEnabled: loadState('settings', 'appApiEnabled', false), +} + +const mutations = { + + APPS_API_FAILURE(state, error) { + showError(t('settings', 'An error occurred during the request. Unable to proceed.') + '<br>' + error.error.response.data.data.message, { isHTML: true }) + console.error(state, error) + }, + + initCategories(state, { categories, updateCount }) { + state.categories = categories + state.updateCount = updateCount + }, + + updateCategories(state, categoriesPromise) { + state.gettingCategoriesPromise = categoriesPromise + }, + + setUpdateCount(state, updateCount) { + state.updateCount = updateCount + }, + + addCategory(state, category) { + state.categories.push(category) + }, + + appendCategories(state, categoriesArray) { + // convert obj to array + state.categories = categoriesArray + }, + + setAllApps(state, apps) { + state.apps = apps + }, + + setError(state, { appId, error }) { + if (!Array.isArray(appId)) { + appId = [appId] + } + appId.forEach((_id) => { + const app = state.apps.find(app => app.id === _id) + app.error = error + }) + }, + + clearError(state, { appId, error }) { + const app = state.apps.find(app => app.id === appId) + app.error = null + }, + + enableApp(state, { appId, groups }) { + 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 }) { + const app = state.apps.find(app => app.id === appId) + if (app) { + app.canInstall = canInstall === true + } + }, + + disableApp(state, appId) { + const app = state.apps.find(app => app.id === appId) + app.active = false + app.groups = [] + if (app.removable) { + app.canUnInstall = true + } + if (app.id === 'app_api') { + state.appApiEnabled = false + } + }, + + uninstallApp(state, appId) { + state.apps.find(app => app.id === appId).active = false + state.apps.find(app => app.id === appId).groups = [] + state.apps.find(app => app.id === appId).needsDownload = true + 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) { + const app = state.apps.find(app => app.id === appId) + const version = app.update + app.update = null + app.version = version + state.updateCount-- + + }, + + resetApps(state) { + state.apps = [] + }, + reset(state) { + state.apps = [] + state.categories = [] + state.updateCount = 0 + }, + startLoading(state, id) { + if (Array.isArray(id)) { + id.forEach((_id) => { + Vue.set(state.loading, _id, true) + }) + } else { + Vue.set(state.loading, id, true) + } + }, + stopLoading(state, id) { + if (Array.isArray(id)) { + id.forEach((_id) => { + Vue.set(state.loading, _id, false) + }) + } else { + Vue.set(state.loading, id, false) + } + }, +} + +const getters = { + isAppApiEnabled(state) { + return state.appApiEnabled + }, + loading(state) { + return function(id) { + return state.loading[id] + } + }, + getCategories(state) { + return state.categories + }, + getAllApps(state) { + return state.apps + }, + getAppBundles(state) { + return state.bundles + }, + getUpdateCount(state) { + return state.updateCount + }, + getCategoryById: (state) => (selectedCategoryId) => { + return state.categories.find((category) => category.id === selectedCategoryId) + }, +} + +const actions = { + + enableApp(context, { appId, groups }) { + let apps + if (Array.isArray(appId)) { + apps = appId + } else { + apps = [appId] + } + return api.requireAdmin().then((response) => { + context.commit('startLoading', apps) + context.commit('startLoading', 'install') + return api.post(generateUrl('settings/apps/enable'), { appIds: apps, groups }) + .then((response) => { + context.commit('stopLoading', apps) + context.commit('stopLoading', 'install') + apps.forEach(_appId => { + context.commit('enableApp', { appId: _appId, groups }) + }) + + // check for server health + 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.', + ), + { + onClick: () => window.location.reload(), + close: false, + + }, + ) + setTimeout(function() { + location.reload() + }, 5000) + } + }) + .catch(() => { + if (!Array.isArray(appId)) { + showError(t('settings', 'Error: This app cannot be enabled because it makes the server unstable')) + context.commit('setError', { + appId: apps, + error: t('settings', 'Error: This app cannot be enabled because it makes the server unstable'), + }) + context.dispatch('disableApp', { appId }) + } + }) + }) + .catch((error) => { + context.commit('stopLoading', apps) + context.commit('stopLoading', 'install') + context.commit('setError', { + appId: apps, + error: error.response.data.data.message, + }) + context.commit('APPS_API_FAILURE', { appId, error }) + }) + }).catch((error) => context.commit('API_FAILURE', { appId, error })) + }, + forceEnableApp(context, { appId, groups }) { + let apps + if (Array.isArray(appId)) { + apps = appId + } else { + apps = [appId] + } + return api.requireAdmin().then(() => { + context.commit('startLoading', apps) + context.commit('startLoading', 'install') + return api.post(generateUrl('settings/apps/force'), { appId }) + .then((response) => { + context.commit('setInstallState', { appId, canInstall: true }) + }) + .catch((error) => { + context.commit('stopLoading', apps) + context.commit('stopLoading', 'install') + context.commit('setError', { + appId: apps, + error: error.response.data.data.message, + }) + context.commit('APPS_API_FAILURE', { appId, error }) + }) + .finally(() => { + context.commit('stopLoading', apps) + context.commit('stopLoading', 'install') + }) + }).catch((error) => context.commit('API_FAILURE', { appId, error })) + }, + disableApp(context, { appId }) { + let apps + if (Array.isArray(appId)) { + apps = appId + } else { + apps = [appId] + } + return api.requireAdmin().then((response) => { + context.commit('startLoading', apps) + return api.post(generateUrl('settings/apps/disable'), { appIds: apps }) + .then((response) => { + context.commit('stopLoading', apps) + apps.forEach(_appId => { + context.commit('disableApp', _appId) + }) + return true + }) + .catch((error) => { + context.commit('stopLoading', apps) + context.commit('APPS_API_FAILURE', { appId, error }) + }) + }).catch((error) => context.commit('API_FAILURE', { appId, error })) + }, + uninstallApp(context, { appId }) { + return api.requireAdmin().then((response) => { + context.commit('startLoading', appId) + return api.get(generateUrl(`settings/apps/uninstall/${appId}`)) + .then((response) => { + context.commit('stopLoading', appId) + context.commit('uninstallApp', appId) + return true + }) + .catch((error) => { + context.commit('stopLoading', appId) + context.commit('APPS_API_FAILURE', { appId, error }) + }) + }).catch((error) => context.commit('API_FAILURE', { appId, error })) + }, + + updateApp(context, { appId }) { + return api.requireAdmin().then((response) => { + context.commit('startLoading', appId) + context.commit('startLoading', 'install') + return api.get(generateUrl(`settings/apps/update/${appId}`)) + .then((response) => { + context.commit('stopLoading', 'install') + context.commit('stopLoading', appId) + context.commit('updateApp', appId) + return true + }) + .catch((error) => { + context.commit('stopLoading', appId) + context.commit('stopLoading', 'install') + context.commit('APPS_API_FAILURE', { appId, error }) + }) + }).catch((error) => context.commit('API_FAILURE', { appId, error })) + }, + + getAllApps(context) { + context.commit('startLoading', 'list') + return api.get(generateUrl('settings/apps/list')) + .then((response) => { + context.commit('setAllApps', response.data.apps) + context.commit('stopLoading', 'list') + return true + }) + .catch((error) => context.commit('API_FAILURE', error)) + }, + + async getCategories(context, { shouldRefetchCategories = false } = {}) { + if (shouldRefetchCategories || !context.state.gettingCategoriesPromise) { + context.commit('startLoading', 'categories') + try { + const categoriesPromise = api.get(generateUrl('settings/apps/categories')) + context.commit('updateCategories', categoriesPromise) + const categoriesPromiseResponse = await categoriesPromise + if (categoriesPromiseResponse.data.length > 0) { + context.commit('appendCategories', categoriesPromiseResponse.data) + context.commit('stopLoading', 'categories') + return true + } + context.commit('stopLoading', 'categories') + return false + } catch (error) { + context.commit('API_FAILURE', error) + } + } + return context.state.gettingCategoriesPromise + }, + +} + +export default { state, mutations, getters, actions } diff --git a/apps/settings/src/store/authtoken.ts b/apps/settings/src/store/authtoken.ts new file mode 100644 index 00000000000..daf5583ab8c --- /dev/null +++ b/apps/settings/src/store/authtoken.ts @@ -0,0 +1,200 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import { showError } from '@nextcloud/dialogs' +import { loadState } from '@nextcloud/initial-state' +import { translate as t } from '@nextcloud/l10n' +import { confirmPassword } from '@nextcloud/password-confirmation' +import { generateUrl } from '@nextcloud/router' +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 = () => { + return new Promise(resolve => { + window.OC.dialogs.confirm( + t('settings', 'Do you really want to wipe your data from this device?'), + t('settings', 'Confirm wipe'), + resolve, + true, + ) + }) +} + +export enum TokenType { + TEMPORARY_TOKEN = 0, + PERMANENT_TOKEN = 1, + WIPING_TOKEN = 2, +} + +export interface IToken { + id: number + canDelete: boolean + canRename: boolean + current?: true + /** + * Last activity as UNIX timestamp (in seconds) + */ + lastActivity: number + name: string + type: TokenType + scope: Record<string, boolean> +} + +export interface ITokenResponse { + /** + * The device token created + */ + deviceToken: IToken + /** + * User who is assigned with this token + */ + loginName: string + /** + * The token for authentication + */ + token: string +} + +export const useAuthTokenStore = defineStore('auth-token', { + state() { + return { + tokens: loadState<IToken[]>('settings', 'app_tokens', []), + } + }, + actions: { + /** + * Update a token on server + * @param token Token to update + */ + async updateToken(token: IToken) { + const { data } = await axios.put(`${BASE_URL}/${token.id}`, token) + return data + }, + + /** + * Add a new token + * @param name The token name + */ + async addToken(name: string) { + logger.debug('Creating a new app token') + + try { + await confirmPassword() + + const { data } = await axios.post<ITokenResponse>(BASE_URL, { name }) + this.tokens.push(data.deviceToken) + logger.debug('App token created') + return data + } catch (error) { + return null + } + }, + + /** + * Delete a given app token + * @param token Token to delete + */ + async deleteToken(token: IToken) { + logger.debug('Deleting app token', { token }) + + this.tokens = this.tokens.filter(({ id }) => id !== token.id) + + try { + await axios.delete(`${BASE_URL}/${token.id}`) + logger.debug('App token deleted') + return true + } catch (error) { + logger.error('Could not delete app token', { error }) + showError(t('settings', 'Could not delete the app token')) + // Restore + this.tokens.push(token) + } + return false + }, + + /** + * Wipe a token and the connected device + * @param token Token to wipe + */ + async wipeToken(token: IToken) { + logger.debug('Wiping app token', { token }) + + try { + await confirmPassword() + + if (!(await confirm())) { + logger.debug('Wipe aborted by user') + return + } + + await axios.post(`${BASE_URL}/wipe/${token.id}`) + logger.debug('App token marked for wipe', { token }) + + token.type = TokenType.WIPING_TOKEN + token.canRename = false // wipe tokens can not be renamed + return true + } catch (error) { + logger.error('Could not wipe app token', { error }) + showError(t('settings', 'Error while wiping the device with the token')) + } + return false + }, + + /** + * Rename an existing token + * @param token The token to rename + * @param newName The new name to set + */ + async renameToken(token: IToken, newName: string) { + logger.debug(`renaming app token ${token.id} from ${token.name} to '${newName}'`) + + const oldName = token.name + token.name = newName + + try { + await this.updateToken(token) + logger.debug('App token name updated') + return true + } catch (error) { + logger.error('Could not update app token name', { error }) + showError(t('settings', 'Error while updating device token name')) + // Restore + token.name = oldName + } + return false + }, + + /** + * Set scope of the token + * @param token Token to set scope + * @param scope scope to set + * @param value value to set + */ + async setTokenScope(token: IToken, scope: string, value: boolean) { + logger.debug('Updating app token scope', { token, scope, value }) + + const oldVal = token.scope[scope] + token.scope[scope] = value + + try { + await this.updateToken(token) + logger.debug('app token scope updated') + return true + } catch (error) { + logger.error('could not update app token scope', { error }) + showError(t('settings', 'Error while updating device token scope')) + // Restore + token.scope[scope] = oldVal + } + return false + }, + }, + +}) diff --git a/apps/settings/src/store/index.js b/apps/settings/src/store/index.js new file mode 100644 index 00000000000..9ecda7e37ad --- /dev/null +++ b/apps/settings/src/store/index.js @@ -0,0 +1,43 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +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' + +const debug = process.env.NODE_ENV !== 'production' + +const mutations = { + API_FAILURE(state, error) { + try { + const message = error.error.response.data.ocs.meta.message + showError(t('settings', 'An error occurred during the request. Unable to proceed.') + '<br>' + message, { isHTML: true }) + } catch (e) { + showError(t('settings', 'An error occurred during the request. Unable to proceed.')) + } + console.error(state, error) + }, +} + +let store = null + +export const useStore = () => { + if (store === null) { + store = new Store({ + modules: { + users, + apps, + settings, + oc, + }, + strict: debug, + mutations, + }) + } + return store +} diff --git a/apps/settings/src/store/oc.js b/apps/settings/src/store/oc.js new file mode 100644 index 00000000000..cb9b8782bce --- /dev/null +++ b/apps/settings/src/store/oc.js @@ -0,0 +1,31 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import api from './api.js' +import { generateOcsUrl } from '@nextcloud/router' + +const state = {} +const mutations = {} +const getters = {} +const actions = { + /** + * Set application config in database + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.app Application name + * @param {boolean} options.key Config key + * @param {boolean} options.value Value to set + * @return {Promise} + */ + setAppConfig(context, { app, key, value }) { + return api.requireAdmin().then((response) => { + return api.post(generateOcsUrl('apps/provisioning_api/api/v1/config/apps/{app}/{key}', { app, key }), { value }) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { app, key, value, error })) + }, +} + +export default { state, mutations, getters, actions } diff --git a/apps/settings/src/store/users-settings.js b/apps/settings/src/store/users-settings.js new file mode 100644 index 00000000000..6e52b8ec0f5 --- /dev/null +++ b/apps/settings/src/store/users-settings.js @@ -0,0 +1,23 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { loadState } from '@nextcloud/initial-state' + +const state = { + serverData: loadState('settings', 'usersSettings', {}), +} +const mutations = { + setServerData(state, data) { + state.serverData = data + }, +} +const getters = { + getServerData(state) { + return state.serverData + }, +} +const actions = {} + +export default { state, mutations, getters, actions } diff --git a/apps/settings/src/store/users.js b/apps/settings/src/store/users.js new file mode 100644 index 00000000000..7e4b9c4aebb --- /dev/null +++ b/apps/settings/src/store/users.js @@ -0,0 +1,807 @@ +/** + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { getBuilder } from '@nextcloud/browser-storage' +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: '', + usercount: 0, + disabled: 0, + canAdd: true, + canRemove: true, + }, +} + +const state = { + users: [], + groups: [ + ...(usersSettings.getSubAdminGroups ?? []), + ...(usersSettings.systemGroups ?? []), + ], + orderBy: usersSettings.sortGroups ?? GroupSorting.UserCount, + minPasswordLength: 0, + usersOffset: 0, + usersLimit: 25, + disabledUsersOffset: 0, + disabledUsersLimit: 25, + 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', + }, +} + +const mutations = { + appendUsers(state, usersObj) { + const existingUsers = state.users.map(({ id }) => id) + const newUsers = Object.values(usersObj) + .filter(({ id }) => !existingUsers.includes(id)) + + const users = state.users.concat(newUsers) + state.usersOffset += state.usersLimit + state.users = users + }, + updateDisabledUsers(state, _usersObj) { + state.disabledUsersOffset += state.disabledUsersLimit + }, + setPasswordPolicyMinLength(state, length) { + state.minPasswordLength = length !== '' ? length : 0 + }, + /** + * @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 === newGroup.id) !== 'undefined') { + return + } + // extend group to default values + const group = Object.assign({}, defaults.group, newGroup) + state.groups.unshift(group) + } catch (e) { + console.error('Can\'t create group', e) + } + }, + renameGroup(state, { gid, displayName }) { + const groupIndex = state.groups.findIndex(groupSearch => groupSearch.id === gid) + if (groupIndex >= 0) { + const updatedGroup = state.groups[groupIndex] + updatedGroup.name = displayName + state.groups.splice(groupIndex, 1, updatedGroup) + } + }, + removeGroup(state, gid) { + const groupIndex = state.groups.findIndex(groupSearch => groupSearch.id === gid) + if (groupIndex >= 0) { + state.groups.splice(groupIndex, 1) + } + }, + addUserGroup(state, { userid, gid }) { + const group = state.groups.find(groupSearch => groupSearch.id === gid) + const user = state.users.find(user => user.id === userid) + // increase count if user is enabled + if (group && user.enabled && state.userCount > 0) { + group.usercount++ + } + const groups = user.groups + groups.push(gid) + }, + removeUserGroup(state, { userid, gid }) { + const group = state.groups.find(groupSearch => groupSearch.id === gid) + const user = state.users.find(user => user.id === userid) + // lower count if user is enabled + if (group && user.enabled && state.userCount > 0) { + group.usercount-- + } + const groups = user.groups + groups.splice(groups.indexOf(gid), 1) + }, + addUserSubAdmin(state, { userid, gid }) { + const groups = state.users.find(user => user.id === userid).subadmin + groups.push(gid) + }, + removeUserSubAdmin(state, { userid, gid }) { + const groups = state.users.find(user => user.id === userid).subadmin + groups.splice(groups.indexOf(gid), 1) + }, + deleteUser(state, userid) { + const userIndex = state.users.findIndex(user => user.id === userid) + this.commit('updateUserCounts', { user: state.users[userIndex], actionType: 'remove' }) + state.users.splice(userIndex, 1) + }, + addUserData(state, response) { + const user = response.data.ocs.data + state.users.unshift(user) + this.commit('updateUserCounts', { user, actionType: 'create' }) + }, + enableDisableUser(state, { userid, enabled }) { + const user = state.users.find(user => user.id === userid) + user.enabled = enabled + this.commit('updateUserCounts', { user, actionType: enabled ? 'enable' : 'disable' }) + }, + // update active/disabled counts, groups counts + updateUserCounts(state, { user, actionType }) { + // 0 is a special value + if (state.userCount === 0) { + 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 => { + 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) + if (!group) { + console.warn('User group ' + userGroup + ' does not exist during user removal') + return + } + group.usercount-- // decrement group total count + }) + } else { + 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 + }) + } + break + default: + logger.error(`Unknown action type in updateUserCounts: '${actionType}'`) + // not throwing error to interrupt execution as this is not fatal + } + }, + setUserData(state, { userid, key, value }) { + if (key === 'quota') { + const humanValue = parseFileSize(value, true) + state.users.find(user => user.id === userid)[key][key] = humanValue !== null ? humanValue : value + } else { + state.users.find(user => user.id === userid)[key] = value + } + }, + + /** + * Reset users list + * + * @param {object} state the store state + */ + resetUsers(state) { + state.users = [] + state.usersOffset = 0 + 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 + }, + + setGroupSorting(state, sorting) { + const oldValue = state.orderBy + state.orderBy = sorting + + // Persist the value on the server + axios.post( + generateUrl('/settings/users/preferences/group.sortBy'), + { + value: String(sorting), + }, + ).catch((error) => { + state.orderBy = oldValue + showError(t('settings', 'Could not set group sorting')) + logger.error(error) + }) + }, +} + +const getters = { + getUsers(state) { + return state.users + }, + getGroups(state) { + return state.groups + }, + 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 : naturalCollator.compare(a.name, b.name)) + }) + } else { + return groups.sort((a, b) => naturalCollator.compare(a.name, b.name)) + } + }, + getGroupSorting(state) { + return state.orderBy + }, + getPasswordPolicyMinLength(state) { + return state.minPasswordLength + }, + getUsersOffset(state) { + return state.usersOffset + }, + getUsersLimit(state) { + return state.usersLimit + }, + getDisabledUsersOffset(state) { + return state.disabledUsersOffset + }, + getDisabledUsersLimit(state) { + return state.disabledUsersLimit + }, + getUserCount(state) { + return state.userCount + }, + getShowConfig(state) { + return state.showConfig + }, +} + +const CancelToken = axios.CancelToken +let searchRequestCancelSource = null + +const actions = { + + /** + * search users + * + * @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 amongst users + * @return {Promise} + */ + searchUsers(context, { offset, limit, search }) { + search = typeof search === 'string' ? search : '' + + return api.get(generateOcsUrl('cloud/users/details?offset={offset}&limit={limit}&search={search}', { offset, limit, search })).catch((error) => { + if (!axios.isCancel(error)) { + context.commit('API_FAILURE', error) + } + }) + }, + + /** + * Get user details + * + * @param {object} context store context + * @param {string} userId user id + * @return {Promise} + */ + getUser(context, userId) { + return api.get(generateOcsUrl(`cloud/users/${userId}`)).catch((error) => { + if (!axios.isCancel(error)) { + context.commit('API_FAILURE', error) + } + }) + }, + + /** + * Get all 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 amongst users + * @param {string} options.group Get users from group + * @return {Promise} + */ + getUsers(context, { offset, limit, search, group }) { + if (searchRequestCancelSource) { + searchRequestCancelSource.cancel('Operation canceled by another search request.') + } + searchRequestCancelSource = CancelToken.source() + search = typeof search === 'string' ? search : '' + + /** + * Adding filters in the search bar such as in:files, in:users, etc. + * collides with this particular search, so we need to remove them + * here and leave only the original search query + */ + search = search.replace(/in:[^\s]+/g, '').trim() + + group = typeof group === 'string' ? group : '' + if (group !== '') { + return api.get(generateOcsUrl('cloud/groups/{group}/users/details?offset={offset}&limit={limit}&search={search}', { group: encodeURIComponent(group), offset, limit, search }), { + cancelToken: searchRequestCancelSource.token, + }) + .then((response) => { + 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) => { + if (!axios.isCancel(error)) { + context.commit('API_FAILURE', error) + } + }) + } + + return api.get(generateOcsUrl('cloud/users/details?offset={offset}&limit={limit}&search={search}', { offset, limit, search }), { + cancelToken: searchRequestCancelSource.token, + }) + .then((response) => { + 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) => { + if (!axios.isCancel(error)) { + context.commit('API_FAILURE', error) + } + }) + }, + + /** + * 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 }) { + const url = generateOcsUrl('cloud/users/disabled?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) + context.commit('updateDisabledUsers', response.data.ocs.data.users) + } + return usersCount + } catch (error) { + context.commit('API_FAILURE', error) + } + }, + + getGroups(context, { offset, limit, search }) { + search = typeof search === 'string' ? search : '' + const limitParam = limit === -1 ? '' : `&limit=${limit}` + return api.get(generateOcsUrl('cloud/groups?offset={offset}&search={search}', { offset, search }) + limitParam) + .then((response) => { + if (Object.keys(response.data.ocs.data.groups).length > 0) { + response.data.ocs.data.groups.forEach(function(group) { + context.commit('addGroup', { id: group, name: group }) + }) + return true + } + return false + }) + .catch((error) => context.commit('API_FAILURE', error)) + }, + + /** + * Get all 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 - + * @return {Promise} + */ + getUsersFromList(context, { offset, limit, search }) { + search = typeof search === 'string' ? search : '' + return api.get(generateOcsUrl('cloud/users/details?offset={offset}&limit={limit}&search={search}', { offset, limit, search })) + .then((response) => { + if (Object.keys(response.data.ocs.data.users).length > 0) { + context.commit('appendUsers', response.data.ocs.data.users) + return true + } + return false + }) + .catch((error) => context.commit('API_FAILURE', error)) + }, + + /** + * Get all users with full details from a groupid + * + * @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.groupid - + * @return {Promise} + */ + getUsersFromGroup(context, { groupid, offset, limit }) { + return api.get(generateOcsUrl('cloud/users/{groupId}/details?offset={offset}&limit={limit}', { groupId: encodeURIComponent(groupid), offset, limit })) + .then((response) => context.commit('getUsersFromList', response.data.ocs.data.users)) + .catch((error) => context.commit('API_FAILURE', error)) + }, + + getPasswordPolicyMinLength(context) { + if (getCapabilities().password_policy && getCapabilities().password_policy.minLength) { + context.commit('setPasswordPolicyMinLength', getCapabilities().password_policy.minLength) + return getCapabilities().password_policy.minLength + } + return false + }, + + /** + * Add group + * + * @param {object} context store context + * @param {string} gid Group id + * @return {Promise} + */ + addGroup(context, gid) { + return api.requireAdmin().then((response) => { + return api.post(generateOcsUrl('cloud/groups'), { groupid: gid }) + .then((response) => { + context.commit('addGroup', { id: gid, name: gid }) + return { gid, displayName: gid } + }) + .catch((error) => { throw error }) + }).catch((error) => { + context.commit('API_FAILURE', { gid, error }) + // let's throw one more time to prevent the view + // from adding the user to a group that doesn't exists + throw error + }) + }, + + /** + * Rename group + * + * @param {object} context store context + * @param {string} groupid Group id + * @param {string} displayName Group display name + * @return {Promise} + */ + renameGroup(context, { groupid, displayName }) { + return api.requireAdmin().then((response) => { + return api.put(generateOcsUrl('cloud/groups/{groupId}', { groupId: encodeURIComponent(groupid) }), { key: 'displayname', value: displayName }) + .then((response) => { + context.commit('renameGroup', { gid: groupid, displayName }) + return { groupid, displayName } + }) + .catch((error) => { throw error }) + }).catch((error) => { + context.commit('API_FAILURE', { groupid, error }) + // let's throw one more time to prevent the view + // from renaming the group + throw error + }) + }, + + /** + * Remove group + * + * @param {object} context store context + * @param {string} gid Group id + * @return {Promise} + */ + removeGroup(context, gid) { + return api.requireAdmin().then((response) => { + return api.delete(generateOcsUrl('cloud/groups/{groupId}', { groupId: encodeURIComponent(gid) })) + .then((response) => context.commit('removeGroup', gid)) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { gid, error })) + }, + + /** + * Add user to group + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {string} options.gid Group id + * @return {Promise} + */ + addUserGroup(context, { userid, gid }) { + return api.requireAdmin().then((response) => { + return api.post(generateOcsUrl('cloud/users/{userid}/groups', { userid }), { groupid: gid }) + .then((response) => context.commit('addUserGroup', { userid, gid })) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, + + /** + * Remove user from group + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {string} options.gid Group id + * @return {Promise} + */ + removeUserGroup(context, { userid, gid }) { + return api.requireAdmin().then((response) => { + return api.delete(generateOcsUrl('cloud/users/{userid}/groups', { userid }), { groupid: gid }) + .then((response) => context.commit('removeUserGroup', { userid, gid })) + .catch((error) => { throw error }) + }).catch((error) => { + context.commit('API_FAILURE', { userid, error }) + // let's throw one more time to prevent + // the view from removing the user row on failure + throw error + }) + }, + + /** + * Add user to group admin + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {string} options.gid Group id + * @return {Promise} + */ + addUserSubAdmin(context, { userid, gid }) { + return api.requireAdmin().then((response) => { + return api.post(generateOcsUrl('cloud/users/{userid}/subadmins', { userid }), { groupid: gid }) + .then((response) => context.commit('addUserSubAdmin', { userid, gid })) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, + + /** + * Remove user from group admin + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {string} options.gid Group id + * @return {Promise} + */ + removeUserSubAdmin(context, { userid, gid }) { + return api.requireAdmin().then((response) => { + return api.delete(generateOcsUrl('cloud/users/{userid}/subadmins', { userid }), { groupid: gid }) + .then((response) => context.commit('removeUserSubAdmin', { userid, gid })) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, + + /** + * Mark all user devices for remote wipe + * + * @param {object} context store context + * @param {string} userid User id + * @return {Promise} + */ + 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')) + } + }, + + /** + * Delete a user + * + * @param {object} context store context + * @param {string} userid User id + * @return {Promise} + */ + deleteUser(context, userid) { + return api.requireAdmin().then((response) => { + return api.delete(generateOcsUrl('cloud/users/{userid}', { userid })) + .then((response) => context.commit('deleteUser', userid)) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, + + /** + * Add a user + * + * @param {object} context store context + * @param {Function} context.commit - + * @param {Function} context.dispatch - + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {string} options.password User password + * @param {string} options.displayName User display name + * @param {string} options.email User email + * @param {string} options.groups User groups + * @param {string} options.subadmin User subadmin groups + * @param {string} options.quota User email + * @param {string} options.language User language + * @param {string} options.manager User manager + * @return {Promise} + */ + addUser({ commit, dispatch }, { userid, password, displayName, email, groups, subadmin, quota, language, manager }) { + return api.requireAdmin().then((response) => { + return api.post(generateOcsUrl('cloud/users'), { userid, password, displayName, email, groups, subadmin, quota, language, manager }) + .then((response) => dispatch('addUserData', userid || response.data.ocs.data.id)) + .catch((error) => { throw error }) + }).catch((error) => { + commit('API_FAILURE', { userid, error }) + throw error + }) + }, + + /** + * Get user data and commit addition + * + * @param {object} context store context + * @param {string} userid User id + * @return {Promise} + */ + addUserData(context, userid) { + return api.requireAdmin().then((response) => { + return api.get(generateOcsUrl('cloud/users/{userid}', { userid })) + .then((response) => context.commit('addUserData', response)) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, + + /** + * Enable or disable user + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {boolean} options.enabled User enablement status + * @return {Promise} + */ + enableDisableUser(context, { userid, enabled = true }) { + const userStatus = enabled ? 'enable' : 'disable' + return api.requireAdmin().then((response) => { + return api.put(generateOcsUrl('cloud/users/{userid}/{userStatus}', { userid, userStatus })) + .then((response) => context.commit('enableDisableUser', { userid, enabled })) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, + + /** + * Edit user data + * + * @param {object} context store context + * @param {object} options destructuring object + * @param {string} options.userid User id + * @param {string} options.key User field to edit + * @param {string} options.value Value of the change + * @return {Promise} + */ + async setUserData(context, { userid, key, value }) { + const allowedEmpty = ['email', 'displayname', 'manager'] + 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 + } + }, + + /** + * Send welcome mail + * + * @param {object} context store context + * @param {string} userid User id + * @return {Promise} + */ + sendWelcomeMail(context, userid) { + return api.requireAdmin().then((response) => { + return api.post(generateOcsUrl('cloud/users/{userid}/welcome', { userid })) + .then(response => true) + .catch((error) => { throw error }) + }).catch((error) => context.commit('API_FAILURE', { userid, error })) + }, +} + +export default { state, mutations, getters, actions } diff --git a/apps/settings/src/utils/appDiscoverParser.spec.ts b/apps/settings/src/utils/appDiscoverParser.spec.ts new file mode 100644 index 00000000000..2a631014679 --- /dev/null +++ b/apps/settings/src/utils/appDiscoverParser.spec.ts @@ -0,0 +1,79 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import type { IAppDiscoverElement } from '../constants/AppDiscoverTypes' + +import { describe, expect, it } from 'vitest' +import { filterElements, parseApiResponse } from './appDiscoverParser' + +describe('App Discover API parser', () => { + describe('filterElements', () => { + it('can filter expired elements', () => { + const result = filterElements({ id: 'test', type: 'post', expiryDate: 100 }) + expect(result).toBe(false) + }) + + it('can filter upcoming elements', () => { + const result = filterElements({ id: 'test', type: 'post', date: Date.now() + 10000 }) + expect(result).toBe(false) + }) + + it('ignores element without dates', () => { + const result = filterElements({ id: 'test', type: 'post' }) + expect(result).toBe(true) + }) + + it('allows not yet expired elements', () => { + const result = filterElements({ id: 'test', type: 'post', expiryDate: Date.now() + 10000 }) + expect(result).toBe(true) + }) + + it('allows yet included elements', () => { + const result = filterElements({ id: 'test', type: 'post', date: 100 }) + expect(result).toBe(true) + }) + + it('allows elements included and not expired', () => { + const result = filterElements({ id: 'test', type: 'post', date: 100, expiryDate: Date.now() + 10000 }) + expect(result).toBe(true) + }) + + it('can handle null values', () => { + const result = filterElements({ id: 'test', type: 'post', date: null, expiryDate: null } as unknown as IAppDiscoverElement) + expect(result).toBe(true) + }) + }) + + describe('parseApiResponse', () => { + it('can handle basic post', () => { + const result = parseApiResponse({ id: 'test', type: 'post' }) + expect(result).toEqual({ id: 'test', type: 'post' }) + }) + + it('can handle carousel', () => { + const result = parseApiResponse({ id: 'test', type: 'carousel' }) + expect(result).toEqual({ id: 'test', type: 'carousel' }) + }) + + it('can handle showcase', () => { + const result = parseApiResponse({ id: 'test', type: 'showcase' }) + expect(result).toEqual({ id: 'test', type: 'showcase' }) + }) + + it('throws on unknown type', () => { + expect(() => parseApiResponse({ id: 'test', type: 'foo-bar' })).toThrow() + }) + + it('parses the date', () => { + const result = parseApiResponse({ id: 'test', type: 'showcase', date: '2024-03-19T17:28:19+0000' }) + expect(result).toEqual({ id: 'test', type: 'showcase', date: 1710869299000 }) + }) + + it('parses the expiryDate', () => { + const result = parseApiResponse({ id: 'test', type: 'showcase', expiryDate: '2024-03-19T17:28:19Z' }) + expect(result).toEqual({ id: 'test', type: 'showcase', expiryDate: 1710869299000 }) + }) + }) +}) diff --git a/apps/settings/src/utils/appDiscoverParser.ts b/apps/settings/src/utils/appDiscoverParser.ts new file mode 100644 index 00000000000..1be44f01068 --- /dev/null +++ b/apps/settings/src/utils/appDiscoverParser.ts @@ -0,0 +1,48 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import type { IAppDiscoverCarousel, IAppDiscoverElement, IAppDiscoverElements, IAppDiscoverPost, IAppDiscoverShowcase } from '../constants/AppDiscoverTypes.ts' + +/** + * Helper to transform the JSON API results to proper frontend objects (app discover section elements) + * + * @param element The JSON API element to transform + */ +export const parseApiResponse = (element: Record<string, unknown>): IAppDiscoverElements => { + const appElement = { ...element } + if (appElement.date) { + appElement.date = Date.parse(appElement.date as string) + } + if (appElement.expiryDate) { + appElement.expiryDate = Date.parse(appElement.expiryDate as string) + } + + if (appElement.type === 'post') { + return appElement as unknown as IAppDiscoverPost + } else if (appElement.type === 'showcase') { + return appElement as unknown as IAppDiscoverShowcase + } else if (appElement.type === 'carousel') { + return appElement as unknown as IAppDiscoverCarousel + } + throw new Error(`Invalid argument, app discover element with type ${element.type ?? 'unknown'} is unknown`) +} + +/** + * Filter outdated or upcoming elements + * @param element Element to check + */ +export const filterElements = (element: IAppDiscoverElement) => { + const now = Date.now() + // Element not yet published + if (element.date && element.date > now) { + return false + } + + // Element expired + if (element.expiryDate && element.expiryDate < now) { + return false + } + return true +} diff --git a/apps/settings/src/utils/handlers.ts b/apps/settings/src/utils/handlers.ts new file mode 100644 index 00000000000..edd9a6c0cff --- /dev/null +++ b/apps/settings/src/utils/handlers.ts @@ -0,0 +1,33 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * 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 error the error + * @param message the message to display + */ +export function handleError(error: AxiosError, message: string) { + let fullMessage = '' + + if (message) { + fullMessage += message + } + + if (error.response?.status === 429) { + if (fullMessage) { + fullMessage += '\n' + } + 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, { 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 new file mode 100644 index 00000000000..7d9a516a542 --- /dev/null +++ b/apps/settings/src/utils/userUtils.ts @@ -0,0 +1,27 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { translate as t } from '@nextcloud/l10n' + +export const unlimitedQuota = { + id: 'none', + label: t('settings', 'Unlimited'), +} + +export const defaultQuota = { + id: 'default', + label: t('settings', 'Default quota'), +} + +/** + * Return `true` if the logged in user does not have permissions to view the + * data of `user` + * @param user The user to check + * @param user.id Id of the user + */ +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 new file mode 100644 index 00000000000..0f76f4e6dc5 --- /dev/null +++ b/apps/settings/src/utils/validate.js @@ -0,0 +1,80 @@ +/** + * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/* + * Frontend validators, less strict than backend validators + * + * TODO add nice validation errors for Profile page settings modal + */ + +import { VALIDATE_EMAIL_REGEX } from '../constants/AccountPropertyConstants.ts' + +/** + * Validate the email input + * + * Compliant with PHP core FILTER_VALIDATE_EMAIL validator* + * + * Reference implementation https://github.com/mpyw/FILTER_VALIDATE_EMAIL.js/blob/71e62ca48841d2246a1b531e7e84f5a01f15e615/src/index.ts* + * + * @param {string} input the input + * @return {boolean} + */ +export function validateEmail(input) { + return typeof input === 'string' + && VALIDATE_EMAIL_REGEX.test(input) + && input.slice(-1) !== '\n' + && input.length <= 320 + && encodeURIComponent(input).replace(/%../g, 'x').length <= 320 +} + +/** + * Validate the URL input + * + * @param {string} input the input + * @return {boolean} + */ +export function validateUrl(input) { + try { + // eslint-disable-next-line no-new + new URL(input) + return true + } catch (e) { + return false + } +} + +/** + * Validate the language input + * + * @param {object} input the input + * @return {boolean} + */ +export function validateLanguage(input) { + return input.code !== '' + && input.name !== '' + && input.name !== undefined +} + +/** + * Validate the locale input + * + * @param {object} input the input + * @return {boolean} + */ +export function validateLocale(input) { + return input.code !== '' + && input.name !== '' + && input.name !== undefined +} + +/** + * Validate boolean input + * + * @param {boolean} input the input + * @return {boolean} + */ +export function validateBoolean(input) { + return typeof input === 'boolean' +} diff --git a/apps/settings/src/views/AdminSettingsSharing.vue b/apps/settings/src/views/AdminSettingsSharing.vue new file mode 100644 index 00000000000..d26fba6c8fa --- /dev/null +++ b/apps/settings/src/views/AdminSettingsSharing.vue @@ -0,0 +1,44 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcSettingsSection data-cy-settings-sharing-section + :limit-width="true" + :doc-url="documentationLink" + :name="t('settings', 'Sharing')" + :description="t('settings', 'As admin you can fine-tune the sharing behavior. Please see the documentation for more information.')"> + <NcNoteCard v-if="!sharingAppEnabled" type="warning"> + {{ t('settings', 'You need to enable the File sharing App.') }} + </NcNoteCard> + <AdminSettingsSharingForm v-else /> + </NcSettingsSection> +</template> + +<script lang="ts"> +import { loadState } from '@nextcloud/initial-state' +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({ + name: 'AdminSettingsSharing', + components: { + AdminSettingsSharingForm, + NcNoteCard, + NcSettingsSection, + }, + data() { + return { + documentationLink: loadState<string>('settings', 'sharingDocumentation', ''), + sharingAppEnabled: loadState<boolean>('settings', 'sharingAppEnabled', false), + } + }, + methods: { + t, + }, +}) +</script> diff --git a/apps/settings/src/views/AppStore.vue b/apps/settings/src/views/AppStore.vue new file mode 100644 index 00000000000..82c8c31e75d --- /dev/null +++ b/apps/settings/src/views/AppStore.vue @@ -0,0 +1,88 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <!-- Apps list --> + <NcAppContent class="app-settings-content" + :page-heading="appStoreLabel"> + <h2 class="app-settings-content__label" v-text="viewLabel" /> + + <AppStoreDiscoverSection v-if="currentCategory === 'discover'" /> + <NcEmptyContent v-else-if="isLoading" + class="empty-content__loading" + :name="t('settings', 'Loading app list')"> + <template #icon> + <NcLoadingIcon :size="64" /> + </template> + </NcEmptyContent> + <AppList v-else :category="currentCategory" /> + </NcAppContent> +</template> + +<script setup lang="ts"> +import { translate as t } from '@nextcloud/l10n' +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/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` + */ +const currentCategory = computed(() => route.params?.category ?? 'discover') + +const appStoreLabel = t('settings', 'App Store') +const viewLabel = computed(() => APPS_SECTION_ENUM[currentCategory.value] ?? store.getCategoryById(currentCategory.value)?.displayName ?? appStoreLabel) + +watchEffect(() => { + window.document.title = `${viewLabel.value} - ${appStoreLabel} - Nextcloud` +}) + +// TODO this part should be migrated to pinia +const instance = getCurrentInstance() +/** Is the app list loading */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const isLoading = computed(() => (instance?.proxy as any).$store.getters.loading('list')) +onBeforeMount(() => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (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> + +<style scoped> +.empty-content__loading { + height: 100%; +} + +.app-settings-content__label { + margin-block-start: var(--app-navigation-padding); + margin-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2); + min-height: var(--default-clickable-area); + line-height: var(--default-clickable-area); + vertical-align: center; +} +</style> diff --git a/apps/settings/src/views/AppStoreNavigation.vue b/apps/settings/src/views/AppStoreNavigation.vue new file mode 100644 index 00000000000..83191baac40 --- /dev/null +++ b/apps/settings/src/views/AppStoreNavigation.vue @@ -0,0 +1,146 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <!-- Categories & filters --> + <NcAppNavigation :aria-label="t('settings', 'Apps')"> + <template #list> + <NcAppNavigationItem v-if="appstoreEnabled" + id="app-category-discover" + :to="{ name: 'apps-category', params: { category: 'discover'} }" + :name="APPS_SECTION_ENUM.discover"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.discover" /> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem id="app-category-installed" + :to="{ name: 'apps-category', params: { category: 'installed'} }" + :name="APPS_SECTION_ENUM.installed"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.installed" /> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem id="app-category-enabled" + :to="{ name: 'apps-category', params: { category: 'enabled' } }" + :name="APPS_SECTION_ENUM.enabled"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.enabled" /> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem id="app-category-disabled" + :to="{ name: 'apps-category', params: { category: 'disabled' } }" + :name="APPS_SECTION_ENUM.disabled"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.disabled" /> + </template> + </NcAppNavigationItem> + <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>{{ store.updateCount }}</NcCounterBubble> + </template> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.updates" /> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem id="app-category-your-bundles" + :to="{ name: 'apps-category', params: { category: 'app-bundles' } }" + :name="APPS_SECTION_ENUM['app-bundles']"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.bundles" /> + </template> + </NcAppNavigationItem> + + <NcAppNavigationSpacer /> + + <!-- App store categories --> + <li v-if="appstoreEnabled && categoriesLoading" class="categories--loading"> + <NcLoadingIcon :size="20" :aria-label="t('settings', 'Loading categories')" /> + </li> + <template v-else-if="appstoreEnabled && !categoriesLoading"> + <NcAppNavigationItem v-if="isSubscribed" + id="app-category-supported" + :to="{ name: 'apps-category', params: { category: 'supported' } }" + :name="APPS_SECTION_ENUM.supported"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.supported" /> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem id="app-category-featured" + :to="{ name: 'apps-category', params: { category: 'featured' } }" + :name="APPS_SECTION_ENUM.featured"> + <template #icon> + <NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.featured" /> + </template> + </NcAppNavigationItem> + + <NcAppNavigationItem v-for="category in categories" + :id="`app-category-${category.id}`" + :key="category.id" + :name="category.displayName" + :to="{ + name: 'apps-category', + params: { category: category.id }, + }"> + <template #icon> + <NcIconSvgWrapper :path="category.icon" /> + </template> + </NcAppNavigationItem> + </template> + + <NcAppNavigationItem id="app-developer-docs" + :name="t('settings', 'Developer documentation ↗')" + :href="developerDocsUrl" /> + </template> + </NcAppNavigation> +</template> + +<script setup lang="ts"> +import { loadState } from '@nextcloud/initial-state' +import { translate as t } from '@nextcloud/l10n' +import { computed, onBeforeMount } from 'vue' +import { APPS_SECTION_ENUM } from '../constants/AppsConstants' +import { useAppsStore } from '../store/apps-store' + +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 appstoreEnabled = loadState<boolean>('settings', 'appstoreEnabled', true) +const developerDocsUrl = loadState<string>('settings', 'appstoreDeveloperDocs', '') + +const store = useAppsStore() +const categories = computed(() => store.categories) +const categoriesLoading = computed(() => store.loading.categories) + +/** + * Check if the current instance has a support subscription from the Nextcloud GmbH + * + * For customers of the Nextcloud GmbH the app level will be set to `300` for apps that are supported in their subscription + */ +const isSubscribed = computed(() => store.apps.find(({ level }) => level === 300) !== undefined) + +// load categories when component is mounted +onBeforeMount(() => { + store.loadCategories() + store.loadApps() +}) +</script> + +<style scoped> +/* The categories-loading indicator */ +.categories--loading { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} +</style> diff --git a/apps/settings/src/views/AppStoreSidebar.vue b/apps/settings/src/views/AppStoreSidebar.vue new file mode 100644 index 00000000000..b4041066c67 --- /dev/null +++ b/apps/settings/src/views/AppStoreSidebar.vue @@ -0,0 +1,159 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <!-- Selected app details --> + <NcAppSidebar v-if="showSidebar" + class="app-sidebar" + :class="{ 'app-sidebar--with-screenshot': hasScreenshot }" + :active.sync="activeTab" + :background="hasScreenshot ? app.screenshot : undefined" + :compact="!hasScreenshot" + :name="app.name" + :title="app.name" + :subname="licenseText" + :subtitle="licenseText" + @close="hideAppDetails"> + <!-- Fallback icon incase no app icon is available --> + <template v-if="!hasScreenshot" #header> + <NcIconSvgWrapper class="app-sidebar__fallback-icon" + :svg="appIcon ?? ''" + :size="64" /> + </template> + + <template #description> + <!-- 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> + + <!-- Tab content --> + <AppDescriptionTab :app="app" /> + <AppDetailsTab :app="app" /> + <AppReleasesTab :app="app" /> + <AppDeployDaemonTab :app="app" /> + </NcAppSidebar> +</template> + +<script setup lang="ts"> +import { translate as t } from '@nextcloud/l10n' +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/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(() => { + 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 + : (app.value.appstoreData?.ratingOverall ?? 0.5)) +const showSidebar = computed(() => app.value !== null) + +const { appIcon } = useAppIcon(app) + +/** + * The second text line shown on the sidebar + */ +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' }) + +/** + * Hide the details sidebar by pushing a new route + */ +const hideAppDetails = () => { + router.push({ + name: 'apps-category', + params: { category: route.params.category }, + }) +} + +/** + * Whether the app screenshot is loaded + */ +const screenshotLoaded = ref(false) +const hasScreenshot = computed(() => app.value?.screenshot && screenshotLoaded.value) +/** + * Preload the app screenshot + */ +const loadScreenshot = () => { + if (app.value?.releases && app.value?.screenshot) { + const image = new Image() + image.onload = () => { + screenshotLoaded.value = true + } + image.src = app.value.screenshot + } +} +// Watch app and set screenshot loaded when +watch([app], loadScreenshot) +onMounted(loadScreenshot) +</script> + +<style scoped lang="scss"> +.app-sidebar { + // If a screenshot is available it should cover the whole figure + &--with-screenshot { + :deep(.app-sidebar-header__figure) { + background-size: cover; + } + } + + &__fallback-icon { + // both 100% to center the icon + width: 100%; + height: 100%; + } + + &__badges { + display: flex; + flex-direction: row; + gap: 12px; + } + + &__version { + color: var(--color-text-maxcontrast); + } +} +</style> diff --git a/apps/settings/src/views/SettingsApp.vue b/apps/settings/src/views/SettingsApp.vue new file mode 100644 index 00000000000..7e135175ef6 --- /dev/null +++ b/apps/settings/src/views/SettingsApp.vue @@ -0,0 +1,16 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcContent app-name="settings"> + <router-view name="navigation" /> + <router-view /> + <router-view name="sidebar" /> + </NcContent> +</template> + +<script setup lang="ts"> +import NcContent from '@nextcloud/vue/components/NcContent' +</script> diff --git a/apps/settings/src/views/UserManagement.vue b/apps/settings/src/views/UserManagement.vue new file mode 100644 index 00000000000..9ab76f921a0 --- /dev/null +++ b/apps/settings/src/views/UserManagement.vue @@ -0,0 +1,104 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> + +<template> + <NcAppContent :page-heading="pageHeading"> + <UserList :selected-group="selectedGroupDecoded" + :external-actions="externalActions" /> + </NcAppContent> +</template> + +<script> +import { translate as t } from '@nextcloud/l10n' +import { emit } from '@nextcloud/event-bus' +import { defineComponent } from 'vue' + +import NcAppContent from '@nextcloud/vue/components/NcAppContent' +import UserList from '../components/UserList.vue' + +export default defineComponent({ + name: 'UserManagement', + + components: { + NcAppContent, + UserList, + }, + + data() { + return { + // temporary value used for multiselect change + externalActions: [], + } + }, + + computed: { + pageHeading() { + if (this.selectedGroupDecoded === null) { + return t('settings', 'All accounts') + } + const matchHeading = { + admin: t('settings', 'Admins'), + disabled: t('settings', 'Disabled accounts'), + } + return matchHeading[this.selectedGroupDecoded] ?? t('settings', 'Account group: {group}', { group: this.selectedGroupDecoded }) + }, + + selectedGroup() { + return this.$route.params.selectedGroup + }, + + selectedGroupDecoded() { + return this.selectedGroup ? decodeURIComponent(this.selectedGroup) : null + }, + }, + + beforeMount() { + this.$store.dispatch('getPasswordPolicyMinLength') + }, + + created() { + // init the OCA.Settings.UserList object + window.OCA = window.OCA ?? {} + window.OCA.Settings = window.OCA.Settings ?? {} + 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: { + t, + + /** + * Register a new action for the user menu + * + * @param {string} icon the icon class + * @param {string} text the text to display + * @param {Function} action the function to run + * @param {(user: Record<string, unknown>) => boolean} enabled return true if the action is enabled for the user + * @return {Array} + */ + registerAction(icon, text, action, enabled) { + this.externalActions.push({ + icon, + text, + action, + enabled, + }) + return this.externalActions + }, + }, +}) +</script> + +<style lang="scss" scoped> +.app-content { + // Virtual list needs to be full height and is scrollable + display: flex; + overflow: hidden; + flex-direction: column; + max-height: 100%; +} +</style> diff --git a/apps/settings/src/views/UserManagementNavigation.vue b/apps/settings/src/views/UserManagementNavigation.vue new file mode 100644 index 00000000000..95a12ac7c51 --- /dev/null +++ b/apps/settings/src/views/UserManagementNavigation.vue @@ -0,0 +1,172 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <NcAppNavigation class="account-management__navigation" + :aria-label="t('settings', 'Account management')"> + <NcAppNavigationNew button-id="new-user-button" + :text="t('settings','New account')" + @click="showNewUserMenu" + @keyup.enter="showNewUserMenu" + @keyup.space="showNewUserMenu"> + <template #icon> + <NcIconSvgWrapper :path="mdiPlus" /> + </template> + </NcAppNavigationNew> + + <NcAppNavigationList class="account-management__system-list" + data-cy-users-settings-navigation-groups="system"> + <NcAppNavigationItem id="everyone" + :exact="true" + :name="t('settings', 'All accounts')" + :to="{ name: 'users' }"> + <template #icon> + <NcIconSvgWrapper :path="mdiAccountOutline" /> + </template> + <template #counter> + <NcCounterBubble v-if="userCount" :type="!selectedGroupDecoded ? 'highlighted' : undefined"> + {{ userCount }} + </NcCounterBubble> + </template> + </NcAppNavigationItem> + + <NcAppNavigationItem v-if="settings.isAdmin" + id="admin" + :exact="true" + :name="t('settings', 'Admins')" + :to="{ name: 'group', params: { selectedGroup: 'admin' } }"> + <template #icon> + <NcIconSvgWrapper :path="mdiShieldAccountOutline" /> + </template> + <template #counter> + <NcCounterBubble v-if="adminGroup && adminGroup.count > 0" + :type="selectedGroupDecoded === 'admin' ? 'highlighted' : undefined"> + {{ adminGroup.count }} + </NcCounterBubble> + </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" + :exact="true" + :name="t('settings', 'Disabled accounts')" + :to="{ name: 'group', params: { selectedGroup: 'disabled' } }"> + <template #icon> + <NcIconSvgWrapper :path="mdiAccountOffOutline" /> + </template> + <template v-if="disabledGroup.usercount > 0" #counter> + <NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined"> + {{ disabledGroup.usercount }} + </NcCounterBubble> + </template> + </NcAppNavigationItem> + </NcAppNavigationList> + + <AppNavigationGroupList /> + + <template #footer> + <NcButton class="account-management__settings-toggle" + type="tertiary" + @click="isDialogOpen = true"> + <template #icon> + <NcIconSvgWrapper :path="mdiCogOutline" /> + </template> + {{ t('settings', 'Account management settings') }} + </NcButton> + <UserSettingsDialog :open.sync="isDialogOpen" /> + </template> + </NcAppNavigation> +</template> + +<script setup lang="ts"> +import { mdiAccountOutline, mdiAccountOffOutline, mdiCogOutline, mdiPlus, mdiShieldAccountOutline, mdiHistory } from '@mdi/js' +import { translate as t } from '@nextcloud/l10n' +import { computed, ref } from '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 } from 'vue-router/composables' +import { useFormatGroups } from '../composables/useGroupsNavigation' + +const route = useRoute() +const store = useStore() + +/** State of the 'new-account' dialog */ +const isDialogOpen = ref(false) + +/** 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) + +/** Overall user count */ +const userCount = computed(() => store.getters.getUserCount) +/** All available groups */ +const groups = computed(() => store.getters.getSortedGroups) +const { adminGroup, recentGroup, disabledGroup } = 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) + +/** + * Open the new-user form dialog + */ +function showNewUserMenu() { + store.commit('setShowConfig', { + key: 'showNewUserForm', + value: true, + }) +} +</script> + +<style scoped lang="scss"> +.account-management { + &__navigation { + :deep(.app-navigation__body) { + will-change: scroll-position; + } + } + &__system-list { + height: auto !important; + overflow: visible !important; + } + + &__group-list { + height: 100% !important; + } + + &__settings-toggle { + margin-bottom: 12px; + } +} +</style> diff --git a/apps/settings/src/views/user-types.d.ts b/apps/settings/src/views/user-types.d.ts new file mode 100644 index 00000000000..21c63a13b03 --- /dev/null +++ b/apps/settings/src/views/user-types.d.ts @@ -0,0 +1,35 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +export interface IGroup { + /** + * Id + */ + id: string + + /** + * Display name + */ + name: string + + /** + * Overall user count + */ + usercount: number + + /** + * 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 new file mode 100644 index 00000000000..3d330bb3128 --- /dev/null +++ b/apps/settings/src/webpack.shim.d.ts @@ -0,0 +1,5 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +declare let __webpack_nonce__: string | undefined |