Reset Password API connection and UI

src/app/forgot-password/forgot-password.page.html

@@ -1,18 +1,52 @@
 <ion-content>
-  <section class="login">
-      <header>
-          Reset Password
-      </header>
-      <p class="description">
-          Please enter to your email
-      </p>
-
-      <div class="input-holder">
-          <input type="email" placeholder="Email ID" [(ngModel)]="email">
-      </div>
-      
-      <ion-button class="login-button" shape="round" size="block" (click)="getOtp()"> Get OTP </ion-button>
-
-      <p class="signin-description"> <a [routerLink]="['/login']"> Login </a> </p>
-  </section>
+    <section class="login" *ngIf="stepType === 'EMAIL'">
+        <header>
+            Reset Password
+        </header>
+        <p class="description">
+            Please enter to your email
+        </p>
+
+        <div class="input-holder">
+            <input type="email" placeholder="Email ID" [(ngModel)]="email">
+        </div>
+
+        <ion-button class="login-button" shape="round" size="block" (click)="getOtp()"> Get OTP </ion-button>
+
+        <p class="signin-description"> <a [routerLink]="['/login']"> Login </a> </p>
+    </section>
+
+    <section class="login" *ngIf="stepType === 'OTP'">
+        <header>
+            Reset Password
+        </header>
+        <p class="description">
+            Please verify the OTP
+        </p>
+
+        <div class="input-holder">
+            <input type="tel" placeholder="OTP" [(ngModel)]="otp">
+        </div>
+
+        <ion-button class="login-button" shape="round" size="block" (click)="verifyOtp()"> Verify OTP </ion-button>
+
+        <p class="signin-description"> <a (click)="stepType = 'EMAIL'"> Go to previous step? </a> </p>
+    </section>
+
+    <section class="login" *ngIf="stepType === 'RESET'">
+        <header>
+            Reset Password
+        </header>
+        <p class="description">
+            Please enter your new Password
+        </p>
+
+        <div class="input-holder">
+            <input type="password" placeholder="Password" [(ngModel)]="newPassword">
+        </div>
+
+        <ion-button class="login-button" shape="round" size="block" (click)="resetPassword()"> Reset Password </ion-button>
+
+        <p class="signin-description"> <a (click)="stepType = 'EMAIL'"> Go to previous step? </a> </p>
+    </section>
 </ion-content>

src/app/forgot-password/forgot-password.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../services/auth.service';
 import { ToastService } from '../services/toast.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-forgot-password',
@@ -9,23 +10,57 @@ import { ToastService } from '../services/toast.service';
 })
 export class ForgotPasswordPage implements OnInit {
     email: string = '';
+    otp: string | number = '';
+    newPassword: string = '';
+
+    stepType: 'EMAIL' | 'OTP' | 'RESET' = 'EMAIL';
 
     constructor(
         private authService: AuthService,
-        private toastService: ToastService
+        private toastService: ToastService,
+        private router: Router
     ) { }
 
     ngOnInit() {
     }
 
+    ionViewDidEnter() {
+        document.querySelector('.menu-icon-holder').classList.add('hide');
+    }
+
     getOtp() {
-        this.authService.forgotPassword(this.email).then((data) => {
-            console.log(data);
+        this.authService.forgotPassword(this.email).then(() => {
             this.toastService.presentToast("OTP Sent to your Email ID", "success");
-        }, (err) => {
-            console.log(err);
+            this.stepType = 'OTP';
+        }, () => {
             this.toastService.presentToast("Failed to send OTP, Please check your credentials", "danger");
         });
     }
 
+    verifyOtp() {
+        this.authService.validateOtpForForgotPassword({ email: this.email, otp: this.otp }).then(() => {
+            this.toastService.presentToast("Verified", "success");
+            this.stepType = 'RESET';
+        }, () => {
+            this.toastService.presentToast("Verification failed, please try again", "danger");
+        });
+    }
+
+    resetPassword() {
+        let credentials = {
+            email: this.email,
+            login_type: "user",
+            password: this.newPassword,
+            reEnteredPassword: this.newPassword
+        };
+
+        this.authService.resetPasswordForEmail(credentials).then(() => {
+            this.toastService.presentToast("Password Reset Complete", "success");
+            this.router.navigate(['/login']);
+            this.stepType = 'EMAIL';
+        }, () => {
+            this.toastService.presentToast("Please check your password", "danger");
+        });
+    }
+
 }

src/app/login/login.page.html

@@ -11,7 +11,7 @@
         </p>
 
         <div class="input-holder">
-            <input type="email" placeholder="Email ID" [(ngModel)]="credentials.username">
+            <input type="email" placeholder="Username" [(ngModel)]="credentials.username">
         </div>
 
         <div class="input-holder">

src/app/services/auth.service.ts

@@ -16,19 +16,21 @@ export class AuthService {
     }
 
     forgotPassword(email: string) {
-        return this.http.post(URL + '/forgot', { email: email }).toPromise();        
+        return this.http.post(URL + '/forgot', { email: email }).toPromise();
     }
 
-    validateOtpForEmail(data: { email: string, otp: number | string }) {
-        return this.http.post(URL + '/api/otp/validate', data).toPromise();
+    resetPasswordForEmail(data: any) {
+        return this.http.post(URL + '/reset', data).toPromise();
     }
 
-    // POST/api/auth/otpvalidate For Forgot password
-
-    requestMailOTP(email: string) {
-        return this.http.post(URL + '/api/otp/generate/', { email: email }).toPromise();
+    validateOtpForForgotPassword(data: { email: string, otp: number | string }) {
+        return this.http.post(URL + '/api/auth/otpvalidate', data).toPromise();
     }
 
+    validateOtpForEmail(data: { email: string, otp: number | string }) {
+        return this.http.post(URL + '/api/otp/validate', data).toPromise();
+    }   
+
     signupUser(credentials: any) {
         return this.http.post(URL + '/api/auth/signup/', credentials).toPromise();
     }