Signup

src/app/pages/signup/signup.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -11,6 +11,7 @@ import { SignupPage } from './signup.page';
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FormsModule,
     IonicModule,
     SignupPageRoutingModule

src/app/pages/signup/signup.page.html

@@ -8,32 +8,31 @@
 </ion-header>
 
 <ion-content>
-    <form>
-    <ion-item lines="full">
-      <ion-label position="floating" class="required">Username</ion-label>
-      <ion-input type="text" required></ion-input>
-    </ion-item>
+  <div class="container">
+    <form [formGroup]="submitForm" (ngSubmit)="onSubmit()">
+      <ion-item lines="full">
+        <ion-input formControlName="username" type="text" required placeholder="Username"></ion-input>
+      </ion-item>
 
-    <ion-item lines="full">
-      <ion-label position="floating" class="required">Password</ion-label>
-      <ion-input type="password" required></ion-input>
-    </ion-item>
+      <ion-item lines="full">
+        <ion-input formControlName="password" type="password" required placeholder="Password"></ion-input>
+      </ion-item>
 
-    <ion-item lines="full">
-      <ion-label position="floating">Phone</ion-label>
-      <ion-input type="text"></ion-input>
-    </ion-item>
+      <ion-item lines="full">
+        <ion-input formControlName="email" type="text" placeholder="Email"></ion-input>
+      </ion-item>
 
-    <ion-item lines="full">
-      <ion-label position="floating">Nickname</ion-label>
-      <ion-input type="text"></ion-input>
-    </ion-item>
+      <ion-item lines="full">
+        <ion-input formControlName="phoneNumber" type="text" placeholder="Phone number"></ion-input>
+      </ion-item>
+      <ion-row>
+        <ion-col>
+          <ion-button type="submit" color="danger" expand="block">Sign Up</ion-button>
+        </ion-col>
+      </ion-row>
 
-    <ion-row>
-      <ion-col>
-        <ion-button type="submit" color="danger" expand="block">Sign Up</ion-button>
-      </ion-col>
-    </ion-row>
   </form>
 
+</div>
+
 </ion-content>

src/app/pages/signup/signup.page.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UserService } from 'src/app/services/user.service';
 import { User } from '../../models/user.model';
+import { first } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'app-signup',
@@ -9,11 +13,49 @@ import { User } from '../../models/user.model';
 export class SignupPage implements OnInit {
 
     userObj: User;
+    submitForm: FormGroup;
+    loading: boolean = false;
+    submitted: boolean = false;
+    returnUrl: string;
+    error = '';
 
-    constructor() { }
+    constructor(private userService: UserService,
+                private formBuilder: FormBuilder,
+                private route: ActivatedRoute,
+                private router: Router) { }
 
     ngOnInit() {
-        this.userObj = new User();
+        this.submitForm = this.formBuilder.group({
+            username: ['', Validators.required],
+            password: ['', Validators.required],
+            email: [''],
+            phoneNumber: ['']
+        });
+        let returnUrl = '/';
+        console.log(returnUrl);
     }
 
+    onSubmit() {
+        console.log("on submit sign up");
+        this.submitted = true;
+        if(this.submitForm.invalid) {
+            return;
+        }
+
+        this.loading = true;
+        let f = this.submitForm.controls;
+        this.userService.signup(f.username.value, f.password.value, f.email.value, f.phoneNumber.value)
+            .pipe(first())
+            .subscribe(
+                data => {
+                    this.router.navigate(['/']);
+                },
+                error => {
+                    this.error = error;
+                    this.loading = false;
+                }
+            );
+        }
+
+
 }

src/app/services/user.service.ts

@@ -18,4 +18,11 @@ export class UserService {
     public fetchUsers() {
         return this.http.get<any>(`${environment.apiUrlClient}/user`);
     }
-}
+
+    public signup(username: string, password: string, email: string, phoneNumber: string) {
+      return this.http.post<any>(`${environment.apiUrl}/signup`, {username: username,
+                                                                  password: password,
+                                                                  email: email,
+                                                                  phoneNumber: phoneNumber})
+   }
+  }