Signup user, verify user API connection

src/app/onboarding/onboarding.page.html

@@ -18,7 +18,7 @@
                 Get Started
             </ion-button>
             <p class="signin-description">
-                Already have account? <a (click)="signin()"> Sign in </a>
+                Already have account? <a (click)="signinPage()"> Sign in </a>
             </p>
         </ion-slide>
 
@@ -69,15 +69,15 @@
                 <img src="assets/custom/logo.svg">
             </figure>
             <header>
-                Enter your phone number <br> to verify your account
+                Enter your Email ID <br> to verify your account
             </header>
 
             <div class="input-holder">
-                <img src="assets/custom/india.svg">
-                <input type="tel" placeholder="Mobile number" [(ngModel)]="credentials.phone">
+                <img src="assets/custom/email.svg">
+                <input type="email" placeholder="Email ID" [(ngModel)]="credentials.email">
             </div>
 
-            <ion-button class="next-button" shape="round" (click)="nextPage()">
+            <ion-button class="next-button" shape="round" [disabled]="!this.credentials.email" (click)="verifyEmail()">
                 Continue
             </ion-button>
         </ion-slide>
@@ -90,21 +90,19 @@
                 <img src="assets/custom/logo.svg">
             </figure>
             <header>
-                We sent you a code to <br> verify your number
+                We sent you a code to <br> verify your email
             </header>
 
             <div class="input-holder">
-                <input type="tel" maxlength="1" (input)="jumpPointer(1)">
-                <input type="tel" maxlength="1" (input)="jumpPointer(2)">
-                <input type="tel" maxlength="1" (input)="jumpPointer(3)">
-                <input type="tel" maxlength="1">
+                <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" shape="round" (click)="nextPage()">
+            <ion-button class="next-button" [disabled]="!otp" shape="round" (click)="nextPage()">
                 Continue
             </ion-button>
         </ion-slide>
@@ -121,6 +119,16 @@
                 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">
+            </div>
+
+            <div class="input-holder">
+                <img src="assets/custom/india.svg">
+                <input type="tel" placeholder="Mobile number" [(ngModel)]="credentials.mobile">
+            </div>
+
             <div class="input-holder">
                 <input *ngIf="!show_password" type="password" placeholder="Password"
                 [(ngModel)]="credentials.password" (input)="checkPassword()">
@@ -147,13 +155,14 @@
                 </ion-item>
             </ion-list>
 
-            <ion-button class="next-button" shape="round" (click)="nextPage()">
+            <ion-button class="next-button" shape="round" [disabled]="!this.credentials.mobile || !this.credentials.password" 
+            (click)="registerUser()">
                 Continue
             </ion-button>
         </ion-slide>
 
         <!-- Slide 6 -->
-        <ion-slide class="page6">
+        <!-- <ion-slide class="page6">
             <ion-button class="back-button" color="transparent" size="small" (click)="previousPage()">
                 <ion-icon src="assets/custom/left-arrow.svg"></ion-icon>
             </ion-button>
@@ -175,7 +184,7 @@
             <p class="signin-description" (click)="nextPage()">
                 <a> Not Now </a>
             </p>
-        </ion-slide>
+        </ion-slide> -->
 
         <!-- Slide 7 -->
         <ion-slide class="page7">
@@ -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.
             </p>
-            <ion-button class="next-button" shape="round" (click)="enterMalls()">
+            <ion-button class="next-button" shape="round" (click)="autoLogin()">
                 Get Started
             </ion-button>
         </ion-slide>

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;

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');
+        })
     }
 
 }

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();
     }
 }

src/assets/custom/email.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#1E88E5;" d="M480,432H32c-17.664,0-32-14.336-32-32V112c0-17.664,14.336-32,32-32h448c17.664,0,32,14.336,32,32
+	v288C512,417.664,497.664,432,480,432z"/>
+<path style="fill:#2196F3;" d="M480,432H32c-17.952,0-32-14.048-32-32c0-5.088,2.432-9.888,6.528-12.896l240-160
+	c2.816-2.08,6.144-3.104,9.472-3.104s6.656,1.024,9.472,3.104l240,160C509.568,390.112,512,394.912,512,400
+	C512,417.952,497.952,432,480,432z"/>
+<path style="fill:#64B5F6;" d="M480,80H32C14.048,80,0,94.048,0,112c0,5.088,2.432,9.888,6.528,12.896L246.656,297.28
+	c5.568,4,13.088,4,18.656,0L505.44,124.896c4.128-3.008,6.56-7.808,6.56-12.896C512,94.048,497.952,80,480,80z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom/name.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 -32 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m453.332031 64h-394.664062c-32.363281 0-58.667969 26.304688-58.667969 58.667969v266.664062c0 32.363281 26.304688 58.667969 58.667969 58.667969h394.664062c32.363281 0 58.667969-26.304688 58.667969-58.667969v-266.664062c0-32.363281-26.304688-58.667969-58.667969-58.667969zm0 0" fill="#eceff1"/><path d="m304 0h-96c-20.585938 0-37.332031 16.746094-37.332031 37.332031v42.667969c0 20.585938 16.746093 37.332031 37.332031 37.332031h96c20.585938 0 37.332031-16.746093 37.332031-37.332031v-42.667969c0-20.585937-16.746093-37.332031-37.332031-37.332031zm0 0" fill="#607d8b"/><path d="m213.332031 202.667969c0 29.453125-23.875 53.332031-53.332031 53.332031s-53.332031-23.878906-53.332031-53.332031c0-29.457031 23.875-53.335938 53.332031-53.335938s53.332031 23.878907 53.332031 53.335938zm0 0" fill="#42a5f5"/><path d="m197.332031 277.332031h-74.664062c-32.363281 0-58.667969 26.304688-58.667969 58.667969v10.667969c0 8.832031 7.167969 16 16 16h160c8.832031 0 16-7.167969 16-16v-10.667969c0-32.363281-26.304688-58.667969-58.667969-58.667969zm0 0" fill="#42a5f5"/><g fill="#607d8b"><path d="m432 192h-117.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h117.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m432 277.332031h-117.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h117.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m432 362.667969h-117.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h117.332031c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></g></svg>

