diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3f95b3c32a84902f9493f17f243b4b8a43f28805..7e55b72531e6c090e6fde07cbde003cd7d105497 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RestService } from './rest.service';
import { ToastService } from './services/toast.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
@@ -25,6 +26,8 @@ import { ToastService } from './services/toast.service';
HttpClientModule,
IonicModule.forRoot(),
AppRoutingModule,
+ FormsModule,
+ ReactiveFormsModule,
IonicStorageModule.forRoot()
],
providers: [
diff --git a/src/app/auth/login/login.page.html b/src/app/auth/login/login.page.html
index 76da5133c13b5e30774403e646321ae2bf592bf9..5562a831129cd506a6a8b61a439d8683370414dd 100644
--- a/src/app/auth/login/login.page.html
+++ b/src/app/auth/login/login.page.html
@@ -11,7 +11,10 @@
<div padding>
<img src="../../../assets/images/bike2gologo.png">
</div>
-
+ <div class="ion-text">
+ <h3>Login</h3>
+
+ </div>
<div padding>
<ion-item>
<ion-input type="text" [(ngModel)]="username" placeholder="Username"></ion-input>
diff --git a/src/app/auth/login/login.page.scss b/src/app/auth/login/login.page.scss
index 4ad0642461878a1522a94215c402cbaa497a9216..e656e08df723500eb203d9a2004d07dba1ed935a 100644
--- a/src/app/auth/login/login.page.scss
+++ b/src/app/auth/login/login.page.scss
@@ -6,4 +6,7 @@ ion-item {
#correctCredentialsmsg{
color:red;
font-size: 14px;
-}
\ No newline at end of file
+}
+.ion-text{
+ text-align: center;
+ }
\ No newline at end of file
diff --git a/src/app/auth/register/register.module.ts b/src/app/auth/register/register.module.ts
index 0b18f979c7ecd85c0fdffdaf17f15edee6fbf382..04c075bd1982419d52472793856d2867909ba11d 100644
--- a/src/app/auth/register/register.module.ts
+++ b/src/app/auth/register/register.module.ts
@@ -1,6 +1,5 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
@@ -8,11 +7,14 @@ import { RegisterPageRoutingModule } from './register-routing.module';
import { RegisterPage } from './register.page';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
+ ReactiveFormsModule,
RegisterPageRoutingModule
],
declarations: [RegisterPage]
diff --git a/src/app/auth/register/register.page.html b/src/app/auth/register/register.page.html
index 49983a6d199120b9ceb89e370573fce038b5970f..24e2c870886aad9448a31dd6e257091461102a7b 100644
--- a/src/app/auth/register/register.page.html
+++ b/src/app/auth/register/register.page.html
@@ -5,38 +5,68 @@
</ion-header>
<ion-content>
- <ion-grid>
- <ion-row justify-content-center>
- <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
- <div padding>
- <img src="../../../assets/images/bike2gologo.png">
- </div>
+
+ <form [formGroup]="angForm" novalidate>
+ <ion-grid>
+ <ion-row justify-content-center>
+ <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
+ <div padding>
+ <img src="../../../assets/images/bike2gologo.png">
+ </div>
+ <div class="ion-text">
+ <h3>Registration</h3>
+
+ </div>
+
+ <ion-item ><ion-input type="text" formControlName="firstName" placeholder="Enter First Name"></ion-input></ion-item>
+ <div
+ *ngIf="angForm.controls['firstName'].invalid && (angForm.controls['firstName'].dirty || angForm.controls['firstName'].touched)"
+ class="alert-danger">
+ <div *ngIf="angForm.controls['firstName'].errors.required">
+ First Name is required.
+ </div>
+ </div>
+ <ion-item >
+ <ion-input type="text" formControlName="lastName" placeholder="Enter Last Name"></ion-input>
+ </ion-item>
+
+ <div
+ *ngIf="angForm.controls['lastName'].invalid && (angForm.controls['lastName'].dirty || angForm.controls['lastName'].touched)"
+ class="alert-danger">
+ <div *ngIf="angForm.controls['lastName'].errors.required">
+ Last Name is required.
+ </div>
+ </div>
+ <ion-item ><ion-input type="text" formControlName="email" placeholder="Enter Email"></ion-input></ion-item>
+
+ <div
+ *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
+ class="alert-danger">
+ <div *ngIf="angForm.controls['email'].errors.required">
+ Email is required.
+ </div>
+ </div>
- <div padding>
- <ion-item>
- <ion-input type="text" [(ngModel)]="firstName" placeholder="Enter First Name"></ion-input>
- </ion-item>
- <ion-item>
- <ion-input type="text" [(ngModel)]="lastName" placeholder="Enter Last Name"></ion-input>
- </ion-item>
- <ion-item>
- <ion-input type="text" [(ngModel)]="email" placeholder="Email"></ion-input>
- </ion-item>
+ <ion-item ><ion-input type="password" formControlName="password" placeholder="Password"></ion-input></ion-item>
+
+ <div
+ *ngIf="angForm.controls['password'].invalid && (angForm.controls['password'].dirty || angForm.controls['password'].touched)"
+ class="alert-danger">
+ <div *ngIf="angForm.controls['password'].errors.required">
+ Password is required.
+ </div>
+ </div>
+
+
+ <div id="correctCredentialsmsg" padding *ngIf="correctCredentials">
+ Wrong Credentials !
+ </div>
-
- <ion-item>
- <ion-input type="password" [(ngModel)]="password" placeholder="Password"></ion-input>
- </ion-item>
- </div>
-
- <div id="correctCredentialsmsg" padding *ngIf="correctCredentials">
- Wrong Credentials !
- </div>
-
- <div padding>
- <ion-button size="large" expand="block" (click)="submitRegister()">Register</ion-button>
- </div>
- </ion-col>
- </ion-row>
- </ion-grid>
+ <div padding>
+ <ion-button [disabled]="angForm.pristine || angForm.invalid" size="large" expand="block" (click)="submitRegister()">Register</ion-button>
+ </div>
+ </ion-col>
+ </ion-row>
+ </ion-grid>
+ </form>
</ion-content>
\ No newline at end of file
diff --git a/src/app/auth/register/register.page.scss b/src/app/auth/register/register.page.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d528771b70fa096b2df683521c0ed23810f20623 100644
--- a/src/app/auth/register/register.page.scss
+++ b/src/app/auth/register/register.page.scss
@@ -0,0 +1,11 @@
+.alert-danger{
+ color: red;
+ }
+ ion-item {
+ border: solid 1px lightgray;
+ border-radius: 10px;
+ margin-bottom: 10px;
+}
+.ion-text{
+ text-align: center;
+}
diff --git a/src/app/auth/register/register.page.ts b/src/app/auth/register/register.page.ts
index bfa94bb6f01b5d801e316b4612dfb350f9aa6a58..96152e11bc93cf4ba6ee55bd1f6d47da434622ac 100644
--- a/src/app/auth/register/register.page.ts
+++ b/src/app/auth/register/register.page.ts
@@ -2,7 +2,9 @@ import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { RestService } from 'src/app/rest.service';
+import { ToastService } from '../../services/toast.service';
import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
@@ -10,7 +12,7 @@ import { Router } from '@angular/router';
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
-
+ public angForm: FormGroup;
registerApi: Observable<any>;
correctCredentials: boolean;
@@ -18,11 +20,35 @@ export class RegisterPage implements OnInit {
password: "";
lastName: "";
firstName: "";
- constructor(private router: Router, public httpClient: HttpClient, public restService: RestService) { }
+
+ constructor(private router: Router,
+ public httpClient: HttpClient,
+ public restService: RestService,
+ private toastService: ToastService,
+ private fb: FormBuilder) {
+ this.createForm();
+
+ }
ngOnInit() {
+ }
+ createForm() {
+ this.angForm = this.fb.group({
+ firstName: ['',[ Validators.required ]],
+ lastName: ['', [Validators.required ]],
+ email: ['',[ Validators.required, Validators.email]],
+ password: ['', [Validators.required,Validators.minLength(4) ]],
+
+
+
+ });
+
}
submitRegister() {
+ if (this.angForm.invalid) {
+ return;
+ }
+
this.registerApi = this.httpClient.post('http://193.196.52.237:8081/register', {
"email": this.email,
"password": this.password,
@@ -33,10 +59,13 @@ export class RegisterPage implements OnInit {
.subscribe((data) => {
console.log('my data: ', data);
this.restService.setToken(data.token);
+ this.toastService.showToast("Registration Successful!")
this.router.navigateByUrl('/login');
+
}, (error) => {
console.log(error);
- this.correctCredentials = true;
+ this.toastService.showToast("Registration failed!")
+
});
}
}