Add error message is login failed

src/main/ts/src/app/login/login.component.html

@@ -1,7 +1,7 @@
 <div class="card col-md-8 offset-md-2 col-lg-6 offset-lg-3">
 	<div class="card-body">
 		<h4 class="card-title">Connexion</h4>
-		<form (ngSubmit)="onSubmit()" #loginForm="ngForm">
+		<form id="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
 			<div class="md-form">
 				<i class="fa fa-envelope prefix grey-text"></i>
 				<input mdbActive
@@ -30,6 +30,11 @@
 						required />
 				<label for="password">Password</label>
 			</div>
+			<div id="errorMsg" class="card red lighten-2 text-center z-depth-2">
+				<div class="card-body">
+					<p class="white-text mb-0">{{loginError}}</p>
+				</div>
+			</div>
 			<div class="col submitFormArea">
 				<a routerLink="/signin" class="indigo-text">
 					Je n'ai pas de compte

src/main/ts/src/app/login/login.component.ts

@@ -8,36 +8,55 @@ import { Router } from '@angular/router';
 	selector: 'app-login',
 	templateUrl: './login.component.html',
 	styles: [`
-		.card-body {
+		#form {
 			padding-bottom: 10px;
 		}
 
 		.submitFormArea {
 			line-height: 50px;
 		}
+
+		#errorMsg {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height 0.5s ease-out;
+			margin: 0;
+		}
 	`]
 })
 export class LoginComponent {
 	model: User = new User('', '', '', '', '', null, null, '');
-	loginFailed: boolean;
+	loginError: string;
 
 	constructor(
 		private loginService: LoginService,
 		private authService: AuthService,
 		private router: Router
-	) {
+	) {}
-		this.loginFailed = false;
-	}
 
 	onSubmit(): void {
-		this.loginFailed = false;
+		this.loginError = undefined;
 
 		this.loginService.login(this.model).subscribe(user => {
 			this.authService.setToken(user.token);
 			this.authService.setUser(user);
 			this.router.navigate(['/myPosts']);
 		}, error => {
-			this.loginFailed = true;
+			this.setMessage('Email ou password incorrect.');
 		});
 	}
+
+	setMessage(message: string): void {
+		this.loginError = message;
+
+		const resultMsgDiv = document.getElementById('errorMsg');
+		resultMsgDiv.style.maxHeight = '64px';
+
+		setTimeout(() => {
+			resultMsgDiv.style.maxHeight = '0px';
+			setTimeout(() => {
+				this.loginError = undefined;
+			}, 550);
+		}, 3000);
+	}
 }