Repairman App - Reset Password page

• Repairman App - Reset Password page
  • HTML
  • SCSS
  • TS

tags: project-code

HTML

<ion-content class="i-theme1">

  <!-- cancel button on top right corner -->
  <div class="icon-cancel">
    <img src="assets/cancel/[e-mail]" alt="cancel" (click)="backFunc()">
  </div>

  <!-- Union/ACUO icon on top middle -->
  <div class="header">
    <img 
      class="img-header"
      src="assets/acuo-icons/[e-mail]"
      alt="acuo-icons">
  </div>

  <!-- body content -->
  <div class="section">
    <div class="section-inside">

      <!-- title on middle -->
      <div class="title">
        <h2><b>RESET<br>PASSWORD</b></h2>
      </div>

      <!-- email address or employee ID input form -->
      <ion-item>
        <ion-label position="floating">Email Address/Employee ID</ion-label>
        <ion-input required type="text" [(ngModel)]="credential"></ion-input>
      </ion-item>

      <!-- new password input form -->
      <ion-item>
        <ion-label position="floating">New Password</ion-label>
        <ion-input required type="password" [(ngModel)]="new_password" (change)=checkPassword(password)></ion-input>
        <p *ngIf="passwordFalse" class="falseInput">Password must minimum 8 character with at least contains 1 alphabet and 1 number!</p>
      </ion-item>

      <!-- re enter new password input form -->
      <ion-item>
        <ion-label position="floating">Re-Type New Password</ion-label>
        <ion-input required type="password" [(ngModel)]="re_new_password"></ion-input>
      </ion-item>

      <!-- verification code input form -->
      <ion-item>
        <ion-label position="floating">Verification Code</ion-label>
        <ion-input required type="text" [(ngModel)]="verif_code"></ion-input>
      </ion-item>
  
      <!-- reset password button -->
      <div class="btn-yes">
        <ion-button class="i-btn-yes" size="small" fill="solid" expand="block" (click)="reset()">Reset Password</ion-button>
      </div>

    </div>
  </div>
  
</ion-content>

SCSS

.i-theme1 {
    --background: #777777;
    --color: #000000;
}

.btn-yes {
    margin-top: 25px;
}

.icon-cancel {
    text-align: right;
    margin-top: 15px;
    margin-right: 15px;
}

.i-btn-yes {
    --background: #259ed6;
    --color: #ffffff;
}

.header {
    text-align: center;
    font-weight: bold;
    margin-bottom: 25px;
    margin-top: 8px;
}

.img-header {
    max-height: 60px; 
    max-width: 100%; 
}

.section-inside {
    background: #ffffff;
    color: #2c2c2c;
    padding: 10px;
}

.section {
    border-style: solid;
    border-width: 5px;
    border-color: #259ed6;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 2px #aad3e6;
    margin-left: 25px;
    margin-right: 25px;
    padding: 5px;
}

.register {
    color: #259ed6;
    font-weight: bold;
}

.title {
    text-align: center; 
    margin-bottom: 24px; 
    border-bottom: solid #00000055 1px
}

TS

import { Component, OnInit } from '@angular/core';
import { DispenserAPIService } from 'src/app/services/DispenserAPI/dispenser-api.service';
import { NavController, ToastController, LoadingController } from '@ionic/angular';
import { LoginSessionService } from 'src/app/services/LoginSession/login-session.service';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.page.html',
  styleUrls: ['./reset-password.page.scss'],
})
export class ResetPasswordPage implements OnInit {

  // form attributes
  credential = "";
  new_password = "";
  re_new_password = "";
  verif_code = "";
  
  // password checking attributes
  passwordFalse = false;

  // loadCtrl var
  makeLoading: any;

  constructor(
    private navCtrl: NavController,
    private api: DispenserAPIService,
    private toastCtrl: ToastController,
    private loadCtrl: LoadingController,
    private chk: LoginSessionService
  ) { }

  ngOnInit() {
  }

  ionViewDidEnter () {
    this.chk.blockToAuthPages();
  }

  /**
   * To going back, or route back, to the previous
   * opened page.
   */
  backFunc() {
    this.navCtrl.back();
  }

  /**
   * Create the loading controller
   */
  async createLoadCtrl () {

    // insert component of loading controller
    this.makeLoading = await this.loadCtrl.create({
      message: 'Loading data ...',
      spinner: 'crescent',
      duration: 10000
    });

    // display the loading controller
    await this.makeLoading.present();
  }

  /**
   * Dismiss the loading controller
   */
  async dismissLoadCtrl () {
    this.makeLoading.dismiss();
  }

  /**
   * Repairman confirm the Reset Password by click the RESET
   * button, it will send the data to API and return a value
   * to know if it success or failed.
   */
  async reset () {
    
    // initial local variables
    let myToast: any;
    let myToastRespond: number;
    let myToastMessage: string = "";
    const { credential, new_password, re_new_password, verif_code } = this;

    // check if input form is complete
    if (
      credential === "" ||
      new_password === "" ||
      re_new_password === "" ||
      verif_code === ""
    ) {
      myToastMessage = "Please fill in all the required form!"
    } else {

      // create loading screen
      await this.createLoadCtrl();
      
      // send data into API with return value
      // success is 1 and failed is others with result Message
      let resultData = await this.api.resetPassword(credential, new_password, re_new_password, verif_code);
      myToastRespond = resultData['RepsondNum'];
      myToastMessage = resultData['Message'];
    }

    // create Toast with myToastMessage as message display
    myToast = await this.toastCtrl.create({
      message: myToastMessage,
      duration: 2000,
      position: 'top',
      showCloseButton: true,
      closeButtonText: 'Close'
    });

    // display the Toast
    await myToast.present();

    // dismiss the loading screen
    this.dismissLoadCtrl();

    // if success go back to login page
    if (myToastRespond === 1) {
      this.navCtrl.back();
      this.navCtrl.back();
    }
  }
  
  /**
   * Check the input password inside the form with regex,
   * it must have at least 1 alphabet, 1 number, and minimum
   * with 6 characters.
   *
   * @param password
   */
  checkPassword (password: string) {
    
    // regex logic for Password
    let regexString = '^(?=.*[0-9]+.*)(?=.*[a-zA-Z]+.*)[0-9a-zA-Z]{8,}$';
    let reg = new RegExp(regexString);

    // set emailFalse value with testing regex from input
    this.passwordFalse = !reg.test(password);    
  }
}