# 7 August Report

## Progress

Time: **08:57**
Event: Entering the lab

---

### Error handling in home page on Repairman App

Time: **11:02**
- To prevent data being processed without any value inside, we create an error handling on both front end (HTML) and back end (TS).
- The reason why we have to create an error handling when process the data because it will be showed as error when some value/attributes are missing and stop processing the rest of code.
- The affect is some data that there is no any error where put after these error will not be executed.
- This error handling will be put on when get the data from the API and check if is it present (has value) or not (null or empty or undefined).
- If no value from API, or from service which handling how to get the data from API, then we should notify the next process function that should not process anything and return no data too, also on front end code (HTML) give condition if data has no value then it should be displayed.
- In **home.page.ts** we test on Today Mission part:

    let todayMissionRawData = await this.api.getAssignmentToday(this.device_id, this.employee_id, this.currentTime);
    if (todayMissionRawData.length === 0) {
      this.todayMissionList = await this.processDataTodayMission(todayMissionRawData);
    } else {
      this.todayMissionList = null;
    }

- `todayMissionRawData` get the data from service which is will receive data from API.
- Check if `todayMissionRawData` has array data or not by using its length because it will return empty array when didn't get any data from API, or because the data was filtered by time function inside the dispenser API service.
- If `todayMissionRawData` has value then process it with `processDataTodayMission()` function and put it into `todayMissionList`, and if not then put `null` into `todayMissionList`.

- In **home.page.html** we must also handling where the data has value or null.

    <ion-list class="ion-list--no-background"  *ngIf="loadReady && todayMissionList !== null">

        ...

    </ion-list>

    <div class="no-data" *ngIf="!loadReady">
      <b>Please wait ...</b>
    </div>

    <div class="no-data" *ngIf="loadReady && todayMissionList === null">
      <b>No mission for today.</b>
    </div>

- On `ion-list` we have boolean expression `*ngIf` to check if `todayMissionList` has value or null.
- If it has value then run the `ion-list` code and do not run when it is null.
- In line 11 to 13 we have simple code to display "No mission for today." that will be displayed when `todayMissionList` is null.
- Result display:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-01.gif" style="max-width: 250px" />
</center>
<br>

- From above we can see they will handle data for Today Mission both when the data is present and being processed and is not present, or null, and not being processed instead display text to tell there is no data/mission.
- We can implement these in Done Mission and Future Mission with the same way.

---

### Create the authentication page for Repairman App

Time: **13:58**
- Before implement into authentication page, which the design has been created, we should test the API first.
- Mr. Johnny has create the API two days ago and now I will test it using Postman.
- Result testing using postman, all API are working properly.
- Create account, must authorized by token:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-02.JPG" style="max-width: 500px" />
</center>
<br>

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-03.JPG" style="max-width: 500px" />
</center>
<br>

- Validate account, this API is not in Repairman App but in company side

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-04.JPG" style="max-width: 350px" />
</center>
<br>

- Login account, can either using email or employee id

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-05.JPG" style="max-width: 350px" />
</center>
<br>

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-06.JPG" style="max-width: 350px" />
</center>
<br>

- Forgot password, can either using email or employee id

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-07.JPG" style="max-width: 350px" />
</center>
<br>

- Reset the password, must authorized by token also can either using email or employee id:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-09.JPG" style="max-width: 350px" />
</center>
<br>

---

