Signup User API connection changes and OTP validation API connection

src/app/onboarding/onboarding.page.html

@@ -18,12 +18,12 @@
                 Get Started
             </ion-button>
             <p class="signin-description">
-                Already have account? <a (click)="signinPage()"> Sign in </a>
+                Already have account? <a [routerLink]="['/login']"> Sign in </a>
             </p>
         </ion-slide>
 
         <!-- Slide 2 -->
-        <ion-slide class="page2">
+        <!-- <ion-slide class="page2">
             <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                 <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
             </ion-button>
@@ -58,10 +58,10 @@
             <p class="signin-description" (click)="nextPage()">
                 <a> Not Now </a>
             </p>
-        </ion-slide>
+        </ion-slide>  -->
 
-        <!-- Slide 3 -->
-        <ion-slide class="page3">
+        <!-- Slide 5 -->
+        <ion-slide class="page5">
             <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                 <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
             </ion-button>
@@ -69,7 +69,7 @@
                 <img src="assets/custom/logo.svg">
             </figure>
             <header>
-                Enter your Email ID <br> to verify your account
+                Now let's set up your <br> Profile
             </header>
 
             <div class="input-holder">
@@ -77,48 +77,6 @@
                 <input type="email" placeholder="Email ID" [(ngModel)]="credentials.email">
             </div>
 
-            <ion-button class="next-button" shape="round" [disabled]="!this.credentials.email" (click)="verifyEmail()">
-                Continue
-            </ion-button>
-        </ion-slide>
-
-        <ion-slide class="page4">
-            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
-                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
-            </ion-button>
-            <figure class="logo">
-                <img src="assets/custom/logo.svg">
-            </figure>
-            <header>
-                We sent you a code to <br> verify your email
-            </header>
-
-            <div class="input-holder">
-                <img src="assets/custom/otp.svg">
-                <input type="tel" placeholder="OTP" [(ngModel)]="otp">
-            </div>
-
-            <p class="signin-description">
-                Didn't received OTP <a> Resend in 00:{{ padBefore(timer) }} </a>
-            </p>
-
-            <ion-button class="next-button" [disabled]="!otp" shape="round" (click)="nextPage()">
-                Continue
-            </ion-button>
-        </ion-slide>
-
-        <!-- Slide 5 -->
-        <ion-slide class="page5">
-            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
-                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
-            </ion-button>
-            <figure class="logo">
-                <img src="assets/custom/logo.svg">
-            </figure>
-            <header>
-                Now let's set you <br> password
-            </header>
-
             <div class="input-holder">
                 <img src="assets/custom/name.svg">
                 <input type="text" placeholder="Name" [(ngModel)]="credentials.name">
@@ -155,12 +113,37 @@
                 </ion-item>
             </ion-list>
 
-            <ion-button class="next-button" shape="round" [disabled]="!this.credentials.mobile || !this.credentials.password" 
+            <ion-button class="next-button" shape="round" [disabled]="!this.credentials.mobile || !this.credentials.password || !this.credentials.email" 
             (click)="registerUser()">
                 Continue
             </ion-button>
         </ion-slide>
 
+        <ion-slide class="page4">
+            <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
+                <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
+            </ion-button>
+            <figure class="logo">
+                <img src="assets/custom/logo.svg">
+            </figure>
+            <header>
+                We sent you a code to <br> verify your email
+            </header>
+
+            <div class="input-holder">
+                <img src="assets/custom/otp.svg">
+                <input type="tel" placeholder="OTP" [(ngModel)]="otp">
+            </div>
+
+            <p class="signin-description">
+                Didn't received OTP <a> Resend in 00:{{ padBefore(timer) }} </a>
+            </p>
+
+            <ion-button class="next-button" [disabled]="!otp" shape="round" (click)="validateUser()">
+                Continue
+            </ion-button>
+        </ion-slide>
+
         <!-- Slide 6 -->
         <!-- <ion-slide class="page6">
             <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">

src/app/onboarding/onboarding.page.ts

@@ -82,23 +82,17 @@ export class OnboardingPage implements OnInit {
         document.querySelector('ion-slides').slidePrev(400);
     }
 
-    signinPage() {
-        this.router.navigate(['/login']);
-    }
-
-    verifyEmail() {
-        this.authService.requestMailOTP(this.credentials.email).then((data) => {
+    validateUser() {
+        this.authService.validateOtpForEmail({ email: this.credentials.email, otp: this.otp }).then((data) => {
             console.log(data);
+            this.toastService.presentToast("Verified!", "success");
             this.nextPage();
-            this.toastService.presentToast("Verified", "success");
         }, (err) => {
             console.log(err);
-            this.nextPage();
-            this.toastService.presentToast("Failed to send OTP to your email", "danger");
-        });
+            this.toastService.presentToast("Failed to verify, try again", "danger");
+        })
     }
 
-
     registerUser() {
         this.credentials.username = this.credentials.email;
         this.authService.signupUser(this.credentials).then((data) => {

src/app/services/auth.service.ts

@@ -19,6 +19,10 @@ export class AuthService {
         return this.http.post(URL + '/api/auth/forgot/', { email: email }).toPromise();        
     }
 
+    validateOtpForEmail(data: { email: string, otp: number | string }) {
+        return this.http.post(URL + '/api/otp/validate', data).toPromise();
+    }
+
     requestMailOTP(email: string) {
         return this.http.post(URL + '/api/otp/generate/', { email: email }).toPromise();
     }