Display invalid input message

Signed-off-by: Christopher Ng <chrng8@gmail.com>

2 files changed, 68 insertions, 4 deletions

diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 0046492de07..c6c4376fa10 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -28,6 +28,7 @@
 				type="email"
 				:placeholder="inputPlaceholder"
 				:value="email"
+				:aria-describedby="helperText ? `${inputId}-helper-text` : ''"
 				autocapitalize="none"
 				autocomplete="on"
 				autocorrect="off"
@@ -71,6 +72,13 @@
 			</div>
 		</div>
 
+		<p v-if="helperText"
+			:id="`${inputId}-helper-text`"
+			class="email__helper-text-message email__helper-text-message--error">
+			<AlertCircle class="email__helper-text-message__icon" :size="18" />
+			{{ helperText }}
+		</p>
+
 		<em v-if="isNotificationEmail">
 			{{ t('settings', 'Primary email for password reset and notifications') }}
 		</em>
@@ -78,9 +86,9 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import AlertOctagon from 'vue-material-design-icons/AlertOctagon'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
+import AlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
 import Check from 'vue-material-design-icons/Check'
 import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
@@ -105,6 +113,7 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
+		AlertCircle,
 		AlertOctagon,
 		Check,
 		FederationControl,
@@ -143,6 +152,7 @@ export default {
 			initialEmail: this.email,
 			localScope: this.scope,
 			saveAdditionalEmailScope,
+			helperText: null,
 			showCheckmarkIcon: false,
 			showErrorIcon: false,
 		}
@@ -218,6 +228,11 @@ export default {
 		},
 
 		debounceEmailChange: debounce(async function(email) {
+			this.helperText = null
+			if (this.$refs.email?.validationMessage) {
+				this.helperText = this.$refs.email.validationMessage
+				return
+			}
 			if (validateEmail(email) || email === '') {
 				if (this.primary) {
 					await this.updatePrimaryEmail(email)
@@ -393,6 +408,22 @@ export default {
 			}
 		}
 	}
+
+	&__helper-text-message {
+		padding: 4px 0;
+		display: flex;
+		align-items: center;
+
+		&__icon {
+			margin-right: 8px;
+			align-self: start;
+			margin-top: 4px;
+		}
+
+		&--error {
+			color: var(--color-error);
+		}
+	}
 }
 
 .fade-enter,
diff --git a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
index d855832746a..c80d1a36658 100644
--- a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
@@ -38,10 +38,12 @@
 				autocorrect="off"
 				@input="onPropertyChange" />
 			<input v-else
+				ref="input"
 				:id="inputId"
 				:placeholder="placeholder"
 				:type="type"
 				:value="value"
+				:aria-describedby="helperText ? `${name}-helper-text` : ''"
 				autocapitalize="none"
 				autocomplete="on"
 				autocorrect="off"
@@ -57,6 +59,13 @@
 		<span v-else>
 			{{ value || t('settings', 'No {property} set', { property: readable.toLocaleLowerCase() }) }}
 		</span>
+
+		<p v-if="helperText"
+			:id="`${name}-helper-text`"
+			class="property__helper-text-message property__helper-text-message--error">
+			<AlertCircle class="property__helper-text-message__icon" :size="18" />
+			{{ helperText }}
+		</p>
 	</section>
 </template>
 
@@ -64,8 +73,9 @@
 import debounce from 'debounce'
 import { showError } from '@nextcloud/dialogs'
 
-import Check from 'vue-material-design-icons/Check'
+import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import AlertOctagon from 'vue-material-design-icons/AlertOctagon'
+import Check from 'vue-material-design-icons/Check'
 
 import HeaderBar from '../shared/HeaderBar.vue'
 
@@ -76,6 +86,7 @@ export default {
 	name: 'AccountPropertySection',
 
 	components: {
+		AlertCircle,
 		AlertOctagon,
 		Check,
 		HeaderBar,
@@ -127,6 +138,7 @@ export default {
 	data() {
 		return {
 			initialValue: this.value,
+			helperText: null,
 			showCheckmarkIcon: false,
 			showErrorIcon: false,
 		}
@@ -145,6 +157,11 @@ export default {
 		},
 
 		debouncePropertyChange: debounce(async function(value) {
+			this.helperText = null
+			if (this.$refs.input && this.$refs.input.validationMessage) {
+				this.helperText = this.$refs.input.validationMessage
+				return
+			}
 			if (this.onValidate && !this.onValidate(value)) {
 				return
 			}
@@ -225,6 +242,22 @@ section {
 		}
 	}
 
+	.property__helper-text-message {
+		padding: 4px 0;
+		display: flex;
+		align-items: center;
+
+		&__icon {
+			margin-right: 8px;
+			align-self: start;
+			margin-top: 4px;
+		}
+
+		&--error {
+			color: var(--color-error);
+		}
+	}
+
 	.fade-enter,
 	.fade-leave-to {
 		opacity: 0;