src/app/Views/login/login.component.ts
| selector | app-login |
| styleUrls | ./login.component.scss |
| templateUrl | ./login.component.html |
Properties |
Methods |
constructor(authService: AuthService, tokenStorage: TokenStorageService, router: Router)
|
||||||||||||
|
Defined in src/app/Views/login/login.component.ts:19
|
||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/Views/login/login.component.ts:33
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
Defined in src/app/Views/login/login.component.ts:41
|
|
Returns :
void
|
| reloadPage |
reloadPage()
|
|
Defined in src/app/Views/login/login.component.ts:61
|
|
Returns :
void
|
| accountName |
Type : string
|
Default value : ''
|
|
Defined in src/app/Views/login/login.component.ts:19
|
| errorMessage |
Type : string
|
Default value : ''
|
|
Defined in src/app/Views/login/login.component.ts:18
|
| form |
Type : any
|
Default value : {
email: null,
password: null,
}
|
|
Defined in src/app/Views/login/login.component.ts:12
|
| isLoggedIn |
Default value : false
|
|
Defined in src/app/Views/login/login.component.ts:16
|
| isLoginFailed |
Default value : false
|
|
Defined in src/app/Views/login/login.component.ts:17
|
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../Services/auth.service';
import { TokenStorageService } from '../../Services/token.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
form: any = {
email: null,
password: null,
};
isLoggedIn = false;
isLoginFailed = false;
errorMessage = '';
accountName = '';
/**
* @param {AuthService} privateauthService
* @param {TokenStorageService} privatetokenStorage
* @param {Router} privaterouter
*/
constructor(
private authService: AuthService,
private tokenStorage: TokenStorageService,
private router: Router
) {}
//ngOnInit() checks if a user is logged in
ngOnInit(): void {
this.tokenStorage.signOut();
if (this.tokenStorage.getToken()) {
this.isLoggedIn = true;
}
}
//onSubmit() saves valuable information in session storage
onSubmit(): void {
const { email, password } = this.form;
this.authService.login(email, password).subscribe(
(data) => {
this.tokenStorage.saveToken(data.data.token);
this.tokenStorage.saveUser(data.data);
this.isLoginFailed = false;
this.isLoggedIn = true;
this.accountName = email;
this.router.navigate(['']);
},
(err) => {
this.errorMessage = err.error.message;
this.isLoginFailed = true;
}
);
}
//reloadPage() reloads the page
reloadPage(): void {
window.location.reload();
}
}
<div class="col-md-4 login-container">
<div class="card card-container no-border">
<img
id="profile-img"
src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
class="profile-img-card"
/>
<form
*ngIf="!isLoggedIn"
name="form"
(ngSubmit)="f.form.valid && onSubmit()"
#f="ngForm"
novalidate
class="backgorund"
>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
class="form-control"
name="email"
[(ngModel)]="form.email"
required
email
#email="ngModel"
/>
<div class="alert-danger" *ngIf="email.errors && f.submitted">
<div *ngIf="email.errors?.['required']">Email is required</div>
<div *ngIf="email.errors?.['email']">
Email must be a valid email address
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
name="password"
[(ngModel)]="form.password"
required
minlength="6"
#password="ngModel"
/>
<div
class="alert alert-danger"
role="alert"
*ngIf="password.errors && f.submitted"
>
<div *ngIf="password.errors?.['required']">Password is required</div>
<div *ngIf="password.errors?.['minlength']">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
<div class="form-group">
<div
class="alert alert-danger"
role="alert"
*ngIf="f.submitted && isLoginFailed"
>
Login failed: {{ errorMessage }}
</div>
</div>
</form>
<div class="alert alert-success" *ngIf="isLoggedIn">
Logged in as {{ accountName }}.
</div>
<button class="btn btn-secondary btn-block" routerLink="/register">
Sign up
</button>
</div>
</div>
./login.component.scss
.login-container {
margin: auto;
width: 60vh;
padding-top: 10vh;
}
.no-border {
border: none;
}
.backgorund {
background-color: #181a1b;
color: white;
}