Chore: Removed Mat Card from everywhere.

Chore: Removed the Toaster Service.
Chore: Updated to Material Theme 3

bookie/src/app/auth/auth-guard.service.ts

@@ -1,7 +1,7 @@
 import { inject } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { CanActivateFn, Router } from '@angular/router';
 
-import { ToasterService } from '../core/toaster.service';
 import { AuthService } from './auth.service';
 
 export const authGuard: CanActivateFn = (route, state) => {
@@ -16,7 +16,7 @@ export const authGuard: CanActivateFn = (route, state) => {
     return false;
   }
   if (permission !== undefined && user.perms.indexOf(permission) === -1) {
-    inject(ToasterService).show('Danger', 'You do not have the permission to access this area.');
+    inject(MatSnackBar).open('You do not have the permission to access this area.', 'Danger');
     return false;
   }
   // logged in so return true

bookie/src/app/auth/login/login.component.html

@@ -1,29 +1,23 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Login</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Username</mat-label>
-          <input matInput #nameElement formControlName="username" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Password</mat-label>
-          <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
-          <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
-        </mat-form-field>
-      </div>
-      <mat-divider></mat-divider>
-      @if (unregisteredDevice) {
-        <h2>Sorry, device {{ deviceName }} is not enabled.</h2>
-      }
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-raised-button (click)="login()" color="primary">Login</button>
-  </mat-card-actions>
-</mat-card>
+<h2>Login</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Username</mat-label>
+      <input matInput #nameElement formControlName="username" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Password</mat-label>
+      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
+      <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
+    </mat-form-field>
+  </div>
+  <mat-divider></mat-divider>
+  @if (unregisteredDevice) {
+    <h2>Sorry, device {{ deviceName }} is not enabled.</h2>
+  }
+</form>
+<div class="row-container">
+  <button mat-raised-button (click)="login()" color="primary">Login</button>
+</div>

bookie/src/app/auth/login/login.component.ts

@@ -1,14 +1,13 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { ToasterService } from '../../core/toaster.service';
 import { CookieService } from '../../shared/cookie.service';
 import { AuthService } from '../auth.service';
 
@@ -16,21 +15,13 @@ import { AuthService } from '../auth.service';
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
-  imports: [
-    MatButtonModule,
-    MatCardModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    ReactiveFormsModule,
-  ],
+  imports: [MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule],
 })
 export class LoginComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private auth = inject(AuthService);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private cs = inject(CookieService);
   private cd = inject(ChangeDetectorRef);
 
@@ -82,10 +73,9 @@ export class LoginComponent implements OnInit, AfterViewInit {
         if (error.status === 401 && error.error.detail === 'Device is not registered') {
           this.unregisteredDevice = true;
           this.deviceName = this.cs.getCookie('device');
-          console.log(this.deviceName, this.unregisteredDevice);
           this.cd.detectChanges();
         }
-        this.toaster.show('Error', error.error.detail);
+        this.snackBar.open(error.error.detail, 'Error');
       },
     });
   }