feat(package): added authentication providers' component

Author: AnthonyNahas

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

@@ -300,3 +300,4 @@
 
   </ngb-tab>
 </ngb-tabset>
+<ngb-auth-firebaseui-providers class="mt-2"></ngb-auth-firebaseui-providers>

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

@@ -2,13 +2,18 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {DebugElement, EventEmitter} from '@angular/core';
 
 import {AngularFireModule} from 'angularfire2';
-import {AngularFireAuth, AngularFireAuthModule} from 'angularfire2/auth';
+import {AngularFireAuth} from 'angularfire2/auth';
 import {BehaviorSubject} from 'rxjs/internal/BehaviorSubject';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
-import {AuthComponent, AuthProcessService, FirestoreSyncService} from '../../../..';
-import {NgBootstrapAuthFirebaseUIConfigToken} from '../../ngb-auth-firebase-u-i.module';
-import {defaultAuthFirebaseUIConfig} from '../../interfaces/config.interface';
+import {
+  AuthComponent,
+  AuthProcessService,
+  AuthProvidersComponent,
+  EmailConfirmationComponent,
+  FirestoreSyncService,
+  ProgressBarComponent
+} from '../../../..';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
@@ -88,7 +93,13 @@ describe('AuthProvidersComponent', function () {
           FormsModule,
           ReactiveFormsModule
         ],
-      declarations: [AuthComponent],
+      declarations:
+        [
+          AuthComponent,
+          AuthProvidersComponent,
+          EmailConfirmationComponent,
+          ProgressBarComponent
+        ],
       providers: [
         HttpClientTestingModule,
         FirestoreSyncService,

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

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngb-auth-firebaseui-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss']
+})
+export class ProgressBarComponent {
+}

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

@@ -0,0 +1,30 @@
+<div class="container">
+
+  <div class="row ">
+    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
+            class="btn btn-google my-1 mx-sm-0 col-md-3 col-sm-6 col-xs-12 text-center"
+            (click)="authProcess.signInWith(authProvider.Google)">
+      <span class="fa fa-google"></span>
+      Google
+    </button>
+    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
+            class="btn btn-facebook my-1 mx-sm-0 col-md-3 col-sm-6 col-xs-12 text-center"
+            (click)="authProcess.signInWith(authProvider.Facebook)">
+      <span class="fa fa-facebook"></span>
+      Facebook
+    </button>
+    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
+            class="btn btn-twitter my-1 mx-sm-0 col-md-3 col-sm-6 col-xs-12 text-center"
+            (click)="authProcess.signInWith(authProvider.Twitter)">
+      <span class="fa fa-twitter"></span>
+      Twitter
+    </button>
+    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
+            class="btn btn-github my-1 mx-sm-0 col-md-3 col-sm-6 col-xs-12 text-center"
+            (click)="authProcess.signInWith(authProvider.Github)">
+      <span class="fa fa-github"></span>
+      GitHub
+    </button>
+  </div>
+
+</div>

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

@@ -0,0 +1,54 @@
+$google: #db4437;
+$facebook: #385899;
+$facebook-hover: #2d4373;
+$twitter: #1da1f2;
+$twitter-hover: #2795e9;
+$github: #444;
+$github-hover: #000000;
+
+:host {
+  display: block;
+}
+
+.space-full-xs {
+  width: 100%;
+  margin: .4rem;
+}
+
+.btn {
+  color: white;
+}
+
+.btn-google {
+  background-color: $google;
+}
+
+.btn-google:hover {
+  background-color: #c23321;
+}
+
+.btn-facebook {
+  background-color: $facebook;
+}
+
+.btn-facebook:hover {
+  background-color: $facebook-hover;
+}
+
+.btn-twitter {
+  background-color: $twitter;
+}
+
+.btn-twitter:hover {
+  background-color: $twitter-hover;
+}
+
+.btn-github {
+  background-color: $github;
+}
+
+.btn-github:hover {
+  background-color: $github-hover;
+}
+
+

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

@@ -0,0 +1,28 @@
+import {Component, Input} from '@angular/core';
+import {AuthProcessService, AuthProvider} from '../../services/auth-process.service';
+
+export enum Layout {
+  ROW = 'row',
+  COLUMN = 'column'
+}
+
+@Component({
+  selector: 'ngb-auth-firebaseui-providers',
+  templateUrl: 'auth.providers.component.html',
+  styleUrls: ['auth.providers.component.scss']
+})
+
+export class AuthProvidersComponent {
+
+  @Input()
+  layout: string = Layout.ROW;
+
+  @Input()
+  providers: string[] | string = AuthProvider.ALL; //  google, facebook, twitter, github
+
+  authProvider = AuthProvider;
+
+  constructor(public authProcess: AuthProcessService) {
+  }
+
+}

src/auth/module/interfaces/config.interface.ts

@@ -1,8 +1,3 @@
-import * as firebase from 'firebase';
-import GoogleAuthProvider = firebase.auth.GoogleAuthProvider;
-import FacebookAuthProvider = firebase.auth.FacebookAuthProvider;
-import TwitterAuthProvider = firebase.auth.TwitterAuthProvider;
-import GithubAuthProvider = firebase.auth.GithubAuthProvider;
 import AuthProvider = firebase.auth.AuthProvider;
 
 export interface NgBootstrapAuthFirebaseUIConfig {

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

@@ -13,12 +13,14 @@ 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';
+import {AuthProvidersComponent} from './components/providers/auth.providers.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';
 
 // services
 export {AuthProcessService, AuthProvider} from './services/auth-process.service';
@@ -42,6 +44,7 @@ export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstr
   exports:
     [
       AuthComponent,
+      AuthProvidersComponent,
       EmailConfirmationComponent,
       ProgressBarComponent,
       AngularFireAuthModule,
@@ -50,6 +53,7 @@ export const NgBootstrapAuthFirebaseUIConfigToken = new InjectionToken<NgBootstr
   declarations:
     [
       AuthComponent,
+      AuthProvidersComponent,
       EmailConfirmationComponent,
       ProgressBarComponent
     ]

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

@@ -1,12 +1,12 @@
-import {EventEmitter, Inject, Injectable} from '@angular/core';
+import {EventEmitter, 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;
@@ -35,7 +35,6 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
   emailToConfirm: string;
 
   constructor(public auth: AngularFireAuth,
-              @Inject(NgBootstrapAuthFirebaseUIConfigToken) private config: NgBootstrapAuthFirebaseUIConfig,
               private _fireStoreService: FirestoreSyncService) {
   }
 
@@ -141,10 +140,12 @@ 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);
     } catch (err) {
+      console.error(err);
       this.handleError(err);
     } finally {
       this.isLoading = false;
@@ -206,17 +207,17 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess {
 
     await this._fireStoreService.updateUserData(this.parseUserInfo(userCredential.user));
 
-    if (this.config.toastMessageOnAuthSuccess) {
+    // if (this.config.toastMessageOnAuthSuccess) {
       // this._snackBar.open(`Hallo ${userCredential.user.displayName ? userCredential.user.displayName : ''}!`,
       //   'OK', {duration: 5000});
-    }
+    // }
     this.onSuccessEmitter.next(userCredential.user);
   }
 
   handleError(error: any) {
-    if (this.config.toastMessageOnAuthError) {
+    // if (this.config.toastMessageOnAuthError) {
       // this._snackBar.open(error.message, 'OK', {duration: 5000});
-    }
+    // }
     console.error(error);
     this.onErrorEmitter.next(error);
   }