change: angular-cli v1.0.2 + angularfire2 rc4.0.0

Author: codediodeio

package.json

@@ -24,32 +24,31 @@
     "@angular/platform-server": "^4.0.0",
     "@angular/router": "^4.0.0",
     "@types/lodash": "^4.14.61",
-    "angularfire2": "^2.0.0-beta.8",
-    "bootstrap": "^4.0.0-alpha.6",
+    "angularfire2": "^4.0.0-rc.0",
     "core-js": "^2.4.1",
     "firebase": "^3.7.2",
     "lodash": "^4.17.4",
     "rxjs": "^5.1.0",
     "typescript": "^2.2.1",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.8.10"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.2",
+    "@angular/cli": "^1.0.2",
     "@angular/compiler-cli": ">=4.0.0-beta <5.0.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
+    "@types/jasmine": "2.5.47",
+    "@types/node": "~7.0.18",
+    "codelyzer": "~3.0.1",
+    "jasmine-core": "~2.6.1",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typescript": "~2.1.0"
+    "ts-node": "~3.0.4",
+    "tslint": "~5.2.0",
+    "typescript": "~2.3.2"
   }
 }

src/app/app.module.ts

@@ -9,7 +9,11 @@ import { AppComponent } from './app.component';
 
 ///// Start FireStarter
 import { environment } from '../environments/environment';
+import * as firebase from 'firebase/app';
 import { AngularFireModule } from 'angularfire2';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { AngularFireAuthModule} from 'angularfire2/auth';
+
 
 // FireStarter Users
 import { AuthService } from './core/auth.service';
@@ -67,9 +71,11 @@ export const firebaseConfig = environment.firebaseConfig;
     FormsModule,
     ReactiveFormsModule,
     HttpModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     AngularFireModule.initializeApp(firebaseConfig),
