14 reactive form async await

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "fitness-app-e668a"
+  }
+}

database.rules.json

@@ -0,0 +1,31 @@
+{
+  "rules": {
+    "users": {
+      "$uid": {
+        ".read": "$uid === auth.uid",
+        ".write": "$uid === auth.uid"
+      }
+    },
+    "schedule": {
+      "$uid": {
+        ".read": "$uid === auth.uid",
+        ".write": "$uid === auth.uid",
+        ".indexOn": [
+          "timestamp"
+        ]
+      }
+    },
+    "meals": {
+      "$uid": {
+        ".read": "$uid === auth.uid",
+        ".write": "$uid === auth.uid"
+      }
+    },
+    "workouts": {
+      "$uid": {
+        ".read": "$uid === auth.uid",
+        ".write": "$uid === auth.uid"
+      }
+    }
+  }
+}

firebase.json

@@ -0,0 +1,30 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "",
+    "ignore": [
+      "firebase.json",
+      ".firebaserc",
+      ".vscode",
+      ".git",
+      ".gitignore",
+      ".editorconfig",
+      "src/**/.*",
+      "database.rules.json",
+      "package.json",
+      "README.md",
+      "tsconfig.json",
+      "webpack.config.js",
+      "yarn.lock",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/app/app.module.ts

@@ -5,22 +5,32 @@ import { Routes, RouterModule } from '@angular/router';
 import { Store } from 'store';
 
 // feature modules
+import { AuthModule } from '../auth/auth.module';
+import { HealthModule } from '../health/health.module';
 
 // containers
 import { AppComponent } from './containers/app/app.component';
 
 // components
+import { AppHeaderComponent } from './components/app-header/app-header.component';
+import { AppNavComponent } from './components/app-nav/app-nav.component';
 
 // routes
-export const ROUTES: Routes = [];
+export const ROUTES: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: 'schedule' }
+];
 
 @NgModule({
   imports: [
     BrowserModule,
-    RouterModule.forRoot(ROUTES)
+    RouterModule.forRoot(ROUTES),
+    AuthModule,
+    HealthModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    AppHeaderComponent,
+    AppNavComponent
   ],
   providers: [
     Store
@@ -29,4 +39,4 @@ export const ROUTES: Routes = [];
     AppComponent
   ]
 })
-export class AppModule {}
+export class AppModule {}

src/app/components/app-header/app-header.component.scss

