# 5th July Report

## Progress

**08:44** Entering the lab

---

### Make session and timeout format
- **11:20** In Ionic, both front and back end code cannot implement `SESSION` like in PHP code.
- This because `$_SESSION` in PHP code is calling the function in server side.
- From the API, there is no function to generate session ID neither to store the ID of user when login.
- **16:38** To create session with timer, here using storage (preference) and Date class to compare between last time access and current time access.
- Using Date class, example:

        // this make new Date object with now local time
        let nowTime = new Date();

- When user make login, create new time and store into preference. The code should be like this but I haven't try it yet.

        // url we need
        let url = "https://smartcampus.et.ntust.edu.tw:5425/UserLogin";
        
        // data we need
        let postData = {
          "Email" : email,
          "Password" : password
        }
        
        // function to post the data into API
        this.http.post(url, postData).subscribe(data => {
            if (data['code'] == 200) {
              
              // get now local time
              let lastTime = new Date();
              
              // store data into preference
              this.storage.set('sessionId', email);
              this.storage.set('lastTime', lastTime);
              
              // navigate user into home or dashboard
              this.router.navigate(['home']);
              
            } else {
              console.log("Login failed!")
            }
          }, error => {
            console.error(error);
        });

- After that, every time page inside the PWA will have function, or call a function if using services, to check whether the there is `sessionId` or not.
- If `sessionId` is exists then the user has access to any page, otherwise it always navigate into login page.
<br>
- How to implement session timeout?
- The stored time is compared with the new Time.
- System will prompt checking `lastTime` and `nowTime` and compare both them.
- If the result is more than timeout limit time then it considered as session timeout.
- If the result is less than or equal to timeout limit the update the `lastTime` from `nowTime`.
- When the session is timeout, the user will navigated to login page with save the `currentPage` into temporary variables in preference.
- This means that if user make login again then it navigate to the last page.

---

### Testing using test page

**17:47** In here is using the test page to get `lastTime` and `nowTime`, compare both of them using simple button, and navigate if the result more than timeout limit.

#### 1. HTML front page code

<ion-content>
  <button (click)="clicked()">THIS IS BUTTON</button>
</ion-content>

#### 2. Typescript back end code

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  a: Date = new Date(2019, 6, 5, 18, 1, 0, 0);
  b: Date;

  constructor(private router: Router) { }

  ngOnInit() { }

  clicked () {
    this.b = new Date();
    let result = this.b.getTime() - this.a.getTime();
    console.log("Different time: " + result);

    if (result > 60000) {
      this.router.navigate(['home']);
      console.log("Go Home!");
    }
  }
}

#### 3. Result in console

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/20-01.JPG" style="max-height:300px" />
</center>
<br>

- I set the timeout to 1 minute, or 60 seconds, or in the code is 60000 (in miliseconds).
- On the left side is navigate to home page when timeout.
- On the right side can be seen that the last result is more than 60000, the user was navigated to home page.

---

### Next plan

- All the function for store and get local preference should be implement in services so it can be called from all pages.
- Timeout system should be automatically with background countdown and trigger the function to check the `lastTime` and `nowTime`.
- Testing in the project.
- Testing in the phone using local server from computer.

---

**18:05** Leaving the lab

###### tags: `on-intern`