diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 21309a9..5f3715f 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,3 +1,4 @@ +import { AuthGuard } from './services/auth-guard.service'; import { DomainsComponent } from './pages/domains/domains.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; @@ -6,18 +7,28 @@ import { LoginComponent } from './pages/login/login.component'; const routes: Routes = [ { path: '', - pathMatch: 'full', - component: LoginComponent + component: LoginComponent, + pathMatch: 'full' }, { - path: 'domains', - pathMatch: 'full', - component: DomainsComponent + path: 'logout', + component: LoginComponent, + data: { logout: true } }, { path: '', - redirectTo: '/', - pathMatch: 'prefix' + pathMatch: 'prefix', + canActivate: [AuthGuard], + children: [ + { + path: 'domains', + component: DomainsComponent + }, + { + path: '**', + redirectTo: '/' + } + ] } ]; diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index f4889be..a5fdc44 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -14,6 +14,6 @@ export class AppComponent { public async onLogout() { await this.session.logout(); - this.router.navigate(['/']); + this.router.navigate(['/logout']); } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 600b4fa..14516a8 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,3 +1,5 @@ +import { AuthGuard } from './services/auth-guard.service'; +import { FocusDirective } from './utils/Focus.directive'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; @@ -29,7 +31,8 @@ import { DomainsComponent } from './pages/domains/domains.component'; SortComponent, ModalContainerComponent, LoginComponent, - DomainsComponent + DomainsComponent, + FocusDirective ], imports: [ BrowserModule, @@ -40,7 +43,8 @@ import { DomainsComponent } from './pages/domains/domains.component'; ModalService, StateService, HttpService, - SessionOperation + SessionOperation, + AuthGuard ], bootstrap: [AppComponent] }) diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html index 24e2120..84d291e 100644 --- a/frontend/src/app/pages/login/login.component.html +++ b/frontend/src/app/pages/login/login.component.html @@ -5,10 +5,14 @@

Login

+

+ You have been successfully logged out. +

+
- +
Username is required.
diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts index 08277db..862db51 100644 --- a/frontend/src/app/pages/login/login.component.ts +++ b/frontend/src/app/pages/login/login.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import { Router, ActivatedRoute } from '@angular/router'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { StateService } from '../../services/state.service'; import { HttpService } from '../../services/http.service'; @@ -16,7 +16,7 @@ export class LoginComponent { loginError = false; constructor(private router: Router, private fb: FormBuilder, public gs: StateService, - public sessions: SessionOperation) { + public sessions: SessionOperation, private route: ActivatedRoute) { this.createForm(); } @@ -37,4 +37,8 @@ export class LoginComponent { this.loginError = true; } } + + public isLogoutPage() { + return this.route.snapshot.data.logout; + } } diff --git a/frontend/src/app/services/auth-guard.service.ts b/frontend/src/app/services/auth-guard.service.ts new file mode 100644 index 0000000..556de38 --- /dev/null +++ b/frontend/src/app/services/auth-guard.service.ts @@ -0,0 +1,18 @@ +import { StateService } from './state.service'; +import { Injectable } from '@angular/core'; +import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; + +@Injectable() +export class AuthGuard implements CanActivate { + + constructor(private gs: StateService, private router: Router) { } + + canActivate(): boolean { + if (!this.gs.isLoggedIn) { + this.router.navigate(['/']); + return false; + } else { + return true; + } + } +} diff --git a/frontend/src/app/utils/Focus.directive.ts b/frontend/src/app/utils/Focus.directive.ts new file mode 100644 index 0000000..58fa658 --- /dev/null +++ b/frontend/src/app/utils/Focus.directive.ts @@ -0,0 +1,14 @@ +import { Directive, AfterViewInit, ElementRef } from '@angular/core'; + +@Directive({ + selector: '[appFocus]' +}) +export class FocusDirective implements AfterViewInit { + + constructor(private elementRef: ElementRef) { } + + ngAfterViewInit(): void { + this.elementRef.nativeElement.focus(); + } + +}