@@ -0,0 +1,33 @@
+.app-header {
+  background: #fff;
+  border-bottom: 1px solid #c1cedb;
+  padding: 15px 0;
+  text-align: center;
+  img {
+    display: inline-block;
+  }
+  &__user-info {
+    position: absolute;
+    top: 16px;
+    right: 0;
+    cursor: pointer;
+  }
+  span {
+    background: url(/img/logout.svg) no-repeat;
+    background-size: contain;
+    width: 24px;
+    height: 24px;
+    display: block;
+    opacity: 0.4;
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+.wrapper {
+  max-width: 800px;
+  width: 96%;
+  margin: 0 auto;
+  position: relative;
+}

src/app/components/app-header/app-header.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+import { User } from '../../../auth/shared/services/auth/auth.service';
+
+@Component({
+  selector: 'app-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['app-header.component.scss'],
+  template: `
+    <div class="app-header">
+      <div class="wrapper">
+        <img src="/img/logo.svg">
+        <div 
+          class="app-header__user-info"
+          *ngIf="user?.authenticated">
+          <span (click)="logoutUser()"></span>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class AppHeaderComponent {
+
+  @Input()
+  user: User;
+
+  @Output()
+  logout = new EventEmitter<any>();
+
+  logoutUser() {
+    this.logout.emit();
+  }
+
+}

src/app/components/app-nav/app-nav.component.scss

@@ -0,0 +1,28 @@
+:host {
+  margin: -1px 0 0;
+  display: block;
+}
+.app-nav {
+  background: #8022b0;
+  text-align: center;
+  a {
+    color: rgba(255,255,255,.6);
+    padding: 15px 0;
+    display: inline-block;
+    min-width: 150px;
+    font-weight: 500;
+    font-size: 16px;
+    text-transform: uppercase;
+    border-bottom: 3px solid transparent;
+    &:hover,
+    &.active {
+      color: #fff;
+      border-bottom-color: #fff;
+    }
+  }
+}
+.wrapper {
+  max-width: 800px;
+  width: 96%;
+  margin: 0 auto;
+}

src/app/components/app-nav/app-nav.component.ts

@@ -0,0 +1,19 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-nav',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['app-nav.component.scss'],
+  template: `
+    <div class="app-nav">
+      <div class="wrapper">
+        <a routerLink="schedule" routerLinkActive="active">Schedule</a>
+        <a routerLink="meals" routerLinkActive="active">Meals</a>
+        <a routerLink="workouts" routerLinkActive="active">Workouts</a>
+      </div>
+    </div>
+  `
+})
+export class AppNavComponent {
+  constructor() {}
+}

src/app/containers/app/app.component.ts

@@ -1,14 +1,54 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+
+import { Store } from 'store';
+
+import { AuthService, User } from '../../../auth/shared/services/auth/auth.service';
 
 @Component({
   selector: 'app-root',
   styleUrls: ['app.component.scss'],
   template: `
     <div>
-      Hello Ultimate Angular!
+      <app-header
+        [user]="user$ | async"
+        (logout)="onLogout()">
+      </app-header>
+      <app-nav
+        *ngIf="(user$ | async)?.authenticated">
+      </app-nav>
+      <div class="wrapper">
+        <router-outlet></router-outlet>
+      </div>
     </div>
   `
 })
-export class AppComponent {
-  constructor() {}
+export class AppComponent implements OnInit, OnDestroy {
+
+  user$: Observable<User>;
+  subscription: Subscription;
+
+  constructor(
+    private store: Store,
+    private router: Router,
+    private authService: AuthService
+  ) {}
+
+  ngOnInit() {
+    this.subscription = this.authService.auth$.subscribe();
+    this.user$ = this.store.select<User>('user');
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  async onLogout() {
+    await this.authService.logoutUser();
+    this.router.navigate(['/auth/login']);
+  }
+
 }

src/auth/auth.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+// third-party modules
+import { AngularFireModule, FirebaseAppConfig } from 'angularfire2';
+import { AngularFireAuthModule } from 'angularfire2/auth';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+
+// shared modules
+import { SharedModule } from './shared/shared.module';
+
+export const ROUTES: Routes = [
+  {
+    path: 'auth',
+    children: [
+      { path: '', pathMatch: 'full', redirectTo: 'login' },
+      { path: 'login', loadChildren: './login/login.module#LoginModule' },
+      { path: 'register', loadChildren: './register/register.module#RegisterModule' },
+    ]
+  }
+];
+
+export const firebaseConfig: FirebaseAppConfig = {
+  apiKey: "AIzaSyCXz7GrHLBs-xlsCrr185iG4v4UrNreq2Y",
+  authDomain: "fitness-app-e668a.firebaseapp.com",
+  databaseURL: "https://fitness-app-e668a.firebaseio.com",
+  projectId: "fitness-app-e668a",
+  storageBucket: "fitness-app-e668a.appspot.com",
+  messagingSenderId: "1014564696462"
+};
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(ROUTES),
+    AngularFireModule.initializeApp(firebaseConfig),
+    AngularFireAuthModule,
+    AngularFireDatabaseModule,
+    SharedModule.forRoot()
+  ]
+})
+export class AuthModule {}

src/auth/login/containers/login/login.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { AuthService } from '../../../shared/services/auth/auth.service';
+
+@Component({
+  selector: 'login',
+  template: `
+    <div>
+      <auth-form (submitted)="loginUser($event)">
+        <h1>Login</h1>
+        <a routerLink="/auth/register">Not registered?</a>
+        <button type="submit">
+          Login
+        </button>
+        <div class="error" *ngIf="error">
+          {{ error }}
+        </div>
+      </auth-form>
+    </div>
+  `
+})
+export class LoginComponent {
+
+  error: string;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {}
+
+  async loginUser(event: FormGroup) {
+    const { email, password } = event.value;
+    try {
+      await this.authService.loginUser(email, password);
+      this.router.navigate(['/']);
+    } catch (err) {
+      this.error = err.message;
+    }
+  }
+}