Registration flow

package.json

@@ -26,6 +26,7 @@
     "@ngrx/effects": "^2.0.0",
     "@ngrx/store": "^2.2.1",
     "@types/lodash": "4.14.50",
+    "angular2-image-upload": "^0.5.1",
     "core-js": "^2.4.1",
     "lodash": "^4.17.4",
     "ng2-validation": "^3.9.1",

src/app/app.component.ts

@@ -19,6 +19,7 @@ export class AppComponent implements OnInit {
     ngOnInit() {
       this.treeElements = [
         { title: 'Home', targetUrl: '/home', imageCssClass: 'glyphicon-globe' },
+        { title: 'Register', targetUrl: '/register', imageCssClass: 'glyphicon-user' },
         { title: 'Search', targetUrl: '/search', imageCssClass: 'glyphicon-search' },
         { title: 'Car', targetUrl: '/car', imageCssClass: 'glyphicon-road' },
         { title: 'Housing', targetUrl: '/housing', imageCssClass: 'glyphicon-home' }

src/app/app.module.ts

@@ -1,5 +1,6 @@
+import { registration } from './registration/reducers/registration.reducer';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
@@ -9,23 +10,28 @@ import { WidgitModule } from './widgit/widgit.module';
 import { CarRouteModule } from './car/car.route';
 import { HomeComponent } from './home/home.component';
 import { PageNotFoundComponent } from './404/pageNotFound.component';
-import {StoreModule, ActionReducer, combineReducers} from '@ngrx/store';
-import {cars} from './car/reducers/car.reducer';
-import {EffectsModule} from '@ngrx/effects';
-import {CarEffects} from './car/effects/cars.';
-import {HousingRouteModule} from './housing/housing.route';
-import {houses} from './housing/reducers/houses.reducer';
-import {HousingEffects} from 'app/housing/effects/housing';
-
+import { StoreModule, ActionReducer, combineReducers } from '@ngrx/store';
+import { cars } from './car/reducers/car.reducer';
+import { EffectsModule } from '@ngrx/effects';
+import { CarEffects } from './car/effects/cars.';
+import { HousingRouteModule } from './housing/housing.route';
+import { houses } from './housing/reducers/houses.reducer';
+import { HousingEffects } from 'app/housing/effects/housing';
+import { RegistrationModule } from './registration/registration.module';
+import { RegistrationEffects } from './registration/effects/registration';
+import { RegistrationRouteModule } from './registration/registration.route';
+import { ImageUploadModule } from 'angular2-image-upload';
 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'home' },
   { path: 'home', component: HomeComponent },
+  { path: 'register', loadChildren: './registration/registration.route#RegistrationRouteModule' },
   { path: 'car', loadChildren: './car/car.route#CarRouteModule' },
   { path: 'housing', loadChildren: './housing/housing.route#HousingRouteModule' },
   { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [
     AppComponent,
     HomeComponent,
@@ -35,16 +41,19 @@ const routes: Routes = [
     RouterModule.forRoot(routes),
     BrowserModule,
     FormsModule,
+    RegistrationModule,
     ReactiveFormsModule,
     HttpModule,
     RouterModule,
     CarRouteModule,
     HousingRouteModule,
+    RegistrationRouteModule,
     WidgitModule,
     NgbModule.forRoot(),
-    StoreModule.provideStore({cars, houses}),
+    StoreModule.provideStore({ cars, houses, registration }),
     EffectsModule.run(CarEffects),
-    EffectsModule.run(HousingEffects)
+    EffectsModule.run(HousingEffects),
+    EffectsModule.run(RegistrationEffects)
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home/home.component.html

@@ -1,3 +1,3 @@
 <p>
   Welcome to the Angular 2 playground!
-</p>
+</p>

src/app/registration/actions/registring.ts

@@ -0,0 +1,54 @@
+import { Registration } from './../domain/registration';
+import { type } from '../../utilities/type';
+import { Action } from '@ngrx/store';
+import { of } from 'rxjs/observable/of';
+
+export const RegistrationAction = {
+  START_REGISTRATION: type('Registration - start registration'),
+  CREATE_REGISTRATION: type('Registration - Add registration'),
+  ABORT_REGISTRATIONS: type('Registration - abort registrations'),
+};
+
+
+export class ActionFactory {
+
+
+  static startRegistration(registration: Registration): Action {
+    return new StartRegistrationAction(registration);
+  }
+
+  static createRegistration(registration: Registration): Action {
+    return new CreateRegistrationAction(registration);
+  }
+
+  static abortRegistration(registration: Registration): Action {
+    return new AbortRegistrationsAction(registration);
+  }
+
+  static getRegistration(registration) {
+    return registration;
+  }
+
+  static empty() {
+    return new Registration();
+  }
+}
+
+export class StartRegistrationAction implements Action {
+  type = RegistrationAction.START_REGISTRATION;
+
+  constructor(public payload: Registration) { }
+}
+
+
+export class CreateRegistrationAction implements Action {
+  type = RegistrationAction.CREATE_REGISTRATION;
+
+  constructor(public payload: Registration) { }
+}
+
+export class AbortRegistrationsAction implements Action {
+  type = RegistrationAction.ABORT_REGISTRATIONS;
+
+  constructor(public payload: Registration) { }
+}

src/app/registration/components/avatar/registration-avatar.component.html

@@ -0,0 +1,18 @@
+<div *ngIf="registration" class="registration-form">
+
+  <div class="form-group row">
+    <div class="col-10">
+      <image-upload [max]="1"  [buttonCaption]="'select avatar file'" [preview]="true" [dropBoxMessage]="'Drop your image here!'"
+        [fileTooLargeMessage]="'Image too large!'" (onFileUploadFinish)="upload($event)"></image-upload>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <div class="col-12">
+      <button *ngIf="registration.user.avatar" type="button" class="btn btn-primary" (click)="register()">confirm</button>
+      <button type="button" class="btn btn-primary" (click)="abort()">Cancel</button>
+
+    </div>
+  </div>
+</div>
+

src/app/registration/components/avatar/registration-avatar.component.ts

@@ -0,0 +1,41 @@
+import { ActionFactory } from './../../actions/registring';
+import { RegistrationsState, User } from './../../domain/registration';
+import { Router } from '@angular/router';
+import { Component, OnInit, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CustomValidators } from 'ng2-validation';
+import { Registration } from '../../domain/registration';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-registration-avatar',
+  templateUrl: 'registration-avatar.component.html',
+
+})
+export class RegistrationAvatarComponent implements OnInit {
+
+
+  public registration: Registration;
+
+  public constructor(private router: Router, private registringStore: Store<RegistrationsState>) {
+  }
+
+  ngOnInit() {
+    this.registringStore.select(state => state.registration).subscribe(registration => this.registration = registration);
+  }
+
+  upload(data: any) {
+    this.registration.user.avatar = data.src;
+  }
+
+  public register() {
+    this.registringStore.dispatch(ActionFactory.createRegistration(this.registration));
+    this.router.navigate(['/profile']);
+  }
+
+  public abort() {
+    this.registringStore.dispatch(ActionFactory.abortRegistration(this.registration));
+    this.router.navigate(['/home']);
+  }
+
+}

src/app/registration/components/contact/registration-info.component.html

@@ -0,0 +1,48 @@
+<div class="registration-form">
+  <form *ngIf="registration" [formGroup]="registrationForm" (ngSubmit)="startRegistration($event)">
+
+    <div class="form-group row">
+      <label for="firstName-input" class="col-2 col-form-label">firstName</label>
+      <div class="col-10">
+        <input class="form-control" type="text" id="firstName-input" placeholder="firstName" formControlName="firstName" [(ngModel)]="user.firstName"
+        />
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="lastName-input" class="col-2 col-form-label">lastName</label>
+      <div class="col-10">
+        <input class="form-control" type="text" id="lastName-input" placeholder="lastName" formControlName="lastName" [(ngModel)]="user.lastName"
+        />
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="username-input" class="col-2 col-form-label">username</label>
+      <div class="col-10">
+        <input class="form-control" type="text" id="username-input" placeholder="username" formControlName="username" [(ngModel)]="user.username"
+        />
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="email-input" class="col-2 col-form-label">email</label>
+      <div class="col-10">
+        <input class="form-control" type="text" id="email-input" placeholder="email" formControlName="email" [(ngModel)]="user.email"
+        />
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="password-input" class="col-2 col-form-label">password</label>
+      <div class="col-10">
+        <input class="form-control" type="password" id="password-input" placeholder="password" formControlName="password" [(ngModel)]="user.password"
+        />
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <div class="col-12">
+        <button type="submit" class="btn btn-primary">Next</button>
+        <button type="button" class="btn btn-primary" (click)="abort()">Cancel</button>
+      </div>
+    </div>
+
+  </form>
+</div>

src/app/registration/components/contact/registration-info.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CustomValidators } from 'ng2-validation';
+import { Registration, User, RegistrationsState } from '../../domain/registration';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-registration-info',
+  templateUrl: 'registration-info.component.html',
+})
+export class RegistrationInfoComponent implements OnInit {
+
+  @Input()
+  public registration: Registration;
+
+  public user: User = new User();
+
+  @Output()
+  public registrationStarted: EventEmitter<Registration>;
+
+  @Output()
+  public registrationAborted: EventEmitter<Registration>;
+
+  public registrationForm: FormGroup;
+  public constructor(private formBuilder: FormBuilder) {
+    this.registrationStarted = new EventEmitter<Registration>();
+    this.registrationAborted = new EventEmitter<Registration>();
+
+    this.registrationForm = this.formBuilder.group({
+      firstName: [this.user.firstName, Validators.required],
+      lastName: [this.user.lastName, Validators.required],
+      username: [this.user.username, Validators.required],
+      email: [this.user.email, Validators.required],
+      password: [this.user.password, Validators.required]
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  public startRegistration() {
+    /* if (!this.registrationForm.valid) {
+       return;
+     }*/
+    this.registration.user = this.user;
+    this.registrationStarted.emit(this.registration);
+  }
+  public abort() {
+    this.registration = new Registration();
+    this.registrationAborted.emit(this.registration);
+  }
+}

src/app/registration/components/index.ts

@@ -0,0 +1,4 @@
+export * from './avatar/registration-avatar.component'
+export * from './contact/registration-info.component'
+export * from './profile/profile.component'
+

src/app/registration/components/profile/profile.component.html

@@ -0,0 +1,13 @@
+<div class="col-md-6 col-md-offset-3">
+    <h1>Hi {{registration.user.firstName}}!</h1>
+    <p>your profile page</p>
+    {{registration.user.email}}
+    <br>
+    <div class="form-group row">
+        <div class="col-10">
+            <img height="30%" width="30%" src="{{registration.user.avatar}}" />
+        </div>
+    </div>
+    <br>
+    <a [routerLink]="['/home']" class="btn btn-primary">Logout</a>
+</div>

src/app/registration/components/profile/profile.component.ts

@@ -0,0 +1,24 @@
+import { RegistrationsState } from './../../domain/registration';
+import { Store } from '@ngrx/store';
+import { Component, OnInit } from '@angular/core';
+import { User, Registration } from '../../domain/registration';
+import { Router } from '@angular/router';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: 'profile.component.html'
+
+})
+export class ProfileComponent implements OnInit {
+    public registration: Registration;
+
+    public constructor(private router: Router, private registringStore: Store<RegistrationsState>) {
+    }
+
+    ngOnInit() {
+        this.registringStore.select(state => state.registration).subscribe(registration => this.registration = registration);
+    }
+
+
+
+}

src/app/registration/containers/registration/registration.component.html

@@ -0,0 +1,4 @@
+<div class="col-md-6 col-md-offset-3">
+    <h2>Register</h2>
+    <app-registration-info [registration]="registration" (registrationAborted)="registrationAborted($event)" (registrationStarted)="registrationStarted($event)"></app-registration-info>
+</div>

src/app/registration/containers/registration/registration.component.ts

@@ -0,0 +1,33 @@
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { ActionFactory } from '../../actions/registring';
+import { SearchOptions } from '../../../widgit/search-form/search-options';
+import { RegistrationsState, Registration } from '../../domain/registration';
+
+@Component({
+  selector: 'app-registration',
+  templateUrl: 'registration.component.html',
+})
+export class RegistrationComponent implements OnInit {
+
+  registration: Registration;
+  constructor(private router: Router, private registringStore: Store<RegistrationsState>) {
+  }
+
+  ngOnInit() {
+    this.registringStore.select(state => state.registration).subscribe(registration => this.registration = registration);
+  }
+
+  public registrationStarted() {
+    this.registringStore.dispatch(ActionFactory.startRegistration(this.registration));
+     this.router.navigate(['/avatar']);
+  }
+
+  public registrationAborted() {
+    this.registringStore.dispatch(ActionFactory.abortRegistration(this.registration));
+     this.router.navigate(['/home']);
+  }
+
+
+}