Time: **15:53**
- We are going to receive the data from API using dispenser API service as the handler.
- The function we want:
- **getToken()**, to get a token for create account and reset password.
- **loginUser()**, to do login into system.
- **registerUser()**, to do registration and insert into database.
- **forgotPassword()**, to reset the password by send a verification code to email address.
- **resetPassword()**, to reset the password after get the verification code.
- Function for **registration**

    async registerRepairman (
        fullname: string, 
        email: string, 
        password: string, 
        repassword: string, 
        employee_id: string, 
        photo: any
      ) {

        let url = this.urlCreateRepairman;
        let token: string = "";
        let returnValue = {
          "RepsondNum": -1,
          "Message": "Null message."
        }

        try {
          token = await this.getToken();
        } catch (e) {
          console.error("Function error: on registerRepairman while getToken => " + e);
          returnValue = {
            "RepsondNum": -1,
            "Message": "There is an error from server, please try again later!"
          };
        }

        if (password !== repassword) {
          returnValue = {
            "RepsondNum": 0,
            "Message": "Password not match!"
          };
        } else {

          const postDataRegister = {
            "Email": email,
            "FullName": fullname,
            "EmployeeID": employee_id,
            "Password": password,
            "Picture": photo
          }

          console.log(postDataRegister);


          let httpOption = await {
            headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Authorization': token
            })
          };

          await this.http.post(url, postDataRegister, httpOption).toPromise()
          .then((result) => {
            console.log("Msg: " + result['msg']);

            if (result['code'] === 200){
              returnValue = {
                "RepsondNum": 1,
                "Message": "Registration success!"
              };
            } else {
              console.error("Error while sending request: " + result['msg']);

              returnValue = {
                "RepsondNum": 0,
                "Message": result['msg']
              };
            }
          }, (result) => {     

            console.error("Promise rejected: unable to register!");

            returnValue = {
              "RepsondNum": -1,
              "Message": result['error']['msg']
            };
          })
          .catch((e) => {
            console.error("Function error: on registerRepairman => " + e);

            returnValue = {
              "RepsondNum": -1,
              "Message": "There is an unexpected error, please try again later!"
            };
          });
        }  

        return returnValue; 
      }

- Function for **login**
- Using email

        async loginRepairmanUsingEmail (email: string, password: string) {

          let url = this.urlLoginRepairman;

          const postBody = {
            "Email": email,
            "Password": password
          };

          return await this.http.post(url, postBody).toPromise()
            .then((result) => {
              if (result['code'] === 200) {
                return 1;
              } else {
                console.error("Error while log in: " + result['msg']);
                return 0;
              }
            }, () => {
              console.error("Promise rejected: unable to login!");
              return 0;
            })
            .catch((e) => {
              console.error("Function error: on loginRepairmanUsingEmail => " + e);
              return -1;
            });
        }

- Using employee ID

        async loginRepairmanUsingEmployeeId (employee_id: string, password: string) {

          let url = this.urlLoginRepairman;

          const postBody = {
            "EmployeeID": employee_id,
            "Password": password
          };

          return await this.http.post(url, postBody).toPromise()
            .then((result) => {
              if (result['code'] === 200) {
                return 1;
              } else {
                console.error("Error while log in: " + result['msg']);
                return 0;
              }
            }, () => {
              console.error("Promise rejected: unable to login!");
              return 0;
            })
            .catch((e) => {
              console.error("Function error: on loginRepairmanUsingEmployeeId => " + e);
              return -1;
            });
        }

- Function for **forgot password**
- Using email

        async forgotPasswordUsingEmail (email: string) {

          let url = this.urlForgotPassword;

          const postBody = {
            "Email": email
          };

          return await this.http.post(url, postBody).toPromise()
            .then((result) => {
              if (result['code'] === 200) {
                return 1;
              } else {
                console.error("Error while send reset password request: " + result['msg']);
                return 0;
              }
            }, () => {
              console.error("Promise rejected: unable to send reset password request!");
              return 0;
            })
            .catch((e) => {
              console.error("Function error: on forgotPasswordUsingEmail => " + e);
              return -1;
            });
        }

- Using employee ID

        async forgotPasswordUsingEmployeeId (employee_id: string) {

          let url = this.urlForgotPassword;

          const postBody = {
            "EmployeeID": employee_id
          };

          return await this.http.post(url, postBody).toPromise()
            .then((result) => {
              if (result['code'] === 200) {
                return 1;
              } else {
                console.error("Error while send reset password request: " + result['msg']);
                return 0;
              }
            }, () => {
              console.error("Promise rejected: unable to send reset password request!");
              return 0;
            })
            .catch((e) => {
              console.error("Function error: on forgotPasswordUsingEmployeeId => " + e);
              return -1;
            });
        }

