src/app/login/login.component.ts
| selector | app-login |
| styleUrls | ./login.component.scss |
| templateUrl | ./login.component.html |
Properties |
Methods |
constructor(db: DbConnectionService, user: UserService, location: Location)
|
||||||||||||
|
Defined in src/app/login/login.component.ts:15
|
||||||||||||
|
Parameters :
|
| logIn |
logIn()
|
|
Defined in src/app/login/login.component.ts:32
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/login/login.component.ts:28
|
|
Returns :
void
|
| error |
Type : string
|
Default value : ""
|
|
Defined in src/app/login/login.component.ts:15
|
| form |
Type : UntypedFormGroup
|
|
Defined in src/app/login/login.component.ts:14
|
import { Component, OnInit } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { DbConnectionService } from '../services/db-connection.service';
import { User, UserService } from '../services/user.service';
import { Location } from '@angular/common';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
form: UntypedFormGroup;
error: string = ""
constructor(private db: DbConnectionService,
private user: UserService,
private location: Location) {
// initialize form fields
this.form = new UntypedFormGroup({
login: new UntypedFormControl(),
password: new UntypedFormControl(),
keepSignedIn: new UntypedFormControl()
});
}
ngOnInit(): void {
}
// onSubmit function
logIn() {
// collect form values
let d = this.form.getRawValue();
// sign in
this.db.signIn(d.login, d.password)
.then((r: User) => {
this.user.storeCookie = d.keepSignedIn
// set user locally
this.user.setUser(r);
// go back to previous page
this.location.back();
})
.catch(r => this.error = r.error.message);
}
}
<div style="margin: 10px;">
<div class="container">
<div class="row">
<div class="offset-md-2 col-md-8 offset-lg-3 col-lg-6">
<!-- Title -->
<h1>Log In</h1>
<!-- Form -->
<div class="card">
<div class="card-body">
<form [formGroup]="form" (ngSubmit)="logIn()">
<!-- Email address / Username -->
<div class="form-group">
<label for="inputEmail">
Email address / Username
</label>
<input
type="text"
class="form-control"
id="inputEmail"
placeholder="Enter Email / Username"
formControlName="login">
</div>
<!-- Password -->
<div class="form-group">
<label for="inputPassword">
Password
</label>
<input
type="password"
class="form-control"
id="inputPassword"
placeholder="Password"
formControlName="password">
</div>
<!-- Keep signed in Checkbox -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkBox" formControlName="keepSignedIn">
<label class="form-check-label" for="checkBox">
Keep me signed in
</label>
</div>
<!-- Log In Button-->
<button
type="submit"
class="btn btn-primary btn-block"
[disabled]="!(form.getRawValue().login && form.getRawValue().password)">
LOG IN
</button>
<!-- Errors -->
<small *ngIf="error" class="form-text">
<i style="color: red;">{{error}}</i>
</small>
<!-- Create account link-->
<a routerLink="/signup">
Create new account
</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
./login.component.scss