For modals, response error messages is shown in the footer. For modals, Accept button is always on the right.

src/app/groups/group-item-edit/group-item-edit.component.html

@@ -39,15 +39,21 @@
     </mat-form-field>
   </mat-card-content>
   <mat-card-actions align="end">
-    <button mat-button
-            [disabled]="waitForResponse || formGroup.invalid"
-            (click)="add()">
-      <mat-icon>add</mat-icon>Add
-    </button>
     <button mat-button
             [disabled]="waitForResponse"
             (click)="cancel()">
       <mat-icon>cancel</mat-icon>Cancel
     </button>
+    <button mat-button
+            [disabled]="waitForResponse || formGroup.invalid"
+            (click)="add()">
+      <mat-icon>add</mat-icon>Add
+    </button>
   </mat-card-actions>
+
+  @if (responseError) {
+  <mat-card-footer>
+    <small class="error below">{{responseError}}</small>
+  </mat-card-footer>
+  }
 </mat-card>

src/app/groups/group-item-edit/group-item-edit.component.scss

@@ -5,4 +5,17 @@
 
 .mat-mdc-card-actions {
   align-self: center;
+}
+
+.error {
+  display: block;
+  color: #ba1a1a;
+}
+
+.below {
+  display: block;
+  justify-self: center;
+  align-items: center;
+  align-self: center;
+  text-align: center;
 }

src/app/groups/group-item-edit/group-item-edit.component.ts

@@ -30,6 +30,7 @@ export class GroupItemEditComponent implements OnInit {
 
   group: Group = { id: '', user_id: '', name: '', priority: 0 };
   isSpecial: boolean = false;
+  responseError: string | undefined;
   waitForResponse: boolean = false;
 
   nameForm = new FormControl('', [Validators.required]);
@@ -53,16 +54,17 @@ export class GroupItemEditComponent implements OnInit {
       return;
 
     this.waitForResponse = true;
+    this.responseError = undefined;
     this._client.first((d: any) => d.op == 4 && d.d.request.type == 'create_group' && d.d.data.name == this.nameForm.value)
       .subscribe({
         next: (d) => {
           if (d.d.error) {
-            // TODO: update & show response error message.
+            this.responseError = d.d.error;
           } else {
             this._dialogRef.close(d.d.data);
           }
         },
-        error: () => this.waitForResponse = false,
+        error: () => this.responseError = 'Something went wrong.',
         complete: () => this.waitForResponse = false,
       });
     this._client.createGroup(this.nameForm.value!, this.priorityForm.value!);