- Function for **reset password**
- Using email

        async resetPasswordUsingEmail (email: string, newPassword: string, reNewPassword: string, verifCode: string) {

          let url = this.urlResetPassowrd;

          if (newPassword !== reNewPassword) {

            console.error("Password not match!");
            return 0;
          } else {

            const postBody = {
              "Email": email,
              "Password": newPassword,
              "VerificationCode": verifCode
            };

            return await this.http.post(url, postBody).toPromise()
              .then((result) => {
                if (result['code'] === 200) {
                  return 1;
                } else {
                  console.error("Error while reset password: " + result['msg']);
                  return -1;
                }
              }, () => {
                console.error("Promise rejected: unable to reset password!");
                return -1;
              })
              .catch((e) => {
                console.error("Function error: on resetPasswordUsingEmail => " + e);
                return -1;
              });
          }
        }

- Using employee ID

        async resetPasswordUsingEmployeeId (employee_id: string, newPassword: string, reNewPassword: string, verifCode: string) {

          let url = this.urlResetPassowrd;

          if (newPassword !== reNewPassword) {

            console.error("Password not match!");
            return 0;
          } else {

            const postBody = {
              "EmployeeID": employee_id,
              "Password": newPassword,
              "VerificationCode": verifCode
            };

            return await this.http.post(url, postBody).toPromise()
              .then((result) => {
                if (result['code'] === 200) {
                  return 1;
                } else {
                  console.error("Error while reset password: " + result['msg']);
                  return -1;
                }
              }, () => {
                console.error("Promise rejected: unable to reset password!");
                return -1;
              })
              .catch((e) => {
                console.error("Function error: on resetPasswordUsingEmployeeId => " + e);
                return -1;
              });
          }
        }

- Basically, every function with option either using email or employee ID only has different in post body, one of it using email and the other one using employee ID.
- Testing the API using pre-defined code:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-10.JPG" style="max-width: 350px" />
</center>
<br>

- Result is true, the registration is success.

---

Time: **17:40**
- We try to implement into Login Page.
- login.page.html

        <div class="section">
          <div class="section-inside">
            <ion-item>
              <ion-label position="floating">Email Address/Employee ID</ion-label>
              <ion-input type="text" [(ngModel)]="credential"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="floating">Password</ion-label>
              <ion-input type="password" [(ngModel)]="password"></ion-input>
            </ion-item>

            <div class="btn-yes">
              <ion-button class="i-btn-yes" size="small" fill="solid" expand="block" (click)="login()">Login</ion-button>
            </div>

            <div class="signup">
              <h6>Don't have account yet? <br>
                <span class="register" (click)="registerLink()">SIGN UP</span>
              </h6>
            </div>
          </div>
        </div>

- login.page.ts

        // field variable to store input
        credential: string = "";
        password: string = "";

        constructor(
          private navCtrl: NavController,
          private api: DispenserAPIService,
          private pref: PreferenceManagerService
        ) { }

        ngOnInit() {
        }

        async login() {

          const { credential, password } = this;

          let resultData: any;
          resultData = await this.api.loginRepairmanUsingEmail(credential, password);

          if (resultData === 0) {
            resultData = await this.api.loginRepairmanUsingEmployeeId(credential, password);
          }

          console.log(resultData);
        }

- Result in login page using email address:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-11.JPG" style="max-width: 500px" />
</center>
<br>

- The console show "1" means that the login is success.

- Try again using employee ID:

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/41-12.JPG" style="max-width: 500px" />
</center>
<br>

- Same result, console show "1" means that the login is success.
- On the console there is error showing, it's because the code call login using email first then if fails login using employee ID.
- The rest of authentication pages will continue on next progress.

---

## Conclusion

- To handle the data which get from the dispenser API service, it must has two condition when the data is empty and when is not empty or the data is present.
- The purpose is to handle the compiler not get error and stop the process so the first condition will not being processed and return null value, in front page also handling if data is null then shows only text instead of list of items.
- Implement the API from Johnny for authentication pages, they are Login Page, Register Page, Forgot Password Page, and Reset Password Page.
- Already test using Postman, implement into Dispenser API service, and then implement into Login Page to test the service.
- Login Page is success, the rest of authentication pages will be worked on next progress.

---

Time: **18:00**
Event: Leaving the lab

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