Implementation of Better Error Handling on Login

src/app/header/header-popup/login/login.component.ts

@@ -3,12 +3,13 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
-import { Subscription } from 'rxjs';
+import {Subscription, timeout} from 'rxjs';
 import { AuthService } from 'src/app/shared/auth/auth.service';
 import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
 import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
 import UserChecker from 'src/app/shared/model/user/user.checker';
 import { User } from 'src/app/shared/model/user/user.model';
+import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
 
 
 const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
@@ -17,18 +18,81 @@ const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
-    styleUrls: ['./login.component.css']
+    styleUrls: ['./login.component.css'],
+    animations: [
+        trigger('resizeContainerForErrorMessage', [
+            state('hide',
+                style({
+                    height: '100px',
+                    width: '370px',
+                })
+            ),
+            transition(
+                'show => hide',
+                group([
+                    query(
+                        "@*",
+                        animateChild(),
+                        { optional: true }
+                    ),
+                    animate('1s ease')
+                ])
+            )
+        ]),
+        trigger('showErrorMessage', [
+            state('show',
+                style({
+                    opacity: 1,
+                    height: '100px',
+                    width: '340px',
+                })
+            ),
+            state('hide',
+                style({
+                    opacity: 0,
+                    height: '0px',
+                    width: '0px',
+                })
+            ),
+            transition(
+                '* => show',
+                animate(
+                    '500ms ease-in'
+                )
+            ),
+        ]),
+        trigger('hideAuthContainer', [
+            state('hide',
+                style({
+                    opacity: 0,
+                })
+            ),
+            transition(
+                'show => hide',
+                group([
+                    query(
+                        "@*",
+                        animateChild(),
+                        { optional: true }
+                    ),
+                    animate(
+                        '250ms ease-out'
+                    )
+                ])
+            )
+        ]),
+    ]
 })
 export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
 
     @Input()
-    state: boolean = false;
+        state: boolean = false;
 
     @Input()
-    ignoreClickOutside!: HTMLDivElement[];
+        ignoreClickOutside!: HTMLDivElement[];
 
     @Output()
-    stateChange = new EventEmitter<boolean>();
+        stateChange = new EventEmitter<boolean>();
 
     popupState = false;
 
@@ -38,6 +102,8 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
 
     errorMessage!: string | null;
 
+    isShowErrorMessage = false;
+
     _userIcon = faUser;
 
     _passwordIcon = faLock;
@@ -47,14 +113,14 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
         private changeDetectorRef: ChangeDetectorRef,
         private matIconRegistry: MatIconRegistry,
         private domSanitizer: DomSanitizer) {
-            this.matIconRegistry.addSvgIcon(
-                "google-logo",
-                this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
-            );
-            this.matIconRegistry.addSvgIcon(
-                "github-logo",
-                this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
-            );
+        this.matIconRegistry.addSvgIcon(
+            "google-logo",
+            this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
+        );
+        this.matIconRegistry.addSvgIcon(
+            "github-logo",
+            this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
+        );
     }
 
     ngOnInit(): void {
@@ -89,7 +155,6 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
             password: this.loginForm.controls['password'].value
         }
         this.authService.login(user);
-
     }
 
     onGoogleLogin() {
@@ -114,4 +179,25 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
         this.loginForm.reset();
     }
 
+    public showErrorMessage(): string {
+        if (this.isShowErrorMessage) {
+            return "show";
+        }
+        return "hide";
+    }
+
+    public hideErrorMessage(): string {
+        if (!!this.errorMessage) {
+            return "hide";
+        }
+        return "show";
+    }
+
+    hideAuthContainer(event: any) {
+        if (event.toState === "hide") {
+            event.element.style.display = "none";
+            this.isShowErrorMessage = true;
+        }
+    }
+
 }