src/assets/custom/otp.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m240 8h32v48h-32zm0 0" fill="#757575"/><path d="m392 184c.054688-72.003906-56.019531-131.570312-127.890625-135.863281-71.875-4.292969-134.640625 48.179687-143.15625 119.675781-8.511719 71.496094 40.175781 137.242188 111.046875 149.949219v186.238281h120v-40h-72v-40h48v-40h-48v-66.238281c64.792969-11.59375 111.972656-67.941407 112-133.761719zm0 0" fill="#ffe082"/><path d="m352 184c0 53.019531-42.980469 96-96 96s-96-42.980469-96-96 42.980469-96 96-96 96 42.980469 96 96zm0 0" fill="#a6e7ff"/><g fill="#fff"><path d="m312 176h16v16h-16zm0 0"/><path d="m184 176h16v16h-16zm0 0"/><path d="m248 240h16v16h-16zm0 0"/></g><path d="m440.457031 107.0625 14.773438-6.125c-13.425781-32.246094-34.464844-60.753906-61.320313-83.089844l-10.230468 12.304688c24.855468 20.679687 44.335937 47.066406 56.777343 76.910156zm0 0"/><path d="m128.320312 30.152344-10.230468-12.304688c-26.847656 22.351563-47.90625 50.847656-61.394532 83.074219l14.769532 6.15625c12.488281-29.839844 31.992187-56.230469 56.855468-76.925781zm0 0"/><path d="m421.167969 153.449219 15.734375-2.898438c-10.921875-58.9375-49.863282-108.867187-104.367188-133.824219l-6.671875 14.546876c49.765625 22.777343 85.324219 68.359374 95.304688 122.175781zm0 0"/><path d="m75.097656 150.550781 15.734375 2.898438c9.980469-53.816407 45.539063-99.398438 95.304688-122.175781l-6.671875-14.546876c-54.503906 24.957032-93.445313 74.886719-104.367188 133.824219zm0 0"/><path d="m360 184c0-57.4375-46.5625-104-104-104s-104 46.5625-104 104 46.5625 104 104 104c57.410156-.066406 103.933594-46.589844 104-104zm-104 88c-48.601562 0-88-39.398438-88-88s39.398438-88 88-88 88 39.398438 88 88c-.058594 48.578125-39.421875 87.941406-88 88zm0 0"/><path d="m264 112h-16v80h48v-16h-32zm0 0"/><path d="m400 184c-.121094-70.191406-50.796875-130.085938-120-141.832031v-42.167969h-48v42.167969c-67.753906 11.390625-117.996094 69.101562-119.945312 137.78125-1.945313 68.675781 44.945312 129.144531 111.945312 144.355469v187.695312h136v-56h-72v-24h48v-56h-48v-51.695312c65.542969-14.832032 112.058594-73.105469 112-140.304688zm-152-168h16v24.40625c-2.664062-.148438-5.296875-.40625-8-.40625s-5.335938.257812-8 .40625zm72 376v24h-48v56h72v24h-104v-184.945312l-6.59375-1.175782c-65.253906-11.699218-110.777344-71.292968-104.902344-137.328125 5.875-66.039062 61.199219-116.660156 127.496094-116.660156s121.621094 50.621094 127.496094 116.660156c5.875 66.035157-39.648438 125.628907-104.902344 137.328125l-6.59375 1.175782v80.945312zm0 0"/><path d="m0 280h80v16h-80zm0 0"/><path d="m0 360h80v16h-80zm0 0"/><path d="m0 320h128v16h-128zm0 0"/><path d="m432 280h80v16h-80zm0 0"/><path d="m432 360h80v16h-80zm0 0"/><path d="m384 320h128v16h-128zm0 0"/></svg>