Show error messages contextually when creating a group

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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>