Add secured/unsecured navbar. Add instructions on how to test Values API Component.

Author: vsaroopchand

src/app/app.component.html

@@ -1,33 +1,36 @@
 <h3>
-  Angular 2 Seed
+  Angular/Adal.js Seed
 </h3>
-<nav>
-	<a [routerLink]="['/']">
+
+<nav id="unsecured-nav" *ngIf="!adalService.userInfo">
+  <a [routerLink]="['/']">
     Login
-  </a>
+  </a> 
   |
-  <a [routerLink]="['/home']">
-    Home
-  </a>
-  |
-	<a [routerLink]="['/about']">
+  <a [routerLink]="['/about']">
     About
-  </a>
+  </a> 
   |
-	<a [routerLink]="['/github', 'angular']">
-    Github Repos
+  <a [routerLink]="['/contact']">
+    Contact Us
   </a>
+</nav>
+
+<nav id="secured-nav" *ngIf="adalService.userInfo">
+  <a [routerLink]="['/home']">
+    Home
+  </a> 
   |
-	<a [routerLink]="['/contact']">
-    Contact Us
+  <a [routerLink]="['/values']">
+    Values API
   </a>
 </nav>
 
 <main>
-	<router-outlet></router-outlet>
+  <router-outlet></router-outlet>
 </main>
 
-
+<br />
 <footer>
   © 2016
-</footer>
+</footer>

src/app/app.component.ts

@@ -1,8 +1,12 @@
+import { AdalService } from './services/adal.service';
 import {Component} from '@angular/core';
 
 @Component({
   selector: 'app',
   templateUrl: './app.component.html',
 })
 export class AppComponent {
+  constructor(private adalService: AdalService){
+
+  }
 }

src/app/home/home.component.html

@@ -1,2 +1,7 @@
 <h3>Home Component</h3>
-<p>Welcome to Angular Seed</p>
+<h2>Welcome {{adalService.userInfo.userName}}!</h2>
+
+<div *ngIf="isLoggedIn">
+    <button (click)="logout()">Logout</button>
+</div>
+<br>

src/app/home/home.component.ts

@@ -13,4 +13,12 @@ export class HomeComponent {
     console.log('JWT Token');
     console.log(this.adalService.accessToken);
   }
+
+   logout() {
+        this.adalService.logout();
+    }
+
+    public get isLoggedIn() {
+        return this.adalService.isAuthenticated;
+    }
 }

src/app/values/value.component.html

@@ -1,5 +1,10 @@
-<h2>Values from ValueController</h2>
 
+<h3>
+    <p>In order to test this component, you must run the API located <a href="https://github.com/vsaroopchand/angular2-seed-server">here</a>.</p> 
+    <p>This demonstrates how to pass the JWT token to a WebAPI and revalidating it there.</p>
+</h3>
+
+<h2>Values from ValueController</h2>
 <ul>
     <li *ngFor="let value of values$ | async">{{value}}</li>
 </ul>