Curriculum: Add canDeactivate

Author: toddmotto

62-candeactivate/.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

62-candeactivate/.gitignore

@@ -0,0 +1,27 @@
+# Project
+.idea
+
+# Node
+node_modules
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+## Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+
+# Package Managers
+yarn-error.log
+npm-debug.log
+
+# Cache
+.awcache

62-candeactivate/README.md

@@ -0,0 +1,82 @@
+<a href="https://ultimateangular.com" target="_blank"><img src="https://toddmotto.com/img/ua.png"></a>
+
+# Angular Fundamentals Seed
+
+> This is the seed project for the [Angular Fundamentals](https://ultimateangular.com/courses/#angular-2) course by [Todd Motto](https://twitter.com/toddmotto).
+
+## Project Setup and Tooling
+
+### Tools
+
+This course is recorded with the following tools, you can optionally follow along using the same, or your favourite text editor/IDE and browser.
+
+*Text editor*: Visual Studio Code, you can [download it here](http://code.visualstudio.com) for both Mac, Windows and Linux.
+*Browser*: Google Chrome, you can [download it here](https://www.google.com/chrome)
+
+### Prerequisites
+
+Please make sure that you have the following installed:
+
+* Install the _latest version_ of [Node.js](http://nodejs.org) (Mac or Windows)
+  * Mac users can optionally `brew install node` if they have [brew](http://brew.sh) installed
+
+* Node Sass, you _may_ need it if you haven't already got it installed:
+
+```bash
+npm install -g node-sass
+```
+
+### Project Install
+
+To grab the seed project, either Fork this repo or [click here to download](https://github.com/UltimateAngular/angular-fundamentals-seed/archive/master.zip) the `.zip` folder and extract the files wherever you like on your machine.
+
+#### Step 1: Package Manager
+
+To install the project dependencies, you will need to install `yarn`. To install `yarn`, run the following in your terminal:
+
+```bash
+npm install -g yarn
+```
+
+Mac users can alternatively use `brew` to install `yarn`.
+
+```bash
+brew update
+brew install yarn
+```
+
+If you experience any issues when installing/using `yarn` you can checkout the installation instructions [here](https://yarnpkg.com/en/docs/install).
+
+##### Step 2: Project Dependencies
+
+Now that we have a package manager, we can install the project dependencies. You can do this by running:
+
+```bash
+yarn install
+```
+
+This will install our dependencies for running our Angular application.
+
+#### Step 3: Running the project
+
+During development, the project is built using `webpack-dev-server`. This provides a local development server as well as having webpack recompile our app when a file changes. The project will also automatically refresh the page whenever we make changes.
+
+To start the project in development, run:
+
+```
+yarn start
+```
+
+This will output some information about the project (such as the TypeScript version and build progress). Once you see "build completed", you are ready to code!
+
+Open your browser to [localhost:4000](http://localhost:4000) to start running the code.
+
+### Project Tooling
+
+The project uses `webpack` to build and compile all of our assets. This will do the following for us: 
+
+- Compile all our TypeScript code into JavaScript (starting from `main.ts` and branching outwards from imported files)
+- Bundle all our JavaScript into one file to use
+- Allow us to use SASS for our component's CSS files
+- Provide the polyfills needed to run our app in all modern browsers
+- Mock a JSON backend using [json-server](https://github.com/typicode/json-server)

62-candeactivate/app/app.component.scss

@@ -0,0 +1,46 @@
+:host {
+  display: inline-block;
+  flex: 1 0;
+  width: 100%;
+  height: 100%;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__content {
+    display: flex;
+    flex: 1 0;
+  }
+}
+
+nav {
+  flex: 0 0 15%;
+  padding: 20px 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  a {
+    display: block;
+    margin-bottom: 10px;
+    padding: 10px 30px;
+    color: rgba(0, 0, 0, 0.5);
+    text-decoration: none;
+    font-size: 16px;
+    border-left: 3px solid transparent;
+    &.active {
+      color: rgba(0, 0, 0, 0.8);
+      border-left-color: #9f72e6;
+      background: rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+
+header {
+  background: #2d2d35;
+  height: 70px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}

62-candeactivate/app/app.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  styleUrls: ['app.component.scss'],
+  template: `
+    <div class="app">
+      <header>
+        <img src="/img/logo.svg">
+      </header>
+      <div class="app__content">
+        <nav>
+          <a
+            [routerLink]="['/mail', { outlets: { primary: 'folder/inbox', pane: null } }]"
+            routerLinkActive="active">
+            Inbox
+          </a>
+          <a
+            [routerLink]="['/mail', { outlets: { primary: 'folder/trash', pane: null } }]"
+            routerLinkActive="active">
+            Trash
+          </a>
+          <a
+            [routerLink]="['/dashboard']"
+            routerLinkActive="active">
+            Dashboard
+          </a>
+        </nav>
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  `
+})
+export class AppComponent {}

62-candeactivate/app/app.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule, Routes } from '@angular/router';
+import { HttpModule } from '@angular/http';
+
+import { MailModule } from './mail/mail.module';
+import { AuthModule } from './auth/auth.module';
+import { AuthGuard } from './auth/auth.guard';
+
+import { AppComponent } from './app.component';
+
+export const ROUTES: Routes = [
+  { path: 'dashboard', canLoad: [AuthGuard], loadChildren: './dashboard/dashboard.module#DashboardModule' },
+  { path: '**', redirectTo: 'mail/folder/inbox' }
+];
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    HttpModule,
+    MailModule,
+    AuthModule,
+    RouterModule.forRoot(ROUTES)
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule {}

62-candeactivate/app/auth/auth.guard.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { CanLoad, CanActivate, CanActivateChild } from '@angular/router';
+
+import { AuthService } from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanLoad, CanActivate, CanActivateChild {
+  constructor(private authService: AuthService) {}
+  canLoad() {
+    return this.authService.checkPermissions();
+  }
+  canActivate() {
+    return this.authService.isLoggedIn();
+  }
+  canActivateChild() {
+    return this.authService.isLoggedIn();
+  }
+}

62-candeactivate/app/auth/auth.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { AuthService } from './auth.service';
+import { AuthGuard } from './auth.guard';
+
+@NgModule({
+  providers: [
+    AuthService,
+    AuthGuard
+  ]
+})
+export class AuthModule {}

62-candeactivate/app/auth/auth.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+@Injectable()
+export class AuthService {
+  user = { isAdmin: true };
+  checkPermissions() {
+    return Observable.of(this.user.isAdmin);
+  }
+  isLoggedIn() {
+    return Observable.of(true);
+  }
+}

62-candeactivate/app/dashboard/containers/dashboard/dashboard.component.scss

@@ -0,0 +1 @@
+.dashboard {}

62-candeactivate/app/dashboard/containers/dashboard/dashboard.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dashboard-app',
+  styleUrls: ['dashboard.component.scss'],
+  template: `
+    <div>
+      <h1>Dashboard</h1>
+    </div>
+  `
+})
+export class DashboardComponent {}

62-candeactivate/app/dashboard/dashboard.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent } from './containers/dashboard/dashboard.component';
+
+export const ROUTES: Routes = [
+  {
+    path: '',
+    component: DashboardComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(ROUTES)
+  ],
+  declarations: [
+    DashboardComponent
+  ]
+})
+export class DashboardModule {}

62-candeactivate/app/mail/components/mail-app/mail-app.component.scss

@@ -0,0 +1,32 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+nav {
+  flex: 0 0 15%;
+  padding: 20px 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  a {
+    display: block;
+    margin-bottom: 10px;
+    padding: 10px 30px;
+    color: rgba(0, 0, 0, 0.5);
+    text-decoration: none;
+    font-size: 16px;
+    border-left: 3px solid transparent;
+    &.active {
+      color: rgba(0, 0, 0, 0.8);
+      border-left-color: #9f72e6;
+      background: rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+
+.mail {
+  flex: 0 0 40%;
+  padding: 20px 0;
+  overflow: hidden;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}

62-candeactivate/app/mail/components/mail-app/mail-app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mail-app',
+  styleUrls: ['mail-app.component.scss'],
+  template: `
+    <div class="mail">
+      <router-outlet></router-outlet>
+    </div>
+    <div class="mail">
+      <router-outlet name="pane"></router-outlet>
+    </div>
+  `
+})
+export class MailAppComponent {}