diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 9b2f67e..b66a2af 100644 --- a/src/app/app.routes.ts +++ b/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: "", }, ]; diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..9c5fce9 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1 @@ +

dashboard works!

diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..30e39a2 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..65db9aa --- /dev/null +++ b/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 { + +} diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 448e69b..172a8e2 100644 --- a/src/app/login/login.component.ts +++ b/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; }); diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts new file mode 100644 index 0000000..4351acb --- /dev/null +++ b/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; + } +}