Application Complete

Enjoy

src/app/_guards/auth.guard.ts

@@ -7,16 +7,19 @@ export class AuthGuard implements CanActivate {
     constructor(private router: Router) { }
 
     /*
-    Using CanActivate as route guard and simply checking if the currentUser object is inplace.
+    Using CanActivate as route guard and simply checking if the currentUser object is in place.
     This can and should be expanded to validating the token via a service to ensure validity
     */
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+
+        /* In the real world I would pull this into a local class and have a service validate the token, but for the sake of the demo we'll just accept that this dude is valid*/
         if (localStorage.getItem('currentUser')) {
             return true;
         }
 
         /* If not then kick them back to the login page */
-        this.router.navigate( ['login'] );
+        this.router.navigate(['login']);
         return false;
     }
+
 }

src/app/_guards/role.guard.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class RoleGuard implements CanActivate {
+
+    constructor(private router: Router) { }
+
+    /*
+    Using CanActivate as route guard and simply checking if the currentUser object is inplace.
+    This can and should be expanded to validating the token via a service to ensure validity
+    */
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+
+        /* In the real world I would pull this into a local class and have a service validate the token, but for the sake of the demo we'll just accept that this dude is valid*/
+        if (JSON.parse(localStorage.getItem('currentUser')).role == "B5") {
+            return true;
+        }
+
+        /* If not then kick them back to the login page */
+        this.router.navigate(['login']);
+        return false;
+    }
+
+}

src/app/about/about.component.html

@@ -24,9 +24,17 @@
         <br />
         <br />
         Also... I love the web because it's the only platform that is truly accepted by everyone, regardless of operating system, country, or government, the web is what ties us all together.
-        
+        <br />
+        <br />
+        <br />
+        <b>Application Use</b>
+        <br />
+        <br />
+        Search for companies currently on the Nasdaq market (start with first 3 letters), click the company name to view past month closing data in graph form. Click the
+        plus icon to add to watch list or the minus icon to remove from watch list. Again clicking on the company name from the watch list will load
+        graph data from the IEX API.
       </p>
     </div>
-
+    <button mat-raised-button color="primary" [routerLink]="['/home']">Back</button>
   </mat-card>
 </div>

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
 import { UserAdminComponent } from './user-admin/user-admin.component';
 import { AuthGuard } from './_guards/auth.guard';
+import { RoleGuard } from './_guards/role.guard';
 
 const routes: Routes = [
 	/* default path sends users to login */
@@ -14,7 +15,7 @@ const routes: Routes = [
 	{ path: 'login', component: LoginComponent },
 	{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
 	{ path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
-	{ path: 'user-admin', component: UserAdminComponent, canActivate: [AuthGuard] }
+	{ path: 'user-admin', component: UserAdminComponent, canActivate: [AuthGuard,RoleGuard] }
 
 ];
 

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { InMemoryDataService }  from './_mockdata/mock-data-nasdaq';
 
 import { EmitcomService } from './_services/emitcom.service';
 import { AuthGuard } from './_guards/auth.guard';
+import { RoleGuard } from './_guards/role.guard';
 
 import { AppRoutingModule } from './/app-routing.module';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -69,7 +70,8 @@ import { AboutComponent } from './about/about.component';
     
     EmitcomService,
     MatIconRegistry,
-    AuthGuard
+    AuthGuard,
+    RoleGuard
   ],
   bootstrap: [AppComponent]
 })

src/app/search-view/search-view.component.html

@@ -15,6 +15,7 @@
 
 				<mat-menu #menu="matMenu">
 					<button mat-menu-item [routerLink]="['/about']">About</button>
+					<button *ngIf="adminUser" mat-menu-item [routerLink]="['/user-admin']" >Admin</button>
 					<button mat-menu-item (click)="logout();" >Logout</button>
 				</mat-menu>
 			</div>

src/app/search-view/search-view.component.ts

@@ -15,6 +15,7 @@ export class SearchViewComponent implements OnInit {
 	
 	searchResults;
 	searchResultLogos;
+	adminUser = false;
 
   constructor(
   		private emitcomService: EmitcomService,
@@ -26,6 +27,11 @@ export class SearchViewComponent implements OnInit {
 
 	ngOnInit() {
 
+		/* TODO: The user needs to be a seprate component or just an object that is validated before the page is loaded. */
+		if (JSON.parse(localStorage.getItem('currentUser')).role == "B5") {
+            this.adminUser = true;
+        }
+
 	}
 
 	searchCompany( searchData ){

src/app/user-admin/user-admin.component.html

@@ -1,3 +1,23 @@
-<p>
-  user-admin works!
-</p>
+<div class="lrContainer">
+    <mat-card class="lrCard">
+  
+      <mat-card-header>
+        <mat-card-title>
+          <h2>Admin</h2>
+        </mat-card-title>
+      </mat-card-header>
+  
+      <div id="adminContent">
+        <b>Oops...</b>
+        <mat-divider></mat-divider>
+        <br />
+        <p>
+          Well it's Wednesday 9/12/2018 and with all the self inflicted scope creep I have run out of time to build this page.
+          <br />
+          <br />
+          On the flip side yay the app is done!
+        </p>
+      </div>
+      <button mat-raised-button color="primary" [routerLink]="['/home']">Back</button>
+    </mat-card>
+  </div>