From d09cac472a8e458ee6c082ed612b23da2258f988 Mon Sep 17 00:00:00 2001
From: Robert Zhang <louirobert@gmail.com>
Date: Sun, 8 Sep 2019 23:13:06 +0800
Subject: [PATCH] Using mat-toolbar.

---
 e2e/src/app.e2e-spec.ts       |  2 +-
 e2e/src/app.po.ts             |  2 +-
 src/app/app.component.html    | 11 +++++++----
 src/app/app.component.scss    | 11 +++++++++++
 src/app/app.component.spec.ts |  4 ++++
 src/app/material.module.ts    |  2 ++
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
index 8201f33..f9b1c66 100644
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Hello, Guest!');
+    expect(page.getTitleText()).toEqual('HPC Pack 2019');
   });
 
   afterEach(async () => {
diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
index 5776aa9..a6c37b7 100644
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@@ -6,6 +6,6 @@ export class AppPage {
   }
 
   getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
+    return element(by.css('mat-toolbar .title')).getText() as Promise<string>;
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bd69c96..f5ba971 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,8 @@
-<h1>Hello, {{username}}!</h1>
-<p *ngIf="authenticated">
-  <a mat-flat-button color="primary" (click)="logout()">Log out</a>
-</p>
+<mat-toolbar color="primary">
+  <span class="title">HPC Pack 2019</span>
+  <span class="toolbar-spacer"></span>
+  <span *ngIf="authenticated" class="item">{{username}}</span>
+  <a *ngIf="authenticated" class="item" mat-flat-button (click)="logout()">Log out</a>
+</mat-toolbar>
+
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..64ab134 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,11 @@
+mat-toolbar {
+  margin-bottom: 1em;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.item {
+  margin-left: 1em;
+}
\ No newline at end of file
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index fbaffb6..9a80b18 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,6 +1,7 @@
 import { TestBed, async } from '@angular/core/testing';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { MaterialModule } from './material.module'
 import { AppComponent } from './app.component';
 import { AuthService } from './auth.service';
 
@@ -10,6 +11,9 @@ class RouterOutletStubComponent {}
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        MaterialModule,
+      ],
       declarations: [
         RouterOutletStubComponent,
         AppComponent
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
index 7493e39..65d2d17 100644
--- a/src/app/material.module.ts
+++ b/src/app/material.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,6 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   exports: [
+    MatToolbarModule,
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,