Add router config and create global services:

- Confirm dialog (modal-like)
- App Config (persisted settings)
- Requires-auth Transition Hook
- Authentication service
- Session Storage fake REST API
- Google Analytics Transition Hook

Author: christopherthielen

src/app/README.md

@@ -0,0 +1,12 @@
+## Contents
+ 
+### The main app module bootstrap
+
+- *app.states*.js: Defines the top-level states such as home, welcome, and login
+
+### Components for the Top-level states
+
+- *app.component*.js: A component which displays the header nav-bar for authenticated in users
+- *home.component*.js: A component that has links to the main submodules
+- *login.component*.js: A component for authenticating a guest user
+- *welcome.component*.js: A component which displays a welcome screen for guest users

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { LoginComponent } from './login.component';
 import { HomeComponent } from './home.component';
 import { UIRouterModule, UIView } from 'ui-router-ng2';
 import { APP_STATES } from './app.states';
+import { GlobalModule } from './global/global.module';
+import { routerConfigFn } from './router.config';
 
 @NgModule({
   declarations: [
@@ -20,8 +22,10 @@ import { APP_STATES } from './app.states';
   imports: [
     UIRouterModule.forRoot({
       states: APP_STATES,
-      otherwise: { state: 'home' }
+      otherwise: { state: 'home' },
+      config: routerConfigFn,
     }),
+    GlobalModule,
     BrowserModule,
     FormsModule,
     HttpModule

src/app/global/README.md

@@ -0,0 +1,13 @@
+## Contents
+
+### Global services
+- *appConfig*.service.js: Stores and retrieves the user's application preferences
+- *auth*.service.js: Simulates an authentication service
+- *dialog*.service.js: Provides a dialog confirmation service
+
+### Directives
+- *dialog*.directive.js: Provides a dialog directive used by the dialog service
+
+### Router Hooks
+
+- *requiresAuth*.hook.js: A transition hook which allows a state to declare that it requires an authenticated user

src/app/global/app-config.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * This service stores and retrieves user preferences in session storage
+ */
+@Injectable()
+export class AppConfigService {
+  sort = '+date';
+  emailAddress: string = undefined;
+  restDelay = 100;
+
+  constructor() {
+    this.load();
+  }
+
+  load() {
+    try {
+      return Object.assign(this, JSON.parse(sessionStorage.getItem('appConfig')));
+    } catch (Error) { }
+
+    return this;
+  }
+
+  save() {
+    sessionStorage.setItem('appConfig', JSON.stringify(Object.assign({}, this)));
+  }
+}
+

src/app/global/auth.hook.ts

@@ -0,0 +1,31 @@
+import { TransitionService } from 'ui-router-core';
+import { AuthService } from './auth.service';
+
+/**
+ * This file contains a Transition Hook which protects a
+ * route that requires authentication.
+ *
+ * This hook redirects to /login when both:
+ * - The user is not authenticated
+ * - The user is navigating to a state that requires authentication
+ */
+export function requiresAuthHook(transitionService: TransitionService) {
+  // Matches if the destination state's data property has a truthy 'requiresAuth' property
+  const requiresAuthCriteria = {
+    to: (state) => state.data && state.data.requiresAuth
+  };
+
+  // Function that returns a redirect for the current transition to the login state
+  // if the user is not currently authenticated (according to the AuthService)
+
+  const redirectToLogin = (transition) => {
+    const authService: AuthService = transition.injector().get(AuthService);
+    const $state = transition.router.stateService;
+    if (!authService.isAuthenticated()) {
+      return $state.target('login', undefined, { location: false });
+    }
+  };
+
+  // Register the "requires auth" hook with the TransitionsService
+  transitionService.onBefore(requiresAuthCriteria, redirectToLogin, {priority: 10});
+}

src/app/global/auth.service.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { AppConfigService } from './app-config.service';
+import { wait } from '../util/util';
+
+/**
+ * This service emulates an Authentication Service.
+ */
+@Injectable()
+export class AuthService {
+  // data
+  usernames: string[] = ['[email protected]', '[email protected]', '[email protected]'];
+
+  constructor(public appConfig: AppConfigService) { }
+
+  /**
+   * Returns true if the user is currently authenticated, else false
+   */
+  isAuthenticated() {
+    return !!this.appConfig.emailAddress;
+  }
+
+  /**
+   * Fake authentication function that returns a promise that is either resolved or rejected.
+   *
+   * Given a username and password, checks that the username matches one of the known
+   * usernames (this.usernames), and that the password matches 'password'.
+   *
+   * Delays 800ms to simulate an async REST API delay.
+   */
+  authenticate(username, password) {
+    const appConfig = this.appConfig;
+
+    // checks if the username is one of the known usernames, and the password is 'password'
+    const checkCredentials = () => new Promise<string>((resolve, reject) => {
+      const validUsername = this.usernames.indexOf(username) !== -1;
+      const validPassword = password === 'password';
+
+      return (validUsername && validPassword) ? resolve(username) : reject('Invalid username or password');
+    });
+
+    return wait(800)
+      .then(checkCredentials)
+      .then((authenticatedUser) => {
+        appConfig.emailAddress = authenticatedUser;
+        appConfig.save();
+      });
+  }
+
+  /** Logs the current user out */
+  logout() {
+    this.appConfig.emailAddress = undefined;
+    this.appConfig.save();
+  }
+}

src/app/global/dialog.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { wait } from '../util/util';
+
+@Component({
+  selector: 'app-dialog',
+  template: `
+      <div class="backdrop" [class.active]="visible"></div>
+      <div class='wrapper'>
+        <div class="content">
+          <h4 *ngIf="message">{{message}}</h4>
+          <div [hidden]="!details">{{details}}</div>
+    
+          <div style="padding-top: 1em;">
+            <button class="btn btn-primary" (click)="yes()">{{yesMsg}}</button>
+            <button class="btn btn-primary" (click)="no()">{{noMsg}}</button>
+          </div>
+        </div>
+      </div>
+`,
+  styles: []
+})
+export class DialogComponent implements OnInit {
+  visible: boolean;
+
+  message: string;
+  details: string;
+  yesMsg: string;
+  noMsg: string;
+
+  promise: Promise<any>;
+
+  constructor() {
+    this.promise = new Promise((resolve, reject) => {
+      this.yes = () => {
+        this.visible = false;
+        wait(300).then(resolve);
+      };
+
+      this.no = () => {
+        this.visible = false;
+        wait(300).then(reject);
+      };
+    });
+  }
+
+  yes() {}
+  no() {}
+
+  ngOnInit() {
+    wait(50).then(() => this.visible = true);
+  }
+}

src/app/global/dialog.service.ts

@@ -0,0 +1,26 @@
+import { Injectable, ViewContainerRef, ComponentFactoryResolver, Injector, ComponentFactory } from '@angular/core';
+import { DialogComponent } from './dialog.component';
+
+@Injectable()
+export class DialogService {
+  vcRef: ViewContainerRef;
+  private factory: ComponentFactory<DialogComponent>;
+
+  constructor(resolver: ComponentFactoryResolver) {
+    this.factory = resolver.resolveComponentFactory(DialogComponent);
+  }
+
+  confirm(message, details = 'Are you sure?', yesMsg = 'Yes', noMsg = 'No') {
+    const componentRef = this.vcRef.createComponent(this.factory);
+    const component = componentRef.instance;
+
+    component.message = message;
+    component.details = details;
+    component.yesMsg = yesMsg;
+    component.noMsg = noMsg;
+
+    const destroy = () => componentRef.destroy();
+    component.promise.then(destroy, destroy);
+    return component.promise;
+  }
+}

src/app/global/global.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppConfigService } from './app-config.service';
+import { AuthService } from './auth.service';
+import { DialogComponent } from './dialog.component';
+import { DialogService } from './dialog.service';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  providers: [
+    AppConfigService,
+    AuthService,
+    DialogService,
+  ],
+  declarations: [DialogComponent],
+  entryComponents: [DialogComponent],
+})
+export class GlobalModule { }

src/app/router.config.ts

@@ -0,0 +1,9 @@
+import { UIRouter } from 'ui-router-core';
+import { googleAnalyticsHook } from './util/ga';
+import { requiresAuthHook } from './global/auth.hook';
+
+export function routerConfigFn(router: UIRouter) {
+  const transitionService = router.transitionService;
+  requiresAuthHook(transitionService);
+  googleAnalyticsHook(transitionService);
+}