Persisted user to database from UI

frontEnd/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@angular/animations": "5.2.11",
-    "@angular/common": "5.2.11",
-    "@angular/compiler": "5.2.11",
+    "@angular/common": "^5.2.11",
+    "@angular/compiler": "^5.2.11",
     "@angular/compiler-cli": "5.2.11",
     "@angular/core": "5.2.11",
     "@angular/forms": "5.2.11",

frontEnd/src/app/app.module.ts

@@ -9,6 +9,10 @@ import { GoogleMapComponent } from '../components/google-map/google-map';
 import { HomePage } from '../pages/home/home';
 import { RegisterPage } from '../pages/register/register';
 import { MainMenuPage } from '../pages/main-menu/main-menu';
+import { HttpClientModule } from '@angular/common/http';
+import { GoogleMapPage } from '../pages/googleMap/googleMap';
+import { RestProvider } from '../providers/rest/rest';
+
 
 @NgModule({
   declarations: [
@@ -16,11 +20,13 @@ import { MainMenuPage } from '../pages/main-menu/main-menu';
     HomePage,
     GoogleMapComponent,
     MainMenuPage,
-    RegisterPage
+    RegisterPage,
+    GoogleMapPage
     
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     IonicModule.forRoot(MyApp)
   ],
   bootstrap: [IonicApp],
@@ -29,11 +35,13 @@ import { MainMenuPage } from '../pages/main-menu/main-menu';
     HomePage,
     GoogleMapComponent,
     MainMenuPage,
-    RegisterPage
+    RegisterPage,
+    GoogleMapPage
   ],
   providers: [
     StatusBar,
     SplashScreen,
+    RestProvider,
     {provide: ErrorHandler, useClass: IonicErrorHandler}
   ]
 })

frontEnd/src/pages/home/home.html

@@ -13,7 +13,7 @@
       <b>Login</b>
     </button>
     <button class="regButt" ion-button block (click)="register()">
-      <b>Register</b>
+      <b>Register new account</b>
     </button>
 
     <p>Forgot Username/Password?

frontEnd/src/pages/register/register.html

@@ -11,15 +11,15 @@
     <ion-list>
 
         <ion-item>
-          <ion-input type="text" placeholder="Username"></ion-input>
+          <ion-input type="text" placeholder="Username" [(ngModel)]  = "user.username"></ion-input>
         </ion-item>
 
         <ion-item>
-            <ion-input type="text" placeholder="Email"></ion-input>
+            <ion-input type="text" placeholder="Email" [(ngModel)]  = "user.email"></ion-input>
           </ion-item>
       
         <ion-item>
-          <ion-input type="password" placeholder="Password"></ion-input>
+          <ion-input type="password" placeholder="Password" [(ngModel)]  = "user.password"></ion-input>
         </ion-item>
       
       </ion-list>

frontEnd/src/pages/register/register.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { RegisterPage } from './register';
+import { RestProvider } from '../../providers/rest/rest';
 
 @NgModule({
   declarations: [
     RegisterPage,
+    RestProvider
   ],
   imports: [
     IonicPageModule.forChild(RegisterPage),

frontEnd/src/pages/register/register.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { MainMenuPage } from '../main-menu/main-menu';
-
+import { RestProvider } from '../../providers/rest/rest';
 
 @IonicPage()
 @Component({
@@ -10,16 +10,21 @@ import { MainMenuPage } from '../main-menu/main-menu';
 })
 export class RegisterPage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  user = { username: '', email: '', password: '' }
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public rest: RestProvider) {
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad RegisterPage');
   }
 
+
+
   register() {
+    console.log(this.user);
+    this.rest.addUser(this.user);
     this.navCtrl.setRoot(MainMenuPage);
 
   }
-
 }

frontEnd/src/providers/rest/rest.ts

@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+
+
+@Injectable()
+export class RestProvider {
+
+  apiUrl = 'http://localhost:8080';
+
+  constructor(public http: HttpClient) {
+    console.log('Hello RestProvider Provider');
+  }
+
+  getUsers() {
+    return new Promise(resolve => {
+      this.http.get(this.apiUrl + '/getUsers/').subscribe(data => {
+        resolve(data);
+      }, err => {
+        console.log(err);
+      });
+    });
+  }
+
+  addUser(data) {
+    return new Promise((resolve, reject) => {
+      this.http.post(this.apiUrl + '/register', data)
+        .subscribe(res => {
+          resolve(res);
+        }, (err) => {
+          reject(err);
+        });
+    });
+  }
+}