From c8bfeed396bd4a964131f7f9d08d8e92496594a4 Mon Sep 17 00:00:00 2001
From: Tom <mail@goblincaves.com>
Date: Thu, 20 Mar 2025 13:14:09 +0000
Subject: [PATCH] For modals, response error messages is shown in the footer.
 For modals, Accept button is always on the right.

---
 .../action-item-edit.component.html             |  6 ++++++
 .../action-item-edit.component.scss             |  8 ++++++++
 .../action-item-edit.component.ts               | 11 +++++++----
 .../group-item-edit.component.html              | 16 +++++++++++-----
 .../group-item-edit.component.scss              | 13 +++++++++++++
 .../group-item-edit.component.ts                |  6 ++++--
 .../policy-dropdown.component.scss              |  1 +
 .../policy-item-edit.component.html             | 17 ++++++++++++-----
 .../policy-item-edit.component.scss             |  9 +++++++++
 .../policy-item-edit.component.ts               | 10 ++++++----
 .../redemption-item-edit.component.ts           |  6 +++---
 .../filter-item-edit.component.html             |  4 ++--
 .../filter-item-edit.component.ts               | 12 ++++++------
 .../twitch-user-item-add.component.html         | 13 ++++++++++---
 .../twitch-user-item-add.component.scss         | 16 ++++++++++++++++
 .../twitch-user-item-add.component.ts           | 13 ++++++-------
 16 files changed, 120 insertions(+), 41 deletions(-)

diff --git a/src/app/actions/action-item-edit/action-item-edit.component.html b/src/app/actions/action-item-edit/action-item-edit.component.html
index 943a770..ff8f03a 100644
--- a/src/app/actions/action-item-edit/action-item-edit.component.html
+++ b/src/app/actions/action-item-edit/action-item-edit.component.html
@@ -121,5 +121,11 @@
               disabled="{{!formsDirty || !formsValidity || waitForResponse}}"
               (click)="save()">Save</button>
     </mat-card-actions>
+
+    @if (responseError) {
+    <mat-card-footer>
+      <small class="error below">{{responseError}}</small>
+    </mat-card-footer>
+    }
   </mat-card>
 </body>
\ No newline at end of file
diff --git a/src/app/actions/action-item-edit/action-item-edit.component.scss b/src/app/actions/action-item-edit/action-item-edit.component.scss
index 88ac46c..9a391ee 100644
--- a/src/app/actions/action-item-edit/action-item-edit.component.scss
+++ b/src/app/actions/action-item-edit/action-item-edit.component.scss
@@ -14,6 +14,14 @@
   color: #ba1a1a;
 }
 
