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

src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html

@@ -1,13 +1,14 @@
 <mat-card>
   <mat-card-header>
     <mat-card-title-group>
-      <mat-card-title>Add Twitch User to Group</mat-card-title>
-      <mat-card-subtitle>Adding to ...</mat-card-subtitle>
+      <mat-card-title>Add Twitch User</mat-card-title>
+      <mat-card-subtitle>to {{data.group.name}}</mat-card-subtitle>
     </mat-card-title-group>
   </mat-card-header>
 
   <mat-card-content>
     <mat-form-field>
+      <mat-label>Twitch Username</mat-label>
       <input matInput
              [formControl]="usernameControl" />
     </mat-form-field>
@@ -17,7 +18,13 @@
     <button mat-raised-button
             (click)="dialogRef.close()">Cancel</button>
     <button mat-raised-button
-            disabled="{{waitForResponse}}"
+            disabled="{{usernameControl.invalid || waitForResponse}}"
             (click)="submit()">Add</button>
   </mat-card-actions>
+
+  @if (responseError) {
+  <mat-card-footer>
+    <small class="error below">{{responseError}}</small>
+  </mat-card-footer>
+  }
 </mat-card>

src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.scss

@@ -0,0 +1,16 @@
+.mat-mdc-card-actions {
+  justify-content: space-between;
+}
+
+.error {
+  display: block;
+  color: #ba1a1a;
+}
+
+.below {
+  display: block;
+  justify-self: center;
+  align-items: center;
+  align-self: center;
+  text-align: center;
+}

src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.ts

@@ -27,12 +27,13 @@ import { group } from 'console';
 })
 export class TwitchUserItemAddComponent implements OnInit {
   private readonly client = inject(HermesClientService);
-  private readonly data = inject<{ username: string, group: Group }>(MAT_DIALOG_DATA);
   private readonly http = inject(HttpClient);
 
+  readonly data = inject<{ username: string, group: Group }>(MAT_DIALOG_DATA);
   readonly usernameControl = new FormControl('', [Validators.required]);
   readonly dialogRef = inject(MatDialogRef<ActionItemEditComponent>);
 
+  responseError: string | undefined;
   waitForResponse = false;
 
 
@@ -46,6 +47,7 @@ export class TwitchUserItemAddComponent implements OnInit {
     }
 
     this.waitForResponse = true;
+    this.responseError = undefined;
 
     const username = this.usernameControl.value!.toLowerCase();
     this.http.get('/api/auth/twitch/users?login=' + username, {
@@ -56,10 +58,7 @@ export class TwitchUserItemAddComponent implements OnInit {
       .subscribe((response: any) => {
         if (!response.user) {
           this.waitForResponse = false;
-          return;
-        }
-
-        if (!response.user) {
+          this.responseError = 'Twitch username does not exist.';
           return;
         }
 
@@ -67,12 +66,12 @@ export class TwitchUserItemAddComponent implements OnInit {
           .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.createGroupChatter(this.data.group.id, response.user.id, response.user.login)