implementing login

.gitignore

@@ -4,9 +4,12 @@ node_modules/
 typings/
 frontend/*/*.js
 frontend/*/*.js.map
-frontend/*.js
-frontend/*.js.map
+frontend/main.js
+frontend/main.js.map
+frontend/dist
 backend/*/*.js
 backend/*/*.js.map
 backend/*.js
 backend/*.js.map
+common/*/*.js
+common/*/*.js.map

backend/server.ts

@@ -3,6 +3,7 @@
 import * as _express from 'express';
 import * as _debug from 'debug';
 import * as _http from 'http';
+import * as path from 'path';
 
 
 export class Server {
@@ -23,8 +24,14 @@ export class Server {
         }
 
 
-        this.app.use(_express.static(__dirname +'./../frontend'));
-        this.app.use('/node_modules',_express.static(__dirname +'./../node_modules'));
+        this.app.use(_express.static(path.resolve(__dirname, './../frontend')));
+        this.app.use('/node_modules',_express.static(path.resolve(__dirname, './../node_modules')));
+        this.app.use('/common',_express.static(path.resolve(__dirname, './../common'))); //TODO:remove after adding webpack
+
+        var renderIndex = (req: _express.Request, res: _express.Response) => {
+            res.sendFile(path.resolve(__dirname, './../frontend/index.html'));
+        };
+        this.app.get('/*', renderIndex);
 
 
 

common/enities/User.ts

@@ -0,0 +1,3 @@
+export class User {
+    constructor(private name?:string = null,private email?:string = null, private password?:string = null){}
+}

common/tsconfig.json

@@ -2,11 +2,9 @@
   "compilerOptions": {
     "target": "es5",
     "sourceMap": true,
-    "module": "system",
-    "moduleResolution": "node",
+    "module": "commonjs",
     "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "removeComments": false
+    "experimentalDecorators": true
   },
   "exclude": [
     "./../node_modules",

frontend/app/app.component.ts

@@ -1,9 +1,12 @@
+///<reference path="../../typings/tsd.d.ts"/>
+
 import { Component } from 'angular2/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
 import {LoginComponent} from "./login/login.component";
 
 
 
+
 @Component({
     selector: 'pi-gallery2-app',
     template: `<router-outlet></router-outlet>`,
@@ -21,4 +24,7 @@ import {LoginComponent} from "./login/login.component";
     }
 ])
 export class AppComponent {
+    constructor(){
+
+    }
 }

frontend/app/login/login.component.css

@@ -0,0 +1,232 @@
+* { box-sizing:border-box; }
+
+body {
+    font-family: Helvetica;
+    background: #eee;
+    -webkit-font-smoothing: antialiased;
+}
+
+
+h1, h3 { font-weight: 300; }
+
+h1 { color: #636363; }
+
+h3 { color: #4a89dc; }
+
+form {
+    width: 380px;
+    margin: 4em auto;
+    padding: 3em 2em 2em 2em;
+    background: #fafafa;
+    border: 1px solid #ebebeb;
+    box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
+}
+
+.group {
+    position: relative;
+    margin-bottom: 45px;
+}
+
+input {
+    font-size: 18px;
+    padding: 10px 10px 10px 5px;
+    -webkit-appearance: none;
+    display: block;
+    background: #fafafa;
+    color: #636363;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid #757575;
+}
+
+input:focus { outline: none; }
+
+
+/* Label */
+
+label {
+    color: #999;
+    font-size: 18px;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5px;
+    top: 10px;
+    transition: all 0.2s ease;
+}
+
+
+/* active */
+
+input:focus ~ label, input.used ~ label {
+    top: -20px;
+    transform: scale(.75); left: -2px;
+    /* font-size: 14px; */
+    color: #4a89dc;
+}
+
+
+/* Underline */
+
+.bar {
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.bar:before, .bar:after {
+    content: '';
+    height: 2px;
+    width: 0;
+    bottom: 1px;
+    position: absolute;
+    background: #4a89dc;
+    transition: all 0.2s ease;
+}
+
+.bar:before { left: 50%; }
+
+.bar:after { right: 50%; }
+
+
+/* active */
+
+input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
+
+
+/* Highlight */
+
+.highlight {
+    position: absolute;
+    height: 60%;
+    width: 100px;
+    top: 25%;
+    left: 0;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+
+/* active */
+
+input:focus ~ .highlight {
+    animation: inputHighlighter 0.3s ease;
+}
+
+
+/* Animations */
+
+@keyframes inputHighlighter {
+    from { background: #4a89dc; }
+    to 	{ width: 0; background: transparent; }
+}
+
+
+/* Button */
+
+.button {
+    position: relative;
+    display: inline-block;
+    padding: 12px 24px;
+    margin: .3em 0 1em 0;
+    width: 100%;
+    vertical-align: middle;
+    color: #fff;
+    font-size: 16px;
+    line-height: 20px;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    letter-spacing: 1px;
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid #3160B6;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+.button:focus { outline: 0; }
+
+
+/* Button modifiers */
+
+.buttonBlue {
+    background: #4a89dc;
+    text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
+}
+
+.buttonBlue:hover { background: #357bd8; }
+
+
+/* Ripples container */
+
+.ripples {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: transparent;
+}
+
+
+/* Ripples circle */
+
+.ripplesCircle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.ripples.is-active .ripplesCircle {
+    animation: ripples .4s ease-in;
+}
+
+
+/* Ripples animation */
+
+@keyframes ripples {
+    0% { opacity: 0; }
+
+    25% { opacity: 1; }
+
+    100% {
+        width: 200%;
+        padding-bottom: 200%;
+        opacity: 0;
+    }
+}
+
+footer { text-align: center; }
+
+footer p {
+    color: #888;
+    font-size: 13px;
+    letter-spacing: .4px;
+}
+
+footer a {
+    color: #4a89dc;
+    text-decoration: none;
+    transition: all .2s ease;
+}
+
+footer a:hover {
+    color: #666;
+    text-decoration: underline;
+}
+
+footer img {
+    width: 80px;
+    transition: all .2s ease;
+}
+
+footer img:hover { opacity: .83; }
+
+footer img:focus , footer a:focus { outline: none; }

frontend/app/login/login.component.html

@@ -1 +1,13 @@
-<h1>Login</h1>
+<form>
+    <div class="group">
+        <input type="text" [(ngModel)]="user.name"><span class="highlight"></span><span class="bar"></span>
+        <label *ngIf="!user.name">Username (or e-mail)</label>
+    </div>
+    <div class="group">
+        <input type="password" [(ngModel)]="user.password"><span class="highlight"></span><span class="bar"></span>
+        <label *ngIf="!user.password">Password</label>
+    </div>
+    <button type="button" class="button buttonBlue">Login
+        <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
+    </button>
+</form>

frontend/app/login/login.component.ts

@@ -1,4 +1,7 @@
+///<reference path="../../../typings/tsd.d.ts"/>
+
 import { Component, OnInit } from 'angular2/core';
+import {User} from '../../../common/enities/User';
 
 @Component({
     selector: 'login',
@@ -6,6 +9,9 @@ import { Component, OnInit } from 'angular2/core';
     styleUrls: ['app/login/login.component.css']
 })
 export class LoginComponent{
-    constructor() { }
+    user:User;
+    constructor() {
+        this.user = new User();
+    }
 }
 

frontend/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <script>document.write('<base href="' + document.location + '" />');</script>
+    <base href="/" />
     <meta charset="UTF-8">
     <title>PiGallery2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -15,7 +15,7 @@
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
     <script src="../node_modules/rxjs/bundles/Rx.js"></script>
     <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
-    <!-- IE required polyfills, in this exact order -->
+    <!-- IE required polyfills, in this exact order - ->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
     <script src="https://npmcdn.com/angular2@2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>
@@ -26,7 +26,7 @@
     <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
-    <script>
+ <!--   <script>
         System.config({
             map: {
                 "ts": "../node_modules/typescript/lib/plugin.js",
@@ -39,8 +39,10 @@
         System.import('main.ts')
                 .then(null, console.error.bind(console));
     </script>
-
+-->
 <body>
 <pi-gallery2-app>Loading...</pi-gallery2-app>
 </body>
+<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
+<script src="dist/app-bundle.js"></script>
 </html>

frontend/main.ts

@@ -1,4 +1,6 @@
+///<reference path="../typings/tsd.d.ts"/>
+
 import { bootstrap }    from 'angular2/platform/browser';
-import { AppComponent } from './app/app.component.ts';
+import {AppComponent} from "./app/app.component.ts";
 
 bootstrap(AppComponent);

frontend/tsconfig.json

@@ -2,11 +2,9 @@
   "compilerOptions": {
     "target": "es5",
     "sourceMap": true,
-    "module": "system",
-    "moduleResolution": "node",
+    "module": "commonjs",
     "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "removeComments": false
+    "experimentalDecorators": true
   },
   "exclude": [
     "node_modules",

frontend/webpack.config.js

@@ -0,0 +1,45 @@
+var webpack = require('webpack');
+var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
+module.exports = {
+    entry: {
+        'app': './main.ts'
+    },
+    output: {
+        filename: './dist/[name]-bundle.js',
+        library: ['peer']
+    },
+    // Turn on sourcemaps
+    devtool: 'source-map',
+    resolve: {
+        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+
+        modulesDirectories: [
+            'node_modules',
+            'lib'
+        ]
+    },
+    // Add minification
+    plugins: [
+       // new CommonsChunkPlugin("dist/admin-commons-bundle.js",['demo','missionControl']),
+       // new CommonsChunkPlugin("dist/commons-bundle.js")
+       // ,new webpack.optimize.UglifyJsPlugin()
+    ],
+    module: {
+        loaders: [
+            // Support for .ts files.
+            { test: /\.ts$/, loader: 'ts-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },
+
+            // Support for *.json files.
+            { test: /\.json$/,  loader: 'json-loader' },
+
+            // Support for CSS as raw text
+            { test: /\.css$/,   loader: 'raw-loader' },
+
+            // support for .html as raw text
+            { test: /\.html$/,  loader: 'raw-loader', exclude: [ 'index.html' ] }
+
+        ]
+    }
+
+
+};

package.json

@@ -5,7 +5,6 @@
   "scripts": {
     "start": "node ./backend/server"
   },
-
   "dependencies": {
     "angular2": "^2.0.0-beta.9",
     "debug": "^2.2.0",
@@ -13,15 +12,15 @@
     "es6-shim": "^0.33.13",
     "express": "^4.13.4",
     "morgan": "^1.7.0",
-    "reflect-metadata": "^0.1.2",
+    "reflect-metadata": "~0.1.2",
     "rxjs": "^5.0.0-beta.2",
     "socket.io": "^1.4.5",
+    "ts-loader": "^0.8.1",
+    "webpack": "^1.12.14",
     "zone.js": "^0.5.15"
   },
-
   "devDependencies": {
     "typescript": "^1.8.7",
-    "typings": "^0.7.8",
-    "systemjs": "^0.19.24"
+    "typings": "^0.7.8"
   }
 }