Users

src/app/app-routing.module.ts

@@ -0,0 +1,32 @@
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+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: 'user/:id', component: UserDetailComponent}
+  ];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+    )
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}

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>

src/app/app.module.ts

@@ -1,18 +1,37 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.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
+    AppComponent,
+    DashboardComponent,
+    HomepageComponent,
+    LoginComponent,
+    RegisterComponent,
+    UserDetailComponent,
+    UsersComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    FormsModule
   ],
-  providers: [],
+  providers: [UserService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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;
+}

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>

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();
+  });
+});

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));
+  }
+}

src/app/homepage/homepage.component.html

@@ -0,0 +1,7 @@
+<h1 class="uppercase centered">Homepage</h1>
+<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>
+</nav>
+<app-dashboard></app-dashboard>

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();
+  });
+});

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() {
+  }
+
+}

src/app/login/login.component.html

@@ -0,0 +1,27 @@
+<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>
+
+<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>

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();
+  });
+});

src/app/login/login.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+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');
+  }
+}

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'},
+];

src/app/register/register.component.css

@@ -0,0 +1,3 @@
+.formControl {
+    padding:10px;
+}

src/app/register/register.component.html

@@ -0,0 +1,40 @@
+<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>