Added nicer logout and rout guards
This commit is contained in:
parent
266a583a4d
commit
9c001d9d88
|
@ -1,3 +1,4 @@
|
||||||
|
import { AuthGuard } from './services/auth-guard.service';
|
||||||
import { DomainsComponent } from './pages/domains/domains.component';
|
import { DomainsComponent } from './pages/domains/domains.component';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
@ -6,18 +7,28 @@ import { LoginComponent } from './pages/login/login.component';
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
pathMatch: 'full',
|
component: LoginComponent,
|
||||||
component: LoginComponent
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'domains',
|
path: 'logout',
|
||||||
pathMatch: 'full',
|
component: LoginComponent,
|
||||||
component: DomainsComponent
|
data: { logout: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
redirectTo: '/',
|
pathMatch: 'prefix',
|
||||||
pathMatch: 'prefix'
|
canActivate: [AuthGuard],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'domains',
|
||||||
|
component: DomainsComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '**',
|
||||||
|
redirectTo: '/'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,6 @@ export class AppComponent {
|
||||||
|
|
||||||
public async onLogout() {
|
public async onLogout() {
|
||||||
await this.session.logout();
|
await this.session.logout();
|
||||||
this.router.navigate(['/']);
|
this.router.navigate(['/logout']);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { AuthGuard } from './services/auth-guard.service';
|
||||||
|
import { FocusDirective } from './utils/Focus.directive';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { ReactiveFormsModule } from '@angular/forms';
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
|
@ -29,7 +31,8 @@ import { DomainsComponent } from './pages/domains/domains.component';
|
||||||
SortComponent,
|
SortComponent,
|
||||||
ModalContainerComponent,
|
ModalContainerComponent,
|
||||||
LoginComponent,
|
LoginComponent,
|
||||||
DomainsComponent
|
DomainsComponent,
|
||||||
|
FocusDirective
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -40,7 +43,8 @@ import { DomainsComponent } from './pages/domains/domains.component';
|
||||||
ModalService,
|
ModalService,
|
||||||
StateService,
|
StateService,
|
||||||
HttpService,
|
HttpService,
|
||||||
SessionOperation
|
SessionOperation,
|
||||||
|
AuthGuard
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,10 +5,14 @@
|
||||||
<h3>Login</h3>
|
<h3>Login</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
<p *ngIf="isLogoutPage()" class="text-success">
|
||||||
|
You have been successfully logged out.
|
||||||
|
</p>
|
||||||
|
|
||||||
<form autocomplete="off" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
|
<form autocomplete="off" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Username</label>
|
<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">
|
<div class="invalid-feedback">
|
||||||
Username is required.
|
Username is required.
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { Router } from '@angular/router';
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
import { StateService } from '../../services/state.service';
|
import { StateService } from '../../services/state.service';
|
||||||
import { HttpService } from '../../services/http.service';
|
import { HttpService } from '../../services/http.service';
|
||||||
|
@ -16,7 +16,7 @@ export class LoginComponent {
|
||||||
loginError = false;
|
loginError = false;
|
||||||
|
|
||||||
constructor(private router: Router, private fb: FormBuilder, public gs: StateService,
|
constructor(private router: Router, private fb: FormBuilder, public gs: StateService,
|
||||||
public sessions: SessionOperation) {
|
public sessions: SessionOperation, private route: ActivatedRoute) {
|
||||||
this.createForm();
|
this.createForm();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,4 +37,8 @@ export class LoginComponent {
|
||||||
this.loginError = true;
|
this.loginError = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public isLogoutPage() {
|
||||||
|
return this.route.snapshot.data.logout;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
18
frontend/src/app/services/auth-guard.service.ts
Normal file
18
frontend/src/app/services/auth-guard.service.ts
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
14
frontend/src/app/utils/Focus.directive.ts
Normal file
14
frontend/src/app/utils/Focus.directive.ts
Normal file
|
@ -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();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in a new issue