adding error on invalid email-address for contact-editor

Signed-off-by: TimedIn <[email protected]>

Author: timedin-de

src/components/Properties/PropertyText.vue

@@ -57,6 +57,23 @@
 					@mousemove="resizeHeight"
 					@keypress="resizeHeight" />
 
+				<!-- email with validation-->
+				<NcTextField v-else-if="propName === 'email'"
+					ref="email"
+					:class="{'property__value--with-ext': haveExtHandler}"
+					autocapitalize="none"
+					autocomplete="email"
+					:inputmode="inputmode"
+					:readonly="isReadOnly"
+					:error="(hasError || !!helperText) && !isReadonly"
+					:helper-text="helperTextWithNonConfirmed"
+					label-outside
+					:placeholder="placeholder"
+					:value.sync="localValue"
+					:success="isSuccess"
+					type="email"
+					@update:value="updateEmailValue" />
+
 				<!-- OR default to input -->
 				<NcTextField v-else
 					:value.sync="localValue"
@@ -90,10 +107,11 @@
 <script>
 import { NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import debounce from 'debounce'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
-import PropertyTitle from './PropertyTitle.vue'
+import { validateEmail } from '../../utils/validate.js'
 import PropertyActions from './PropertyActions.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
+import PropertyTitle from './PropertyTitle.vue'
 
 export default {
 	name: 'PropertyText',
@@ -122,6 +140,14 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			hasError: false,
+			helperText: null,
+			isSuccess: false,
+		}
+	},
+
 	computed: {
 		showProperty() {
 			return (this.isReadOnly && this.localValue) || !this.isReadOnly
@@ -162,6 +188,13 @@ export default {
 			return this.externalHandler.trim() !== '' && this.localValue && this.localValue.length > 0
 		},
 
+		helperTextWithNonConfirmed() {
+			if (this.helperText || this.hasError || this.isSuccess) {
+				return this.helperText || ''
+			}
+			return this.isNotConfirmedHelperText
+		},
+
 		/**
 		 * Return the selected type placeholder if any
 		 * or the propModel default placeholder
@@ -181,6 +214,19 @@ export default {
 	},
 
 	methods: {
+		updateEmailValue(e) {
+			// 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
+			}
+			value = e.trim()
+
+			if (validateEmail(value) || value === '') {
+				this.updateValue(value)
+			}
+		},
+
 		/**
 		 * Watch textarea resize and update the gridSize accordingly
 		 */

src/constants/AccountPropertyConstants.ts

@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * 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

src/css/Properties/Properties.scss

@@ -25,7 +25,7 @@ $property-row-gap: $contact-details-row-gap;
 	&__row {
 		margin-top: var(--default-grid-baseline);
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		gap: $property-row-gap;
 
 		// fix default margin from server stylesheet causing slight misalignment

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'
+}