+.below {
+  display: block;
+  justify-self: center;
+  align-items: center;
+  align-self: center;
+  text-align: center;
+}
+
 .actions {
   display: flex;
   flex-direction: row;
diff --git a/src/app/actions/action-item-edit/action-item-edit.component.ts b/src/app/actions/action-item-edit/action-item-edit.component.ts
index 2f919ea..7e390fa 100644
--- a/src/app/actions/action-item-edit/action-item-edit.component.ts
+++ b/src/app/actions/action-item-edit/action-item-edit.component.ts
@@ -203,6 +203,7 @@ export class ActionItemEditComponent implements OnInit {
 
   isNew: boolean = true;
   previousName: string = this.action.name;
+  responseError: string | undefined;
   waitForResponse: boolean = false;
 
   readonly formGroup = new FormGroup({
@@ -239,16 +240,17 @@ export class ActionItemEditComponent implements OnInit {
       return;
 
     this.waitForResponse = true;
+    this.responseError = undefined;
     this.client.first((d: any) => d.op == 4 && d.d.request.type == 'delete_redeemable_action' && d.d.request.data.name == this.action.name)
       .subscribe({
         next: (d) => {
           if (d.d.error) {
-            // TODO: update & show response error message.
+            this.responseError = d.d.error;
           } else {
             this.dialogRef.close();
           }
         },
-        error: () => this.waitForResponse = false,
+        error: () => this.responseError = 'Something went wrong.',
         complete: () => this.waitForResponse = false,
       });
     this.client.deleteRedeemableAction(action.name);
@@ -260,6 +262,7 @@ export class ActionItemEditComponent implements OnInit {
     }
 
     this.waitForResponse = true;
+    this.responseError = undefined;
 
     const fields = this.actionEntries[this.action.type];
     if (fields.some(f => f.control.invalid)) {
@@ -285,12 +288,12 @@ export class ActionItemEditComponent implements OnInit {
       .subscribe({
         next: (d) => {
           if (d.d.error) {
-            // TODO: update & show response error message.
+            this.responseError = d.d.error;
           } else {
             this.dialogRef.close(this.action);
           }
         },
-        error: () => this.waitForResponse = false,
+        error: () => this.responseError = 'Something went wrong.',
         complete: () => this.waitForResponse = false,
       });
     if (isNewAction)
diff --git a/src/app/groups/group-item-edit/group-item-edit.component.html b/src/app/groups/group-item-edit/group-item-edit.component.html
index 3ee3629..e170b87 100644
--- a/src/app/groups/group-item-edit/group-item-edit.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/groups/group-item-edit/group-item-edit.component.scss b/src/app/groups/group-item-edit/group-item-edit.component.scss
index d88a62a..d4fd1a6 100644
--- a/src/app/groups/group-item-edit/group-item-edit.component.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/app/groups/group-item-edit/group-item-edit.component.ts b/src/app/groups/group-item-edit/group-item-edit.component.ts
index 7fc0156..de5c921 100644
--- a/src/app/groups/group-item-edit/group-item-edit.component.ts
+++ b/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!);
diff --git a/src/app/policies/policy-dropdown/policy-dropdown.component.scss b/src/app/policies/policy-dropdown/policy-dropdown.component.scss
index 16c425e..ba8efc2 100644
--- a/src/app/policies/policy-dropdown/policy-dropdown.component.scss
+++ b/src/app/policies/policy-dropdown/policy-dropdown.component.scss
@@ -1,3 +1,4 @@
 .error {
+  display: block;
   color: #ba1a1a;
 }
\ No newline at end of file
diff --git a/src/app/policies/policy-item-edit/policy-item-edit.component.html b/src/app/policies/policy-item-edit/policy-item-edit.component.html
index e6e24f4..1b3509d 100644
--- a/src/app/policies/policy-item-edit/policy-item-edit.component.html
+++ b/src/app/policies/policy-item-edit/policy-item-edit.component.html
@@ -9,7 +9,8 @@
                     [group]="data.group_id"
                     [groupDisabled]="data.groupDisabled"
                     [errorMessages]="groupErrorMessages" />
-    <policy-dropdown #policyDropdown [policy]="pathControl.value" />
+    <policy-dropdown #policyDropdown
+                     [policy]="pathControl.value" />
     <mat-form-field>
       <mat-label>Usage</mat-label>
       <input matInput
@@ -52,6 +53,10 @@
     </mat-form-field>
   </mat-card-content>
   <mat-card-actions align="end">
+    <button mat-button
+            (click)="dialogRef.close()">
+      <mat-icon>cancel</mat-icon>Cancel
+    </button>
     @if (isNew) {
     <button mat-button
             (click)="save()">
@@ -63,9 +68,11 @@
       <mat-icon>save</mat-icon>Save
     </button>
     }
-    <button mat-button
-            (click)="dialogRef.close()">
-      <mat-icon>cancel</mat-icon>Cancel
-    </button>
   </mat-card-actions>
+
+  @if (responseError) {
+  <mat-card-footer>
+    <small class="error below">{{responseError}}</small>
+  </mat-card-footer>
+  }
 </mat-card>
\ No newline at end of file
diff --git a/src/app/policies/policy-item-edit/policy-item-edit.component.scss b/src/app/policies/policy-item-edit/policy-item-edit.component.scss
index edb4734..d84f20b 100644
--- a/src/app/policies/policy-item-edit/policy-item-edit.component.scss
+++ b/src/app/policies/policy-item-edit/policy-item-edit.component.scss
@@ -6,5 +6,14 @@
 }
 
 .error {
+  display: block;
   color: #ba1a1a;
+}
+
+.below {
+  display: block;
+  justify-self: center;
+  align-items: center;
+  align-self: center;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/src/app/policies/policy-item-edit/policy-item-edit.component.ts b/src/app/policies/policy-item-edit/policy-item-edit.component.ts
index 7df784a..cf9c8a8 100644
--- a/src/app/policies/policy-item-edit/policy-item-edit.component.ts
+++ b/src/app/policies/policy-item-edit/policy-item-edit.component.ts
@@ -49,6 +49,7 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
   });
 
   isNew: boolean = false;
+  responseError: string | undefined;
   waitForResponse: boolean = false;
 
   @ViewChild('policyDropdown') policyDropdown: PolicyDropdownComponent | undefined;
@@ -81,6 +82,7 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
       return;
 
     this.waitForResponse = true;
+    this.responseError = undefined;
     const group_id = (this.groupControl.value as Group)!.id;
     const path = this.pathControl.value!;
     const usage = this.usageControl.value!;
@@ -91,12 +93,12 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
         .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.createPolicy(group_id, path, usage, span);
@@ -105,12 +107,12 @@ export class PolicyItemEditComponent implements OnInit, AfterViewInit {
         .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.updatePolicy(this.data.policy_id, group_id, path, usage, span);
diff --git a/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.ts b/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.ts
index 94eabb5..6b513fe 100644
--- a/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.ts
+++ b/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.ts
@@ -95,7 +95,7 @@ export class RedemptionItemEditComponent implements OnInit {
             this.dialogRef.close(id);
           }
         },
-        error: () => { this.responseError = 'Failed to receive response back from server.'; this.waitForResponse = false; },
+        error: () => this.responseError = 'Something went wrong.',
         complete: () => this.waitForResponse = false,
       });
     this.client.deleteRedemption(id);
@@ -127,7 +127,7 @@ export class RedemptionItemEditComponent implements OnInit {
               this.dialogRef.close(d.d.data);
             }
           },
-          error: () => { this.responseError = 'Failed to receive response back from server.'; this.waitForResponse = false; },
+          error: () => this.responseError = 'Something went wrong.',
           complete: () => this.waitForResponse = false,
         });
       this.client.createRedemption(this.redemption.redemption_id, this.redemption.action_name, order);
