Merge pull request #18 from jeroenouw/ngx-auth

Added ngx-auth-firebaseui for replacing authentication part

README.md

@@ -23,7 +23,7 @@ A full stack starter app containing [Angular 7](https://angular.io), [Material](
 
 [Discover all the features in this project](https://github.com/jeroenouw/AngularMaterialFirebase/blob/master/docs/FEATURES.md)
 
-## Automated documentation
+## [Live automated documentation](http://ngxmatfire-docs.jerouw.nl)
 
 [Generate technical documentation automatically with Compodoc](https://github.com/jeroenouw/AngularMaterialFirebase/blob/master/docs/COMPODOC.md)
 

angular.json

@@ -20,7 +20,12 @@
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
-              "src/favicon.ico"
+              "src/favicon.ico",
+              {
+                "glob": "**/*",
+                "input": "node_modules/ngx-auth-firebaseui/assets/",
+                "output": "./assets/"
+              }
             ],
             "styles": [
               "src/styles.scss"

docs/FEATURES.md

@@ -16,7 +16,7 @@
 * Login page
 * Signup page
 * Save email (keep in touch)
-* Authentication (Anonymous, Email, Google, Twitter, Facebook and Github)
+* ngx-auth-firebaseui for authentication (Anonymous, Email, Google, Twitter, Facebook and Github)
 * Verification email after signup
 * Auth Guard
 * Profile image animation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxmatfire",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Jeroen Ouwehand",
   "description": "Full stack starter app with Angular 7, Material Design and Firebase.",
   "keywords": [
@@ -38,16 +38,18 @@
     "@angular/common": "^7.1.0",
     "@angular/compiler": "^7.1.0",
     "@angular/core": "^7.1.0",
+    "@angular/fire": "^5.1.1",
+    "@angular/flex-layout": "^7.0.0-beta.23",
     "@angular/forms": "^7.1.0",
-    "@angular/http": "^7.1.0",
     "@angular/material": "^7.1.0",
     "@angular/platform-browser": "^7.1.0",
     "@angular/platform-browser-dynamic": "^7.1.0",
     "@angular/platform-server": "^7.1.0",
     "@angular/router": "^7.1.0",
     "core-js": "^2.5.7",
-    "firebase": "^5.5.1",
+    "firebase": "^5.7.3",
     "hammerjs": "^2.0.8",
+    "ngx-auth-firebaseui": "^2.2.1",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.3.3",
     "ts-helpers": "*",
@@ -74,7 +76,7 @@
     "rxjs-tslint": "^0.1.5",
     "ts-node": "^7.0.1",
     "tslint": "^5.12.0",
-    "typescript": "^3.2.2",
+    "typescript": "^3.1.6",
     "webpack": "^4.28.2"
   }
 }

src/app/app.component.html

@@ -2,12 +2,6 @@
 
     <app-header></app-header><br />
     <router-outlet></router-outlet>
-
-    <!-- See messages, users and stay in touch in console log -->
-    <div id="messages"> </div>
-    <div id="users"> </div>
-    <div id="touch"> </div>
-
-    <app-footer></app-footer> 
+    <app-footer></app-footer>
 
 </mat-sidenav-container>

src/app/app.component.ts

@@ -19,15 +19,5 @@ export class AppComponent implements OnInit {
       storageBucket: 'angular4materialdesign.appspot.com',
       messagingSenderId: '136985605193'
     });
-
-    // See users and keep in touch in console log
-
-    // const preUsers = document.getElementById('users');
-    // const dbRefUsers = firebase.database().ref().child('users');
-    // dbRefUsers.on('value', snap => console.log(snap.val()));
-
-    // const preTouch = document.getElementById('touch');
-    // const dbRefTouch = firebase.database().ref().child('touch');
-    // dbRefTouch.on('value', snap => console.log(snap.val()));
   }
 }

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatInputModule, MatS
          MatCardModule, MatTabsModule, MatIconModule } from '@angular/material';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
 
 // Modules
 import { BlocksModule } from './components/blocks/blocks.module';
@@ -66,7 +67,15 @@ import { EmailMeComponent } from './components/email-me/email-me.component';
     AuthModule,
     BackgroundsModule,
     ProfileModule,
