diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue')
-rw-r--r-- | apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue | 35 |
1 files changed, 34 insertions, 1 deletions
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; |