From 07c4967e2034476b703200dd7256318dba8897d0 Mon Sep 17 00:00:00 2001
From: Daniela Calcaianu <danacalcaianu@yahoo.com>
Date: Tue, 29 May 2018 13:36:31 +0300
Subject: [PATCH 01/11] added homepage and login routes

---
 src/app/app-routing.module.ts               | 23 +++++++++++++++++++
 src/app/app.component.html                  | 21 +----------------
 src/app/app.module.ts                       | 10 +++++++--
 src/app/homepage/homepage.component.css     |  0
 src/app/homepage/homepage.component.html    |  1 +
 src/app/homepage/homepage.component.spec.ts | 25 +++++++++++++++++++++
 src/app/homepage/homepage.component.ts      | 15 +++++++++++++
 src/app/login/login.component.css           |  0
 src/app/login/login.component.html          |  1 +
 src/app/login/login.component.spec.ts       | 25 +++++++++++++++++++++
 src/app/login/login.component.ts            | 15 +++++++++++++
 11 files changed, 114 insertions(+), 22 deletions(-)
 create mode 100644 src/app/app-routing.module.ts
 create mode 100644 src/app/homepage/homepage.component.css
 create mode 100644 src/app/homepage/homepage.component.html
 create mode 100644 src/app/homepage/homepage.component.spec.ts
 create mode 100644 src/app/homepage/homepage.component.ts
 create mode 100644 src/app/login/login.component.css
 create mode 100644 src/app/login/login.component.html
 create mode 100644 src/app/login/login.component.spec.ts
 create mode 100644 src/app/login/login.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000..8270ead
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,23 @@
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { LoginComponent } from './login/login.component';
+import { HomepageComponent } from './homepage/homepage.component';
+
+const appRoutes: Routes = [
+    { path: '', component: HomepageComponent },
+    { path: 'login', component: LoginComponent },
+  ];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+    )
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fa2706a..0680b43 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926975a..ece7cb9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,14 +3,20 @@ import { NgModule } from '@angular/core';
 
 
 import { AppComponent } from './app.component';
+import { LoginComponent } from './login/login.component';
+import { AppRoutingModule } from './app-routing.module';
+import { HomepageComponent } from './homepage/homepage.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    LoginComponent,
+    HomepageComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/homepage/homepage.component.css b/src/app/homepage/homepage.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
new file mode 100644
index 0000000..7515126
--- /dev/null
+++ b/src/app/homepage/homepage.component.html
@@ -0,0 +1 @@
+<h1>Homepage</h1>
\ No newline at end of file
diff --git a/src/app/homepage/homepage.component.spec.ts b/src/app/homepage/homepage.component.spec.ts
new file mode 100644
index 0000000..8d1d3bb
--- /dev/null
+++ b/src/app/homepage/homepage.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomepageComponent } from './homepage.component';
+
+describe('HomepageComponent', () => {
+  let component: HomepageComponent;
+  let fixture: ComponentFixture<HomepageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomepageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomepageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/homepage/homepage.component.ts b/src/app/homepage/homepage.component.ts
new file mode 100644
index 0000000..c87ff1c
--- /dev/null
+++ b/src/app/homepage/homepage.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-homepage',
+  templateUrl: './homepage.component.html',
+  styleUrls: ['./homepage.component.css']
+})
+export class HomepageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 0000000..9d8b1ad
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1 @@
+<h1>Login</h1>
\ No newline at end of file
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000..d6d85a8
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 0000000..5701fa2
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From 429891d654b3e0a52bd537a51ddf77f0839b7aa5 Mon Sep 17 00:00:00 2001
From: Daniela Calcaianu <danacalcaianu@yahoo.com>
Date: Tue, 29 May 2018 15:10:51 +0300
Subject: [PATCH 02/11] added register route and login form

