diff --git a/.gitignore b/.gitignore index 61c93a13..dda084f0 100644 --- a/.gitignore +++ b/.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 diff --git a/backend/server.ts b/backend/server.ts index 87431f64..2be3e8df 100644 --- a/backend/server.ts +++ b/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); diff --git a/common/enities/User.ts b/common/enities/User.ts new file mode 100644 index 00000000..722acf57 --- /dev/null +++ b/common/enities/User.ts @@ -0,0 +1,3 @@ +export class User { + constructor(private name?:string = null,private email?:string = null, private password?:string = null){} +} \ No newline at end of file diff --git a/common/tsconfig.json b/common/tsconfig.json index c5273275..44782a19 100644 --- a/common/tsconfig.json +++ b/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", diff --git a/frontend/app/app.component.ts b/frontend/app/app.component.ts index 003e167f..5b6bbc68 100644 --- a/frontend/app/app.component.ts +++ b/frontend/app/app.component.ts @@ -1,9 +1,12 @@ +/// + 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: ``, @@ -21,4 +24,7 @@ import {LoginComponent} from "./login/login.component"; } ]) export class AppComponent { + constructor(){ + + } } \ No newline at end of file diff --git a/frontend/app/login/login.component.css b/frontend/app/login/login.component.css index e69de29b..084023f1 100644 --- a/frontend/app/login/login.component.css +++ b/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; } diff --git a/frontend/app/login/login.component.html b/frontend/app/login/login.component.html index 9d8b1ad7..175eb481 100644 --- a/frontend/app/login/login.component.html +++ b/frontend/app/login/login.component.html @@ -1 +1,13 @@ -

Login

\ No newline at end of file +
+
+ + +
+
+ + +
+ +
\ No newline at end of file diff --git a/frontend/app/login/login.component.ts b/frontend/app/login/login.component.ts index ba86194a..dd14f9e3 100644 --- a/frontend/app/login/login.component.ts +++ b/frontend/app/login/login.component.ts @@ -1,4 +1,7 @@ +/// + 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(); + } } diff --git a/frontend/index.html b/frontend/index.html index e6f54d70..bec65cf5 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,7 +1,7 @@ - + PiGallery2 @@ -15,7 +15,7 @@ - + Loading... + + \ No newline at end of file diff --git a/frontend/main.ts b/frontend/main.ts index e281de44..8724c165 100644 --- a/frontend/main.ts +++ b/frontend/main.ts @@ -1,4 +1,6 @@ +/// + import { bootstrap } from 'angular2/platform/browser'; -import { AppComponent } from './app/app.component.ts'; +import {AppComponent} from "./app/app.component.ts"; bootstrap(AppComponent); diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 556e1e16..9fcc3436 100644 --- a/frontend/tsconfig.json +++ b/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", diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js new file mode 100644 index 00000000..0c07f862 --- /dev/null +++ b/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' ] } + + ] + } + + +}; \ No newline at end of file diff --git a/package.json b/package.json index 811f5ecb..129d8e9c 100644 --- a/package.json +++ b/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" } }