feat(package): integration of the feedback mechanism

Author: AnthonyNahas

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

@@ -300,4 +300,6 @@
 
   </ngb-tab>
 </ngb-tabset>
+
 <ngb-auth-firebaseui-providers class="mt-2"></ngb-auth-firebaseui-providers>
+<ngb-alerts-container class="mt-2" [alerts]="alertService.alerts"></ngb-alerts-container>

src/auth/module/components/auth/auth.component.scss

@@ -1,3 +1,7 @@
+:host{
+  display: block;
+}
+
 .mat-card {
   margin: 2rem;
 }

src/auth/module/components/auth/auth.component.spec.ts

@@ -1,21 +1,23 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {DebugElement, EventEmitter} from '@angular/core';
 
 import {AngularFireModule} from 'angularfire2';
 import {AngularFireAuth} from 'angularfire2/auth';
 import {BehaviorSubject} from 'rxjs/internal/BehaviorSubject';
 import {AngularFirestore} from 'angularfire2/firestore';
-import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {
+  AlertService,
   AuthComponent,
   AuthProcessService,
   AuthProvidersComponent,
   EmailConfirmationComponent,
-  FirestoreSyncService,
+  FirestoreSyncService, IAlert,
   ProgressBarComponent
 } from '../../../..';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbAlertsContainerComponent} from '../alerts-container/ngb-alerts-container.component';
 
 describe('AuthProvidersComponent', function () {
   let de: DebugElement;
@@ -25,7 +27,7 @@ describe('AuthProvidersComponent', function () {
   let authProcessServicePartial: Partial<AuthProcessService>;
 
   authProcessServicePartial = {
-    onErrorEmitter: new EventEmitter<any>()
+    onErrorEmitter: new EventEmitter<any>(),
   };
 
   const credentialsMock = {
@@ -85,6 +87,11 @@ describe('AuthProvidersComponent', function () {
       })
     });
 
+    const alertServicePartial: Partial<AlertService> = {
+      alerts: [],
+      onNewAlert: new EventEmitter<IAlert>(),
+    };
+
     TestBed.configureTestingModule({
       imports:
         [
@@ -98,12 +105,14 @@ describe('AuthProvidersComponent', function () {
           AuthComponent,
           AuthProvidersComponent,
           EmailConfirmationComponent,
-          ProgressBarComponent
+          ProgressBarComponent,
+          NgbAlertsContainerComponent
         ],
       providers: [
         HttpClientTestingModule,
         FirestoreSyncService,
         AngularFireModule,
+        {provide: AlertService, useValue: alertServicePartial},
         {provide: AngularFirestore, useValue: FirestoreStub},
         {provide: AngularFireAuth, useValue: angularFireAuthStub},
         {provide: AuthProcessService, useValue: authProcessServicePartial}]

src/auth/module/components/auth/auth.component.ts

@@ -5,6 +5,7 @@ import {AuthProcessService, AuthProvider} from '../../services/auth-process.serv
 import {isPlatformBrowser} from '@angular/common';
 import {Subscription} from 'rxjs/internal/Subscription';
 import {NgbTabset} from '@ng-bootstrap/ng-bootstrap';
+import {AlertService} from '../../services/alert.service';
 
 
 export const EMAIL_REGEX = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)',
@@ -62,7 +63,8 @@ export class AuthComponent implements OnInit, OnDestroy {
 
   constructor(@Inject(PLATFORM_ID) private platformId: Object,
               public auth: AngularFireAuth,
-              public authProcess: AuthProcessService) {
+              public authProcess: AuthProcessService,
+              public alertService: AlertService) {
 
     this.onSuccess = authProcess.onSuccessEmitter;
     this.onError = authProcess.onErrorEmitter;
@@ -89,7 +91,6 @@ export class AuthComponent implements OnInit, OnDestroy {
   }
 
   public resetPassword() {
-    console.log('PasswordResetEmail sent');
     this.authProcess.resetPassword(this.resetPasswordEmailFormControl.value)
       .then(() => this.passReset = true);
   }

src/auth/module/components/email-confirmation/email-confirmation.component.scss

@@ -1,3 +1,7 @@
+:host{
+  display: block;
+}
+
 .material-icons {
   font-size: 4rem;
 }

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

@@ -14,22 +14,28 @@ 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';
 import {AuthProvidersComponent} from './components/providers/auth.providers.component';
+import {AlertService} from './services/alert.service';
+import {NgbAlertsContainerComponent} from './components/alerts-container/ngb-alerts-container.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';
 export {AuthProvidersComponent} from './components/providers/auth.providers.component';
+export {NgbAlertsContainerComponent} from './components/alerts-container/ngb-alerts-container.component';
 
 // services
 export {AuthProcessService, AuthProvider} from './services/auth-process.service';
 export {FirestoreSyncService} from './services/firestore-sync.service';
+export {AlertService} from './services/alert.service';
 
 // interfaces
 export {NgBootstrapAuthFirebaseUIConfig} from './interfaces/config.interface';
+export {IAlert} from './interfaces/ialert.interface';
 
-export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstrapAuthFirebaseUIConfig>('NgBootstrapAuthFirebaseUIConfig');
+export const NgBootstrapAuthFirebaseUIConfigToken =
+  new InjectionToken<NgBootstrapAuthFirebaseUIConfig>('NgBootstrapAuthFirebaseUIConfig');
 
 @NgModule({
   imports: [
@@ -46,6 +52,7 @@ export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstr
       AuthComponent,
       AuthProvidersComponent,
       EmailConfirmationComponent,
+      NgbAlertsContainerComponent,
       ProgressBarComponent,
       AngularFireAuthModule,
       AngularFirestoreModule
@@ -55,7 +62,8 @@ export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstr
       AuthComponent,
       AuthProvidersComponent,
       EmailConfirmationComponent,
-      ProgressBarComponent
+      ProgressBarComponent,
+      NgbAlertsContainerComponent
     ]
 })
 export class NgbAuthFirebaseUIModule {
@@ -79,7 +87,8 @@ export class NgbAuthFirebaseUIModule {
             useValue: config
           },
           AuthProcessService,
-          FirestoreSyncService
+          FirestoreSyncService,
+          AlertService
         ],
     };
   }

src/auth/module/services/auth-process.service.ts

@@ -13,6 +13,7 @@ import FacebookAuthProvider = firebase.auth.FacebookAuthProvider;
 import TwitterAuthProvider = firebase.auth.TwitterAuthProvider;
 import UserCredential = firebase.auth.UserCredential;
 import GithubAuthProvider = firebase.auth.GithubAuthProvider;
+import {AlertService} from './alert.service';
 
 export enum AuthProvider {
   ALL = 'all',
@@ -35,6 +36,7 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
   emailToConfirm: string;
 
   constructor(public auth: AngularFireAuth,
+              public alertService: AlertService,
               private _fireStoreService: FirestoreSyncService) {
   }
 
@@ -49,7 +51,6 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
     return this.auth.auth.sendPasswordResetEmail(email)
       .then(() => {
         this.isLoading = false;
-        console.log('email sent');
         return;
       })
       .catch((error) => {
@@ -106,7 +107,12 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
     } catch (err) {
       this.handleError(err);
       console.error(err);
-      // this._snackBar.open(err.message, 'OK', {duration: 5000});
+      this.alertService.onNewAlert.emit(
+        {
+          id: new Date().getTime(),
+          message: err.message,
+          type: 'danger'
+        });
       this.onErrorEmitter.next(err);
     } finally {
       this.isLoading = false;
@@ -127,7 +133,7 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
       this.isLoading = true;
       const userCredential: UserCredential = await this.auth.auth.createUserWithEmailAndPassword(email, password);
       const user = userCredential.user;
-      console.log('onsignUp the user = ', user);
+
       await this._fireStoreService
         .getUserDocRefByUID(user.uid)
         .set({
@@ -140,7 +146,7 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
       await user.sendEmailVerification();
       await this.updateProfile(name, user.photoURL);
       this.emailConfirmationSent = true;
-      console.log('emailConfirmationSent = ', this.emailConfirmationSent);
+
       this.emailToConfirm = email;
 
       await this.handleSuccess(userCredential);
@@ -203,21 +209,25 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
   }
 
   async handleSuccess(userCredential: UserCredential) {
-    console.log('sign in result = ', userCredential);
 
     await this._fireStoreService.updateUserData(this.parseUserInfo(userCredential.user));
 
-    // if (this.config.toastMessageOnAuthSuccess) {
-    // this._snackBar.open(`Hallo ${userCredential.user.displayName ? userCredential.user.displayName : ''}!`,
-    //   'OK', {duration: 5000});
-    // }
+    this.alertService.onNewAlert.emit(
+      {
+        id: new Date().getTime(),
+        message: `Hallo ${userCredential.user.displayName ? userCredential.user.displayName : ''}!`,
+        type: 'success'
+      });
     this.onSuccessEmitter.next(userCredential.user);
   }
 
   handleError(error: any) {
-    // if (this.config.toastMessageOnAuthError) {
-    // this._snackBar.open(error.message, 'OK', {duration: 5000});
-    // }
+    this.alertService.onNewAlert.emit(
+      {
+        id: new Date().getTime(),
+        message: error.message,
+        type: 'danger'
+      });
     console.error(error);
     this.onErrorEmitter.next(error);
   }

src/auth/module/services/firestore-sync.service.ts

@@ -34,7 +34,6 @@ export class FirestoreSyncService {
 
 
   public updateUserData(user: UserInfo): Promise<any> {
-    console.log('on updateUserData for the user -> ', user);
     // Sets user$ data to firestore on login
     const userRef: AngularFirestoreDocument<UserInfo> = this.getUserDocRefByUID(user.uid);
     const data: UserInfo = {