Show error messages contextually when creating a group

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
chapril
Thomas Citharel 9 months ago
parent befc9aa86e
commit e528984a3a
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
  1. 35
      js/src/views/Group/Create.vue

@ -22,11 +22,8 @@
}}</label>
<div class="field-body">
<b-field
:message="
$t(
'Only alphanumeric lowercased characters and underscores are supported.'
)
"
:message="preferredUsernameErrors[0]"
:type="preferredUsernameErrors[1]"
>
<b-input
ref="preferredUsernameInput"
@ -63,8 +60,8 @@
<b-field
:label="$t('Description')"
label-for="group-summary"
:message="fieldErrors.summary"
:type="fieldErrors.summary ? 'is-danger' : undefined"
:message="summaryErrors[0]"
:type="summaryErrors[1]"
>
<b-input v-model="group.summary" type="textarea" id="group-summary" />
</b-field>
@ -140,13 +137,17 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
errors: string[] = [];
fieldErrors: Record<string, string> = {};
fieldErrors: Record<string, string | undefined> = {
preferred_username: undefined,
summary: undefined,
};
usernameWithDomain = usernameWithDomain;
async createGroup(): Promise<void> {
try {
this.errors = [];
this.fieldErrors = { preferred_username: undefined, summary: undefined };
await this.$apollo.mutate({
mutation: CREATE_GROUP,
variables: this.buildVariables(),
@ -263,6 +264,24 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
}
});
}
get summaryErrors() {
const message = this.fieldErrors.summary
? this.fieldErrors.summary
: undefined;
const type = this.fieldErrors.summary ? "is-danger" : undefined;
return [message, type];
}
get preferredUsernameErrors() {
const message = this.fieldErrors.preferred_username
? this.fieldErrors.preferred_username
: this.$t(
"Only alphanumeric lowercased characters and underscores are supported."
);
const type = this.fieldErrors.preferred_username ? "is-danger" : undefined;
return [message, type];
}
}
</script>

Loading…
Cancel
Save