diff --git a/package.json b/package.json index 2a47552..ba01cdc 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c1cca0c..2487471 100644 --- a/src/app/app.module.ts +++ b/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 diff --git a/src/app/pages/register.component.html b/src/app/pages/register.component.html index 0a95314..20f6f1d 100644 --- a/src/app/pages/register.component.html +++ b/src/app/pages/register.component.html @@ -7,14 +7,39 @@

Register

Create your account

+ + +
+ +
+ +
+ + +
@
+ +
+ + +
+ +
+ + +
@@ -28,16 +53,6 @@
- diff --git a/src/app/pages/register.component.ts b/src/app/pages/register.component.ts index 59bce4e..9ebdb01 100644 --- a/src/app/pages/register.component.ts +++ b/src/app/pages/register.component.ts @@ -1,20 +1,40 @@ 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" - constructor(private http: Http) { + signup: FormGroup; + ageRanges: Object[]; + + constructor(private http: Http, private formBuilder: FormBuilder, private api: ApiService) { + - this.getAges().subscribe( - result => {console.log(result)} -) } - getAges() { - return this.http.get(this.apiurl +'/info/ages' ).map((response: Response) => response.json()); + this.api.getAgeRanges().subscribe( + 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); } -} +} \ No newline at end of file diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts new file mode 100644 index 0000000..244087c --- /dev/null +++ b/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() ); + } +} \ No newline at end of file