Merge pull request #19 from jeroenouw/ngx-auth

minor changes
jeroenouw · Jan 18, 2019 · 8e24240 · 8e24240
2 parents 4d8126d + c776053
commit 8e24240
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 100 deletions.
diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
@@ -7,23 +7,23 @@ Change directory to this project
 Run `npm install` to install all the dependencies.  
 Run `npm start` to run this project. This will run with the AoT Compiler.  
 Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.  
-Run `npm reset` if you want to install everything again.  
+Run `npm reset` if you want to re-install everything.  
 
 ## Development
 
-For own projects please use different keys in `src/app/app.component.ts`:  
+For own projects please use different keys in `src/app/firebase.config.ts`:  
 
 ```typescript
 
-firebase.initializeApp({
-  // For your own projects use different keys
+export const firebaseKeys = {
+  // For your own projects please use different keys
   apiKey: 'YOUR_KEY',
   authDomain: 'YOUR_DOMAIN',
   databaseURL: 'YOUR_URL',
   projectId: 'YOUR_ID',
   storageBucket: 'YOUR_KEY',
   messagingSenderId: 'YOUR_ID'
-});
+}
 
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngxmatfire",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Jeroen Ouwehand",
   "description": "Full stack starter app with Angular 7, Material Design and Firebase.",
   "keywords": [

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import * as firebase from 'firebase';
+import { firebaseKeys } from './firebase.config';
 
 @Component({
   selector: 'app-root',
@@ -10,14 +11,6 @@ import * as firebase from 'firebase';
 export class AppComponent implements OnInit {
 
   public ngOnInit(): void {
-    firebase.initializeApp({
-      // For your own projects use different keys
-      apiKey: 'AIzaSyBUYZcc_HKi1TckbZPpSjSkxyFvml3Is0A',
-      authDomain: 'angular4materialdesign.firebaseapp.com',
-      databaseURL: 'https://angular4materialdesign.firebaseio.com',
-      projectId: 'angular4materialdesign',
-      storageBucket: 'angular4materialdesign.appspot.com',
-      messagingSenderId: '136985605193'
-    });
+    firebase.initializeApp(firebaseKeys);
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import {
 // Main
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing';
+import { firebaseKeys } from './firebase.config';
 
 // Pages
 import { HomeComponent } from './pages/home/home.component';
@@ -68,14 +69,7 @@ import { EmailMeComponent } from './components/email-me/email-me.component';
     BackgroundsModule,
     ProfileModule,
     MiscModule,
-    NgxAuthFirebaseUIModule.forRoot({
-      apiKey: 'AIzaSyBUYZcc_HKi1TckbZPpSjSkxyFvml3Is0A',
-      authDomain: 'angular4materialdesign.firebaseapp.com',
-      databaseURL: 'https://angular4materialdesign.firebaseio.com',
-      projectId: 'angular4materialdesign',
-      storageBucket: 'angular4materialdesign.appspot.com',
-      messagingSenderId: '136985605193'
-  })
+    NgxAuthFirebaseUIModule.forRoot(firebaseKeys)
   ],
   providers: [
     UserService,

diff --git a/src/app/firebase.config.ts b/src/app/firebase.config.ts
@@ -0,0 +1,9 @@
+export const firebaseKeys = {
+  // For your own projects please use different keys
+  apiKey: 'AIzaSyBUYZcc_HKi1TckbZPpSjSkxyFvml3Is0A',
+  authDomain: 'angular4materialdesign.firebaseapp.com',
+  databaseURL: 'https://angular4materialdesign.firebaseio.com',
+  projectId: 'angular4materialdesign',
+  storageBucket: 'angular4materialdesign.appspot.com',
+  messagingSenderId: '136985605193'
+}
diff --git a/src/app/pages/auth/auth.component.html b/src/app/pages/auth/auth.component.html
@@ -1,5 +1,4 @@
 <ngx-auth-firebaseui
   (onSuccess)="onSuccess()"
-  (onError)="printError()"
   appearance="outline">
 </ngx-auth-firebaseui>
diff --git a/src/app/pages/auth/auth.component.ts b/src/app/pages/auth/auth.component.ts
@@ -9,7 +9,6 @@ import { AuthService } from '@shared';
   styleUrls: ['./auth.component.scss']
 })
 export class AuthComponent {
-  public loading: boolean = false;
 
   constructor(private authService: AuthService) {}
 

diff --git a/src/app/pages/auth/phone-signin/phone-signin.component.ts b/src/app/pages/auth/phone-signin/phone-signin.component.ts
@@ -11,7 +11,7 @@ import { WindowService, PhoneNumber, AuthService, AlertService } from '@shared';
 })
 export class PhoneSigninComponent implements OnInit {
   phoneNumber = new PhoneNumber()
-  isAuthenticated = false;
+  isAuthenticated: string;
 
   token: string;
   windowRef: any;

diff --git a/src/app/shared/layout/header/header.component.html b/src/app/shared/layout/header/header.component.html
@@ -27,14 +27,9 @@
     <hr>
 
     <div *ngIf="!authService.isAuthenticated(); else logout">
-      <button mat-button routerLink="/signup" (click)="sidenav.close()">
-        <mat-icon class="signup">person_add</mat-icon>
-        <span>Signup</span>
-      </button>
-
-      <button mat-button routerLink="/login" (click)="sidenav.close()">
+      <button mat-button routerLink="/auth" (click)="sidenav.close()">
         <mat-icon class="login">lock_open</mat-icon>
-        <span>Login</span>
+        <span>Auth</span>
       </button>
     </div>
 
@@ -69,47 +64,47 @@
 
   <span class="spacer-light"></span>
 
-    <div *ngIf="!authService.isAuthenticated(); else loggedin">
-      <!-- <a routerLink="/signup"><mat-icon>person_add</mat-icon></a> -->
-      <a routerLink="/auth"><mat-icon>lock_open</mat-icon></a>
-    </div>
+  <div *ngIf="!authService.isAuthenticated(); else loggedin">
+    <button type="button" routerLink="/auth" mat-icon-button>
+      <mat-icon>lock_open</mat-icon>
+    </button>
+  </div>
+
+
+  <ng-template #loggedin>
+    <h4>Welcome</h4>
+
+    <button mat-icon-button [matMenuTriggerFor]="menu">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+
+    <mat-menu #menu="matMenu" >
+      <a
+        mat-menu-item
+        [routerLink]="'/profile'">
+        <mat-icon class="profile">face</mat-icon>
+        <span>Profile</span>
+      </a>
+
+      <a mat-menu-item *ngFor="let item of menuItems" href="{{item.link}}" target="_blank">
+        <mat-icon class="login">{{item.icon}}</mat-icon>
+        <span>{{item.title}}</span>
+      </a>
+
+      <a
+        mat-menu-item
+        routerLink="/profile-settings"
+        [queryParams]="{profile: '1'}"
+        fragment="editProfile">
+        <mat-icon class="settings">settings</mat-icon>
+        <span>Settings</span>
+      </a>
+
+      <a mat-menu-item (click)="onLogout()">
+        <mat-icon class="logout">lock_outline</mat-icon>
+        <span>Logout</span>
+      </a>
+    </mat-menu>
 
-    <ng-template #loggedin>
-        <h4>(User: {{userEmail()}})</h4>
-
-        <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>more_vert</mat-icon>
-        </button>
-
-        <mat-menu #menu="matMenu" >
-
-          <!-- [routerLink]="['/profile', userUid(), userName()]" -->
-          <a
-            mat-menu-item
-            [routerLink]="'/profile'">
-            <mat-icon class="profile">face</mat-icon>
-            <span>Profile</span>
-          </a>
-
-          <a mat-menu-item *ngFor="let item of menuItems" href="{{item.link}}">
-            <mat-icon class="login">{{item.icon}}</mat-icon>
-            <span>{{item.title}}</span>
-          </a>
-
-          <a
-            mat-menu-item
-            routerLink="/profile-settings"
-            [queryParams]="{profile: '1'}"
-            fragment="editProfile">
-            <mat-icon class="settings">settings</mat-icon>
-            <span>Settings</span>
-          </a>
-
-          <a mat-menu-item (click)="onLogout()">
-            <mat-icon class="logout">lock_outline</mat-icon>
-            <span>Logout</span>
-          </a>
-        </mat-menu>
-
-      </ng-template>
+  </ng-template>
 </mat-toolbar>
diff --git a/src/app/shared/layout/header/header.component.ts b/src/app/shared/layout/header/header.component.ts
@@ -1,27 +1,41 @@
 import { Component } from '@angular/core';
 import * as firebase from 'firebase';
 
-import { AuthService, AlertService, UserService } from '../../services';
+import { AuthService, AlertService } from '../../services';
 
 @Component({
   selector: 'app-header',
   templateUrl: 'header.component.html',
   styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent {
-  public title: string = '';
-  public isAuthenticated: boolean = false;
+  public isAuthenticated: string;
   public angularImage: string = '/assets/img/angular2.png';
 
   public menuItems: Object[] = [
     {
-      icon: 'description',
+      icon: 'library_books',
       title: 'Medium @jeroenouw',
       link: 'https://medium.com/@jeroenouw'
     },
+    {
+      icon: 'description',
+      title: 'Generated docs',
+      link: 'http://ngxmatfire-docs.jerouw.nl/'
+    },
+    {
+      icon: 'description',
+      title: 'Features',
+      link: 'https://github.com/jeroenouw/AngularMaterialFirebase/blob/master/docs/FEATURES.md'
+    },
+    {
+      icon: 'flight_takeoff',
+      title: 'Quick start',
+      link: 'https://github.com/jeroenouw/AngularMaterialFirebase/blob/master/docs/DEVELOPER.md'
+    },
     {
       icon: 'archive',
-      title: 'Published packages',
+      title: 'NPM packages',
       link: 'https://www.npmjs.com/~jeroenouw'
     },
     {
@@ -34,23 +48,19 @@ export class HeaderComponent {
   constructor(
     public authService: AuthService,
     private alertService: AlertService,
-    private userService: UserService
     ) {
       this.isAuthenticated = this.authService.isAuthenticated()
   }
 
-  public userUid(): string{
-    this.userService.getUserProfileInformation();
+  public userUid(): string {
     return firebase.auth().currentUser.uid;
   }
 
   public userEmail(): string {
-    this.userService.getUserProfileInformation();
     return firebase.auth().currentUser.email;
   }
 
   public userName(): string {
-    this.userService.getUserProfileInformation();
     return firebase.auth().currentUser.displayName;
   }
 

diff --git a/src/app/shared/services/auth.service.ts b/src/app/shared/services/auth.service.ts
@@ -1,28 +1,27 @@
 import { Injectable } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
 import { Router } from '@angular/router';
 import * as firebase from 'firebase';
 
-import { AlertService } from './alert.service';
-import { UserService } from './user.service';
-
 @Injectable()
 export class AuthService {
   public token: string;
 
   constructor(
     private router: Router,
-    private alertService: AlertService,
-    private userService: UserService) { }
+    private auth: AngularFireAuth) { }
 
   public onSuccess(): void {
+    sessionStorage.setItem('session-alive', 'true');
     this.token = 'some-temporary-token';
     this.router.navigate(['/']);
+    console.log('AUTH: ', this.auth);
   }
 
-  // Other
   public logout(): void {
+    sessionStorage.removeItem('session-alive');
     this.token = null;
-    this.router.navigate(['/home']);
+    this.router.navigate(['/']);
   }
 
   public getIdToken(): string {
@@ -33,13 +32,7 @@ export class AuthService {
     return this.token;
   }
 
-  public isAuthenticated(): boolean {
-    return this.token != null;
-  }
-
-  private verificationEmail(): void {
-    this.alertService.showToaster('Please check your inbox for a verification email.');
-    this.userService.verificationUserEmail();
-    this.userService.saveUserInfo(firebase.auth().currentUser.uid, name, firebase.auth().currentUser.email);
+  public isAuthenticated(): string {
+    return sessionStorage.getItem('session-alive');
   }
 }