feat(package): added authGuardLoggedInURL to the config #263

AnthonyNahas · Jul 8, 2019 · 0abbcdb · 0abbcdb
1 parent 17a6b0e
commit 0abbcdb
Show file tree

Hide file tree

Showing 16 changed files with 268 additions and 8 deletions.
diff --git a/demo/angular.json b/demo/angular.json
@@ -149,7 +149,7 @@
       }
     },
     "ngx-auth-firebaseui-e2e": {
-      "root": "",
+      "root": "e2e",
       "sourceRoot": "",
       "projectType": "application",
       "architect": {

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -57,7 +57,9 @@ export function createTranslateLoader(http: HttpClient) {
       {
         enableFirestoreSync: true,
         toastMessageOnAuthSuccess: true,
-        toastMessageOnAuthError: true
+        toastMessageOnAuthError: true,
+        authGuardFallbackURL: 'examples/logged-out',
+        authGuardLoggedInURL: 'examples/logged-in',
       }),
     TranslateModule.forRoot({
       loader: {

diff --git a/demo/src/app/examples/examples-routing.module.ts b/demo/src/app/examples/examples-routing.module.ts
@@ -11,6 +11,10 @@ import {GoBackURLComponent} from './go-back-url/go-back-url.component';
 import {RegistrationComponent} from './registration/registration.component';
 import {ResetPasswordComponent} from './reset-psasword/reset-password.component';
 import {PasswordStrengthComponent} from './password-strength/password-strength.component';
+import {GuardsExampleComponent} from './guards-example/guards-example.component';
+import {LoggedInGuard} from 'ngx-auth-firebaseui';
+import {LoggedInComponent} from './guards-example/logged-in/logged-in.component';
+import {LoggedOutComponent} from './guards-example/logged-out/logged-out.component';
 
 @NgModule({
   imports: [RouterModule.forChild([
@@ -25,6 +29,9 @@ import {PasswordStrengthComponent} from './password-strength/password-strength.c
     {path: 'tabIndex', component: TabIndexComponent},
     {path: 'gobackurl', component: GoBackURLComponent},
     {path: 'password-strength', component: PasswordStrengthComponent},
+    {path: 'logged-in', component: LoggedInComponent},
+    {path: 'logged-out', component: LoggedOutComponent},
+    {path: 'guards', component: GuardsExampleComponent, canActivate : [LoggedInGuard]},
   ])],
   exports: [RouterModule]
 })

diff --git a/demo/src/app/examples/examples.component.html b/demo/src/app/examples/examples.component.html
@@ -156,6 +156,22 @@ <h1>Examples</h1>
           <img fxHide.gt-lg src="assets/logo.svg" mat-card-md-image>
         </mat-card-title-group>
       </mat-card>
+
+      <mat-card matRipple routerLink="guards">
+        <div fxHide
+             fxShow.gt-lg
+             fxLayout="column"
+             fxLayoutAlign="center center">
+          <img src="assets/logo.svg" mat-card-md-image>
+        </div>
+        <mat-card-title-group>
+          <mat-card-title>Explore the guards api</mat-card-title>
+          <mat-card-subtitle>
+            See how to protect your route from unauthenticated users
+          </mat-card-subtitle>
+          <img fxHide.gt-lg src="assets/logo.svg" mat-card-md-image>
+        </mat-card-title-group>
+      </mat-card>
     </div>
   </div>
 </section>
diff --git a/demo/src/app/examples/examples.module.ts b/demo/src/app/examples/examples.module.ts
@@ -14,6 +14,9 @@ import { GoBackURLComponent } from './go-back-url/go-back-url.component';
 import { RegistrationComponent } from './registration/registration.component';
 import { ResetPasswordComponent } from './reset-psasword/reset-password.component';
 import {PasswordStrengthComponent} from './password-strength/password-strength.component';
+import {GuardsExampleComponent} from './guards-example/guards-example.component';
+import {LoggedInComponent} from './guards-example/logged-in/logged-in.component';
+import {LoggedOutComponent} from './guards-example/logged-out/logged-out.component';
 
 @NgModule({
   imports: [
@@ -34,7 +37,10 @@ import {PasswordStrengthComponent} from './password-strength/password-strength.c
       GoBackURLComponent,
       RegistrationComponent,
       ResetPasswordComponent,
-      PasswordStrengthComponent
+      PasswordStrengthComponent,
+      GuardsExampleComponent,
+      LoggedInComponent,
+      LoggedOutComponent
     ]
 })
 export class ExamplesModule {

diff --git a/demo/src/app/examples/guards-example/guards-example.component.html b/demo/src/app/examples/guards-example/guards-example.component.html
@@ -0,0 +1,45 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1>Password Strength API - Config</h1>
+  </div>
+</div>
+
+
+<div class="container">
+
+  <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+
+    <mat-card fxFlexAlign.gt-xs="center">
+      <mat-card-subtitle>
+        <div fxLayout="row" fxLayoutAlign="space-between">
+          <pre><code [highlight]="example"></code></pre>
+          <button mat-icon-button
+                  ngxClipboard
+                  [cbContent]="example"
+                  matTooltip="copy"
+                  (click)="showCopyMessage(example)">
+            <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
+          </button>
+        </div>
+      </mat-card-subtitle>
+      <mat-card-content>
+        <ngx-auth-firebaseui tabIndex="1"
+                             [min]="8"
+                             [max]="15"
+                             [enableLengthRule]="true"
+                             [enableLowerCaseLetterRule]="true"
+                             [enableUpperCaseLetterRule]="true"
+                             [enableDigitRule]="true"
+                             [enableSpecialCharRule]="true"
+                             (onStrengthChanged)="onStrengthChanged($event)">
+        </ngx-auth-firebaseui>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
+
+
+
+
+
+
diff --git a/demo/src/app/examples/guards-example/guards-example.component.scss b/demo/src/app/examples/guards-example/guards-example.component.scss
diff --git a/demo/src/app/examples/guards-example/guards-example.component.ts b/demo/src/app/examples/guards-example/guards-example.component.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {ExampleBaseComponent} from '../example.abstract';
+
+@Component({
+  selector: 'app-password-strength',
+  templateUrl: 'guards-example.component.html',
+  styleUrls: ['guards-example.component.scss']
+})
+export class GuardsExampleComponent extends ExampleBaseComponent {
+
+  example = `<ngx-auth-firebaseui tabIndex="1"
+                             [min]="8"
+                             [max]="15"
+                             [enableLengthRule]="true"
+                             [enableLowerCaseLetterRule]="true"
+                             [enableUpperCaseLetterRule]="true"
+                             [enableDigitRule]="true"
+                             [enableSpecialCharRule]="true"
+                             (onStrengthChanged)="onStrengthChanged($event)">
+        </ngx-auth-firebaseui>`;
+
+  constructor(public snackBar: MatSnackBar) {
+    super(snackBar);
+  }
+
+  onStrengthChanged($event: number) {
+    console.log('on strength changed: ', $event);
+  }
+
+}
diff --git a/demo/src/app/examples/guards-example/logged-in/logged-in.component.html b/demo/src/app/examples/guards-example/logged-in/logged-in.component.html
@@ -0,0 +1,54 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1>Yes!! you are logged in! Congrats</h1>
+  </div>
+</div>
+
+
+<div class="container">
+
+  <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+
+    <mat-card fxFlexAlign.gt-xs="center">
+      <mat-card-title>add authGuardFallbackURL and authGuardLoggedInURL to the NgxAuthFirebaseUIModule</mat-card-title>
+      <mat-card-subtitle>
+        <div fxLayout="row" fxLayoutAlign="space-between">
+          <pre><code [highlight]="example"></code></pre>
+          <button mat-icon-button
+                  ngxClipboard
+                  [cbContent]="example"
+                  matTooltip="copy"
+                  (click)="showCopyMessage(example)">
+            <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
+          </button>
+        </div>
+      </mat-card-subtitle>
+    </mat-card>
+
+    <mat-card class="my-4" fxFlexAlign.gt-xs="center">
+      <mat-card-title>use the canActivate feature on your route</mat-card-title>
+      <mat-card-subtitle>
+        <div fxLayout="row" fxLayoutAlign="space-between">
+          <pre><code [highlight]="example2"></code></pre>
+          <button mat-icon-button
+                  ngxClipboard
+                  [cbContent]="example2"
+                  matTooltip="copy"
+                  (click)="showCopyMessage(example2)">
+            <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
+          </button>
+        </div>
+      </mat-card-subtitle>
+      <mat-card-content>
+        <ngx-auth-firebaseui-user>
+        </ngx-auth-firebaseui-user>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
+
+
+
+
+
+
diff --git a/demo/src/app/examples/guards-example/logged-in/logged-in.component.scss b/demo/src/app/examples/guards-example/logged-in/logged-in.component.scss
diff --git a/demo/src/app/examples/guards-example/logged-in/logged-in.component.ts b/demo/src/app/examples/guards-example/logged-in/logged-in.component.ts
@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {ExampleBaseComponent} from '../../example.abstract';
+
+@Component({
+  selector: 'app-logged-in',
+  templateUrl: 'logged-in.component.html',
+  styleUrls: ['logged-in.component.scss']
+})
+export class LoggedInComponent extends ExampleBaseComponent {
+
+  example = `
+  import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';
+
+
+  NgxAuthFirebaseUIModule.forRoot(firebaseKey, firebaseAppNameFactory,
+      {
+        authGuardFallbackURL: 'examples/logged-out',
+        authGuardLoggedInURL: 'examples/logged-in',
+      }),`;
+
+  example2 = `
+  import {LoggedInGuard} from 'ngx-auth-firebaseui';
+
+  {path: 'guards', component: GuardsExampleComponent, canActivate : [LoggedInGuard]},`;
+
+  constructor(public snackBar: MatSnackBar) {
+    super(snackBar);
+  }
+
+  onStrengthChanged($event: number) {
+    console.log('on strength changed: ', $event);
+  }
+
+}
diff --git a/demo/src/app/examples/guards-example/logged-out/logged-out.component.html b/demo/src/app/examples/guards-example/logged-out/logged-out.component.html
@@ -0,0 +1,26 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1>Sorry!! You are logged out</h1>
+  </div>
+</div>
+
+
+<div class="container">
+
+  <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+
+    <mat-card fxFlexAlign.gt-xs="center">
+      <mat-card-title>Please log in</mat-card-title>
+      <mat-card-content>
+        <ngx-auth-firebaseui>
+        </ngx-auth-firebaseui>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
+
+
+
+
+
+
diff --git a/demo/src/app/examples/guards-example/logged-out/logged-out.component.scss b/demo/src/app/examples/guards-example/logged-out/logged-out.component.scss
diff --git a/demo/src/app/examples/guards-example/logged-out/logged-out.component.ts b/demo/src/app/examples/guards-example/logged-out/logged-out.component.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {ExampleBaseComponent} from '../../example.abstract';
+
+@Component({
+  selector: 'app-logged-out',
+  templateUrl: 'logged-out.component.html',
+  styleUrls: ['logged-out.component.scss']
+})
+export class LoggedOutComponent extends ExampleBaseComponent {
+
+  example = `<ngx-auth-firebaseui tabIndex="1"
+                             [min]="8"
+                             [max]="15"
+                             [enableLengthRule]="true"
+                             [enableLowerCaseLetterRule]="true"
+                             [enableUpperCaseLetterRule]="true"
+                             [enableDigitRule]="true"
+                             [enableSpecialCharRule]="true"
+                             (onStrengthChanged)="onStrengthChanged($event)">
+        </ngx-auth-firebaseui>`;
+
+  constructor(public snackBar: MatSnackBar) {
+    super(snackBar);
+  }
+
+  onStrengthChanged($event: number) {
+    console.log('on strength changed: ', $event);
+  }
+
+}
diff --git a/src/module/guards/logged-in.guard.ts b/src/module/guards/logged-in.guard.ts
@@ -1,7 +1,7 @@
-import { Inject, Injectable } from '@angular/core'
-import { CanActivate, Router } from '@angular/router'
-import { map } from 'rxjs/operators'
-import { Observable } from 'rxjs'
+import {Inject, Injectable} from '@angular/core'
+import {CanActivate, Router} from '@angular/router'
+import {map} from 'rxjs/operators'
+import {Observable} from 'rxjs'
 
 import {
   AuthProcessService,
@@ -25,9 +25,14 @@ export class LoggedInGuard implements CanActivate {
     return this.auth.afa.user.pipe(
       map(res => {
         if (res) {
+          if (this.config.authGuardLoggedInURL) {
+            this.router.navigate([`/${this.config.authGuardLoggedInURL}`]);
+          }
           return true
         }
-        this.router.navigate([`/${this.config.authGuardFallbackURL}`]);
+        if (this.config.authGuardFallbackURL) {
+          this.router.navigate([`/${this.config.authGuardFallbackURL}`]);
+        }
         return false
       }),
     )

diff --git a/src/module/interfaces/config.interface.ts b/src/module/interfaces/config.interface.ts
@@ -12,6 +12,7 @@ export interface NgxAuthFirebaseUIConfig {
   // authProviders?: Array<AuthProvider>,
   // languageCode?: string, // todo: 28.3.18
   authGuardFallbackURL?: string,
+  authGuardLoggedInURL?: string,
   enableFirestoreSync?: boolean,
   toastMessageOnAuthSuccess?: boolean,
   toastMessageOnAuthError?: boolean
@@ -21,6 +22,7 @@ export const defaultAuthFirebaseUIConfig: NgxAuthFirebaseUIConfig = {
   // authMethod: 'redirect',
   // authProviders: [new GoogleAuthProvider(), new FacebookAuthProvider(), new TwitterAuthProvider(), new GithubAuthProvider()],
   authGuardFallbackURL: '/',
+  authGuardLoggedInURL: '/',
   enableFirestoreSync: true,
   toastMessageOnAuthSuccess: true,
   toastMessageOnAuthError: true