Updated validation to correctly handle IDN domains and allow valid addresses

src/components/EmailSection/EmailSection.vue

@@ -1,195 +1,202 @@
-<template>
-	<section>
-		<div class="headerbar-label">
-			<label :for="inputId" class="primary-email-label">{{ primaryEmail.readable }}</label>
-		</div>
-		<EmailPrimary :primary="true"
-			:scope.sync="primaryEmail.scope"
-			:email.sync="primaryEmail.value"
-			:active-notification-email.sync="notificationEmail"
-			@update:email="onUpdateEmail"
-			@update:notification-email="onUpdateNotificationEmail" />
-
-		<template v-if="additionalEmails.length">
-			<em class="additional-emails-label">{{ t('nmcsettings', '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="additionalEmail.key"
-				: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>
-
-		<NcButton type="tertiary"
-			:disabled="!isValidSection"
-			:aria-label="t('nmcsettings', 'Add additional email')"
-			@click.stop.prevent="onAddAdditionalEmail">
-			<template #icon>
-				<Plus :size="24" />
-			</template>
-			{{ t('nmcsettings', 'Add additional email') }}
-		</NcButton>
-	</section>
-</template>
-
-<script>
-import { loadState } from '@nextcloud/initial-state'
-
-import Email from './Email.vue'
-import EmailPrimary from './EmailPrimary.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Plus from 'vue-material-design-icons/Plus.vue'
-
-import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE, NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
-import { savePrimaryEmail, removeAdditionalEmail } from '../../service/PersonalInfo/EmailService.js'
-import { validateEmail } from '../../utils/validate.js'
-import { handleError } from '../../utils/handlers.js'
-
-const { emailMap: { additionalEmails, primaryEmail, notificationEmail } } = loadState('settings', 'personalInfoParameters', {})
-const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
-
-export default {
-	name: 'EmailSection',
-
-	components: {
-		Email,
-		EmailPrimary,
-		NcButton,
-		Plus,
-	},
-
-	data() {
-		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL,
-			additionalEmails: additionalEmails.map(properties => ({ ...properties, key: this.generateUniqueKey() })),
-			displayNameChangeSupported,
-			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: {
-		onAddAdditional() {
-			this.$emit('add-additional')
-		},
-
-		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('nmcsettings', '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('nmcsettings', 'Unable to delete additional email address'),
-					e,
-				)
-			}
-		},
-
-		handleDeleteFirstAdditionalEmail(status) {
-			if (status === 'ok') {
-				this.$delete(this.additionalEmails, 0)
-			} else {
-				this.handleResponse(
-					'error',
-					t('nmcsettings', '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 {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-
-	.additional-emails-label {
-		display: block;
-		margin-top: 16px;
-	}
-}
-</style>
+<template>
+	<section>
+		<div class="headerbar-label">
+			<label :for="inputId" class="primary-email-label">{{ primaryEmail.readable }}</label>
+		</div>
+		<EmailPrimary :primary="true"
+			:scope.sync="primaryEmail.scope"
+			:email.sync="primaryEmail.value"
+			:active-notification-email.sync="notificationEmail"
+			@update:email="onUpdateEmail"
+			@update:notification-email="onUpdateNotificationEmail" />
+
+		<template v-if="additionalEmails.length">
+			<em class="additional-emails-label">{{ t('nmcsettings', '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="additionalEmail.key"
+				: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>
+
+		<NcButton type="tertiary"
+			:disabled="!isValidSection"
+			:aria-label="t('nmcsettings', 'Add additional email')"
+			@click.stop.prevent="onAddAdditionalEmail">
+			<template #icon>
+				<Plus :size="24" />
+			</template>
+			{{ t('nmcsettings', 'Add additional email') }}
+		</NcButton>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import { convertEmailDomainToUnicode } from '../../utils/email.js'
+
+import Email from './Email.vue'
+import EmailPrimary from './EmailPrimary.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE, NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+import { savePrimaryEmail, removeAdditionalEmail } from '../../service/PersonalInfo/EmailService.js'
+import { validateEmail } from '../../utils/validate.js'
+import { handleError } from '../../utils/handlers.js'
+
+const { emailMap: { additionalEmails, primaryEmail, notificationEmail } } = loadState('settings', 'personalInfoParameters', {})
+const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
+
+export default {
+	name: 'EmailSection',
+
+	components: {
+		Email,
+		EmailPrimary,
+		NcButton,
+		Plus,
+	},
+
+	data() {
+		return {
+			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL,
+			additionalEmails: additionalEmails.map(properties => ({
+				...properties,
+				key: this.generateUniqueKey(),
+				value: convertEmailDomainToUnicode(properties.value),
+			})),
+			displayNameChangeSupported,
+			primaryEmail: { ...primaryEmail, readable: NAME_READABLE_ENUM[primaryEmail.name], value: convertEmailDomainToUnicode(primaryEmail.value) },
+			notificationEmail: convertEmailDomainToUnicode(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: {
+		onAddAdditional() {
+			this.$emit('add-additional')
+		},
+
+		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('nmcsettings', '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('nmcsettings', 'Unable to delete additional email address'),
+					e,
+				)
+			}
+		},
+
+		handleDeleteFirstAdditionalEmail(status) {
+			if (status === 'ok') {
+				this.$delete(this.additionalEmails, 0)
+			} else {
+				this.handleResponse(
+					'error',
+					t('nmcsettings', '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 {
+	padding: 10px 10px;
+
+	&::v-deep button:disabled {
+		cursor: default;
+	}
+
+	.additional-emails-label {
+		display: block;
+		margin-top: 16px;
+	}
+}
+</style>