Added login and routing

src/app/app.component.css

@@ -1,73 +0,0 @@
-md-sidenav-layout.m2app-dark {
-  background: black;
-}
-
-.app-content {
-  padding: 20px;
-}
-
-.app-content md-card {
-  margin: 20px;
-}
-
-.app-sidenav {
-  padding: 10px;
-  min-width: 100px;
-}
-
-.app-content md-checkbox {
-  margin: 10px;
-}
-
-.app-toolbar-filler {
-  flex: 1 1 auto;
-}
-
-.app-toolbar-menu {
-  padding: 0 14px 0 14px;
-  color: white;
-}
-
-.app-icon-button {
-  box-shadow: none;
-  user-select: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-  filter: none;
-  font-weight: normal;
-  height: auto;
-  line-height: inherit;
-  margin: 0;
-  min-width: 0;
-  padding: 0;
-  text-align: left;
-  text-decoration: none;
-}
-
-.app-action {
-  display: inline-block;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-}
-
-.app-spinner {
-  height: 30px;
-  width: 30px;
-  display: inline-block;
-}
-
-.app-input-icon {
-  font-size: 16px;
-}
-
-.app-list {
-  border: 1px solid rgba(0,0,0,0.12);
-  width: 350px;
-  margin: 20px;
-}
-
-.app-progress {
-  margin: 20px;
-}

src/app/app.component.html

@@ -1,9 +1,2 @@
-<ul>
-  <li *ngFor="let item of items | async">
-    <span (click)=selectItem(item)>{{ item.name }}</span>
-  </li>
-</ul>
-
-<span class="app-action">
-  <button md-fab (click)="openDialog()" ><md-icon>playlist_add</md-icon></button>
-</span>
+<h1>{{title}}</h1>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,64 +1,17 @@
 import { Component } from '@angular/core';
