feat(login): update login form with material design elements

src/app/login/login.component.ts

@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import PocketBase from 'pocketbase';
 import { environment } from '../../environments/environment';
 import { Router } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule, MatLabel } from '@angular/material/input';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-login',
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, MatCardModule, MatInputModule, MatLabel, MatFormFieldModule, MatButtonModule],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css',
 })
@@ -14,21 +19,52 @@ export class LoginComponent {
   public loginForm!: FormGroup;
   public invalidCredentials = false;
   private pb = new PocketBase(environment.POCKETBASE);
+  public errorMessages: Record<string, string> = {};
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private snackBar: MatSnackBar) { }
+
+  private validationErrorMessages: Record<string, string> = {
+    required: 'This field is required',
+  };
+
+  updateErrorMessages(): void {
+    this.errorMessages = {};
+
+    Object.keys(this.loginForm.controls).forEach((field) => {
+      const control = this.loginForm.get(field);
+
+      if (control && control.errors) {
+        this.errorMessages[field] = Object.keys(control.errors)
+          .map(
+            (errorKey) =>
+              this.validationErrorMessages[errorKey] ||
+              `Unknown error: ${errorKey}`,
+          )
+          .join(' ');
+      }
+    });
+  }
 
   ngOnInit(): void {
     this.loginForm = new FormGroup({
-      email: new FormControl(''),
-      password: new FormControl(''),
+      email: new FormControl('', Validators.required),
+      password: new FormControl('', Validators.required),
     });
 
     if (this.pb.authStore.isValid) {
       this.router.navigate(['dashboard']);
     }
+
+    this.loginForm.valueChanges.subscribe(() => {
+      this.updateErrorMessages();
+    });
   }
 
   submit() {
+    if (!this.loginForm.valid) {
+      this.updateErrorMessages();
+    }
+
     this.pb
       .collection('users')
       .authWithPassword(
@@ -40,6 +76,10 @@ export class LoginComponent {
       })
       .catch(() => {
         this.invalidCredentials = true;
+        const error = this.snackBar.open('Invalid Credentials');
+        setTimeout(() => {
+          error.dismiss();
+        }, 5000);
       });
   }
 }