Browse Source

midway through user creation, looking into oauth2

Eric Foster 6 years ago
parent
commit
53de6be9d1

+ 6
- 6
src/pages/signup/signup.html View File

16
   
16
   
17
     <ion-item>
17
     <ion-item>
18
       <ion-label stacked>First name</ion-label>
18
       <ion-label stacked>First name</ion-label>
19
-      <ion-input placeholder="First Name" type="text" required #firstName></ion-input>
19
+      <ion-input formControlName="firstName" placeholder="First Name" type="text" required #firstName></ion-input>
20
     </ion-item>
20
     </ion-item>
21
 
21
 
22
     <ion-item>
22
     <ion-item>
23
       <ion-label stacked>Last name</ion-label>
23
       <ion-label stacked>Last name</ion-label>
24
-      <ion-input placeholder="Last Name" type="text" required #lastName></ion-input>
24
+      <ion-input formControlName="lastName" placeholder="Last Name" type="text" required #lastName></ion-input>
25
     </ion-item>
25
     </ion-item>
26
 
26
 
27
     <ion-item>
27
     <ion-item>
28
       <ion-label stacked>E-mail</ion-label>
28
       <ion-label stacked>E-mail</ion-label>
29
-      <ion-input placeholder="Email" type="text" required #email></ion-input>
29
+      <ion-input formControlName="email" placeholder="Email" type="text" required #email></ion-input>
30
     </ion-item>
30
     </ion-item>
31
 
31
 
32
     <ion-item>
32
     <ion-item>
33
       <ion-label stacked>Password</ion-label>
33
       <ion-label stacked>Password</ion-label>
34
-      <ion-input placeholder="Password" type="text" required #password></ion-input>
34
+      <ion-input formControlName="password" placeholder="Password" type="text" required #password></ion-input>
35
     </ion-item>
35
     </ion-item>
36
 
36
 
37
     <ion-item>
37
     <ion-item>
38
       <ion-label stacked>Re-enter password</ion-label>
38
       <ion-label stacked>Re-enter password</ion-label>
39
-      <ion-input placeholder="Re-enter Password" type="text" required #passwordreentry></ion-input>
39
+      <ion-input formControlName="password" placeholder="Re-enter Password" type="text" required #passwordreentry></ion-input>
40
     </ion-item>
40
     </ion-item>
41
 
41
 
42
     <button ion-button full color="primary" style="margin-top: 20px;" 
42
     <button ion-button full color="primary" style="margin-top: 20px;" 
43
-    type="submit" [disabled]="!destinationForm.valid" (click)=createDestination()>Add</button>
43
+    type="submit" [disabled]="!signupForm.valid" (click)=createUser()>Add</button>
44
   </form>
44
   </form>
45
 </ion-content>
45
 </ion-content>

+ 17
- 1
src/pages/signup/signup.ts View File

1
 import { Component } from '@angular/core';
1
 import { Component } from '@angular/core';
2
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
2
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
3
+import { SignupService } from '../../services/user-service/signup-service';
4
+import { FormGroup } from '@angular/forms';
5
+import { User } from '../../model/user-model';
6
+import { MapPage } from '../map/map';
3
 
7
 
4
 /**
8
 /**
5
  * Generated class for the SignupPage page.
9
  * Generated class for the SignupPage page.
15
 })
19
 })
16
 export class SignupPage {
20
 export class SignupPage {
17
 
21
 
18
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
22
+  userForm : FormGroup;
23
+  user : User;
24
+
25
+  constructor(public navCtrl: NavController, public navParams: NavParams, public signupService: SignupService) {
19
   }
26
   }
20
 
27
 
21
   ionViewDidLoad() {
28
   ionViewDidLoad() {
22
     console.log('ionViewDidLoad SignupPage');
29
     console.log('ionViewDidLoad SignupPage');
23
   }
30
   }
24
 
31
 
32
+  createUser() {
33
+    this.user = this.userForm.value;
34
+    this.signupService.createUser(this.user).subscribe(data => this.user = data as User,
35
+      err => {
36
+        console.log(err);
37
+      })
38
+      this.navCtrl.push(MapPage);
39
+  }
40
+
25
 }
41
 }

+ 24
- 0
src/services/user-service/signup-service.ts View File

1
+import { Injectable } from "@angular/core";
2
+import { HttpClient, HttpErrorResponse } from "@angular/common/http"
3
+import { User } from "../../model/user-model";
4
+import { Observable } from "rxjs";
5
+
6
+@Injectable()
7
+export class SignupService {
8
+
9
+    private destinationUrl = "http://localhost:9090/api/v1/users"
10
+
11
+    constructor(protected httpClient: HttpClient) {
12
+    }
13
+
14
+    //CREATE
15
+    createUser(user: User): Observable<User> {
16
+      return this.httpClient
17
+        .post<User>(this.destinationUrl, user)
18
+        .catch((err: HttpErrorResponse) => {
19
+          console.error('An error occurred: ', err.error);
20
+          return Observable.throw(err.statusText);
21
+        });
22
+    }
23
+
24
+}