Added API and improved form

package.json

@@ -33,7 +33,7 @@
     "ngx-bootstrap": "1.6.6",
     "rxjs": "5.3.0",
     "ts-helpers": "1.1.2",
-    "zone.js": "0.8.8"
+    "zone.js": "0.8.9"
   },
   "devDependencies": {
     "@angular/cli": "1.0.0",

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { HttpModule } from '@angular/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -25,6 +26,8 @@ import { SimpleLayoutComponent } from './layouts/simple-layout.component';
     BrowserModule,
     AppRoutingModule,
     HttpModule,
+	FormsModule,
+	ReactiveFormsModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     ChartsModule

src/app/pages/register.component.html

@@ -7,15 +7,40 @@
             <h1>Register</h1>
             <p class="text-muted">Create your account</p>
             <div class="input-group mb-3">
+              <span class="input-group-addon"><i class="icon-key"></i></span>
+              <input type="text" class="form-control" placeholder="Token">
+            </div>
+			
+			<div class="input-group mb-3">
               <span class="input-group-addon"><i class="icon-user"></i></span>
               <input type="text" class="form-control" placeholder="Username">
             </div>
 			
+			<div class="input-group mb-3">
+              <span class="input-group-addon"><i class="icon-user"></i></span>
+              <input type="text" class="form-control" placeholder="Full Name">
+            </div>
+
             <div class="input-group mb-3">
               <span class="input-group-addon">@</span>
               <input type="text" class="form-control" placeholder="Email">
             </div>
 			
+			<div class="input-group mb-3">
+              <span class="input-group-addon"><i class="icon-user"></i></span>
+              <input type="text" class="form-control" placeholder="Postcode">
+            </div>
+			
+			<div class="input-group mb-3">
+				<span class="input-group-addon"><i class="icon-calendar"></i></span>
+                <select required id="agerange" class="form-control">
+                  <option value="">Please select</option>
+                  <option value="1">Option #1</option>
+                  <option value="2">Option #2</option>
+                  <option value="3">Option #3</option>
+                </select>
+            </div>
+
             <div class="input-group mb-3">
               <span class="input-group-addon"><i class="icon-lock"></i></span>
               <input type="password" class="form-control" placeholder="Password">
@@ -28,16 +53,6 @@
 
             <button type="button" class="btn btn-block btn-success">Create Account</button>
           </div>
-          <div class="card-footer p-4">
-            <div class="row">
-              <div class="col-6">
-                <button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
-              </div>
-              <div class="col-6">
-                <button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>

src/app/pages/register.component.ts

@@ -1,19 +1,39 @@
 import { Component } from '@angular/core';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
 import { Http, Response } from '@angular/http';
-import 'rxjs/add/operator/map'
+import { ApiService } from '../providers/api-service';
+import 'rxjs/add/operator/map';
 
 @Component({
-  templateUrl: 'register.component.html'
+  templateUrl: 'register.component.html',
+  providers: [ApiService]
 })
 export class RegisterComponent {
-  private apiurl="https://dev.app.peartrade.org/api"
+  signup: FormGroup;
-  constructor(private http: Http) {
+  ageRanges: Object[];
   
-  this.getAges().subscribe(
+  constructor(private http: Http, private formBuilder: FormBuilder, private api: ApiService) {
-  result => {console.log(result)}
+	  
-)  }
+
-  getAges() {
+  this.api.getAgeRanges().subscribe(
-    return this.http.get(this.apiurl +'/info/ages' ).map((response: Response) => response.json());
+  result => {
+	  console.log(result);
+	  this.ageRanges = result.ages;
+	 }
+)
+  this.signup = this.formBuilder.group({
+    token:        ['', [Validators.required]],
+      full_name:    ['', [Validators.required]],
+      display_name: ['', [Validators.required]],
+      email:        ['', [Validators.required]],
+      postcode:     ['', [Validators.required]],
+      age_range:    ['', [Validators.required]],
+      password:     ['', [Validators.required]],
+  });
+  }
+  
+  onSubmit() {
+    console.log(this.signup.value);
   }
 
 

src/app/providers/api-service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+import 'rxjs/add/operator/map';
+
+
+/* this provider handles the interaction between server and client */
+ 
+@Injectable()
+export class ApiService {
+  private apiUrl = 'https://dev.app.peartrade.org/api';
+  private sessionKey: string;
+  constructor(
+    private http: Http,
+  ) {}
+  
+  public getAgeRanges() {
+    return this.http.get(
+      this.apiUrl + '/info/ages'
+    ).map( res => res.json() );
+  }
+
+  public register(data) {
+    return this.http.post(
+      this.apiUrl + '/register',
+      data
+    ).map( response => response.json() );
+  }
+
+  public login(data) {
+    let login_event = this.http.post(
+      this.apiUrl + '/login',
+      data
+    ).map( response => response.json() );
+    login_event.subscribe(
+      result => {  this.sessionKey = result.session_key }
+    );
+    return login_event;
+  }
+
+  public search(data) {
+	  data.session_key = this.sessionKey;
+	  return this.http.post(
+		this.apiUrl + '/search',
+		data
+	  ).map( response => response.json() );
+  }
+}