@@ -142,7 +142,7 @@ export class RedemptionItemEditComponent implements OnInit {
               this.dialogRef.close(d.d.data);
             }
           },
-          error: () => { this.responseError = 'Failed to receive response back from server.'; this.waitForResponse = false; },
+          error: () => this.responseError = 'Something went wrong.',
           complete: () => this.waitForResponse = false,
         });
       this.client.updateRedemption(this.redemption.id, this.redemption.redemption_id, this.redemption.action_name, order);
diff --git a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html
index 437f671..2f502d1 100644
--- a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html
+++ b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html
@@ -43,8 +43,8 @@
             </mat-select>
           </mat-form-field>
         </div>
-        @if (errorMessage) {
-        <small class="error">{{errorMessage}}</small>
+        @if (responseError) {
+        <small class="error">{{responseError}}</small>
         }
       </form>
     </mat-dialog-content>
diff --git a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts
index cb10cb2..8413984 100644
--- a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts
+++ b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts
@@ -62,7 +62,7 @@ export class FilterItemEditComponent {
   });
 
   waitForResponse: boolean = false;
-  errorMessage: string | undefined;
+  responseError: string | undefined;
 
 
   get optionsSelected() {
@@ -75,7 +75,7 @@ export class FilterItemEditComponent {
       return;
 
     this.waitForResponse = true;
-    this.errorMessage = undefined;
+    this.responseError = undefined;
 
     const search = this.searchControl.value!;
     const replace = this.replaceControl.value!;
@@ -86,11 +86,11 @@ export class FilterItemEditComponent {
         ?.subscribe({
           next: d => {
             if (d.error)
-              this.errorMessage = d.error;
+              this.responseError = 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.createTTSFilter(search, replace, flag);
@@ -99,11 +99,11 @@ export class FilterItemEditComponent {
         ?.subscribe({
           next: d => {
             if (d.error)
-              this.errorMessage = d.error;
+              this.responseError = 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.updateTTSFilter(this.data.id, search, replace, flag);
diff --git a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html b/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html
index 3d4b4c3..373b52e 100644
--- a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.scss b/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.scss
index e69de29..dc85d4d 100644
--- a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.ts b/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.ts
index fea2b21..1db3b5d 100644
--- a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.ts
+++ b/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)