feat(firebaseui): added alert success msg when resetting the email

Author: AnthonyNahas

Diff for: demo/src/app/home/home.component.html

@@ -5,7 +5,7 @@
         <img src="assets/logo.svg" alt="ng-bootstrap-auth-firebaseui logo" class="logo">
       </div>
       <div class="col-sm-8 text-center text-md-left">
-        <h1>ng-bootstrap-auth-firebaseui</h1>
+        <h1>@firebaseui/ng-bootstrap</h1>
         <p>Angular Bootstrap UI library for firebase authentication powered by @ng-bootstrap</p>
         <p>Scroll down to see it in action!</p>
         <p class="buttons">
@@ -25,8 +25,10 @@ <h1>ng-bootstrap-auth-firebaseui</h1>
 <section class="home">
   <div class="container">
     <!-- put your content here-->
-    <p>Put your content here. Typically, examples of your library in action (directives, components...)</p>
-    <ngb-auth-firebaseui></ngb-auth-firebaseui>
-    <p>Happy ng-hacking!</p>
+    <div class="card">
+      <div class="card-body">
+        <ngb-auth-firebaseui></ngb-auth-firebaseui>
+      </div>
+    </div>
   </div>
 </section>

Diff for: src/auth/module/components/auth/auth.component.html

@@ -3,6 +3,7 @@
   <ngb-tab *ngIf="passwordResetWished" title="Reset Password" id="reset_password">
     <ng-template ngbTabContent>
       <form #resetPasswordForm="ngForm"
+            class="mt-3"
             [formGroup]="resetPasswordFormGroup"
             (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
 
@@ -39,6 +40,11 @@
           </button>
         </div>
 
+        <div *ngIf="passReset" class="mt-2 mx-auto">
+          <ngb-alert type="success">
+            Reset requested. Check your <strong>e-mail</strong> instructions!
+          </ngb-alert>
+        </div>
 
         <div *ngIf="authProcess.isLoading" class="progress mt-2">
           <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
@@ -54,6 +60,7 @@
     <ng-template ngbTabTitle>Sign in</ng-template>
     <ng-template ngbTabContent>
       <form #signInPasswordForm="ngForm"
+            class="mt-3"
             [formGroup]="signInFormGroup"
             (ngSubmit)="signInFormGroup.valid &&
               authProcess.signInWith
@@ -153,6 +160,7 @@
     <ng-template ngbTabTitle>Register</ng-template>
     <ng-template ngbTabContent>
       <form #signUpPasswordForm="ngForm"
+            class="mt-3"
             [formGroup]="signUpFormGroup"
             (ngSubmit)="signUpFormGroup.valid &&
           authProcess.signUp

Diff for: src/auth/module/components/auth/auth.component.ts

@@ -1,10 +1,10 @@
-import {Component, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID} from '@angular/core';
-import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {Component, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID, ViewChild} from '@angular/core';
+import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
 import {AngularFireAuth} from 'angularfire2/auth';
-import * as firebase from 'firebase/app';
 import {AuthProcessService, AuthProvider} from '../../services/auth-process.service';
 import {isPlatformBrowser} from '@angular/common';
 import {Subscription} from 'rxjs/internal/Subscription';
+import {NgbTabset} from '@ng-bootstrap/ng-bootstrap';
 
 
 export const EMAIL_REGEX = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)',
@@ -22,6 +22,9 @@ export const PHONE_NUMBER_REGEX = new RegExp(/^\+(?:[0-9] ?){6,14}[0-9]$/);
 
 export class AuthComponent implements OnInit, OnDestroy {
 
+  @ViewChild('tabs') public tabs: NgbTabset;
+
+
   @Input()
   providers: string[] | string = AuthProvider.ALL; //  google, facebook, twitter, github as array or all as one single string
 
@@ -91,6 +94,13 @@ export class AuthComponent implements OnInit, OnDestroy {
       .then(() => this.passReset = true);
   }
 
+  public selectResetPasswordTab() {
+    this.passwordResetWished = true;
+    setTimeout(() => {
+      this.tabs.select('reset_password');
+    }, 1);
+  }
+
   private _initSignInFormGroupBuilder() {
     this.signInFormGroup = new FormGroup({});
     this.signInFormGroup.registerControl('email', this.signInEmailFormControl = new FormControl('',

Diff for: src/auth/module/services/auth-process.service.ts

@@ -1,20 +1,19 @@
-import {EventEmitter, Inject, Injectable, InjectionToken} from '@angular/core';
+import {EventEmitter, Inject, Injectable} from '@angular/core';
 import {AngularFireAuth} from 'angularfire2/auth';
 import {ISignInProcess, ISignUpProcess} from '../interfaces/main.interface';
 import {FirestoreSyncService} from './firestore-sync.service';
 import * as firebase from 'firebase';
+import {User, UserInfo} from 'firebase';
+
+import {Accounts} from '../components/enums';
+import {NgBootstrapAuthFirebaseUIConfig, NgBootstrapAuthFirebaseUIConfigToken} from '../../..';
 // import User = firebase.User;
 import GoogleAuthProvider = firebase.auth.GoogleAuthProvider;
 import FacebookAuthProvider = firebase.auth.FacebookAuthProvider;
 import TwitterAuthProvider = firebase.auth.TwitterAuthProvider;
 import UserCredential = firebase.auth.UserCredential;
 import GithubAuthProvider = firebase.auth.GithubAuthProvider;
 
-import {User, UserInfo} from 'firebase';
-
-import {Accounts} from '../components/enums';
-import {NgBootstrapAuthFirebaseUIConfig, NgBootstrapAuthFirebaseUIConfigToken} from '../../..';
-
 export enum AuthProvider {
   ALL = 'all',
   ANONYMOUS = 'anonymous',
@@ -47,9 +46,17 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
    * @returns
    */
   public resetPassword(email: string) {
+    this.isLoading = true;
     return this.auth.auth.sendPasswordResetEmail(email)
-      .then(() => console.log('email sent'))
-      .catch((error) => this.onErrorEmitter.next(error));
+      .then(() => {
+        this.isLoading = false;
+        console.log('email sent');
+        return;
+      })
+      .catch((error) => {
+        this.isLoading = false;
+        return this.onErrorEmitter.next(error);
+      });
   }
 
   /**