---
 src/app/app-routing.module.ts               |  2 ++
 src/app/app.module.ts                       |  8 +++++--
 src/app/homepage/homepage.component.html    |  3 ++-
 src/app/login/login.component.html          | 26 ++++++++++++++++++++-
 src/app/login/login.component.ts            | 12 ++++++++++
 src/app/register/register.component.css     |  0
 src/app/register/register.component.html    |  3 +++
 src/app/register/register.component.spec.ts | 25 ++++++++++++++++++++
 src/app/register/register.component.ts      | 15 ++++++++++++
 9 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 src/app/register/register.component.css
 create mode 100644 src/app/register/register.component.html
 create mode 100644 src/app/register/register.component.spec.ts
 create mode 100644 src/app/register/register.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8270ead..85e6dc7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,10 +4,12 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { LoginComponent } from './login/login.component';
 import { HomepageComponent } from './homepage/homepage.component';
+import { RegisterComponent } from './register/register.component';
 
 const appRoutes: Routes = [
     { path: '', component: HomepageComponent },
     { path: 'login', component: LoginComponent },
+    { path: 'register', component: RegisterComponent },
   ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ece7cb9..3e7652d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,22 +1,26 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 
 
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HomepageComponent } from './homepage/homepage.component';
+import { RegisterComponent } from './register/register.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    HomepageComponent
+    HomepageComponent,
+    RegisterComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
index 7515126..413e598 100644
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -1 +1,2 @@
-<h1>Homepage</h1>
\ No newline at end of file
+<h1>Homepage</h1>
+<a routerLink="/login" routerLinkActive="active">Login</a>
\ No newline at end of file
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 9d8b1ad..8b5121d 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1 +1,25 @@
-<h1>Login</h1>
\ No newline at end of file
+<h1>Login</h1>
+<div *ngIf="username.invalid && (username.dirty || username.touched)">
+  <div *ngIf="username.errors.required">
+    please enter the username
+  </div>
+</div>
+
+<div *ngIf="password.invalid && (password.dirty || password.touched)">
+  <div *ngIf="password.errors.required">
+    please enter the password
+  </div>
+</div>
+
+<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> 
+  <label> username:
+    <input class="form-control" formControlName="username">
+  </label>
+  <label> password:
+    <input class="form-control" formControlName="password">
+  </label>
+  <button type="submit" [disabled]="loginForm.invalid">Save</button>
+</form>
+
+<a routerLink="/" routerLinkActive="active">Back to homepage</a>
+<a routerLink="/register" routerLinkActive="active">Don't have an account? Register</a>
\ No newline at end of file
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 5701fa2..119d04e 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +8,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
+  loginForm = new FormGroup ({
+    username: new FormControl('', [Validators.required, Validators.minLength(4)]),
+    password: new FormControl('', [Validators.required, Validators.minLength(1)])
+  });
+  get username() { return this.loginForm.get('username'); }
+
+  get password() { return this.loginForm.get('password'); }
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  onSubmit() {
+    console.log('login');
+  }
 }
diff --git a/src/app/register/register.component.css b/src/app/register/register.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html
new file mode 100644
index 0000000..665902b
--- /dev/null
+++ b/src/app/register/register.component.html
@@ -0,0 +1,3 @@
+<p>
+  register works!
+</p>
diff --git a/src/app/register/register.component.spec.ts b/src/app/register/register.component.spec.ts
new file mode 100644
index 0000000..6c19551
--- /dev/null
+++ b/src/app/register/register.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts
new file mode 100644
index 0000000..b7db7f8
--- /dev/null
+++ b/src/app/register/register.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.css']
+})
+export class RegisterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From 879d2299a644bc93003a536d06a2708f786111c8 Mon Sep 17 00:00:00 2001
From: Daniela Calcaianu <danacalcaianu@yahoo.com>
Date: Wed, 30 May 2018 11:06:31 +0300
Subject: [PATCH 03/11] register component form

