server test

.babelrc

@@ -1,4 +1,7 @@
 {
     "presets": ["env", "react"],
-    "plugins": ["transform-object-rest-spread"]
+    "plugins": [
+        "transform-object-rest-spread",
+        "transform-class-properties"
+    ]
 }

package.json

@@ -5,7 +5,10 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
+    "dev": "node_modules/.bin/webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
+    "server": "NODE_ENV=production node_modules/babel-cli/bin/babel-node.js --presets env server.js",
+    "build": "node_modules/.bin/webpack",
+    "start": "npm run build && npm run server"
   },
   "repository": {
     "type": "git",
@@ -16,6 +19,7 @@
   "devDependencies": {
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-env": "^1.4.0",
     "babel-preset-react": "^6.24.1",
@@ -32,7 +36,9 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^1.16.0",
+    "babel-cli": "^6.24.1",
     "classnames": "^2.2.5",
+    "express": "^4.15.2",
     "font-awesome": "^4.7.0",
     "react": "^15.5.4",
     "react-addons-css-transition-group": "^15.5.2",

server.js

@@ -0,0 +1,22 @@
+import path from 'path';
+import Express from 'express';
+
+// initialize the server and configure support for ejs templates
+const app = new Express();
+app.set('views', path.join(__dirname, 'views'));
+
+// define the folder that will be used for static assets
+app.use(Express.static(path.join(__dirname, 'dist')));
+
+// universal routing and rendering
+app.get('/user', () => console.log('api call'));
+
+// start the server
+const port = process.env.PORT || 3000;
+const env = process.env.NODE_ENV || 'production';
+app.listen(port, err => {
+  if (err) {
+    return console.error(err);
+  }
+  console.info(`Server running on http://localhost:${port} [${env}]`);
+});

src/App.jsx

@@ -5,6 +5,7 @@ import { Navbar } from './Header/Navbar'
 import Topbar from './Header/Topbar'
 import Routes from './Routes'
 import { LOGIN } from './Store/Actions'
+import Login from './Pages/Login/Login'
 import './assets'
 
 const USER = {
@@ -17,7 +18,7 @@ const USER = {
 
 const App = ({ user, login }) => {
     if (!user)
-        return <a onClick={() => login(USER)}>login</a>
+        return <Login login={() => login(USER)} />
     return (
         <Router>
             <div className="flex-frame">

src/App.scss

@@ -6,6 +6,8 @@
     min-height: 100vh;
     background: $pt-app-background-color;
 
+    
+
     main {
         flex: 1;
         padding: 50px;
@@ -18,4 +20,8 @@
             justify-content: center;
         }
     }
+}
+
+.title {
+    font-family: 'Cinzel';
 }

src/Header/UserMenu.jsx

@@ -1,12 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
-import { Link } from 'react-router-dom'
 import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core"
-
-const MenuLink = ({ to, iconName, children, ...otherProps }) => {
-    let classes = classNames(["pt-menu-item","pt-popover-dismiss", {[`pt-icon-${iconName}`]: iconName}]);
-    return <li><Link to={to} className={classes} {...otherProps}>{children}</Link></li>
-}
+import { MenuLink } from '../Shared/Components'
 
 const userMenu = ({ logout }) => 
     <Menu>

src/Pages/Login/Login.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Card } from '../../Shared/Components'
+import { InputGroup, Tooltip, Button, Classes, Intent } from '@blueprintjs/core'
+import { LOGIN } from '../../Store/Actions'
+import './Login.scss'
+
+const PasswordToggler = ({show, toggle}) => 
+    <Tooltip content={`${show ? "Hide" : "Show"} Password`}>
+        <Button className={Classes.MINIMAL} intent={Intent.WARNING}
+            iconName={show ? "eye-off" : "eye-open"} onClick={toggle} />
+    </Tooltip>
+
+const Logo = () => <h1 className="logo"><img src="lighthouse.png"/><span>Lighthouse</span></h1>
+
+const LoginTemplate = ({ togglePassword, showPassword, connect }) =>
+    <div className="flex-frame center">
+        <Logo />
+        <Card>
+            <form onSubmit={e => connect('test', e)}>
+                <InputGroup name="username" placeholder="Username" leftIconName="user"/>
+                <InputGroup name="password" placeholder="Enter your password..." leftIconName="lock" 
+                    type={showPassword ? "text" : "password"}
+                    rightElement={<PasswordToggler show={showPassword} toggle={togglePassword} />}
+                />
+                <Button iconName="log-in" type="submit">Login</Button>
+            </form>
+        </Card>
+    </div>
+
+export default class Login extends React.Component {
+    state = { showPassword: false }
+
+    togglePassword = () => this.setState({ showPassword: !this.state.showPassword })
+
+    connect(test, e) {
+        e.preventDefault();
+        let data = new Map(new FormData(e.target));
+        console.log(data);
+        return false;
+    }
+
+    render() {
+        return <LoginTemplate
+            showPassword={this.state.showPassword}
+            togglePassword={this.togglePassword}
+            connect={this.connect}
+        />
+    }
+}

src/Pages/Login/Login.scss

@@ -0,0 +1,31 @@
+@import '~@blueprintjs/core/dist/variables.scss';
+
+@font-face {
+  font-family: 'Cinzel';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Cinzel Regular'), local('Cinzel-Regular'), url(Cinzel.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+.flex-frame {
+    &.center {
+        justify-content: center;
+        align-items: center;
+
+        .logo {
+            margin-bottom: 50px;
+            img { height: 60px; }
+            span { font-family: 'Cinzel'; }
+        }
+
+        .pt-card {
+            text-align: center;
+            .pt-input-group {
+                margin-bottom: $pt-grid-size;
+            }
+        }
+
+
+    }
+}

src/Pages/User/UserPic.jsx

@@ -1,21 +1,5 @@
 import React from 'react'
-import cl from 'classnames'
-
-const Card = ({ className, children, interactive }) => {
-    let classes = cl(["pt-card", className, {'pt-interactive': interactive}]);
-    return <div className={classes}>{children}</div>
-}
-
-const Placeholder = ({ iconName, title, description }) => 
-    <div className="pt-non-ideal-state">
-        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
-            <span className={`pt-icon pt-icon-${iconName}`}></span>
-        </div>
-        <h4 className="pt-non-ideal-state-title">{title}</h4>
-        <div className="pt-non-ideal-state-description">
-            {description}
-        </div>
-    </div>
+import { Card, Placeholder } from '../../Shared/Components'
 
 const UserPic = () => 
     <Card className="profile-pic" interactive>

src/Shared/Components.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import cl from 'classnames'
+import { Link } from 'react-router-dom'
+
+export const Card = ({ className, children, interactive }) => 
+    <div className={cl(["pt-card", className, {'pt-interactive': interactive}])}>{children}</div>
+
+export const Placeholder = ({ iconName, title, description }) => 
+    <div className="pt-non-ideal-state">
+        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
+            <span className={`pt-icon pt-icon-${iconName}`}></span>
+        </div>
+        <h4 className="pt-non-ideal-state-title">{title}</h4>
+        <div className="pt-non-ideal-state-description">
+            {description}
+        </div>
+    </div>
+
+const MenuLink = ({ to, iconName, children, ...otherProps }) => {
+    let classes = cl(["pt-menu-item","pt-popover-dismiss", {[`pt-icon-${iconName}`]: iconName}]);
+    return <li><Link to={to} className={classes} {...otherProps}>{children}</Link></li>
+}

src/Store/Actions/index.js

@@ -1,2 +1,3 @@
 import { LOGIN, LOGOUT } from './user'
-export { LOGIN, LOGOUT }
+import { TOGGLE_SHOW_PASSWORD } from './login'
+export { LOGIN, LOGOUT, TOGGLE_SHOW_PASSWORD }

src/Store/Actions/login.js

@@ -0,0 +1,2 @@
+import { createAction } from 'redux-actions'
+export const TOGGLE_SHOW_PASSWORD = createAction('TOGGLE_SHOW_PASSWORD');

src/Store/Reducers/index.js

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux'
-import { user } from './user'
+import user from './user'
+import login from './login'
 
-const reducers = combineReducers({ user })
+const reducers = combineReducers({ user, login })
 
 export default reducers

src/Store/Reducers/login.js

@@ -0,0 +1,8 @@
+import { handleActions } from 'redux-actions'
+import { TOGGLE_SHOW_PASSWORD } from '../Actions'
+
+const login = handleActions({
+  [TOGGLE_SHOW_PASSWORD]: (state, action) => ({ showPassword: !state.showPassword }),
+}, { showPassword: false });
+
+export default login

src/Store/Reducers/user.js

@@ -1,7 +1,9 @@
 import { handleActions } from 'redux-actions'
 import { LOGIN, LOGOUT } from '../Actions'
 
-export const user = handleActions({
+const user = handleActions({
   [LOGIN]: (state, action) => action.payload,
   [LOGOUT]: (state, action) => null
-}, null);
+}, null);
+
+export default user;

src/index.js

@@ -5,10 +5,11 @@ import { Provider } from 'react-redux'
 import reducers from './Store/Reducers'
 import App from './App'
 
-const devToolsEnabled = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+const devToolsEnabled = ENV != 'production' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 
 let store = createStore(reducers, devToolsEnabled)
+window.onload = () => ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
 
-ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
-
-module.hot.accept();
+if (ENV != 'production') {
+    module.hot.accept();
+}

webpack.config.js

@@ -1,9 +1,8 @@
+const webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
-module.exports = {
+const config = {
     entry: [
-        'webpack-dev-server/client?http://localhost:8080',
-        'webpack/hot/only-dev-server',
         './src/index.js',
     ],
     output: {
@@ -35,11 +34,22 @@ module.exports = {
         extensions: ['*', '.js', '.jsx']
     },
     plugins: [
-        new ExtractTextPlugin({ filename: 'style.css', allChunks: true })
+        new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
+        new webpack.DefinePlugin({
+            ENV: "'test'"
+        }),
     ],
     devServer: {
         contentBase: './dist',
         hot: true,
         historyApiFallback: true
     },
-}
+}
+
+if (process.env.NODE_ENV !== 'production')
+    config.entry.push(
+        'webpack-dev-server/client?http://localhost:8080',
+        'webpack/hot/only-dev-server'
+    );
+
+module.exports = config

yarn.lock

@@ -208,6 +208,27 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+babel-cli@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.24.1.tgz#207cd705bba61489b2ea41b5312341cf6aca2283"
+  dependencies:
+    babel-core "^6.24.1"
+    babel-polyfill "^6.23.0"
+    babel-register "^6.24.1"
+    babel-runtime "^6.22.0"
+    commander "^2.8.1"
+    convert-source-map "^1.1.0"
+    fs-readdir-recursive "^1.0.0"
+    glob "^7.0.0"
+    lodash "^4.2.0"
+    output-file-sync "^1.1.0"
+    path-is-absolute "^1.0.0"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+    v8flags "^2.0.10"
+  optionalDependencies:
+    chokidar "^1.6.1"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -386,6 +407,10 @@ babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
 
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -414,6 +439,15 @@ babel-plugin-transform-async-to-generator@^6.22.0:
     babel-plugin-syntax-async-functions "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-class-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -645,6 +679,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-polyfill@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
+  dependencies:
+    babel-runtime "^6.22.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-preset-env@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.4.0.tgz#c8e02a3bcc7792f23cded68e0355b9d4c28f0f7a"
@@ -967,7 +1009,7 @@ chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chokidar@^1.4.3, chokidar@^1.6.0:
+chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -1090,7 +1132,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.9.x:
+commander@2.9.x, commander@^2.8.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -1345,13 +1387,13 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2.6.1:
+debug@2.6.1, debug@^2.1.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
   dependencies:
     ms "0.7.2"
 
-debug@2.6.4, debug@^2.1.1, debug@^2.2.0:
+debug@2.6.4, debug@^2.2.0:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
   dependencies:
@@ -1577,7 +1619,7 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-express@^4.13.3:
+express@^4.13.3, express@^4.15.2:
   version "4.15.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
   dependencies:
@@ -1750,6 +1792,10 @@ fresh@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
 
+fs-readdir-recursive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1851,7 +1897,7 @@ globule@^1.0.0:
     lodash "~4.16.4"
     minimatch "~3.0.2"
 
-graceful-fs@^4.1.2:
+graceful-fs@^4.1.2, graceful-fs@^4.1.4:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -2841,6 +2887,14 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+output-file-sync@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+  dependencies:
+    graceful-fs "^4.1.4"
+    mkdirp "^0.5.1"
+    object-assign "^4.1.0"
+
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -4117,6 +4171,10 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+user-home@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+
 util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -4147,6 +4205,12 @@ uuid@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
+v8flags@^2.0.10:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
+  dependencies:
+    user-home "^1.1.1"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"