feat: add dashboard component and routing logic

src/app/app.routes.ts

@@ -1,13 +1,20 @@
 import { Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { AuthGuard } from './service/auth.service';
 
 export const routes: Routes = [
   {
-    path: 'login',
+    path: '',
     component: LoginComponent,
   },
+  {
+    path: 'dashboard',
+    component: DashboardComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: "**",
-    redirectTo: "login",
+    redirectTo: "",
   },
 ];

src/app/dashboard/dashboard.component.html

@@ -0,0 +1 @@
+<p>dashboard works!</p>

src/app/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.css'
+})
+export class DashboardComponent {
+
+}

src/app/login/login.component.ts

@@ -13,6 +13,7 @@ import { Router } from '@angular/router';
 export class LoginComponent {
   public loginForm!: FormGroup;
   public invalidCredentials = false;
+  private pb = new PocketBase(environment.POCKETBASE);
 
   constructor(private router: Router) { };
 
@@ -21,16 +22,18 @@ export class LoginComponent {
       email: new FormControl(''),
       password: new FormControl(''),
     });
+
+    if (this.pb.authStore.isValid) {
+      this.router.navigate(['dashboard']);
+    }
   }
 
   submit() {
-    const pb = new PocketBase(environment.POCKETBASE);
-
-    pb.collection("users").authWithPassword(
+    this.pb.collection("users").authWithPassword(
       this.loginForm.get('email')?.value,
       this.loginForm.get('password')?.value
-    ).then(response => {
-      this.invalidCredentials = false;
+    ).then(() => {
+        this.router.navigate(['dashboard']);
     }).catch(() => {
       this.invalidCredentials = true;
     });

src/app/service/auth.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  GuardResult,
+  MaybeAsync,
+  Router,
+  RouterStateSnapshot
+} from '@angular/router';
+import PocketBase from 'pocketbase';
+import { environment } from '../../environments/environment.development';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private router: Router) { };
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    const pb = new PocketBase(environment.POCKETBASE);
+
+    if (pb.authStore.isValid) {
+      return true;
+    }
+    this.router.navigate(['']);
+    return false;
+  }
+}