-import { MdDialog, MdDialogRef } from '@angular/material';
-import { AngularFire, FirebaseListObservable } from 'angularfire2';
-import { ItemDialogComponent } from './item-dialog/item-dialog.component';
+import { AngularFire } from 'angularfire2';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 @Component({
   selector: 'app-root',
   template: require('./app.component.html'),
   styles: [require('./app.component.css')]
 })
 export class AppComponent {
-  dialogRef: MdDialogRef<ItemDialogComponent>;
-  items: FirebaseListObservable<any[]>;
-  selectedItem: any;
+  title = 'Job Task Manager';
 
-  constructor(private af: AngularFire, public dialog: MdDialog) {
-    this.items = af.database.list('/items');
-    console.log(this.items);
-    this.selectedItem = { name: 'Prova' };
-  }
-
-  selectItem(item) {
-    console.log(item);
-    this.selectedItem = item;
-    this.openDialog();
-  }
-
-  add() {
-    console.log('add new item');
-    // const newItem = {item: { name: 'Test'}};
-    // this.items.push(newItem);
-  }
-
-  openDialog() {
-    this.dialogRef = this.dialog.open(ItemDialogComponent, {
-      disableClose: false,
-    });
-
-    this.dialogRef.componentInstance.newItem = this.selectedItem;
+  constructor(private af: AngularFire) {
 
-    this.dialogRef.afterClosed().subscribe(result => {
-      console.log('result: ' + result);
-      this.dialogRef = null;
-      if (result) {
-        if (result.delete) {
-          if (result.item && result.item.$key) {
-            this.items.remove(result.item.$key);
-          }
-        } else {
-          const key = result.$key;
-          if (key) {
-            delete result['$key'];
-            delete result['$exists'];
-            this.items.update(key, result);
-          } else {
-            console.log(result);
-            this.items.push(result);
-          }
-        }
-      }
-    });
   }
 
 }

src/app/app.module.ts

@@ -2,37 +2,56 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { RouterModule, Routes } from '@angular/router';
+import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
 
 import { AppComponent } from './app.component';
-import { AngularFireModule } from 'angularfire2';
+import { AuthGuardService } from './auth-guard.service';
 import { MaterialModule } from '@angular/material';
 import { ItemDialogComponent } from './item-dialog/item-dialog.component';
+import { LoginComponent } from './login/login.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 // Must export the config
 export const firebaseConfig = {
-    apiKey: "AIzaSyC3AxwhbXoj8G14Ez-Kz5XKzbrm8VA1PiQ",
-    authDomain: "costmansud.firebaseapp.com",
-    databaseURL: "https://costmansud.firebaseio.com",
-    storageBucket: "costmansud.appspot.com",
-    messagingSenderId: "727927067070"
-  };
+  apiKey: 'AIzaSyC3AxwhbXoj8G14Ez-Kz5XKzbrm8VA1PiQ',
+  authDomain: 'costmansud.firebaseapp.com',
+  databaseURL: 'https://costmansud.firebaseio.com',
+  storageBucket: 'costmansud.appspot.com',
+  messagingSenderId: '727927067070'
+};
+
+const firebaseAuthConfig = {
+  provider: AuthProviders.Password,
+  method: AuthMethods.Password
+}
+
+const routes: Routes = [
+  { path: '', redirectTo: '/login', pathMatch: 'full' },
+  { path: 'home', component: DashboardComponent, canActivate : [AuthGuardService] },
+  { path: 'login', component: LoginComponent }
+];
 
 @NgModule({
   declarations: [
     AppComponent,
-    ItemDialogComponent
+    DashboardComponent,
+    ItemDialogComponent,
+    LoginComponent
   ],
-  entryComponents:[
+  entryComponents: [
     ItemDialogComponent
   ],
   imports: [
-    AngularFireModule.initializeApp(firebaseConfig),
+    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
     MaterialModule.forRoot(),
+    RouterModule.forRoot(routes),
     BrowserModule,
     FormsModule,
     HttpModule
   ],
-  providers: [],
+  exports: [ RouterModule ],
+  providers: [ AuthGuardService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/auth-guard.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { FirebaseAuth, FirebaseAuthState } from 'angularfire2';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+@Injectable()
+export class AuthGuardService implements CanActivate {
+
+  constructor(private auth: FirebaseAuth, private router: Router) { }
+
+  canActivate(): Observable<boolean> {
+    return this.auth
+      .take(1)
+      .map((authState: FirebaseAuthState) => !!authState)
+      .do(authenticated => {
+        if (!authenticated) {
+          this.router.navigate(['/login']);
+        };
+      });
+  }
+
+}

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,73 @@
+md-sidenav-layout.m2app-dark {
+  background: black;
+}
+
+.app-content {
+  padding: 20px;
+}
+
+.app-content md-card {
+  margin: 20px;
+}
+
+.app-sidenav {
+  padding: 10px;
+  min-width: 100px;
+}
+
+.app-content md-checkbox {
+  margin: 10px;
+}
+
+.app-toolbar-filler {
+  flex: 1 1 auto;
+}
+
+.app-toolbar-menu {
+  padding: 0 14px 0 14px;
+  color: white;
+}
+
+.app-icon-button {
+  box-shadow: none;
+  user-select: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  filter: none;
+  font-weight: normal;
+  height: auto;
+  line-height: inherit;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  text-align: left;
+  text-decoration: none;
+}
+
+.app-action {
+  display: inline-block;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+
+.app-spinner {
+  height: 30px;
+  width: 30px;
+  display: inline-block;
+}
+
+.app-input-icon {
+  font-size: 16px;
+}
+
+.app-list {
+  border: 1px solid rgba(0,0,0,0.12);
+  width: 350px;
+  margin: 20px;
+}
+
+.app-progress {
+  margin: 20px;
+}

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,11 @@
+<ul>
+  <li *ngFor="let item of items | async">
+    <span (click)=selectItem(item)>{{ item.name }}</span>
+  </li>
+</ul>
+
+<button class="btn btn-primary btn-lg" (click)="logout()">Logout</button>
+
+<span class="app-action">
+  <button md-fab (click)="openDialog()" ><md-icon>playlist_add</md-icon></button>
+</span>