# 26th July Report ## Progress Time: **09:50** Event: Entering the lab - My friend got fever so it took a time for me and my friends to help him first. - One of my friend has accompany him in dorm so that time above I just got arrived in lab. - Please this can be consideration why I came late. **m(_ _)m** --- ### Create auth pages for Repairman App Time: **11:38** - From the discussion result yesterday, we accept that for authenctication pages, Login and Register Page, will be using the same design as in Student/User app. - There will be adjustment for Repairman app, such as the color and design will as close same as the dashboard in Repairman app. #### 1. Login Page Time: **16:35** - New UI design with implement previous design and some changes <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/33-01.JPG" /> </center> <br> - In **login.page.html** ```htmlmixed= <ion-content class="i-theme1"> <div class="header"> <img class="img-header" src="assets/acuo-icons/logo-2@3xx.png" alt="acuo-icons"> </div> <div class="section"> <div class="section-inside"> <div> <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> <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> <ion-text (click)="registerlink()" color="primary">SIGN UP</ion-text> here. </h6> </div> </div> </div> </ion-content> ``` - In **login.page.scss** ```css= .i-theme1 { --background: #777777; --color: #000000; } .btn-yes { margin-top: 25px; } .i-btn-yes { --background: #259ed6; --color: #ffffff; } .header { text-align: center; font-weight: bold; margin-bottom: 75px; margin-top: 50px; } .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; margin: 50px 25px; padding: 5px; } h6 { text-align: center; } .signup { margin-top: 25px; } ``` #### 2. Register Page Time: **17:09** - Same as Login Page, using student app based design with some changes on theme and color. - Register page for Repairman app need more parameter, include: - Full name - Email address - Password - Employee ID - Profile picture <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/33-02.JPG" /> </center> <br> - In **register.page.html** ```htmlmixed= <!DOCTYPE html> <head> <title>ACUO | Register Page</title> </head> <ion-content class="i-theme1"> <div class="icon-cancel"> <img src="assets/cancel/rectangle@3x.png" alt="cancel" (click)="backFunc()"> </div> <div class="header"> <img class="img-header" src="assets/acuo-icons/logo-2@3xx.png" alt="acuo-icons"> </div> <div class="section"> <div class="section-inside"> <ion-item> <ion-label position="floating">Full Name</ion-label> <ion-input type="text" [(ngModel)]="fullname"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Employee ID</ion-label> <ion-input type="text" [(ngModel)]="employee_id"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Company Email Address</ion-label> <ion-input type="email" [(ngModel)]="email" (change)=checkEmail(email)></ion-input> <p *ngIf="emailFalse" class="falseInput">Email is invalid or must be company domain!</p> </ion-item> <ion-item> <ion-label position="floating">Password</ion-label> <ion-input type="password" [(ngModel)]="password" (change)=checkPassword(password)></ion-input> <p *ngIf="passwordFalse" class="falseInput">Password must minimum 6 character with at least contains 1 alphabet and 1 number!</p> </ion-item> <ion-item> <ion-label position="floating">Re-enter Password</ion-label> <ion-input type="password" [(ngModel)]="re_password" (change)=checkSamePassword(re_password)></ion-input> <p *ngIf="passwordFalse" class="falseInput">Password not match!</p> </ion-item> <ion-item> <div class="center"> <h6>Your picture</h6><br> <img src="/assets/upload-image/upload.png" class="uploadPhoto" /> </div> </ion-item> <h6 class="confirm-text"> By clicking <b>Sign Up</b>, you agree to our Terms, Data Policy and Cookie Policy. You will receieve verification email in your mailbox after the company verified your account. </h6> <div class="btn-yes"> <ion-button class="i-btn-yes" size="small" fill="solid" expand="block" (click)="signUp()">Sign up</ion-button> </div> </div> </div> </ion-content> ``` - In **register.page.scss** ```css= .i-theme1 { --background: #777777; --color: #000000; } .btn-yes { margin-top: 20px; } .i-btn-yes { --background: #259ed6; --color: #ffffff; } .icon-cancel { text-align: right; margin-top: 15px; margin-right: 15px; } .header { text-align: center; font-weight: bold; margin-bottom: 50px; } .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; margin: 50px 25px; padding: 5px; } h6 { text-align: center; } .falseInput { color: #ff0000; size: 12px } .confirm-text { text-align: center; margin: 30px 15px; } .uploadPhoto { display: block; opacity: 0.5; margin: 5px; max-height: 100px; } .center { margin-left: auto; margin-right: auto; } ``` --- ## Conclusion - Using authentication pages in Student App to re use in Repairman app with some changes. - Create new theme for UI design on Login and Register Page - Authentication system still on going because the API still on work, yet has the same flow. --- Time: **18:00** Event: Leaving the lab ###### tags: `on-intern`