Signed-off-by: Christopher Ng <chrng8@gmail.com>tags/v26.0.0beta1
@@ -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, |
@@ -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; |