---
 src/app/homepage/homepage.component.html |  7 ++--
 src/app/login/login.component.html       |  8 +++--
 src/app/register/register.component.css  |  3 ++
 src/app/register/register.component.html | 43 ++++++++++++++++++++++--
 src/app/register/register.component.ts   | 22 +++++++++++-
 5 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
index 413e598..ff65a0f 100644
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -1,2 +1,5 @@
-<h1>Homepage</h1>
-<a routerLink="/login" routerLinkActive="active">Login</a>
\ No newline at end of file
+<h1 class="uppercase centered">Homepage</h1>
+<div class="navigation-links">
+  <a routerLink="/login" routerLinkActive="active">Login</a>
+  <a routerLink="/register" routerLinkActive="active">Register</a>
+</div>
\ No newline at end of file
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 8b5121d..2f076b2 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -11,7 +11,7 @@ <h1>Login</h1>
   </div>
 </div>
 
-<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> 
+<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
   <label> username:
     <input class="form-control" formControlName="username">
   </label>
@@ -21,5 +21,7 @@ <h1>Login</h1>
   <button type="submit" [disabled]="loginForm.invalid">Save</button>
 </form>
 
-<a routerLink="/" routerLinkActive="active">Back to homepage</a>
-<a routerLink="/register" routerLinkActive="active">Don't have an account? Register</a>
\ No newline at end of file
+<div class="navigation-links">
+  <a routerLink="/" routerLinkActive="active">Back to homepage</a>
+  <a routerLink="/register" routerLinkActive="active">Don't have an account? Register</a>
+</div>
\ No newline at end of file
diff --git a/src/app/register/register.component.css b/src/app/register/register.component.css
index e69de29..17292cc 100644
--- a/src/app/register/register.component.css
+++ b/src/app/register/register.component.css
@@ -0,0 +1,3 @@
+.formControl {
+    padding:10px;
+}
\ No newline at end of file
diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html
index 665902b..4cf0477 100644
--- a/src/app/register/register.component.html
+++ b/src/app/register/register.component.html
@@ -1,3 +1,40 @@
-<p>
-  register works!
-</p>
+<h1>Register</h1>
+<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+  <div class="formControl">
+    <label>First Name:
+      <input formControlName="firstName">
+    </label>
+  </div>
+  <div class="formControl">
+    <label>Last Name:
+      <input formControlName="lastName">
+    </label>
+  </div>
+  <div class="formControl">
+    <label>Username:
+      <input formControlName="username">
+    </label>
+  </div>
+  <div class="formControl">
+    <label>Password:
+      <input formControlName="password">
+    </label>
+  </div>
+  <div class="formControl">
+    <label>Address:
+      <input formControlName="address">
+    </label>
+  </div>
+  <div class="formControl">
+    <label>Phone number:
+      <input formControlName="phone">
+    </label>
+  </div>
+  <div class="formControl">
+    <label>Email:
+      <input formControlName="email">
+    </label>
+  </div>
+  <button type="submit" [disabled]="registerForm.invalid">Save</button>
+</form>
+<a routerLink="/" routerLinkActive="active">Back to homepage</a>
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts
index b7db7f8..903e4c7 100644
--- a/src/app/register/register.component.ts
+++ b/src/app/register/register.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-register',
@@ -7,9 +8,28 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RegisterComponent implements OnInit {
 
-  constructor() { }
+  registerForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.createForm();
+  }
 
   ngOnInit() {
   }
 
+  createForm() {
+    this.registerForm = this.fb.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      username: ['', Validators.required],
+      password: ['', Validators.required],
+      address: '',
+      phone: '',
+      email: ['', Validators.required]
+    });
+  }
+
+  onSubmit() {
+
+  }
 }

From dc8bc7485d8f70caeee048b099a39c9752ed8a00 Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Wed, 30 May 2018 18:20:57 +0300
Subject: [PATCH 04/11] Add global styles for some elementS

---
 src/styles.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..1956581 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,33 @@
 /* You can add global styles to this file, and also import other style files */
