diff --git a/src/app/onboarding/onboarding.page.html b/src/app/onboarding/onboarding.page.html index ed88fa5..71410ac 100644 --- a/src/app/onboarding/onboarding.page.html +++ b/src/app/onboarding/onboarding.page.html @@ -18,7 +18,7 @@ Get Started

- Already have account? Sign in + Already have account? Sign in

@@ -69,15 +69,15 @@
- Enter your phone number
to verify your account + Enter your Email ID
to verify your account
- - + +
- + Continue @@ -90,21 +90,19 @@
- We sent you a code to
verify your number + We sent you a code to
verify your email
- - - - + +

Didn't received OTP Resend in 00:{{ padBefore(timer) }}

- + Continue @@ -121,6 +119,16 @@ Now let's set you
password +
+ + +
+ +
+ + +
+
@@ -147,13 +155,14 @@ - + Continue - + @@ -189,7 +198,7 @@ Thanks for taking your time to create account with us. Now this is the fun part, let's explore the app.

- + Get Started diff --git a/src/app/onboarding/onboarding.page.scss b/src/app/onboarding/onboarding.page.scss index d9f2e68..d5f2a13 100644 --- a/src/app/onboarding/onboarding.page.scss +++ b/src/app/onboarding/onboarding.page.scss @@ -1,3 +1,7 @@ +ion-content { + --padding-bottom: 0; +} + ion-slides { height: 100vh; } @@ -122,54 +126,43 @@ ion-slide { } } + +.input-holder { + display: flex; + width: 85%; + margin: 0px auto; + background-color: #efefef; + justify-content: space-between; + align-items: center; + box-shadow: 0px 0px 5px var(--brand-grey); + border-radius: 5px; + overflow: hidden; + + img { + width: 20px; + margin: 0 15px; + } + + input { + flex-grow: 1; + height: 50px; + font-size: 14px; + border: 0; + padding: 0 20px; + outline: none; + letter-spacing: 1px; + } +} + .page3 { .input-holder { - display: flex; - width: 85%; margin: 30px auto calc(100vh - 300px); - background-color: #efefef; - justify-content: space-between; - align-items: center; - box-shadow: 0px 0px 5px var(--brand-grey); - border-radius: 5px; - overflow: hidden; - - img { - width: 20px; - margin: 0 15px; - } - - input { - flex-grow: 1; - height: 50px; - font-size: 14px; - border: 0; - padding: 0 20px; - outline: none; - letter-spacing: 1px; - } } } .page4 { .input-holder { - display: flex; - width: 85%; margin: 30px auto; - justify-content: space-between; - align-items: center; - - input { - box-shadow: 0px 0px 5px var(--brand-grey); - height: 50px; - font-size: 14px; - border-radius: 5px; - overflow: hidden; - border: 0; - text-align: center; - outline: none; - width: 20%; - } } .signin-description { @@ -179,36 +172,19 @@ ion-slide { .page5 { .input-holder { - display: flex; - width: 85%; margin: 30px auto; - background-color: white; - justify-content: space-between; - align-items: center; - box-shadow: 0px 0px 5px var(--brand-grey); - border-radius: 5px; - overflow: hidden; ion-icon { font-size: 20px; margin: 0 15px; color: var(--brand-blue); } - - input { - flex-grow: 1; - height: 50px; - font-size: 14px; - border: 0; - padding: 0 20px; - outline: none; - letter-spacing: 1px; - } + } ion-list { background: transparent; - margin: 0 auto calc(100vh - 500px); + margin: 0 auto; ion-item { --background: transparent; diff --git a/src/app/onboarding/onboarding.page.ts b/src/app/onboarding/onboarding.page.ts index c5c93c2..02d86d3 100644 --- a/src/app/onboarding/onboarding.page.ts +++ b/src/app/onboarding/onboarding.page.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import { AuthService } from '../services/auth.service'; +import { ToastService } from '../services/toast.service'; @Component({ selector: 'app-onboarding', @@ -11,16 +13,25 @@ export class OnboardingPage implements OnInit { timer: number = 10; timer_interval: any; credentials = { - phone: '', - password: '' + mobile: '', + name: '', + email: '', + password: '', + role: [ + 'user' + ], + username: '' } show_password = false; has_upper = false; has_special = false; + otp: string = ''; constructor( - private router: Router - ) { } + private router: Router, + private authService: AuthService, + public toastService: ToastService + ) { } ionViewDidEnter() { document.querySelector('.menu-icon-holder').classList.add('hide'); @@ -71,13 +82,48 @@ export class OnboardingPage implements OnInit { document.querySelector('ion-slides').slidePrev(400); } - signin() { + signinPage() { this.router.navigate(['/login']); } - enterMalls() { - this.router.navigate(['/malls']); - document.querySelector('.menu-icon-holder').classList.remove('hide'); + verifyEmail() { + this.authService.requestMailOTP(this.credentials.email).then((data) => { + console.log(data); + this.nextPage(); + this.toastService.presentToast("Verified", "success"); + }, (err) => { + console.log(err); + this.nextPage(); + this.toastService.presentToast("Failed to send OTP to your email", "danger"); + }); + } + + + registerUser() { + this.credentials.username = this.credentials.email; + this.authService.signupUser(this.credentials).then((data) => { + console.log(data); + this.nextPage(); + }, (err) => { + console.log(err); + this.toastService.presentToast("Failed to create user", "danger"); + }); + } + + autoLogin() { + this.authService.authenticateUser({ + username: this.credentials.username, + password: this.credentials.password, + login_type: 'user' + }).then((data: any) => { + localStorage.userInfo = JSON.stringify(data); + localStorage.access_Token = data.access_Token; + this.router.navigate(['/malls']); + document.querySelector('.menu-icon-holder').classList.remove('hide'); + }, (err) => { + console.log(err); + this.toastService.presentToast('Please check your credentials', 'danger'); + }) } } diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index fabe67d..05787b6 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -12,6 +12,14 @@ export class AuthService { ) { } authenticateUser(credentials: { username: string, password: string, login_type: string }) { - return this.http.post(URL + '/api/auth/signin', credentials).toPromise(); + return this.http.post(URL + '/api/auth/signin/', credentials).toPromise(); + } + + requestMailOTP(email: string) { + return this.http.post(URL + '/api/otp/generate/', { email: email }).toPromise(); + } + + signupUser(credentials: any) { + return this.http.post(URL + '/api/auth/signup/', credentials).toPromise(); } } diff --git a/src/assets/custom/email.svg b/src/assets/custom/email.svg new file mode 100644 index 0000000..fffaa74 --- /dev/null +++ b/src/assets/custom/email.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom/name.svg b/src/assets/custom/name.svg new file mode 100644 index 0000000..0f59a8b --- /dev/null +++ b/src/assets/custom/name.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/custom/otp.svg b/src/assets/custom/otp.svg new file mode 100644 index 0000000..05accb6 --- /dev/null +++ b/src/assets/custom/otp.svg @@ -0,0 +1 @@ + \ No newline at end of file