Added nicer logout and rout guards

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: '/'
+            }
+        ]
     }
 ];
 

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']);
   }
 }

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]
 })

frontend/src/app/pages/login/login.component.html

@@ -5,10 +5,14 @@
                 <h3>Login</h3>
             </div>
             <div class="card-body">
+                <p *ngIf="isLogoutPage()" class="text-success">
+                    You have been successfully logged out.
+                </p>
+
                 <form autocomplete="off" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                     <div class="form-group">
                         <label>Username</label>
-                        <input type="text" class="form-control auto-invalid" formControlName="username" autofocus />
+                        <input type="text" class="form-control auto-invalid" formControlName="username" appFocus />
                         <div class="invalid-feedback">
                             Username is required.
                         </div>

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;
+    }
 }

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;
+        }
+    }
+}

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();
+    }
+
+}