diff --git a/src/main/ts/src/app/login/login.component.html b/src/main/ts/src/app/login/login.component.html index 2c7bbf7..25e3a28 100755 --- a/src/main/ts/src/app/login/login.component.html +++ b/src/main/ts/src/app/login/login.component.html @@ -1,7 +1,7 @@

Connexion

-
+
+
+
+

{{loginError}}

+
+
Je n'ai pas de compte diff --git a/src/main/ts/src/app/login/login.component.ts b/src/main/ts/src/app/login/login.component.ts index 2ecdac0..25cdcba 100755 --- a/src/main/ts/src/app/login/login.component.ts +++ b/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); + } }