verificationnumber page added

src/app/app-routing.module.ts

@@ -124,7 +124,8 @@ const routes: Routes = [
   {
     path: 'changeaddress',
     loadChildren: './changeaddress/changeaddress.module#ChangeaddressPageModule'
-  }
+  },
  { path: 'verficationnumber', loadChildren: './verficationnumber/verficationnumber.module#VerficationnumberPageModule' }
+
 ];
 @NgModule({
   imports: [

src/app/app.component.scss

@@ -12,6 +12,7 @@
     padding-left: 20px;
     padding-top: 20px;
     padding-right: 10px;
+    padding-bottom: 55px;
     .top_banner {
         .top_image {
             width: 60px;

src/app/profile/profile.page.html

@@ -16,10 +16,7 @@
       </div> -->
 
             <div class="profile_circle">
-        <img
-          [src]="loggedUser.profilePhoto"
-          onerror="this.src='./../assets/asset_avatar.png'"
-        />
+                <img [src]="loggedUser.profilePhoto" onerror="this.src='./../assets/asset_avatar.png'" />
                 <div class="edit"></div>
                 <input type="file" accept="image/*" (change)="fileChange($event)" />
             </div>
@@ -30,11 +27,8 @@
         <div class="account_wrapper">
             <div class="account_header">
                 <h5 class="floatLeft">ACCOUNT INFORMATION</h5>
-        <span
-          class="floatRight"
-          (click)="goToPage('changedetails', user && user)"
-          ><img src="../../assets/edit.png"
-        /></span>
+                <span class="floatRight" (click)="goToPage('changedetails', user && user)"><img
+            src="../../assets/edit.png" /></span>
                 <div class="clear"></div>
             </div>
             <div class="row">
@@ -46,12 +40,9 @@
                     </ion-col>
                     <ion-col class="textRight p0">
                         <h6>{{loggedUser.phone}}</h6>
-            <span class="ar-span" *ngIf="loggedUser.phoneVerified == true"
-              >Verified</span
-            >
-            <span class="ar-span" *ngIf="loggedUser.phoneVerified == false"
-              >Not Verified yet</span
-            >
+                        <span class="ar-span" *ngIf="loggedUser.phoneVerified == true">Verified</span>
+                        <span class="ar-span" *ngIf="loggedUser.phoneVerified == false" (click)="goToPage('verficationnumber')">Not
+              Verified yet</span>
                     </ion-col>
                 </ion-row>
             </div>
@@ -64,12 +55,8 @@
                     </ion-col>
                     <ion-col class="textRight p0">
                         <h6>{{loggedUser.emailId}}</h6>
-            <span class="ar-span" *ngIf="loggedUser.emailVerified == true"
-              >Verified</span
-            >
-            <span class="ar-span" *ngIf="loggedUser.emailVerified == false"
-              >Not Verified yet</span
-            >
+                        <span class="ar-span" *ngIf="loggedUser.emailVerified == true">Verified</span>
+                        <span class="ar-span" *ngIf="loggedUser.emailVerified == false">Not Verified yet</span>
                     </ion-col>
                 </ion-row>
             </div>
@@ -148,10 +135,7 @@
                     <button class="btn-cancel floatLeft" (click)="istoggle();">
             Cancel
           </button>
-          <button
-            class="btn-logout floatRight"
-            (click)="authService.SignOut(); istoggle()"
-          >
+                    <button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">
             Logout
           </button>
                 </div>

src/app/verficationnumber/verficationnumber.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { VerficationnumberPage } from './verficationnumber.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: VerficationnumberPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [VerficationnumberPage]
+})
+export class VerficationnumberPageModule {}

src/app/verficationnumber/verficationnumber.page.html

+<div class="nav_header">
+    <button class="nav_btn nav_back floatLeft" (click)="goBack()">
+    <img src="../assets/Group17_2.png" />
+  </button>
+    <div class="nav_title floatLeft">
+        <h4>VERIFICATION</h4>
+    </div>
+    <div class="clear"></div>
+</div>
+<ion-content>
+    <div class="verification_div" *ngIf="authService.userPostData">
+        <div class="form_div">
+            <div class="row">
+                <p>We have sent and OTP to</p>
+                <h6>+01 {{authService.userPostData.phone}}</h6>
+            </div>
+            <div class="row">
+                <input class="" type="number" placeholder="Type OTP" maxlength="4" #otp required />
+            </div>
+            <div class="row">
+                <button class="login_btn" (click)="authService.verify(otp.value)">
+          SUBMIT
+        </button>
+            </div>
+            <div class="row">
+                <button class="resend_btn" (click)="authService.resend()">
+          RESEND
+        </button>
+            </div>
+            <h6>OTP: {{authService.userPostData.otp}}</h6>
+        </div>
+    </div>
+    <div class="loader" *ngIf="authService.loader">
+        <div class="lds-ripple">
+            <div></div>
+            <div></div>
+        </div>
+    </div>
+</ion-content>
\ No newline at end of file

src/app/verficationnumber/verficationnumber.page.scss

+ .verification_div {
+     width: 80%;
+     margin: 0 auto;
+     .form_div {
+         padding-top: 30%;
+         .row {
+             margin-bottom: 20px;
+             input {
+                 border: 1px solid rgba(215, 213, 228, 1);
+                 background: transparent;
+                 color: #000;
+                 width: 100%;
+                 height: 45px;
+                 text-align: center;
+                 border-radius: 8px;
+                 font-size: 16px;
+                 outline: none;
+                 transition: all .4s ease-in-out;
+                 &::placeholder {
+                     color: rgba(215, 213, 228, 1);
+                 }
+                 &:focus {
+                     border: 1px solid #f3d09f;
+                     box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
+                 }
+             }
+             .login_btn {
+                 width: 100%;
+                 background-color: #29285b;
+                 color: #fff;
+                 border-radius: 8px;
+                 height: 45px;
+                 font-size: 16px;
+             }
+             .resend_btn {
+                 width: 100%;
+                 background-color: transparent;
+                 color: #29285b;
+                 border-radius: 8px;
+                 height: 45px;
+                 font-size: 16px;
+                 font-weight: 900;
+             }
+             hr {
+                 border: 1px solid rgba(215, 213, 228, 1);
+                 border-bottom: none;
+                 margin-top: 30px;
+                 margin-bottom: 10px;
+             }
+             P {
+                 text-align: center;
+                 color: rgba(59, 57, 77, 1);
+                 margin: 0px;
+                 text-align: center;
+                 span {
+                     background-color: #fff;
+                     padding: 10px;
+                     font-size: 18px;
+                 }
+             }
+             h4 {
+                 color: rgba(59, 57, 77, 1);
+                 text-align: center;
+                 margin: 0px;
+                 padding-top: 15px;
+             }
+             h6 {
+                 color: rgba(41, 40, 91, 1);
+                 text-align: center;
+                 font-weight: bold;
+                 padding-bottom: 20%;
+                 font-size: 25px;
+                 .styled-checkbox {
+                     position: absolute;
+                     opacity: 0;
+                     &+label {
+                         position: relative;
+                         cursor: pointer;
+                         padding: 0;
+                     }
+                     &+label:before {
+                         content: '';
+                         margin-right: 10px;
+                         display: inline-block;
+                         vertical-align: text-top;
+                         width: 30px;
+                         height: 30px;
+                         border-radius: 10px;
+                         background: white;
+                         border: 1px solid rgba(215, 213, 228, 1);
+                     }
+                     // Box checked
+                     &:checked+label:before {
+                         background: #29285b;
+                     }
+                     // Disabled state label.
+                     &:disabled+label {
+                         color: #b8b8b8;
+                         cursor: auto;
+                     }
+                     // Disabled box.
+                     &:disabled+label:before {
+                         box-shadow: none;
+                         background: #ddd;
+                     }
+                     // Checkmark. Could be replaced with an image
+                     &:checked+label:after {
+                         content: '';
+                         position: absolute;
+                         left: 10px;
+                         top: 15px;
+                         background: white;
+                         width: 2px;
+                         height: 2px;
+                         box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+                         transform: rotate(45deg);
+                     }
+                 }
+             }
+             .social_div {
+                 border: 1px solid rgba(215, 213, 228, 1);
+                 height: 45px;
+                 border-radius: 20px;
+                 .social_btn {
+                     display: inline-block;
+                     width: 50%;
+                     text-align: center;
+                     height: 100%;
+                     font-size: 18px;
+                     padding: 9px;
+                 }
+             }
+         }
+     }
+ }
\ No newline at end of file

src/app/verficationnumber/verficationnumber.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VerficationnumberPage } from './verficationnumber.page';
+
+describe('VerficationnumberPage', () => {
+  let component: VerficationnumberPage;
+  let fixture: ComponentFixture<VerficationnumberPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VerficationnumberPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VerficationnumberPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/verficationnumber/verficationnumber.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AuthService } from './../../config/auth.service';
+
+@Component({
+  selector: 'app-verficationnumber',
+  templateUrl: './verficationnumber.page.html',
+  styleUrls: ['./verficationnumber.page.scss']
+})
+export class VerficationnumberPage implements OnInit {
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private location: Location,
+    public authService: AuthService
+  ) {}
+
+  ngOnInit() {}
+
+  goToPage(path, data = null) {
+    this.router.navigateByUrl(path, { queryParams: data });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  goBack() {
+    this.location.back();
+  }
+}