add some firebase

Author: daggerok

.gitignore

@@ -1,3 +1,5 @@
+firebase.config.ts
+
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output

.travis.yml

@@ -33,6 +33,10 @@ script:
       export TARGET="$ROOT/$path";
       cd $TARGET;
 
+      if [ "$path" == "03-angular4-firebase-auth" ]; then
+        cp -Rf ./src/firebase.config-default.ts ./firebase.config.ts
+      fi;
+
       yarn install;
       yarn predeploy;
       if [ -f npm-debug.log ]; then cat npm-debug.log; fi;

03-angular4-firebase-auth/.angular-cli.json

@@ -42,6 +42,21 @@
   ],
   "defaults": {
     "styleExt": "css",
-    "component": {}
+    "component": {
+      "spec": false,
+      "inlineStyle": true
+    },
+    "directive": {
+      "spec": false
+    },
+    "module": {
+      "spec": false
+    },
+    "pipe": {
+      "spec": false
+    },
+    "service": {
+      "spec": false
+    }
   }
 }

03-angular4-firebase-auth/README.md

@@ -1,6 +1,12 @@
-# TODO App using Angular 4 Redux store [![Build Status](https://travis-ci.org/daggerok/angular-examples.svg)](https://travis-ci.org/daggerok/angular-examples)
+# Auth App using Angular 4 Firebase [![Build Status](https://travis-ci.org/daggerok/angular-examples.svg)](https://travis-ci.org/daggerok/angular-examples)
 
-[read more about bootswatch 4](https://bootswatch.com/4-alpha/materia/)
+- [TODO](https://www.youtube.com/watch?v=O_jxEC0hWcA)
+
+- [angularfire2 auth](https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md)
+
+- [read more about angularfire2](https://github.com/angular/angularfire2/blob/master/docs/)
+
+- [read more about bootswatch 4](https://bootswatch.com/4-alpha/materia/)
 
 **default REAMDE.md:**
 

03-angular4-firebase-auth/daggerok-angular-examples-export.json

@@ -0,0 +1,8 @@
+{
+  "users": {
+    "daggerok": {
+      "name": "Maksim",
+      "email": "[email protected]"
+    }
+  }
+}

03-angular4-firebase-auth/package.json

@@ -26,9 +26,11 @@
     "@angular/platform-browser": "4.4.1",
     "@angular/platform-browser-dynamic": "4.4.1",
     "@angular/router": "4.4.1",
+    "angularfire2": "4.0.0-rc.2",
     "bootstrap": "4.0.0-beta",
     "bootswatch": "4.0.0-alpha.6",
     "core-js": "2.5.1",
+    "firebase": "4.3.1",
     "jquery": "3.2.1",
     "popper.js": "1.12.5",
     "rxjs": "5.4.3",

03-angular4-firebase-auth/src/app/app.component.html

@@ -33,5 +33,9 @@ <h1 class="display-3">Auth App</h1>
 </div>
 
 <div class="container-fluid">
-
+  <ul *ngFor="let user of users" class="list-group">
+    <li class="list-group-item">{{ user.name}} &lt;{{user.email}}&gt;</li>
+  </ul>
 </div>
+
+<app-login></app-login>

03-angular4-firebase-auth/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,12 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'Auth App using Angular 4 and Firebase';
+  $users: FirebaseObjectObservable<any[]>;
+  users: any[];
+  constructor(db: AngularFireDatabase) {
+    this.$users = db.object('users');
+    this.$users.subscribe(users => {
+      this.users = Object.keys(users).map(k => users[k]);
+    });
+  }
 }

03-angular4-firebase-auth/src/app/app.module.ts

@@ -4,17 +4,36 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { AngularFireModule } from 'angularfire2';
+
+import { config } from '../firebase.config';
+import { LoginComponent } from './components/login/login.component';
+import { EmailComponent } from './components/email/email.component';
+import { SignupComponent } from './components/signup/signup.component';
+import { MembersComponent } from './components/members/members.component';
+import { AngularFireDatabaseModule, AngularFireDatabaseProvider } from 'angularfire2/database';
+import { AngularFireAuthModule, AngularFireAuthProvider } from 'angularfire2/auth';
 
 @NgModule({
   declarations: [
     AppComponent,
+    LoginComponent,
+    EmailComponent,
+    SignupComponent,
+    MembersComponent,
   ],
   imports: [
+    AngularFireModule.initializeApp(config),
+    AngularFireDatabaseModule,
+    AngularFireAuthModule,
     BrowserModule,
     FormsModule,
     HttpModule,
   ],
-  providers: [],
+  providers: [
+    AngularFireDatabaseProvider,
+    AngularFireAuthProvider,
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

03-angular4-firebase-auth/src/app/components/email/email.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-email',
+  template: `
+    <p>
+      email Works!
+    </p>
+  `,
+  styles: []
+})
+export class EmailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

03-angular4-firebase-auth/src/app/components/login/login.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFireAuth } from 'angularfire2/auth';
+import { Observable } from 'rxjs/Observable';
+import { auth, User } from 'firebase/app';
+
+const GoogleAuthProvider = auth.GoogleAuthProvider;
+
+@Component({
+  selector: 'app-login',
+  template: `
+    <div class="container-fluid">
+      <div> {{ (user | async)?.uid }} </div>
+      <button class="btn btn-primary" (click)="logIn()">Login</button>
+      <button class="btn btn-info" (click)="logOut()">Logout</button>
+    </div>
+  `,
+  styles: [],
+})
+export class LoginComponent implements OnInit {
+  user: Observable<User>;
+  constructor(public afAuth: AngularFireAuth) {
+    this.user = afAuth.authState;
+  }
+  ngOnInit() {}
+  logIn() {
+    this.afAuth.auth.signInWithPopup(
+      new GoogleAuthProvider()
+    );
+  }
+  logOut() {
+    this.afAuth.auth.signOut();
+  }
+}

03-angular4-firebase-auth/src/app/components/members/members.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-members',
+  template: `
+    <p>
+      members Works!
+    </p>
+  `,
+  styles: []
+})
+export class MembersComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

03-angular4-firebase-auth/src/app/components/signup/signup.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-signup',
+  template: `
+    <p>
+      signup Works!
+    </p>
+  `,
+  styles: []
+})
+export class SignupComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

03-angular4-firebase-auth/src/firebase.config-default.ts

@@ -0,0 +1,10 @@
+import { FirebaseAppConfig } from 'angularfire2';
+
+export const config: FirebaseAppConfig = {
+  apiKey: "...",
+  authDomain: "...",
+  databaseURL: "...",
+  projectId: "...",
+  storageBucket: "...",
+  messagingSenderId: "..."
+};

03-angular4-firebase-auth/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <!--<script src="service-worker-register.js" async></script>-->
   <meta charset="utf-8">
-  <title>Angular 4 Redux TODO</title>
+  <title>Angular 4 Firebase Auth</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">