feat: validate contact email

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

Author: timedin-de

package-lock.json

@@ -69,6 +69,7 @@
     "pinia": "^2.3.1",
     "string-natural-compare": "^3.0.1",
     "uuid": "^11.1.0",
+    "validator": "^13.12.0",
     "vue": "~2.7.16",
     "vue-click-outside": "^1.1.0",
     "vue-cropperjs": "^4.2.0",

package.json

@@ -57,6 +57,22 @@
 					@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="!!helperText && !isReadonly"
+					:helper-text="!helperText || isReadonly ? '' : helperText"
+					label-outside
+					:placeholder="placeholder"
+					:value.sync="localValue"
+					type="email"
+					@update:value="updateEmailValue" />
+
 				<!-- OR default to input -->
 				<NcTextField v-else
 					:value.sync="localValue"
@@ -90,10 +106,11 @@
 <script>
 import { NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import debounce from 'debounce'
+import isEmail from 'validator/lib/isEmail'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
-import PropertyTitle from './PropertyTitle.vue'
 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 +139,13 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			helperText: null,
+			valueValid: false,
+		}
+	},
+
 	computed: {
 		showProperty() {
 			return (this.isReadOnly && this.localValue) || !this.isReadOnly
@@ -176,11 +200,34 @@ export default {
 		},
 	},
 
+	watch: {
+		isReadOnly(newValue) {
+			if (newValue && this.propName === 'email') {
+				// If value invalid restore saved valid value
+				if (!this.valueValid) {
+					this.localValue = this.value
+					this.helperText = null
+				}
+			}
+		},
+	},
+
 	mounted() {
 		this.resizeHeight()
 	},
 
 	methods: {
+		updateEmailValue() {
+			// If email valid or empty
+			this.valueValid = this.localValue === '' || isEmail(this.localValue)
+			if (this.valueValid) {
+				this.helperText = null
+				this.updateValue(this.localValue)
+				return
+			}
+			this.helperText = this.$refs.email.$refs.inputField.$refs.input.validationMessage || null
+		},
+
 		/**
 		 * Watch textarea resize and update the gridSize accordingly
 		 */

src/components/Properties/PropertyText.vue

@@ -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