app v0.0.1

Author: codediodeio

.gitignore

@@ -1,5 +1,9 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+/src/environments/environment.prod.ts
+/src/environments/environment.ts
+NOTES.md
+
 # compiled output
 /dist
 /tmp

NOTES.md

@@ -9,8 +9,3 @@ npm install -g typescript
 npm install angularfire2 firebase --save
 
 Firebase sign in methods enabled
-
-
-http://stackoverflow.com/questions/34925992/how-to-avoid-imports-with-very-long-relative-paths-in-angular-2
-tsconfig.json changed "baseUrl": "src"
-to "baseUrl": "."

README.md

@@ -1,28 +1,51 @@
-# Firestarter
+# FireStarter - Angular4 + Firebase Starter App
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.2.
+FireStarter is designed to handle the basic features most Angular+Firebase apps need. It can serve as a foundation to quickly roll out more complex features.
 
-## Development server
+Demo
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Features
 
-## Code scaffolding
+- Authentication w/ Router Guard
+- Realtime Database CRUD Demo
+- File Uploads to Firebase Storage
+- SASS-based
+- Bootstrap 4
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+## Usage
 
-## Build
+Create an account at https://firebase.google.com/
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+`git clone`
+`cd firestarter`
+`npm install`
 
-## Running unit tests
+Create two new files in the `/environments` dir.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+environment.ts
+```typescript
+export const environment = {
+  production: false,
+  firebaseConfig: {
+    apiKey: "APIKEY",
+    authDomain: "DEV-APP.firebaseapp.com",
+    databaseURL: "https://DEV-APP.firebaseio.com",
+    storageBucket: "DEV-APP.appspot.com"
+  }
+};
+```
+environment.prod.ts
+```typescript
+export const environment = {
+  production: true,
+  firebaseConfig: {
+    // same as above, or use a different firebase project to isolate environments
+  }
+};
+```
 
-## Running end-to-end tests
+And finally `ng serve`
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+## Apps Using FireStarter in Production
 
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+- [ArtiFilter](https://app.artifilter.com) - Neural Art Generator

package.json

@@ -44,9 +44,9 @@
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",

src/app/app-routing.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from './core/auth.guard';
+
 import { UserLoginComponent } from './users/user-login/user-login.component';
 import { ItemsListComponent } from './items/items-list/items-list.component';
 import { UploadsListComponent } from './uploads/uploads-list/uploads-list.component';
@@ -10,8 +12,8 @@ const routes: Routes = [
     children: []
   },
   { path: 'login', component: UserLoginComponent, },
-  { path: 'items', component: ItemsListComponent, },
-  { path: 'uploads', component: UploadsListComponent, },
+  { path: 'items', component: ItemsListComponent, canActivate: [AuthGuard]},
+  { path: 'uploads', component: UploadsListComponent, canActivate: [AuthGuard]},
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,16 +1,9 @@
-  <top-nav></top-nav>
+<top-nav></top-nav>
 
-<!-- <div class="jumbotron jumbotron-fluid">
-  <div class="container">
-    <h1 class="display-3"><i class="fa fa-fire"></i> {{title}}</h1>
-    <p class="lead">Angular v4 starter app wired up with Firebase</p>
-  </div>
-</div> -->
-
-<div class="container">
+<div class="container main-content">
 
   <div class="row">
-    <div class="col-md-3 align-self-start">
+    <div class="col-md-4 align-self-start">
 
       <user-profile></user-profile>
 
@@ -19,10 +12,14 @@ <h1 class="display-3"><i class="fa fa-fire"></i> {{title}}</h1>
 
 
     </div>
-    <div class="col-md-9">
+    <main class="col-md-8 main">
 
       <router-outlet></router-outlet>
 
-    </div>
+    </main>
   </div>
+
 </div>
+
+
+<footer-nav></footer-nav>

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { AngularFireModule } from 'angularfire2';
 
 // FireStarter Users
 import { AuthService } from './core/auth.service';
+import { AuthGuard} from './core/auth.guard';
 import { UserLoginComponent } from './users/user-login/user-login.component';
 import { UserProfileComponent } from './users/user-profile/user-profile.component';
 
@@ -31,6 +32,7 @@ import { UploadDetailComponent } from './uploads/upload-detail/upload-detail.com
 // FireStarter Navigation
 import { NavService } from './ui/shared/nav.service';
 import { TopNavComponent } from './ui/top-nav/top-nav.component';
+import { FooterNavComponent } from './ui/footer-nav/footer-nav.component';
 
 
 export const firebaseConfig = environment.firebaseConfig;
@@ -49,7 +51,8 @@ export const firebaseConfig = environment.firebaseConfig;
     UploadFormComponent,
     UploadsListComponent,
     UploadDetailComponent,
-    TopNavComponent
+    TopNavComponent,
+    FooterNavComponent
   ],
   imports: [
     BrowserModule,
@@ -61,6 +64,7 @@ export const firebaseConfig = environment.firebaseConfig;
   ],
   providers: [
     AuthService,
+    AuthGuard,
     ItemService,
     UploadService,
     NavService,

src/app/core/auth.guard.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { AuthService } from './auth.service';
+// import { AngularFireAuth } from "angularfire2";
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private auth: AuthService, private router: Router) {}
+
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | boolean {
+      if (this.auth.authenticated) { return true; }
+
+      console.log('access denied!')
+      this.router.navigate(['/login']);
+      return false
+
+
+  }
+}

