# <center>6^th^ August, 2019</center>

###### tags: `Daily Internship Documentation`
---
## 25^th^ Day of Internship

## Summary

Today I create a logout feature for the student app.

URL:
* [**NTUST_SmartDispenser Github ver 2019.08.06**](https://github.com/ianjoseph2204/NTUST_SmartDispenser/tree/7071ee36fb8dbe28dd0c85c018e38b39363709d8)

---
## Documentation

### 1. Dashboard Page
#### 1.1 dashboard.page.ts

1. Create a variable to store the boolean value of the Log out button.

private static logoutButton: boolean = false;

2. Modify the ionViewDidEnter().

  async ionViewDidEnter() {
    if (this.ngOnInitDone) {
      await this.getLoginEmail();

      // Log out button appear if user logged in.
      await DashboardPage.setLogOut(this.emailAddress);

      // always check if any report submitted from login id
      await this.setReportCondition(this.emailAddress);

      // always check if dispenser is being tracked
      await this.setTrackCondition(this.emailAddress);
    }
  }

3. Create getter & setter for logoutButton variable.

  getLogoutButton(): boolean {
    return DashboardPage.logoutButton;
  }

  public static setLogoutButton(value: boolean) {
    this.logoutButton = value;
  }

4. Create *logout()* method.

  /**
   * 1. Remove the user email from the preference.
   * 2. Display an alert when the logout is success.
   */
  async logout(){
    await this.pref.saveData(StaticVariable.KEY__SESSION_ID, "");

    // gives alert that track is success
    let alert = await this.alertCtrl.create({
      mode: 'ios',
      message: 'Logout success!',
      buttons: [
        {
          text: 'OK',
          handler: () => { }
        }
      ]
    });

    // display the alert controller
    await alert.present();

    DashboardPage.reloadPage();
  }

5. Create a method to set the logoutButton variable according to the session.

  /**
   * Set the Log out button is on or off depend of the existence of the user's email.
   *
   * @param email User's email address.
   */
  static async setLogOutBySession (email: string) {
    //If email is exist, display Logout button.
    if (email !== "") {
      DashboardPage.setLogoutButton(true);
    } else {
      DashboardPage.setLogoutButton(false);
    }
  }

#### 1.2 dashboard.page.html

1. Create a Logout button that will be appear if the user logged in.

            <!--If user is logged in, show Log out button-->
            <button class="more-button" *ngIf="getLogoutButton()" (click)="logout()" color="red">Log out</button>

---
## Result

<font color=red>After the user log in, the Logout button will appear in the More button:</font>