feat(firebaseui): added progress-bar's component to show the loading indicator

Author: AnthonyNahas

src/auth/module/components/auth/auth.component.html

@@ -1,3 +1,5 @@
+<ngb-auth-firebaseui-progress-bar *ngIf="authProcess.isLoading" class="mb-2">
+</ngb-auth-firebaseui-progress-bar>
 <ngb-tabset #tabs>
   <!--Reset password tab-->
   <ngb-tab *ngIf="passwordResetWished" title="Reset Password" id="reset_password">
@@ -46,11 +48,6 @@
           </ngb-alert>
         </div>
 
-        <div *ngIf="authProcess.isLoading" class="progress mt-2">
-          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
-               aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
-        </div>
-
       </form>
     </ng-template>
   </ngb-tab>
@@ -159,7 +156,7 @@
   <ngb-tab>
     <ng-template ngbTabTitle>Register</ng-template>
     <ng-template ngbTabContent>
-      <div *ngIf="!authProcess.emailConfirmationSent;then register else confirm"></div>
+      <ng-container *ngIf="!authProcess.emailConfirmationSent;then register else confirm"></ng-container>
       <ng-template #register>
         <form #signUpPasswordForm="ngForm"
               class="mt-3"

src/auth/module/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,4 @@
+<div class="progress mt-2">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+       aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>

src/auth/module/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+.progress-bar {
+  width: 100%;
+}

src/auth/module/ngb-auth-firebase-u-i.module.ts

@@ -12,11 +12,13 @@ import {HttpClientModule} from '@angular/common/http';
 import {AngularFireAuthModule} from 'angularfire2/auth';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {EmailConfirmationComponent} from './components/email-confirmation/email-confirmation.component';
+import {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
 
 // Export module's public API
 // components
 export {AuthComponent} from './components/auth/auth.component';
 export {EmailConfirmationComponent} from './components/email-confirmation/email-confirmation.component';
+export {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
 
 // services
 export {AuthProcessService, AuthProvider} from './services/auth-process.service';
@@ -41,13 +43,15 @@ export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstr
     [
       AuthComponent,
       EmailConfirmationComponent,
+      ProgressBarComponent,
       AngularFireAuthModule,
       AngularFirestoreModule
     ],
   declarations:
     [
       AuthComponent,
-      EmailConfirmationComponent
+      EmailConfirmationComponent,
+      ProgressBarComponent
     ]
 })
 export class NgbAuthFirebaseUIModule {