+h1 {
+    color: #369;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 250%;
+}
+h2, h3 {
+    color: #444;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: lighter;
+}
+body {
+    margin: 2em;
+}
+body, input[text], button {
+    color: #888;
+    font-family: Cambria, Georgia;
+}
+a {
+    text-decoration: none;
+    color: #1976d2;
+}
+ul {
+    list-style: none;
+    padding: 0;
+}
+li {
+    border-radius: 5px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    margin: .5em;
+    padding: .3em 0;
+}

From 65e263e9691015df6e2afe0b8f98927123805651 Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Wed, 30 May 2018 18:23:39 +0300
Subject: [PATCH 05/11] Add user class and users mock data

---
 src/app/mock-users.ts | 12 ++++++++++++
 src/app/user.ts       |  4 ++++
 2 files changed, 16 insertions(+)
 create mode 100644 src/app/mock-users.ts
 create mode 100644 src/app/user.ts

diff --git a/src/app/mock-users.ts b/src/app/mock-users.ts
new file mode 100644
index 0000000..97a499e
--- /dev/null
+++ b/src/app/mock-users.ts
@@ -0,0 +1,12 @@
+import { User } from './user';
+
+export const USERS: User[] = [
+    { id: 1, name: 'Jon Doe' },
+    { id: 2, name: 'Jane Doe'},
+    { id: 3, name: 'Mark Clarck'},
+    { id: 4, name: 'Joe Shmoe'},
+    { id: 5, name: 'Louie Booey'},
+    { id: 6, name: 'Alfred Malfred'},
+    { id: 7, name: 'Rick Rickson'},
+    { id: 8, name: 'Harry Berry'},
+];
diff --git a/src/app/user.ts b/src/app/user.ts
new file mode 100644
index 0000000..ebfc1a4
--- /dev/null
+++ b/src/app/user.ts
@@ -0,0 +1,4 @@
+export class User {
+    id: number;
+    name: string;
+}

From aa06599ca548f03efa7e87ea383785c7378262da Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Wed, 30 May 2018 18:26:10 +0300
Subject: [PATCH 06/11] Add users component

---
 src/app/app-routing.module.ts            |  2 ++
 src/app/app.module.ts                    |  9 ++++++---
 src/app/homepage/homepage.component.html |  1 +
 src/app/users/users.component.html       | 12 ++++++++++++
 src/app/users/users.component.spec.ts    | 25 ++++++++++++++++++++++++
 src/app/users/users.component.ts         | 23 ++++++++++++++++++++++
 6 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/app/users/users.component.html
 create mode 100644 src/app/users/users.component.spec.ts
 create mode 100644 src/app/users/users.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 85e6dc7..b56893f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,11 +5,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { RegisterComponent } from './register/register.component';
