Starting the account modal

src/app/account/account.component.html

@@ -1 +1,16 @@
-<p>Soon</p>
+<h1 mat-dialog-title>Account</h1>
+<div mat-dialog-content>
+	<mat-form-field>
+		<mat-label>Email</mat-label>
+		<input matInput name="accountEmail" #accountEmail="ngModel" [(ngModel)]="account.email" required email>
+	</mat-form-field>
+	<br/>
+	<mat-form-field>
+		<mat-label>Username</mat-label>
+		<input matInput name="accountUsername" #accountUsername="ngModel" [(ngModel)]="account.username">
+	</mat-form-field>
+</div>
+<div mat-dialog-actions fxFlexAlign="end" align="end" style="text-align: end">
+	<button mat-button (click)="cancel()">Cancel</button>
+	<button mat-button [mat-dialog-close]="this.account" cdkFocusInitial>Ok</button>
+</div>

src/app/account/account.component.ts

@@ -1,15 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {Account} from "../../models/account";
+
 
 @Component({
   selector: 'app-account',
   templateUrl: './account.component.html',
   styleUrls: ['./account.component.scss']
 })
-export class AccountComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
+export class AccountComponent 
+{
+	constructor(public dialogRef: MatDialogRef<AccountComponent>, @Inject(MAT_DIALOG_DATA) public account: Account) {}
 
+	cancel() 
+	{
+		this.dialogRef.close();
+	}
 }

src/app/app-routing.module.ts

@@ -28,7 +28,6 @@ const routes: Routes = [
 	{ path: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService } },
 	{ path: "login", component: LoginComponent },
 	{ path: "logout", component: LogoutComponent },
-	{ 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">
-						<a class="link" mat-menu-item href="/account" routerLink="/account">Settings</a>
+						<button mat-menu-item (click)="this.openAccountDialog()">Settings</button>
 						<button mat-menu-item (click)="this.authManager.logout()">Logout</button>
 					</mat-menu>
 				</ng-template>

src/app/app.component.ts

@@ -4,6 +4,9 @@ import { Event, Router, NavigationStart, NavigationEnd, NavigationCancel, Naviga
 import * as $ from "jquery";
 import { Location } from "@angular/common";
 import {AuthService} from "./services/auth.service";
+import {MatDialog} from "@angular/material/dialog";
+import {AccountComponent} from "./account/account.component";
+import {Account} from "../models/account";
 
 @Component({
 	selector: 'app-root',
@@ -14,8 +17,9 @@ export class AppComponent
 {
 	libraries: Library[];
 	isLoading: boolean = false;
+	account: Account;
 
-	constructor(http: HttpClient, private router: Router, private location: Location, private authManager: AuthService)
+	constructor(http: HttpClient, private router: Router, private location: Location, private authManager: AuthService, public dialog: MatDialog)
 	{
 		http.get<Library[]>("api/libraries").subscribe(result =>
 		{
@@ -43,6 +47,8 @@ export class AppComponent
 
 		if (!navigator.userAgent.match(/Mobi/))
 			document.body.classList.add("hoverEnabled");
+		
+		this.account = this.authManager.getAccount();
 	}
 
 	openSearch()
@@ -72,6 +78,11 @@ export class AppComponent
 	{
 		return this.authManager.isAuthenticated;
 	}
+	
+	openAccountDialog()
+	{
+		this.dialog.open(AccountComponent, {width: "500px", data: this.account});
+	}
 }
 
 interface Library

src/app/app.module.ts

@@ -41,6 +41,7 @@ import { AccountComponent } from './account/account.component';
 import {AuthenticatedGuard} from "./guards/authenticated-guard.service";
 import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
 import { LogoutComponent } from './logout/logout.component';
+import {MatDialogModule} from '@angular/material/dialog';
 
 export function loadConfig(oidcConfigService: OidcConfigService)
 {
@@ -83,11 +84,15 @@ export function loadConfig(oidcConfigService: OidcConfigService)
 		ReactiveFormsModule,
 		MatInputModule,
 		MatFormFieldModule,
+		MatDialogModule,
 		FormsModule,
 		MatTabsModule,
 		MatCheckboxModule,
 		AuthModule.forRoot()
 	],
+	entryComponents: [
+		AccountComponent	
+	],
 	providers: [
 		OidcConfigService,
 		{

src/app/services/auth.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {OidcSecurityService} from "angular-auth-oidc-client";
 import {HttpClient} from "@angular/common/http";
+import {Account} from "../../models/account";
 
 @Injectable({
 	providedIn: 'root'
@@ -28,6 +29,8 @@ export class AuthService
 		this.oidcSecurityService.getUserData().subscribe(userData => 
 		{
 			this.user = userData;
+			console.log("Got user data:");
+			console.log(this.user);
 		});
 	}
 
@@ -48,4 +51,12 @@ export class AuthService
 	{
 		this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
 	}
+
+	getAccount(): Account
+	{
+		if (!this.isAuthenticated)
+			return null;
+		console.log(this.user);
+		return {email: this.user.email, username: this.user.username};
+	}
 }

src/models/account.ts

@@ -0,0 +1,5 @@
+export interface Account
+{
+	username: string;
+	email: string;
+}