From 824c5e5ff9d93bdb981878a228ef78cb4f94981d Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 16 Jan 2018 15:58:17 -0500
Subject: [PATCH] routing to login page

---
 package.json                          |  4 +++-
 src/app/accounts/login.component.html |  3 +++
 src/app/accounts/login.component.ts   | 16 ++++++++++++++++
 src/app/app-routing.module.ts         | 18 ++++++++++++++++++
 src/app/app.component.ts              | 12 +++---------
 src/app/app.d.ts                      |  1 +
 src/app/app.module.ts                 | 16 +++++++++++++---
 src/index.html                        |  7 ++++---
 src/{app => }/main.ts                 |  4 +++-
 webpack.common.js                     | 14 ++++++++++----
 10 files changed, 74 insertions(+), 21 deletions(-)
 create mode 100644 src/app/accounts/login.component.html
 create mode 100644 src/app/accounts/login.component.ts
 create mode 100644 src/app/app-routing.module.ts
 create mode 100644 src/app/app.d.ts
 rename src/{app => }/main.ts (57%)

diff --git a/package.json b/package.json
index c993a2a89a..4f4338dc6d 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "dev": "webpack --config webpack.dev.js",
     "dev:watch": "webpack --config webpack.dev.js --watch",
     "lint": "tslint src/**/*.ts || true",
-    "lint:fix": "tslint src/**/*.ts --fix"
+    "lint:fix": "tslint src/**/*.ts --fix",
+    "server": "webpack-dev-server --inline --progress --port 8080 --config webpack.dev.js"
   },
   "devDependencies": {
     "clean-webpack-plugin": "^0.1.17",
@@ -24,6 +25,7 @@
     "tslint-loader": "^3.5.3",
     "typescript": "^2.5.3",
     "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.11.0",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
new file mode 100644
index 0000000000..2cc336903b
--- /dev/null
+++ b/src/app/accounts/login.component.html
@@ -0,0 +1,3 @@
+<form>
+    Login form.
+</form>
diff --git a/src/app/accounts/login.component.ts b/src/app/accounts/login.component.ts
new file mode 100644
index 0000000000..883352410b
--- /dev/null
+++ b/src/app/accounts/login.component.ts
@@ -0,0 +1,16 @@
+import * as template from './login.component.html';
+
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-login',
+    template: template,
+})
+export class LoginComponent implements OnInit {
+    ngOnInit() {
+        // TODO?
+    }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000000..d15d75b949
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import {
+    RouterModule,
+    Routes,
+} from '@angular/router';
+
+import { LoginComponent } from './accounts/login.component';
+
+const routes: Routes = [
+    { path: '', redirectTo: '/login', pathMatch: 'full' },
+    { path: 'login', component: LoginComponent },
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes/*, { enableTracing: true }*/)],
+    exports: [RouterModule],
+})
+export class AppRoutingModule { }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d180239cba..2498bd90c8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,15 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'my-app',
-    styles: [''],
-    template: `
-    <div class="jumbotron text-center">
-      <h1>The App Lives!</h1>
-      <p>{{ message }}</p>
-    </div>
-  `,
+    selector: 'app-root',
+    styles: [],
+    template: 'App<br /><router-outlet></router-outlet>',
 })
 export class AppComponent {
-    message = 'This is the sample message.';
 }
diff --git a/src/app/app.d.ts b/src/app/app.d.ts
new file mode 100644
index 0000000000..7bf7506fcf
--- /dev/null
+++ b/src/app/app.d.ts
@@ -0,0 +1 @@
+declare module '*.html';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6da4fbdca0..c6d6f58a38 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,12 +1,22 @@
 import 'zone.js/dist/zone';
 
-import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module';
 import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
 import { AppComponent } from './app.component';
+import { LoginComponent } from './accounts/login.component';
 
 @NgModule({
-    imports: [BrowserModule],
-    declarations: [AppComponent],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+    ],
+    declarations: [
+        AppComponent,
+        LoginComponent,
+    ],
+    providers: [],
     bootstrap: [AppComponent],
 })
 export class AppModule { }
diff --git a/src/index.html b/src/index.html
index 90c978b3d0..ea3ed4b3ab 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,11 +1,12 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>bitwarden</title>
+    <base href="/">
 </head>
-<body class="container">
-    <my-app></my-app>
+<body>
+    <app-root></app-root>
 </body>
 </html>
diff --git a/src/app/main.ts b/src/main.ts
similarity index 57%
rename from src/app/main.ts
rename to src/main.ts
index 2470c9595e..541acb2b08 100644
--- a/src/app/main.ts
+++ b/src/main.ts
@@ -1,4 +1,6 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
+
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/webpack.common.js b/webpack.common.js
index cd7602f255..04105a2b01 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -15,8 +15,14 @@ const isVendorModule = (module) => {
 };
 
 module.exports = {
+    devServer: {
+        contentBase: './src',
+        historyApiFallback: true,
+        quiet: true,
+        stats: 'minimal'
+    },
     entry: {
-        'app': './src/app/main.ts'
+        'app': './src/main.ts'
     },
     module: {
         rules: [
@@ -41,17 +47,17 @@ module.exports = {
             path.resolve(__dirname, 'build/*')
         ]),
         new webpack.optimize.CommonsChunkPlugin({
-            name: 'app/vendor',
+            name: 'vendor',
             chunks: ['app'],
             minChunks: isVendorModule
         }),
         new HtmlWebpackPlugin({
             template: './src/index.html',
             filename: 'index.html',
-            chunks: ['app/vendor', 'app']
+            chunks: ['vendor', 'app']
         }),
         new CopyWebpackPlugin([
-            
+
         ])
     ],
     resolve: {