Adding a protected account page and an unauthorized page

src/app/account/account.component.html

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

src/app/account/account.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app-routing.module.ts

@@ -13,6 +13,9 @@ import { ShowResolverService } from './services/show-resolver.service';
 import { StreamResolverService } from "./services/stream-resolver.service";
 import { ShowDetailsComponent } from './show-details/show-details.component';
 import {LoginComponent} from "./login/login.component";
+import {AccountComponent} from "./account/account.component";
+import {AuthenticatedGuard} from "./guards/authenticated-guard.service";
+import {UnauthorizedComponent} from "./unauthorized/unauthorized.component";
 
 const routes: Routes = [
 	{ path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService } },
@@ -23,6 +26,8 @@ const routes: Routes = [
 	{ path: "watch/:item", component: PlayerComponent, resolve: { item: StreamResolverService } },
 	{ path: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService } },
 	{ path: "login", component: LoginComponent },
+	{ path: "account", component: AccountComponent, canActivate: [AuthenticatedGuard], canLoad: [AuthenticatedGuard] },
+	{ path: "unauthorized", component: UnauthorizedComponent },
 	{ path: "**", component: NotFoundComponent }
 ];
 

src/app/app.component.html

@@ -31,7 +31,7 @@
 						</button>
 					</li>
 					<mat-menu #accountMenu="matMenu">
-						<button mat-menu-item>Settings</button>
+						<a class="link" mat-menu-item href="/account" routerLink="/account">Settings</a>
 						<button mat-menu-item (click)="this.authManager.logout()">Logout</button>
 					</mat-menu>
 				</ng-template>

src/app/app.component.scss

@@ -18,6 +18,17 @@
 	}
 }
 
+.link
+{
+  outline: none;
+  color: inherit;
+  
+  &:hover
+  {
+	text-decoration: none !important;
+  }
+}
+
 .nav-link
 {
 	padding: 12px;

src/app/app.module.ts

@@ -37,6 +37,9 @@ import {
 	OidcSecurityService,
 	OpenIdConfiguration
 } from "angular-auth-oidc-client";
+import { AccountComponent } from './account/account.component';
+import {AuthenticatedGuard} from "./guards/authenticated-guard.service";
+import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
 
 export function loadConfig(oidcConfigService: OidcConfigService)
 {
@@ -56,7 +59,9 @@ export function loadConfig(oidcConfigService: OidcConfigService)
 		PeopleListComponent,
 		ShowsListComponent,
 		LoginComponent,
-		PasswordValidator
+		PasswordValidator,
+		AccountComponent,
+		UnauthorizedComponent
 	],
 	imports: [
 		BrowserModule,
@@ -88,7 +93,9 @@ export function loadConfig(oidcConfigService: OidcConfigService)
 			useFactory: loadConfig,
 			deps: [OidcConfigService],
 			multi: true
-		},],
+		},
+		AuthenticatedGuard
+	],
 	bootstrap: [AppComponent]
 })
 export class AppModule 

src/app/guards/authenticated-guard.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import {
+	CanActivate,
+	CanLoad,
+	Route,
+	UrlSegment,
+	ActivatedRouteSnapshot,
+	RouterStateSnapshot,
+	UrlTree,
+	Router
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import {AuthService} from "../services/auth.service";
+
+@Injectable({
+ 	providedIn: 'root'
+})
+export class AuthenticatedGuard implements CanActivate, CanLoad 
+{
+	constructor(private router: Router, private authManager: AuthService) {}
+	
+ 	canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
+ 	{
+ 	 	return this.checkPermissions();
+ 	}
+ 	
+ 	canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean 
+ 	{
+ 	 	return this.checkPermissions();
+ 	}
+	
+ 	checkPermissions() : boolean
+    {
+    	if (this.authManager.isAuthenticated)
+    		return true;
+	    this.router.navigate(["/unauthorized"]);
+    	return false;
+    }
+}

src/app/unauthorized/unauthorized.component.html

@@ -0,0 +1,11 @@
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<div class="text-center">
+	<h1>Unauthorized</h1>
+	<p>You don't have enough permissions to view this page.
+		<span *ngIf="!this.isLoggedIn()"><br/>Sign in and try again.</span>
+	</p>
+</div>

src/app/unauthorized/unauthorized.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {AuthService} from "../services/auth.service";
+
+@Component({
+ 	selector: 'app-unauthorized',
+ 	templateUrl: './unauthorized.component.html',
+ 	styleUrls: ['./unauthorized.component.scss']
+})
+export class UnauthorizedComponent 
+{
+ 	constructor(private authManager: AuthService) { }
+
+ 	isLoggedIn() : boolean
+    {
+    	return this.authManager.isAuthenticated;
+    }
+}