From 08f372caccf9e4af8c17a0eb72ba06d4c99aa954 Mon Sep 17 00:00:00 2001
From: Anthony Nahas <anthony.na@hotmail.de>
Date: Wed, 21 Aug 2019 21:40:29 +0200
Subject: [PATCH] fix(package): improved `ngx-auth-firebaseui-login` - dynamic
 color palette

---
 .../ngx-auth-firebaseui-login.component.html     | 10 +++++-----
 .../ngx-auth-firebaseui-login.component.ts       | 16 +++++++++++++++-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html
index f2f8b1fc..4d9e0c3f 100644
--- a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html
+++ b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html
@@ -15,7 +15,7 @@
 
         <mat-form-field [appearance]="appearance" [@animate]="{ value: '*', params: { x: '50px' } }">
           <input matInput [placeholder]="emailText" formControlName="email">
-          <mat-icon matSuffix color="primary">email</mat-icon>
+          <mat-icon matSuffix [color]="color">email</mat-icon>
           <mat-error *ngIf="loginForm.get('email').hasError('required')">
             {{emailErrorRequiredText}}
           </mat-error>
@@ -28,7 +28,7 @@
 
         <mat-form-field [appearance]="appearance" [@animate]="{ value: '*', params: { x: '50px' } }">
           <input matInput type="password" [placeholder]="passwordText" formControlName="password">
-          <mat-icon matSuffix color="primary">lock</mat-icon>
+          <mat-icon matSuffix [color]="color">lock</mat-icon>
           <mat-error>
             {{passwordErrorRequiredText}}
           </mat-error>
@@ -46,7 +46,7 @@
                   [@animate]="{ value: '*', params: { x: '-50px' } }"
                   mat-button
                   class="forgot-password"
-                  color="primary"
+                  [color]="color"
                   type="button">
             {{forgotPasswordText}}
           </button>
@@ -54,7 +54,7 @@
 
         <button mat-raised-button
                 id="loginButton"
-                color="accent"
+                [color]="colorAccent"
                 class="submit-button"
                 aria-label="LOG IN"
                 [disabled]="loginForm.invalid"
@@ -82,7 +82,7 @@
         <button [@animate]="{ value: '*', params: { x: '-100px' } }"
                 mat-button
                 id="createAccountButton"
-                color="primary"
+                [color]="color"
                 type="button"
                 (click)="onCreateAccountRequested.emit()">{{createAccountButtonText}}</button>
       </div>
diff --git a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts
index 94f31e43..3108ad93 100644
--- a/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts
+++ b/src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts
@@ -1,9 +1,10 @@
 import {Component, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID, ViewEncapsulation} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {MatFormFieldAppearance} from '@angular/material';
+import {MatFormFieldAppearance, ThemePalette} from '@angular/material';
 import {AuthProcessService, AuthProvider} from '../../services/auth-process.service';
 import {Subscription} from 'rxjs';
 import {NgxAuthFirebaseuiAnimations} from '../../animations';
+import {isPlatformBrowser} from '@angular/common';
 
 @Component({
   selector: 'ngx-auth-firebaseui-login',
@@ -47,6 +48,7 @@ export class NgxAuthFirebaseuiLoginComponent implements OnInit {
   loginForm: FormGroup;
   authProviders = AuthProvider;
   onErrorSubscription: Subscription;
+  authenticationError = false;
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: Object,
@@ -56,8 +58,20 @@ export class NgxAuthFirebaseuiLoginComponent implements OnInit {
     this.onError = authProcess.onErrorEmitter;
   }
 
+  get color(): string | ThemePalette {
+    return this.authenticationError ? 'warn' : 'primary';
+  }
+
+  get colorAccent(): string | ThemePalette {
+    return this.authenticationError ? 'warn' : 'accent';
+  }
+
   ngOnInit() {
 
+    if (isPlatformBrowser(this.platformId)) {
+      this.onErrorSubscription = this.onError.subscribe(() => this.authenticationError = true);
+    }
+
     this.updateAuthSnackbarMessages();
 
     this.loginForm = this._formBuilder.group({