src/app/pages/login-page/login-page.component.ts
Login page component
| selector | app-login-page |
| styleUrls | login-page.component.scss |
| templateUrl | ./login-page.component.html |
Properties |
|
Methods |
constructor(auth: FirebaseAuthService, router: Router, formBuilder: FormBuilder, alert: AlertService)
|
||||||||||||||||||||
|
Constructor
Parameters :
|
| loginWithCredentials |
loginWithCredentials()
|
|
Login with credentials
Returns :
void
|
| loginWithFacebook |
loginWithFacebook()
|
|
Login with Facebook
Returns :
void
|
| loginWithGoogle |
loginWithGoogle()
|
|
Login with Google
Returns :
void
|
| loginWithTwitter |
loginWithTwitter()
|
|
Login with Twitter
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initialise component
Returns :
void
|
| resetPassword |
resetPassword()
|
|
Reset user password
Returns :
void
|
| Public error |
error:
|
Type : literal type
|
Default value : {
name: null,
message: null,
code: null
}
|
|
Firebase error |
| Private log |
log:
|
Default value : Log.create('LoginPageComponent')
|
|
Logger |
| Public loginForm |
loginForm:
|
Type : FormGroup
|
|
Login form group |
| Public resetPasswordForm |
resetPasswordForm:
|
Type : FormGroup
|
|
reset password form group |
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Log } from 'ng2-logger';
import { AlertService } from '../../services/alert/alert.service';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
/**
* Login page component
* @author Daniel Sogl
*/
@Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {
/**
* Logger
*/
private log = Log.create('LoginPageComponent');
/**
* Login form group
*/
public loginForm: FormGroup;
/**
* reset password form group
*/
public resetPasswordForm: FormGroup;
/**
* Firebase error
*/
public error: { name: string; message: string; code: string } = {
name: null,
message: null,
code: null
};
/**
* Constructor
* @param {FirebaseAuthService} auth FirebaseAuthService
* @param {Router} router Router
* @param {FormBuilder} formBuilder FormBuilder
*/
constructor(
private auth: FirebaseAuthService,
private router: Router,
private formBuilder: FormBuilder,
private alert: AlertService
) {
// Init login form
this.loginForm = this.formBuilder.group({
email: ['', Validators.email],
password: ['', Validators.required]
});
// Init reset password form
this.resetPasswordForm = this.formBuilder.group({
email: ['', Validators.email]
});
}
/**
* Initialise component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
}
/**
* Login with credentials
*/
loginWithCredentials() {
if (this.loginForm.valid) {
this.auth
.signInWithEmail(
this.loginForm.value.email,
this.loginForm.value.password
)
.then(() => {
this.log.d('Singed in with Email and password');
this.router.navigate(['dashboard']);
this.alert.showSuccess({ title: 'Login erfolgreich' });
})
.catch(err => {
this.error = err;
this.log.er('error', err);
this.alert.showError({ title: 'Es ist ein Fehler aufgetreten' });
});
}
}
/**
* Login with Google
*/
loginWithGoogle() {
this.auth
.signInWithGoogle()
.then(() => {
this.log.d('Singed in with Google');
this.router.navigate(['dashboard']);
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
/**
* Login with Facebook
*/
loginWithFacebook() {
this.auth
.signInWithFacebook()
.then(() => {
this.log.d('Singed in with Facebook');
this.router.navigate(['dashboard']);
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
/**
* Login with Twitter
*/
loginWithTwitter() {
this.auth
.signInWithTwitter()
.then(() => {
this.log.d('Singed in with twitter');
this.router.navigate(['dashboard']);
})
.catch(err => {
this.error = err;
this.log.er('error', err);
});
}
/**
* Reset user password
*/
resetPassword() {
if (this.resetPasswordForm.valid) {
this.auth
.sendResetPasswordMail(this.resetPasswordForm.value.email)
.then(() => {
this.log.d('Password reset mail sended');
})
.catch(err => {
this.log.er('Error sending reset mail', err);
});
}
}
}
<div class="row mt-5 pt-5">
<div class="col align-self-start"></div>
<div class="col align-self-center">
<div class="card" style="width: 24rem">
<div class="card-body mx-4">
<!--Header-->
<div class="text-center">
<h3 class="dark-grey-text mb-5">
<strong id="page_title">{{ 'LABELS.LOGIN' | translate }}</strong>
</h3>
</div>
<!--Body-->
<form [formGroup]="loginForm" (ngSubmit)="loginWithCredentials()">
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbActive type="email" class="form-control" formControlName="email" id="input_email" [class.is-valid]="!loginForm.controls.email.errors"
[class.is-invalid]="loginForm.controls.email.errors">
<label for="email">{{ 'INPUTS.USER_EMAIL' | translate }}</label>
<div class="invalid-feedback" *ngIf="loginForm.controls.email.errors">
{{ 'TEXTS.PROVIDE_VALID_EMAIL' | translate }}
</div>
</div>
<div class="md-form pb-3">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" class="form-control" formControlName="password" id="input_password" [class.is-valid]="!loginForm.controls.password.errors"
[class.is-invalid]="loginForm.controls.password.errors">
<label for="password">{{ 'INPUTS.USER_PASSWORD' | translate }}</label>
<div class="invalid-feedback" *ngIf="loginForm.controls.password.errors">
{{ 'TEXTS.PROVIDE_VALID_PASSWORD' | translate }}
</div>
<p class="font-small blue-text d-flex justify-content-end" (click)="resetPasswordModal.show()" id="open_reset_modal">
<a class="blue-text ml-1">{{ 'LABELS.FORGOT_PASSWORD' | translate }}</a>
</p>
<p1 class="text-danger" *ngIf="error.code">{{ ('FIREBASE_ERRORS.' + error.code) | translate }}</p1>
</div>
<div class="text-center mb-3">
<button type="submit" class="btn pink btn-lg btn-block" id="button_login" [disabled]="!loginForm.valid">{{ 'BUTTONS.LOGIN' | translate }}</button>
</div>
</form>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2">{{ 'LABELS.SIGN_IN_WITH' | translate }}</p>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a waves-effect waves-light" (click)="loginWithFacebook()"
id="button_login_with_facebook">
<i class="fa fa-facebook pink-text text-center"></i>
</button>
<!--Twitter-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a waves-effect waves-light" (click)="loginWithTwitter()"
id="button_login_with_twitter">
<i class="fa fa-twitter pink-text"></i>
</button>
<!--Google +-->
<button type="button" class="btn btn-white btn-rounded z-depth-1a waves-effect waves-light" (click)="loginWithGoogle()" id="button_login_with_google">
<i class="fa fa-google-plus pink-text"></i>
</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">{{ 'LABELS.NO_MEMBER' | translate }}
<a routerLink="/signup" class="blue-text ml-1" id="a_signup"> {{ 'LABELS.SIGN_UP' | translate }}</a>
</p>
</div>
</div>
</div>
<div class="col align-self-end"></div>
</div>
<!--Modal: Contact form-->
<div mdbModal #resetPasswordModal="mdb-modal" class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header indigo darken-3 white-text">
<h4 class="title">{{ 'LABELS.RESET_PASSWORD' | translate }}</h4>
<button type="button" id="btn_close_modal" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close"
(click)="resetPasswordModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()">
<div class="modal-body">
<p>{{ 'TEXTS.PASSWORT_RESET_MODAL' | translate }}</p>
<div class="md-form">
<input mdbActive type="email" id="input_modal_email" class="form-control" formControlName="email" [class.is-valid]="!resetPasswordForm.controls.email.errors"
[class.is-invalid]="resetPasswordForm.controls.email.errors">
<label for="form1">{{ 'INPUTS.USER_EMAIL' | translate }}</label>
<div class="invalid-feedback" *ngIf="resetPasswordForm.controls.email.errors">
{{ 'TEXTS.PROVIDE_VALID_EMAIL' | translate }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="button_modal_cancel" class="btn btn-danger btn-sm waves-light" data-dismiss="modal" (click)="resetPasswordModal.hide()"
mdbRippleRadius>{{ 'BUTTONS.CANCEL' | translate }}</button>
<button type="submit" id="button_modal_reset" class="btn btn-primary btn-sm waves-light" mdbRippleRadius (click)="resetPasswordModal.hide()"
[disabled]="resetPasswordForm.controls.email.errors">{{ 'BUTTONS.RESET_PASSWORD' | translate }}</button>
</div>
</form>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Contact form-->