diff --git a/src/app/app.module.ts b/src/app/app.module.ts index acf47d2da3b7015b57ceefaab4f209c4357c84d8..ef48ea627e5b061e87c5291652b128da52cd35ab 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 @@
- +
+

Login

+ +
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 @@ - - - -
- -
+ +
+ + + +
+ +
+
+

Registration

+ +
+ + +
+
+ First Name is required. +
+
+ + + + +
+
+ Last Name is required. +
+
+ + +
+
+ Email is required. +
+
-
- - - - - - - - - + + +
+
+ Password is required. +
+
+ + +
+ Wrong Credentials ! +
- - - - -
- -
- Wrong Credentials ! -
- -
- Register -
-
-
-
+
+ Register +
+ + + +
\ 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; 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!") + }); } }