-    MiscModule
+    MiscModule,
+    NgxAuthFirebaseUIModule.forRoot({
+      apiKey: 'AIzaSyBUYZcc_HKi1TckbZPpSjSkxyFvml3Is0A',
+      authDomain: 'angular4materialdesign.firebaseapp.com',
+      databaseURL: 'https://angular4materialdesign.firebaseio.com',
+      projectId: 'angular4materialdesign',
+      storageBucket: 'angular4materialdesign.appspot.com',
+      messagingSenderId: '136985605193'
+  })
   ],
   providers: [
     UserService,

src/app/app.routing.ts

@@ -9,8 +9,7 @@ import { PageNotFoundComponent } from './pages/not-found/not-found.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AboutMeComponent } from './pages/about-me/about-me.component';
 import { ContactComponent } from './pages/contact/contact.component';
-import { SignupComponent } from './pages/auth/signup.component';
-import { SigninComponent } from './pages/auth/signin.component';
+import { AuthComponent } from './pages/auth/auth.component';
 import { ProfileComponent } from './pages/profile/profile.component';
 import { ProfileSettingsComponent } from './pages/profile/profile-settings.component';
 
@@ -29,8 +28,7 @@ const appRoutes: Routes = [
   { path: 'about', component: AboutMeComponent },
   { path: 'contact', component: ContactComponent },
   { path: 'misc', component: MiscComponent },
-  { path: 'signup', component: SignupComponent },
-  { path: 'login', component: SigninComponent },
+  { path: 'auth', component: AuthComponent },
 
   // Protected pages
   // { path: 'profile/:uid/:name', component: ProfileComponent, canActivate: [AuthGuardService] },

src/app/components/email-me/email-me.component.html

@@ -1,13 +1,13 @@
-<form class="form" [formGroup]="form" (ngSubmit)="onSubmit(f)" #f="ngForm"> 
+<form class="form" [formGroup]="form" (ngSubmit)="onSubmit(f)" #f="ngForm">
   <mat-card>
     <h3>Keep in touch!</h3>
     <mat-form-field class="full-width">
       <input matInput formControlName="email" placeholder="Your Email" type="email" required>
     </mat-form-field>
     <div *ngIf="!form.controls.email.valid  && form.controls.email.dirty">
-      <p>Please enter a valid email.</p>
+      Please enter a valid email.
     </div>
     <br />
     <button mat-raised-button class="primary" type="submit" [disabled]="form.invalid">Submit</button>
   </mat-card>
-</form>
+</form>

src/app/pages/auth/auth.component.html

@@ -0,0 +1,5 @@
+<ngx-auth-firebaseui
+  (onSuccess)="onSuccess()"
+  (onError)="printError()"
+  appearance="outline">
+</ngx-auth-firebaseui>

src/app/pages/auth/auth.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { AuthService } from '@shared';
+
+@Component({
+  selector: 'app-auth',
+  templateUrl: './auth.component.html',
+  styleUrls: ['./auth.component.scss']
+})
+export class AuthComponent {
+  public loading: boolean = false;
+
+  constructor(private authService: AuthService) {}
+
+  public onSuccess(): void {
+    return this.authService.onSuccess();
+  }
+
+}

src/app/pages/auth/auth.module.ts

@@ -3,37 +3,34 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 import { MatButtonModule, MatInputModule, MatProgressBarModule,
          MatCardModule, MatIconModule } from '@angular/material';
+import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
 
 // Components
-import { SignupComponent } from './signup.component';
-import { SigninComponent } from './signin.component';
+import { AuthComponent } from './auth.component';
 import { PhoneSigninComponent } from './phone-signin/phone-signin.component';
 
 @NgModule({
   declarations: [
-    SignupComponent,
-    SigninComponent,
+    AuthComponent,
     PhoneSigninComponent
   ],
   imports: [
     CommonModule,
     BrowserModule,
     FormsModule,
-    HttpModule,
     MatButtonModule, MatInputModule, MatProgressBarModule,
-    MatCardModule, MatIconModule
+    MatCardModule, MatIconModule,
+    NgxAuthFirebaseUIModule
   ],
   providers: [
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
   ],
   exports: [
-    SignupComponent,
-    SigninComponent,
+    AuthComponent,
     PhoneSigninComponent
   ]
 })