Login added and added api code

src/app/pages/login.component.html

@@ -7,13 +7,14 @@
             <div class="card-block">
               <h1>Login</h1>
               <p class="text-muted">Sign In to your account</p>
+			  <form [formGroup]="signin" (ngSubmit)="onSubmit()">
               <div class="input-group mb-3">
-                <span class="input-group-addon"><i class="icon-user"></i></span>
+                <span class="input-group-addon">@</span>
-                <input type="text" class="form-control" placeholder="Username">
+                <input type="text" class="form-control" placeholder="Email">
               </div>
               <div class="input-group mb-4">
                 <span class="input-group-addon"><i class="icon-lock"></i></span>
-                <input type="password" class="form-control" placeholder="Password">
+                <input type="password" class="form-control" formControlName="password" placeholder="Password">
               </div>
               <div class="row">
                 <div class="col-6">
@@ -23,6 +24,7 @@
                   <button type="button" class="btn btn-link px-0">Forgot password?</button>
                 </div>
               </div>
+			  </form>
             </div>
           </div>
           <div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">

src/app/pages/login.component.ts

@@ -1,10 +1,49 @@
 import { Component } from '@angular/core';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+import { Http, Response } from '@angular/http';
+import { ApiService } from '../providers/api-service';
+import 'rxjs/add/operator/map';
 
 @Component({
-  templateUrl: 'login.component.html'
+  templateUrl: 'login.component.html',
+  providers: [ApiService]
 })
 export class LoginComponent {
+  signin: FormGroup;
+  ageRanges: Object[];
+  
+  constructor(
+	private http: Http,
+	private formBuilder: FormBuilder,
+	private api: ApiService
+	) {	  
+	  this.api.getAgeRanges()
+		.subscribe(
+			result => {
+				console.log(result);
+				this.ageRanges = result.ages;
+			}
+		);
+	  this.signin = this.formBuilder.group({
+		email:        ['', [Validators.required]],
+		password:     ['', [Validators.required]],
+	  });
+  }
+  
+  onSubmit() {
+    console.log(this.signin.value);
+	
+	this.peopleService
+      .register(this.signin.value)
+      .subscribe(
+        result => {
+          console.log( logged in! );
+        },
+        error => {
+          console.log( error._body );
+        }
+      );
+  }
 
-  constructor() { }
 
 }

src/app/pages/register.component.html

@@ -9,27 +9,27 @@
             <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">
+              <input type="text" class="form-control" formControlName="token" 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">
+              <input type="text" class="form-control" formControlName="full_name" 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">
+              <input type="text" class="form-control" formControlName="display_name" placeholder="Full Name">
             </div>
 
             <div class="input-group mb-3">
               <span class="input-group-addon">@</span>
-              <input type="text" class="form-control" placeholder="Email">
+              <input type="text" class="form-control" formControlName="email" 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">
+              <input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
             </div>
 			
 			<div class="input-group mb-3">
@@ -41,12 +41,12 @@
 
             <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">
+              <input type="password" class="form-control" formControlName="password" placeholder="Password">
             </div>
 
             <div class="input-group mb-4">
               <span class="input-group-addon"><i class="icon-lock"></i></span>
-              <input type="password" class="form-control" placeholder="Repeat password">
+              <input type="password" class="form-control" formControlName="password" placeholder="Repeat password">
             </div>
 
             <button type="button" class="btn btn-block btn-success">Create Account</button>

src/app/pages/register.component.ts

@@ -37,6 +37,17 @@ export class RegisterComponent {
   
   onSubmit() {
     console.log(this.signup.value);
+	
+	this.peopleService
+      .register(this.signup.value)
+      .subscribe(
+        result => {
+          console.log( registered! );
+        },
+        error => {
+          console.log( error._body );
+        }
+      );
   }