# 3th May Report
This is the tenth study report of NTUST internship. There is changed about layout from previous report on https://hackmd.io/s/HJupkLlo4.
## Summary
- Change about login and register layout page
- Remove Full Name input in register page
- Change the "policy" statement from below to above register button in register page
- Remove reset password link in login page
- Back end program of login and register page
- Both of them in typescript
- Add HttpClientModule to app.module in order to import function from Angular
## Documentation
### 1. Login page
#### 1.1. login.page.html
```htmlmixed=
<!DOCTYPE html>
<head>
<title>ACUO | Login Page</title>
</head>
<ion-content class="i-theme1">
<div class="header">
<img
class="img-header"
src="assets/acuo-icons/rectangle_2@3x.png"
alt="acuo-icons">
<h3>Welcome to ACUO login page</h3>
</div>
<div class="section">
<div>
<ion-item>
<ion-label position="floating">Email Address</ion-label>
<ion-input type="email" [(ngModel)]="email"></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>
<p style="text-align: center">
Don't have account yet?
<ion-text (click)="registerlink()" color="primary">Sign up</ion-text>
here.
</p>
</div>
</div>
</ion-content>
```
#### 1.2. login.page.ts
```typescript=
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http'
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage {
email: string = "";
password: string = "";
constructor(
private http: HttpClient,
private router: Router) { }
ngOnInit() {
}
async login() {
const { email, password } = this;
let postData = {
"Email" : email,
"Password" : password
}
this.http.post("https://smartcampus.et.ntust.edu.tw:5425/UserLogin", postData)
.subscribe(data => {
console.log(data);
if (data['code'] == 200) {
// go to dashboard
console.log("Login successed!")
this.router.navigate(['home']);
} else {
console.log("Login failed!")
}
}, error => {
console.log(error);
});
}
registerlink() {
this.router.navigate(['register']);
}
}
```
---
### 2. Register page
#### 1.1. register.page.html
```htmlmixed=
<!DOCTYPE html>
<head>
<title>ACUO | Register Page</title>
</head>
<ion-content class="i-theme1">
<div class="header">
<img
class="img-header"
src="assets/acuo-icons/rectangle_2@3x.png"
alt="acuo-icons">
<h3>Register and have your access to our smart dispenser!</h3>
</div>
<div class="section">
<div>
<!-- <ion-item>
<ion-label position="floating">Full Name</ion-label>
<ion-input type="email" [(ngModel)]="fullname"></ion-input>
</ion-item> -->
<ion-item>
<ion-label position="floating">Email Address</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Re-enter Password</ion-label>
<ion-input type="password" [(ngModel)]="repassword"></ion-input>
</ion-item>
</div>
<p style="text-align: center">
By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy.
You will receieve verification email in you mailbox in order to verify your account.
</p>
<div class="btn-yes">
<ion-button class="i-btn-yes" size="small" fill="solid" expand="block" (click)="signUp()">Sign up</ion-button>
</div>
</div>
</ion-content>
```
#### 1.2. register.page.ts
```typescript=
import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage {
email : string = "";
password : string = "";
repassword : string = "";
constructor(private http: HttpClient) { }
async signUp () {
let token = "";
const postDataToken = {
"UserName": "pwa_user001",
"Password": "password"
}
let getToken = await this.http.post(
"https://smartcampus.et.ntust.edu.tw:5425/Login",
postDataToken
).toPromise();
token = getToken['token'];
const { email, password, repassword } = this;
const postDataRegister = {
"Email" : email,
"Password" : password
}
if (password != repassword) {
console.log("Password not match!");
} else {
let httpOption = await {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': token
})
};
console.log(httpOption);
this.http.post("https://smartcampus.et.ntust.edu.tw:5425/CreateUser", postDataRegister, httpOption)
.subscribe(data => {
console.log(data);
}, error => {
console.log(error);
});
}
}
}
```
---
### 3. app.module.ts
```typescript=
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { HttpClientModule } from '@angular/common/http'
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
HttpClientModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
---
## References
- https://www.techiediaries.com/ionic-http-post/
- https://www.joshmorony.com/an-introduction-to-http-requests-fetching-data-in-ionic/
- https://forum.ionicframework.com/t/adding-authorization-header-in-get-request/91222/3
- https://angular.io/guide/http
- https://www.joshmorony.com/using-behaviorsubject-to-handle-asynchronous-loading-in-ionic/
- https://stackoverflow.com/questions/50232224/ionic-async-await-not-working
###### tags: `pre-intern report`
Sign in with Wallet
Connect another wallet