-    BrowserAnimationsModule,
+    AngularFireDatabaseModule,
+    AngularFireAuthModule
   ],
   providers: [
     AuthService,

src/app/core/auth.service.ts

@@ -1,25 +1,21 @@
 import { Injectable } from '@angular/core';
-import { AngularFireAuth, AngularFireDatabase, FirebaseAuthState, AuthProviders, AuthMethods, AngularFire } from "angularfire2";
+import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+import { AngularFireAuth } from 'angularfire2/auth';
 import { Router } from "@angular/router";
 import * as firebase from 'firebase';
 
-export class EmailPasswordCredentials {
-  email: string;
-  password: string;
-}
-
 
 @Injectable()
 export class AuthService {
 
-  authState: FirebaseAuthState = null;
+  authState: any = null;
 
-  constructor(private af: AngularFire,
+  constructor(private afAuth: AngularFireAuth,
               private db: AngularFireDatabase,
               private router:Router) {
 
-            af.auth.subscribe((auth) => {
-              this.authState = auth;
+            this.afAuth.authState.subscribe((auth) => {
+              this.authState = auth
             });
           }
 
@@ -28,14 +24,14 @@ export class AuthService {
     return this.authState !== null;
   }
 
-  // Returns current user
+  // Returns current user data
   get currentUser(): any {
-    return this.authenticated ? this.authState.auth : null;
+    return this.authenticated ? this.authState : null;
   }
 
   // Returns
   get currentUserObservable(): any {
-    return this.af.auth
+    return this.afAuth.authState
   }
 
   // Returns current user UID
@@ -45,83 +41,76 @@ export class AuthService {
 
   // Anonymous User
   get currentUserAnonymous(): boolean {
-    return this.authenticated ? this.authState.anonymous : false
+    return this.authenticated ? this.authState.isAnonymous : false
   }
 
   // Returns current user display name or Guest
   get currentUserDisplayName(): string {
-    if (!this.authenticated) { return 'Guest' }
-
+    if (!this.authState) { return 'Guest' }
     else if (this.currentUserAnonymous) { return 'Anonymous' }
-
-    else { return this.authState.auth.displayName || 'User without a Name' }
-
+    else { return this.authState['displayName'] || 'User without a Name' }
   }
 
   //// Social Auth ////
 
-  githubLogin(): firebase.Promise<FirebaseAuthState> {
-    return this.socialSignIn(AuthProviders.Github);
+  githubLogin() {
+    const provider = new firebase.auth.GithubAuthProvider()
+    return this.socialSignIn(provider);
   }
 
-  googleLogin(): firebase.Promise<FirebaseAuthState> {
-    return this.socialSignIn(AuthProviders.Google);
+  googleLogin() {
+    const provider = new firebase.auth.GoogleAuthProvider()
+    return this.socialSignIn(provider);
   }
 
-  facebookLogin(): firebase.Promise<FirebaseAuthState> {
-    return this.socialSignIn(AuthProviders.Facebook);
+  facebookLogin() {
+    const provider = new firebase.auth.FacebookAuthProvider()
+    return this.socialSignIn(provider);
   }
 
-  twitterLogin(): firebase.Promise<FirebaseAuthState> {
-    return this.socialSignIn(AuthProviders.Twitter);
+  twitterLogin(){
+    const provider = new firebase.auth.TwitterAuthProvider()
+    return this.socialSignIn(provider);
   }
 
-  private socialSignIn(provider: number): firebase.Promise<FirebaseAuthState> {
-    return this.af.auth.login({provider, method: AuthMethods.Popup})
-      .then(() => this.updateUserData() )
+  private socialSignIn(provider) {
+    return this.afAuth.auth.signInWithPopup(provider)
+      .then((credential) =>  {
+          this.authState = credential.user
+          this.updateUserData()
+      })
       .catch(error => console.log(error));
   }
 
 
   //// Anonymous Auth ////
 
   anonymousLogin() {
-    return this.af.auth.login({
-      provider: AuthProviders.Anonymous,
-      method: AuthMethods.Anonymous,
+    return this.afAuth.auth.signInAnonymously()
+    .then((user) => {
+      this.authState = user
+      this.updateUserData()
     })
-    .then(() => this.updateUserData())
     .catch(error => console.log(error));
   }
 
-  // anonymousUpgrade(): firebase.Promise<FirebaseAuthState> {
-  //
-  //   let anonId = this.currentUserId
-  //
-  //   // Login with google
-  //   return this.googleLogin().then( () => {
-  //     // get the data snapshot from anonymous account account
-  //     this.db.object(anonId).subscribe(snapshot => {
-  //       // map the anonymous user data to the new account.
-  //       this.db.object(this.currentUserId).update(snapshot)
-  //     })
-  //   });
-  // }
-
   //// Email/Password Auth ////
 
-  emailSignUp(credentials: EmailPasswordCredentials): firebase.Promise<FirebaseAuthState> {
-    return this.af.auth.createUser(credentials)
-      .then(() => this.updateUserData())
+  emailSignUp(email:string, password:string) {
+    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
+      .then((user) => {
+        this.authState = user
+        this.updateUserData()
+      })
       .catch(error => console.log(error));
   }
 
-  emailLogin(credentials: EmailPasswordCredentials): firebase.Promise<FirebaseAuthState> {
-     return this.af.auth.login(credentials,
-       { provider: AuthProviders.Password,
-         method: AuthMethods.Password
-        })
-       .then(() => this.updateUserData())
+  emailLogin(email:string, password:string) {
+     return this.afAuth.auth.signInWithEmailAndPassword(email, password)
+       .then((user) => {
+         this.authState = user
+         this.updateUserData()
+       })
        .catch(error => console.log(error));
   }
 
@@ -138,7 +127,7 @@ export class AuthService {
   //// Sign Out ////
 
   signOut(): void {
-    this.af.auth.logout();
+    this.afAuth.auth.signOut();
     this.router.navigate(['/'])
   }
 
@@ -151,9 +140,9 @@ export class AuthService {
 
     let path = `users/${this.currentUserId}`; // Endpoint on firebase
     let data = {
-                 name: this.currentUser.displayName,
-                 email: this.currentUser.email,
-               }
+                  email: this.authState.email,
+                  name: this.authState.displayName
+                }
 
     this.db.object(path).update(data)
     .catch(error => console.log(error));

src/app/items/items-list/items-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ItemService } from '../shared/item.service';
 import { Item } from '../shared/item';
-import { FirebaseListObservable } from "angularfire2";
+import { FirebaseListObservable } from 'angularfire2/database';
 
 @Component({
   selector: 'items-list',

src/app/items/shared/item.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { AngularFire, FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase } from "angularfire2";
+// import { AngularFire, FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase } from "angularfire2";
+import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
 import { Item } from './item';
 
 @Injectable()
@@ -10,8 +11,7 @@ export class ItemService {
   items: FirebaseListObservable<Item[]> = null; //  list of objects
   item: FirebaseObjectObservable<Item> = null; //   single object
 
-  constructor(private af: AngularFire,
-              private db: AngularFireDatabase) { }
+  constructor(private db: AngularFireDatabase) { }
 
 
   // Return an observable list with optional query

src/app/uploads/shared/upload.service.ts

@@ -1,13 +1,14 @@
 import { Injectable } from '@angular/core';
-import { AngularFire, AngularFireDatabase, FirebaseListObservable } from 'angularfire2';
+// import { AngularFire, AngularFireDatabase, FirebaseListObservable } from 'angularfire2';
 import { Upload } from './upload';
+import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
 import * as firebase from 'firebase';
 
 
 @Injectable()
 export class UploadService {
 
-  constructor(private af: AngularFire, private db: AngularFireDatabase) { }
+  constructor(private db: AngularFireDatabase) { }
 
   private basePath:string = '/uploads';
   private uploadTask: firebase.storage.UploadTask;

src/app/uploads/uploads-list/uploads-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FirebaseListObservable } from "angularfire2";
+import { FirebaseListObservable } from 'angularfire2/database';
 import { UploadService } from '../shared/upload.service';
 import { Upload } from '../shared/upload';
 

src/app/users/user-form/user-form.component.html

@@ -52,12 +52,12 @@ <h3>Existing User Login</h3>
     {{ formErrors.password }}
   </div>
 
-  <button type="submit" class="btn btn-block btn-primary" [disabled]="!userForm.valid">Submit</button>
+  <button type="submit" class="button" [disabled]="!userForm.valid">Submit</button>
 
   <span *ngIf="userForm.valid" class="help is-success">Form Looks Valid</span>
 
-  <p *ngIf="!passReset && userForm.controls.email.valid" class="btn btn-sm btn-secondary" (click)="resetPassword()">Reset Password for {{userForm.value.email}}?</p>
-  <p *ngIf="passReset" class="text-warning">Reset requested. Check your email instructions.</p>
+  <a *ngIf="!passReset && userForm.controls.email.valid" class="help is-info" (click)="resetPassword()">Reset Password for {{userForm.value.email}}?</a>
+  <p *ngIf="passReset" class="help is-info">Reset requested. Check your email instructions.</p>
 
 
 </form>

src/app/users/user-form/user-form.component.ts

@@ -24,11 +24,11 @@ export class UserFormComponent implements OnInit {
    }
 
    signup(): void {
-     this.auth.emailSignUp(this.userForm.value)
+     this.auth.emailSignUp(this.userForm.value['email'], this.userForm.value['password'])
    }
 
    login(): void {
-     this.auth.emailLogin(this.userForm.value)
+     this.auth.emailLogin(this.userForm.value['email'], this.userForm.value['password'])
    }
 
    resetPassword() {