diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue | 89 |
1 files changed, 37 insertions, 52 deletions
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue index 07ec35861a9..f9674a3163b 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue @@ -1,38 +1,21 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <section> - <HeaderBar :account-property="accountProperty" - label-for="email" - :handle-scope-change="savePrimaryEmailScope" + <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="displayNameChangeSupported"> - <Email :primary="true" + <template v-if="emailChangeSupported"> + <Email :input-id="inputId" + :primary="true" :scope.sync="primaryEmail.scope" :email.sync="primaryEmail.value" :active-notification-email.sync="notificationEmail" @@ -45,9 +28,10 @@ </span> <template v-if="additionalEmails.length"> - <em class="additional-emails-label">{{ t('settings', 'Additional emails') }}</em> + <!-- 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="index" + :key="additionalEmail.key" + class="section-emails__additional-email" :index="index" :scope.sync="additionalEmail.scope" :email.sync="additionalEmail.value" @@ -62,17 +46,17 @@ <script> import { loadState } from '@nextcloud/initial-state' -import { showError } from '@nextcloud/dialogs' -import Email from './Email' -import HeaderBar from '../shared/HeaderBar' +import Email from './Email.vue' +import HeaderBar from '../shared/HeaderBar.vue' -import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE } from '../../../constants/AccountPropertyConstants' -import { savePrimaryEmail, savePrimaryEmailScope, removeAdditionalEmail } from '../../../service/PersonalInfo/EmailService' -import { validateEmail } from '../../../utils/validate' +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 { displayNameChangeSupported } = loadState('settings', 'accountParameters', {}) +const { emailChangeSupported } = loadState('settings', 'accountParameters', {}) export default { name: 'EmailSection', @@ -85,10 +69,9 @@ export default { data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL, - additionalEmails, - displayNameChangeSupported, - primaryEmail, - savePrimaryEmailScope, + additionalEmails: additionalEmails.map(properties => ({ ...properties, key: this.generateUniqueKey() })), + emailChangeSupported, + primaryEmail: { ...primaryEmail, readable: NAME_READABLE_ENUM[primaryEmail.name] }, notificationEmail, } }, @@ -101,6 +84,10 @@ export default { return null }, + inputId() { + return `account-property-${this.primaryEmail.name}` + }, + isValidSection() { return validateEmail(this.primaryEmail.value) && this.additionalEmails.map(({ value }) => value).every(validateEmail) @@ -119,7 +106,7 @@ export default { methods: { onAddAdditionalEmail() { if (this.isValidSection) { - this.additionalEmails.push({ value: '', scope: DEFAULT_ADDITIONAL_EMAIL_SCOPE }) + this.additionalEmails.push({ value: '', scope: DEFAULT_ADDITIONAL_EMAIL_SCOPE, key: this.generateUniqueKey() }) } }, @@ -148,7 +135,7 @@ export default { this.handleResponse( 'error', t('settings', 'Unable to update primary email address'), - e + e, ) } }, @@ -161,7 +148,7 @@ export default { this.handleResponse( 'error', t('settings', 'Unable to delete additional email address'), - e + e, ) } }, @@ -173,32 +160,30 @@ export default { this.handleResponse( 'error', t('settings', 'Unable to delete additional email address'), - {} + {}, ) } }, handleResponse(status, errorMessage, error) { if (status !== 'ok') { - showError(errorMessage) - this.logger.error(errorMessage, error) + handleError(error, errorMessage) } }, + + generateUniqueKey() { + return Math.random().toString(36).substring(2) + }, }, } </script> <style lang="scss" scoped> -section { +.section-emails { padding: 10px 10px; - &::v-deep button:disabled { - cursor: default; - } - - .additional-emails-label { - display: block; - margin-top: 16px; + &__additional-email { + margin-top: calc(var(--default-grid-baseline) * 3); } } </style> |