+import { UsersComponent } from './users/users.component';
 
 const appRoutes: Routes = [
     { path: '', component: HomepageComponent },
     { path: 'login', component: LoginComponent },
     { path: 'register', component: RegisterComponent },
+    { path: 'users', component: UsersComponent}
   ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3e7652d..4ca6499 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 
 import { AppComponent } from './app.component';
@@ -8,6 +8,7 @@ import { LoginComponent } from './login/login.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HomepageComponent } from './homepage/homepage.component';
 import { RegisterComponent } from './register/register.component';
+import { UsersComponent } from './users/users.component';
 
 
 @NgModule({
@@ -15,12 +16,14 @@ import { RegisterComponent } from './register/register.component';
     AppComponent,
     LoginComponent,
     HomepageComponent,
-    RegisterComponent
+    RegisterComponent,
+    UsersComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
index ff65a0f..af9aabe 100644
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -2,4 +2,5 @@ <h1 class="uppercase centered">Homepage</h1>
 <div class="navigation-links">
   <a routerLink="/login" routerLinkActive="active">Login</a>
   <a routerLink="/register" routerLinkActive="active">Register</a>
+  <a routerLink="/users" routerLinkActive="active">Users</a>
 </div>
\ No newline at end of file
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
new file mode 100644
index 0000000..c78b416
--- /dev/null
+++ b/src/app/users/users.component.html
@@ -0,0 +1,12 @@
+<h2>Users</h2>
+  <ul class="users">
+    <li *ngFor="let user of users" 
+      class="user"
+      [class.selected]="user === selectedUser" 
+      (click)="onSelectUser(user)">
+      <span class="id">{{user.id}}</span>
+      <span class="name">{{user.name}}</span>
+    </li>
+  </ul>
+  <a routerLink="/">Home</a>
+
diff --git a/src/app/users/users.component.spec.ts b/src/app/users/users.component.spec.ts
new file mode 100644
index 0000000..909b5ba
--- /dev/null
+++ b/src/app/users/users.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
new file mode 100644
index 0000000..bf8d01c
--- /dev/null
+++ b/src/app/users/users.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { User } from '../user';
+import { USERS } from '../mock-users';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.css']
+})
+export class UsersComponent implements OnInit {
+  users = USERS;
+  selectedUser: User;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onSelectUser(user: User): void {
+    this.selectedUser = user;
+  }
+
+}

From 23d5e59865568614787a0151e37c749fa35486b9 Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Wed, 30 May 2018 18:26:54 +0300
Subject: [PATCH 07/11] Add user detail component

---
 src/app/app.module.ts                         |  2 ++
 .../user-detail/user-detail.component.html    |  9 +++++++
 .../user-detail/user-detail.component.spec.ts | 25 +++++++++++++++++++
 src/app/user-detail/user-detail.component.ts  | 17 +++++++++++++
 src/app/users/users.component.html            |  1 +
 5 files changed, 54 insertions(+)
 create mode 100644 src/app/user-detail/user-detail.component.html
 create mode 100644 src/app/user-detail/user-detail.component.spec.ts
 create mode 100644 src/app/user-detail/user-detail.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4ca6499..237a149 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { HomepageComponent } from './homepage/homepage.component';
 import { RegisterComponent } from './register/register.component';
 import { UsersComponent } from './users/users.component';
+import { UserDetailComponent } from './user-detail/user-detail.component';
 
 
 @NgModule({
@@ -18,6 +19,7 @@ import { UsersComponent } from './users/users.component';
     HomepageComponent,
     RegisterComponent,
     UsersComponent,
+    UserDetailComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/user-detail/user-detail.component.html b/src/app/user-detail/user-detail.component.html
new file mode 100644
index 0000000..ad611d6
--- /dev/null
+++ b/src/app/user-detail/user-detail.component.html
@@ -0,0 +1,9 @@
+<div class="user-detail-section" *ngIf="user">
+    <h2>{{user.name | uppercase}} User Details</h2>
+    <div><span>Id:</span>{{user.id}}</div>
+    <div>
+      <label>name:
+        <input [(ngModel)]="user.name" placeholder="name">
+      </label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/user-detail/user-detail.component.spec.ts b/src/app/user-detail/user-detail.component.spec.ts
new file mode 100644
index 0000000..81b7580
--- /dev/null
+++ b/src/app/user-detail/user-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDetailComponent } from './user-detail.component';
+
+describe('UserDetailComponent', () => {
+  let component: UserDetailComponent;
+  let fixture: ComponentFixture<UserDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user-detail/user-detail.component.ts b/src/app/user-detail/user-detail.component.ts
new file mode 100644
index 0000000..81427fe
--- /dev/null
+++ b/src/app/user-detail/user-detail.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { User } from '../user';
+
+@Component({
+  selector: 'app-user-detail',
+  templateUrl: './user-detail.component.html',
+  styleUrls: ['./user-detail.component.css']
+})
+export class UserDetailComponent implements OnInit {
+  @Input() user: User;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index c78b416..2c39c50 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -8,5 +8,6 @@ <h2>Users</h2>
       <span class="name">{{user.name}}</span>
     </li>
   </ul>
+  <app-user-detail [user]="selectedUser"></app-user-detail>
   <a routerLink="/">Home</a>
 

From 7840ab952473c39e38c19a2b38f5991cfb669b6a Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Wed, 30 May 2018 18:27:21 +0300
Subject: [PATCH 08/11] Add the css files

---
 src/app/user-detail/user-detail.component.css |  0
 src/app/users/users.component.css             | 27 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/app/user-detail/user-detail.component.css
 create mode 100644 src/app/users/users.component.css

diff --git a/src/app/user-detail/user-detail.component.css b/src/app/user-detail/user-detail.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/users/users.component.css b/src/app/users/users.component.css
new file mode 100644
index 0000000..c22c43c
--- /dev/null
+++ b/src/app/users/users.component.css
@@ -0,0 +1,27 @@
+.users {
+    margin: 0 0 2em 0;
+    width: 15em;
+}
+
+.user {
+    background-color: #575757;
+    color: white;
+    padding: 5px;
+}
+
+.user-detail-section {
+    margin: .5em;
+    padding: .5em;
+    border: 2px solid #575757;
+    width: 450px; 
+}
+
+.selected {
+    background-color: #CFD8DC;
+    color: white;
+}
+
+.user:hover {
+    background-color: #CFD8DC;
+    color: white;
+}
\ No newline at end of file

From 482088630aca382037766d67d8143156cf2df736 Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Thu, 31 May 2018 17:03:30 +0300
Subject: [PATCH 09/11] Add user service

---
 src/app/user.service.spec.ts | 15 +++++++++++++++
 src/app/user.service.ts      | 16 ++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/app/user.service.spec.ts
 create mode 100644 src/app/user.service.ts

diff --git a/src/app/user.service.spec.ts b/src/app/user.service.spec.ts
new file mode 100644
index 0000000..b26195c
--- /dev/null
+++ b/src/app/user.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UserService]
+    });
+  });
+
+  it('should be created', inject([UserService], (service: UserService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/user.service.ts b/src/app/user.service.ts
new file mode 100644
index 0000000..1e0dce2
--- /dev/null
+++ b/src/app/user.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { User } from './user';
+import { USERS } from './mock-users';
+
+@Injectable()
+export class UserService {
+
+  constructor() { }
+
+  getUsers(): Observable<User[]> {
+    return of(USERS);
+  }
+}

From 18034891ce6937cd5ee76a99d20cd7b40f7a20af Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Thu, 31 May 2018 17:13:48 +0300
Subject: [PATCH 10/11] Add dashboard component

---
 src/app/app-routing.module.ts                 |  9 +++-
 src/app/app.module.ts                         | 16 ++++---
 src/app/dashboard/dashboard.component.css     | 46 +++++++++++++++++++
 src/app/dashboard/dashboard.component.html    |  8 ++++
 src/app/dashboard/dashboard.component.spec.ts | 25 ++++++++++
 src/app/dashboard/dashboard.component.ts      | 21 +++++++++
 src/app/homepage/homepage.component.html      |  5 +-
 src/app/users/users.component.css             |  9 ++--
 src/app/users/users.component.html            | 10 ++--
 9 files changed, 129 insertions(+), 20 deletions(-)
 create mode 100644 src/app/dashboard/dashboard.component.css
 create mode 100644 src/app/dashboard/dashboard.component.html
 create mode 100644 src/app/dashboard/dashboard.component.spec.ts
 create mode 100644 src/app/dashboard/dashboard.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b56893f..dfee5ac 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,16 +2,21 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { LoginComponent } from './login/login.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { HomepageComponent } from './homepage/homepage.component';
+import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
+import { UserDetailComponent } from './user-detail/user-detail.component';
 import { UsersComponent } from './users/users.component';
 
+
 const appRoutes: Routes = [
     { path: '', component: HomepageComponent },
+    { path: 'dashboard', component: DashboardComponent },
     { path: 'login', component: LoginComponent },
     { path: 'register', component: RegisterComponent },
-    { path: 'users', component: UsersComponent}
+    { path: 'users', component: UsersComponent},
+    { path: 'user/:id', component: UserDetailComponent}
   ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 237a149..a47844a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,24 +2,28 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
-
 import { AppComponent } from './app.component';
-import { LoginComponent } from './login/login.component';
 import { AppRoutingModule } from './app-routing.module';
+
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { HomepageComponent } from './homepage/homepage.component';
+import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { UsersComponent } from './users/users.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 
+import { UserService } from './user.service';
+
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent,
+    DashboardComponent,
     HomepageComponent,
+    LoginComponent,
     RegisterComponent,
-    UsersComponent,
-    UserDetailComponent
+    UserDetailComponent,
+    UsersComponent
   ],
   imports: [
     BrowserModule,
@@ -27,7 +31,7 @@ import { UserDetailComponent } from './user-detail/user-detail.component';
     ReactiveFormsModule,
     FormsModule
   ],
-  providers: [],
+  providers: [UserService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
new file mode 100644
index 0000000..6149c07
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.css
@@ -0,0 +1,46 @@
+[class*='col-'] {
+    float: left;
+    padding-right: 20px;
+    padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+    padding-right: 0;
+}
+*, *:after, *:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+h2 {
+    text-align: center; margin-bottom: 0;
+}
+h4 {
+    position: relative;
+}
+.grid {
+    margin: 0;
+}
+.col-1-4 {
+    width: 25%;
+}
+.grid-pad {
+    padding: 10px 0;
+}
+
+.grid-pad > [class*='col-']:last-of-type {
+    padding-right: 20px;
+}
+.grid-card {
+    padding: 20px;
+    text-align: center;
+    color: #eee;
+    max-height: 120px;
+    min-width: 120px;
+    background-color: #607D8B;
+    border-radius: 2px;
+}
+.grid-card:hover {
+    background-color: #EEE;
+    cursor: pointer;
+    color: #607d8b;
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000..3721e1c
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,8 @@
+<h2>Top users</h2>
+<div class="grid grid-pad">
+  <a *ngFor="let user of users" class="col-1-4" routerLink='/user/{{user.id}}'>
+    <div class="grid-card">
+      <h4>{{user.name}}</h4>
+    </div>
+  </a>
+</div>
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..9c996c3
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..c389634
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { User } from '../user';
+import { UserService } from '../user.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+  users: User[];
+  constructor(private userService: UserService) { }
+
+  ngOnInit() {
+    this.getUsers();
+  }
+
+  getUsers(): void {
+    this.userService.getUsers().subscribe(res => this.users = res.slice(0, 4));
+  }
+}
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
index af9aabe..e28fd6e 100644
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -1,6 +1,7 @@
 <h1 class="uppercase centered">Homepage</h1>
-<div class="navigation-links">
+<nav class="navigation-links">
   <a routerLink="/login" routerLinkActive="active">Login</a>
   <a routerLink="/register" routerLinkActive="active">Register</a>
   <a routerLink="/users" routerLinkActive="active">Users</a>
-</div>
\ No newline at end of file
+</nav>
+<app-dashboard></app-dashboard>
\ No newline at end of file
diff --git a/src/app/users/users.component.css b/src/app/users/users.component.css
index c22c43c..5ba966b 100644
--- a/src/app/users/users.component.css
+++ b/src/app/users/users.component.css
@@ -9,6 +9,10 @@
     padding: 5px;
 }
 
+.user a {
+    color: white;
+}
+
 .user-detail-section {
     margin: .5em;
     padding: .5em;
@@ -16,11 +20,6 @@
     width: 450px; 
 }
 
-.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-
 .user:hover {
     background-color: #CFD8DC;
     color: white;
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index 2c39c50..439a0b9 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -1,11 +1,11 @@
 <h2>Users</h2>
   <ul class="users">
     <li *ngFor="let user of users" 
-      class="user"
-      [class.selected]="user === selectedUser" 
-      (click)="onSelectUser(user)">
-      <span class="id">{{user.id}}</span>
-      <span class="name">{{user.name}}</span>
+      class="user">
+      <a routerLink="/user/{{user.id}}">
+        <span class="id">{{user.id}}</span>
+        {{user.name}}
+      </a>
     </li>
   </ul>
   <app-user-detail [user]="selectedUser"></app-user-detail>

From 35ba33d35f0b5b5615d7edc608bcbf3e57921f79 Mon Sep 17 00:00:00 2001
From: Helga Gabriela Paulger <helga.bucur@fortech.ro>
Date: Thu, 31 May 2018 17:45:27 +0300
Subject: [PATCH 11/11] Use router link parameters to navigate to the user
 detail view

---
 .../user-detail/user-detail.component.html    |  3 ++-
 src/app/user-detail/user-detail.component.ts  | 23 ++++++++++++++++---
 src/app/user.service.ts                       |  5 ++++
 src/app/users/users.component.html            |  1 -
 src/app/users/users.component.ts              |  5 ----
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/app/user-detail/user-detail.component.html b/src/app/user-detail/user-detail.component.html
index ad611d6..64e0339 100644
--- a/src/app/user-detail/user-detail.component.html
+++ b/src/app/user-detail/user-detail.component.html
@@ -6,4 +6,5 @@ <h2>{{user.name | uppercase}} User Details</h2>
         <input [(ngModel)]="user.name" placeholder="name">
       </label>
     </div>
-</div>
\ No newline at end of file
+</div>
+<button (click)="goBack()">Go back</button>
\ No newline at end of file
diff --git a/src/app/user-detail/user-detail.component.ts b/src/app/user-detail/user-detail.component.ts
index 81427fe..8748239 100644
--- a/src/app/user-detail/user-detail.component.ts
+++ b/src/app/user-detail/user-detail.component.ts
@@ -1,5 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { User } from '../user';
+import { ActivatedRoute } from '@angular/router';
+import { UserService } from '../user.service';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-user-detail',
@@ -7,11 +10,25 @@ import { User } from '../user';
   styleUrls: ['./user-detail.component.css']
 })
 export class UserDetailComponent implements OnInit {
-  @Input() user: User;
+  user: User;
 
-  constructor() { }
+  constructor(
+    private location: Location,
+    private route: ActivatedRoute,
+    private userService: UserService
+  ) { }
 
   ngOnInit() {
+    this.getUser();
+  }
+
+  getUser(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+    this.userService.getUser(id).subscribe(res => this.user = res);
+  }
+
+  goBack() {
+    this.location.back();
   }
 
 }
diff --git a/src/app/user.service.ts b/src/app/user.service.ts
index 1e0dce2..7905efc 100644
--- a/src/app/user.service.ts
+++ b/src/app/user.service.ts
@@ -13,4 +13,9 @@ export class UserService {
   getUsers(): Observable<User[]> {
     return of(USERS);
   }
+
+  getUser(id: number): Observable<User> {
+    const result = USERS.find(user => user.id === id);
+    return of(result);
+  }
 }
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index 439a0b9..1039f23 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -8,6 +8,5 @@ <h2>Users</h2>
       </a>
     </li>
   </ul>
-  <app-user-detail [user]="selectedUser"></app-user-detail>
   <a routerLink="/">Home</a>
 
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
index bf8d01c..e917cf1 100644
--- a/src/app/users/users.component.ts
+++ b/src/app/users/users.component.ts
@@ -9,15 +9,10 @@ import { USERS } from '../mock-users';
 })
 export class UsersComponent implements OnInit {
   users = USERS;
-  selectedUser: User;
 
   constructor() { }
 
   ngOnInit() {
   }
 
-  onSelectUser(user: User): void {
-    this.selectedUser = user;
-  }
-
 }