src/app/core/auth.service.ts

@@ -1,23 +1,19 @@
 import { Injectable } from '@angular/core';
 import { AngularFireAuth, AngularFireDatabase, FirebaseAuthState, AuthProviders, AuthMethods, AngularFire } from "angularfire2";
-// import { User } from "../users/user";
 import { Router } from "@angular/router";
 
 
 @Injectable()
 export class AuthService {
 
-  public authState: FirebaseAuthState = null;
+  authState: FirebaseAuthState = null;
 
   constructor(private af: AngularFire,
               private db: AngularFireDatabase,
               private router:Router) {
 
             af.auth.subscribe((auth) => {
               this.authState = auth;
-              console.log(this.af.auth)
-              console.log(this.authState)
-              console.log(this.authState)
             });
           }
 
@@ -36,11 +32,20 @@ export class AuthService {
     return this.authenticated ? this.authState.uid : '';
   }
 
+  // Anonymous User
+  get currentUserAnonymous(): boolean {
+    return this.authenticated ? this.authState.anonymous : false
+  }
+
   // Returns current user display name or Guest
   get currentUserDisplayName(): string {
-    return this.authenticated ? this.authState.auth.displayName : 'GUEST';
-  }
+    if (!this.authenticated) { return 'GUEST' }
+
+    else if (this.currentUserAnonymous) { return 'ANONYMOUS' }
 
+    else { return this.authState.auth.displayName || 'OAUTH USER' }
+
+  }
 
   //// Social Auth ////
 
@@ -64,7 +69,19 @@ export class AuthService {
     return this.af.auth.login({provider, method: AuthMethods.Popup})
       .then(() => this.updateUserData() )
       .catch(error => console.log(error));
-    }
+  }
+
+
+  //// Anonymous Auth ////
+
+  anonymousLogin() {
+    return this.af.auth.login({
+      provider: AuthProviders.Anonymous,
+      method: AuthMethods.Anonymous,
+    })
+    .then(() => this.updateUserData())
+    .catch(error => console.log(error));
+  }
 
   //// Email/Password Auth ////
 
@@ -80,16 +97,6 @@ export class AuthService {
   //      .catch(error => console.log(error));
   // }
 
-  //// Anonymous Auth ////
-
-  // anonymousLogin() {
-  //   return this.af.auth.login({
-  //     provider: AuthProviders.Anonymous,
-  //     method: AuthMethods.Anonymous,
-  //   })
-  //   .then(() => this.writeUserData())
-  //   .catch(error => console.log(error));
-  // }
 
   //// Sign Out ////
 

src/app/items/item-form/item-form.component.html

@@ -7,7 +7,7 @@ <h3>New Task Form</h3>
     <input placeholder="Item Title" class="form-control"
     [(ngModel)]="item.title"
     required minlength="2" maxlength="23"
-    #title='ngModel'>
+    #title='ngModel' autofocus>
 
     <div *ngIf="title.dirty">
       <span *ngIf='title.errors; then errors else valid'>template renders here...</span>