Added API and improved form
This commit is contained in:
parent
66b3cd6ea4
commit
830ecbffca
5 changed files with 107 additions and 21 deletions
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -7,14 +7,39 @@
|
|||
<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>
|
||||
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
48
src/app/providers/api-service.ts
Normal file
48
src/app/providers/api-service.ts
Normal file
|
@ -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() );
|
||||
}
|
||||
}
|
Reference in a new issue