Angular Security course

Author: jhades

package-lock.json

@@ -1,8 +1,26 @@
-
-
 import {DbUser} from "./db-user";
 
-export const USERS: {[key:number]:DbUser} = {};
+export const USERS: { [key: number]: DbUser } = {
+    1: {
+        id: 1,
+        email: 'admin@gmail.com',
+        // ADMIN user (password is Password10) can read all lessons and also can login on behalf of other users
+        passwordDigest: '$argon2i$v=19$m=4096,t=3,p=1$PcKtsL4a6+xuPbMCKPep7A$rrFO2lKZcAVguIMaSGaf3hMrKtb6wUG4zN/wDG+xNts',
+        roles: [
+            'READ:LESSONS'
+        ]
+    },
+    2: {
+        id: 1,
+        email: 'user@gmail.com',
+        // normal user (password is Password10), does not have access to login as another user functionality
+        passwordDigest: '$argon2i$v=19$m=4096,t=3,p=1$PcKtsL4a6+xuPbMCKPep7A$rrFO2lKZcAVguIMaSGaf3hMrKtb6wUG4zN/wDG+xNts',
+        roles: [
+            'READ:LESSONS',
+            'ADMIN'
+        ]
+    }
+};
 
 
 export const LESSONS = {

server/database-data.ts

@@ -29,7 +29,8 @@ class InMemoryDatabase {
         const user: DbUser = {
             id,
             email,
-            passwordDigest
+            passwordDigest,
+            roles: ["READ:LESSONS"]
         };
 
         USERS[id] = user;

server/database.ts

@@ -3,5 +3,6 @@
 export interface DbUser {
     id:number;
     email:string;
-    passwordDigest:string;
+    passwordDigest:string,
+    roles: string[]
 }

server/db-user.ts

@@ -10,7 +10,7 @@ export function getUser(req:Request, res:Response) {
     const user = db.findUserById(req["userId"]);
 
     if (user) {
-        res.status(200).json({email:user.email, id:user.id});
+        res.status(200).json({email:user.email, id:user.id, roles: user.roles});
     }
     else {
         res.sendStatus(204);

server/get-user.route.ts

@@ -0,0 +1,17 @@
+
+<form autocomplete="off" novalidate [formGroup]="form">
+
+    <fieldset>
+        <legend>Login As User</legend>
+        <div class="form-field">
+            <label>Email:</label>
+            <input name="userEmail" formControlName="userEmail">
+        </div>
+    </fieldset>
+
+    <div class="form-buttons">
+        <button class="button button-primary" (click)="loginAsUser()">Login As User</button>
+    </div>
+
+
+</form>

src/app/admin/admin.component.css

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {AuthService} from "../services/auth.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.css', '../common/forms.css']
+})
+export class AdminComponent {
+
+    form:FormGroup;
+
+    constructor(private fb:FormBuilder, private authService: AuthService, private router: Router) {
+
+        this.form = this.fb.group({
+            userEmail: ['user@gmail.com',Validators.required]
+        });
+    }
+
+
+    loginAsUser() {
+
+        const val = this.form.value;
+
+        if (val.email && val.password) {
+
+            this.authService.loginAsUser(val.email)
+                .subscribe(
+                    () => {
+                        console.log("Logged in as user with email " + val.email);
+                        this.router.navigateByUrl('/');
+                    }
+                );
+
+        }
+
+
+    }
+
+}

src/app/admin/admin.component.html

@@ -9,6 +9,9 @@
         <li>
             <a routerLink="/lessons">Lessons</a>
         </li>
+        <li>
+            <a routerLink="/admin">ADMIN</a>
+        </li>
         <li *ngIf="isLoggedOut$ | async">
             <a routerLink="/signup">Sign Up</a>
         </li>

src/app/admin/admin.component.ts

@@ -21,14 +21,16 @@ import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/catch';
 
 import 'rxjs/add/observable/of';
+import { AdminComponent } from './admin/admin.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     LessonsComponent,
     LoginComponent,
-    SignupComponent
+    SignupComponent,
+    AdminComponent
   ],
   imports: [
     BrowserModule,

src/app/app.component.html

@@ -21,7 +21,7 @@ export class LoginComponent implements OnInit {
     constructor(private fb:FormBuilder, private authService: AuthService, private router: Router) {
 
         this.form = this.fb.group({
-            email: ['test@gmail.com',Validators.required],
+            email: ['user@gmail.com',Validators.required],
             password: ['Password10',Validators.required]
         });
 

src/app/app.module.ts

@@ -1,7 +1,7 @@
 
-export interface User {
 
+export interface User {
     id:number;
     email:string;
-
+    roles: string[];
 }

src/app/login/login.component.ts

@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
 import {LessonsComponent} from "./lessons/lessons.component";
 import {LoginComponent} from "./login/login.component";
 import {SignupComponent} from "./signup/signup.component";
+import {AdminComponent} from "./admin/admin.component";
 
 export const routesConfig: Routes = [
     {
@@ -16,6 +17,10 @@ export const routesConfig: Routes = [
         path: 'signup',
         component: SignupComponent
     },
+    {
+        path: 'admin',
+        component: AdminComponent
+    },
     {
         path: '',
         redirectTo:'/lessons',

src/app/model/user.ts

@@ -6,7 +6,8 @@ import {BehaviorSubject} from "rxjs/BehaviorSubject";
 
 export const ANONYMOUS_USER: User = {
     id: undefined,
-    email: ''
+    email: '',
+    roles: []
 }
 
 
@@ -26,9 +27,6 @@ export class AuthService {
             .subscribe(user => this.subject.next(user ? user : ANONYMOUS_USER));
     }
 
-
-
-
     signUp(email:string, password:string ) {
 
         return this.http.post<User>('/api/signup', {email, password})
@@ -42,6 +40,12 @@ export class AuthService {
             .do(user => this.subject.next(user));
     }
 
+    loginAsUser(email:string) {
+        return this.http.post<User>('/api/admin', {email})
+            .shareReplay()
+            .do(user => this.subject.next(user));
+    }
+
     logout() : Observable<any> {
         return this.http.post('/api/logout', null)
             .shareReplay()