fix(package): improved ngx-auth-firebaseui-login - dynamic color palette

Author: AnthonyNahas

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,15 +46,15 @@
                   [@animate]="{ value: '*', params: { x: '-50px' } }"
                   mat-button
                   class="forgot-password"
-                  color="primary"
+                  [color]="color"
                   type="button">
             {{forgotPasswordText}}
           </button>
         </div>
 
         <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>

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({