[frontend] Snackbaring all the things

kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.html

@@ -4,7 +4,7 @@
       <mat-expansion-panel>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <mat-icon>info</mat-icon>
+            <mat-icon class="info-button">info</mat-icon>
             <div class="info-title">How to configure the public hood page</div>
           </mat-panel-title>
         </mat-expansion-panel-header>

kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html

@@ -5,7 +5,6 @@
       <mat-form-field>
         <mat-label>Add badword</mat-label>
         <input formControlName="regex" matInput />
-        <mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
       </mat-form-field>
       <button mat-icon-button color="primary" aria-label="Add" class="button">
         <mat-icon>add</mat-icon>

kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts

@@ -3,6 +3,7 @@ import { BadwordsService, BodyBadWord } from 'src/app/core/api';
 import { Observable } from 'rxjs';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { first } from 'rxjs/operators';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-badwords',
@@ -16,7 +17,8 @@ export class BadwordsComponent implements OnInit {
 
   constructor(
     private badwordService: BadwordsService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -54,7 +56,9 @@ export class BadwordsComponent implements OnInit {
           this.reload();
         },
         (error) => {
-          this.regexForm.controls['regex'].setErrors({ incorrect: true });
+          this.snackBar.open('Invalid regular expression', 'Close', {
+            duration: 2000,
+          });
         }
       );
   }

kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html

@@ -4,7 +4,7 @@
       <mat-expansion-panel>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <mat-icon>info</mat-icon>
+            <mat-icon class="info-button">info</mat-icon>
             <div class="info-title">
               How to use triggers and badwords to filter messages
             </div>

kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html

@@ -5,7 +5,6 @@
       <mat-form-field>
         <mat-label>Add trigger</mat-label>
         <input formControlName="regex" matInput />
-        <mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
       </mat-form-field>
       <button mat-icon-button color="primary" aria-label="Add" class="button">
         <mat-icon>add</mat-icon>

kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts

@@ -5,6 +5,7 @@ import { ResourceLoader } from '@angular/compiler';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { first } from 'rxjs/operators';
 import { invalid } from '@angular/compiler/src/render3/view/util';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-trigger',
@@ -18,7 +19,8 @@ export class TriggerComponent implements OnInit {
 
   constructor(
     private triggersService: TriggersService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -56,8 +58,9 @@ export class TriggerComponent implements OnInit {
           this.reload();
         },
         (error) => {
-          console.log(error);
+          this.snackBar.open('Invalid regular expression', 'Close', {
-          this.regexForm.controls['regex'].setErrors({ incorrect: true });
+            duration: 2000,
+          });
         }
       );
   }

kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html

@@ -5,7 +5,9 @@
     <mat-form-field>
       <mat-label>New hood name</mat-label>
       <input matInput formControlName="hoodName" />
-      <mat-error *ngIf="hoodForm.invalid">Name already taken</mat-error>
+      <mat-error *ngIf="hoodForm.controls.hoodName"
+        >Hood name is required</mat-error
+      >
     </mat-form-field>
   </form>
 </mat-dialog-content>

kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts

@@ -3,6 +3,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HoodsService } from 'src/app/core/api';
 import { first } from 'rxjs/operators';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-new-hood-dialog',
@@ -15,7 +16,8 @@ export class NewHoodDialogComponent implements OnInit {
   constructor(
     public dialogRef: MatDialogRef<NewHoodDialogComponent>,
     private hoodsService: HoodsService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -44,7 +46,9 @@ export class NewHoodDialogComponent implements OnInit {
           this.dialogRef.close(data);
         },
         (error) => {
-          this.hoodForm.controls['hoodName'].setErrors({ incorrect: true });
+          this.snackBar.open('Hood name already taken', 'Close', {
+            duration: 2000,
+          });
         }
       );
   }