feat(user): add basic auth service and lognup page

actions/userLognup.js

@@ -0,0 +1,3 @@
+export default function userLogin (context, payload) {
+  context.dispatch('USER_LOGNUP', payload);
+}

app.js

@@ -3,11 +3,13 @@ import Application from './components/Application';
 import ApplicationStore from './stores/ApplicationStore';
 import RouteStore from './stores/RouteStore';
 import GameStore from './stores/GameStore';
+import AuthStore from './stores/AuthStore';
 
 const app = new Fluxible({ component: Application });
 
 app.registerStore(RouteStore);
 app.registerStore(GameStore);
+app.registerStore(AuthStore);
 app.registerStore(ApplicationStore);
 
 export default app;

components/Header.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { NavLink } from 'fluxible-router';
 
-export default class Header extends React.Component {
+import connectToStores from 'fluxible-addons-react/connectToStores';
+import AuthStore from '../stores/AuthStore';
+
+class Header extends React.Component {
 
   render () {
     return (
@@ -15,16 +18,36 @@ export default class Header extends React.Component {
           </NavLink>
         </div>
         <div className='f mla fai'>
-          <div className='GoldEarned p1 f fai'>
-            530
-            <div className='GoldIcon'></div>
-          </div>
-          <div className='p1'>
-            <div className='ProfilePic' />
-          </div>
+
+          {this.props.isLogged && (
+            <div className='f'>
+              <div className='GoldEarned p1 f fai'>
+                530
+                <div className='GoldIcon'></div>
+              </div>
+              <div className='p1'>
+                <div className='ProfilePic' />
+              </div>
+            </div>
+          )}
+
+          {!this.props.isLogged && (
+            <NavLink routeName='login' className='Header-item'>
+              Login
+            </NavLink>
+          )}
+
         </div>
       </div>
     );
   }
 
 }
+
+export default connectToStores(Header, [AuthStore], (context) => {
+  let authStore = context.getStore(AuthStore);
+  return {
+    isLogged: authStore.isLogged(),
+    user: authStore.getUser()
+  };
+});

components/pages/Game.js

@@ -50,7 +50,7 @@ class Game extends React.Component {
     this.increment();
   }
 
-  render() {
+  render () {
 
     let isFinished = this.state.currentWordIndex >= this.props.text.words.length;
 

components/pages/Login.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import connectToStores from 'fluxible-addons-react/connectToStores';
+import AuthStore from '../../stores/AuthStore';
+
+import userLognup from '../../actions/userLognup';
+
+class Login extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.state = { email: '' };
+  }
+
+  lognup () {
+    this.props.context.executeAction(userLognup, this.state.email);
+  }
+
+  handleInput (e) {
+    if (e.which === 13) { return this.lognup(); }
+    this.setState({ email: e.target.value });
+  }
+
+  render () {
+    return (
+      <div className='Login'>
+        <p>Enter your email to login.</p>
+        <input
+          value={this.state.email}
+          onChange={this.handleInput.bind(this)}
+          onKeyDown={this.handleInput.bind(this)}
+          type='text' placeholder='Email'/>
+        <p>{this.props.lognupMessage}</p>
+      </div>
+    );
+  }
+
+}
+
+export default connectToStores(Login, [AuthStore], (context) => {
+  let authStore = context.getStore(AuthStore);
+  return {
+    isLogged: authStore.isLogged(),
+    lognupMessage: authStore.getLognupMessage()
+  };
+});

package.json

@@ -35,7 +35,8 @@
     "react": "^0.13.0",
     "serialize-javascript": "^1.0.0",
     "serve-favicon": "^2.1.6",
-    "validator": "^4.0.6"
+    "validator": "^4.0.6",
+    "whatwg-fetch": "^0.9.0"
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.1.0",
@@ -44,7 +45,9 @@
     "bundle-loader": "^0.5.0",
     "css-loader": "^0.18.0",
     "eslint": "^0.24.0",
+    "exports-loader": "^0.6.2",
     "extract-text-webpack-plugin": "^0.8.2",
+    "imports-loader": "^0.6.4",
     "json-loader": "^0.5.1",
     "node-sass": "^3.3.3",
     "nodemon": "^1.2.1",

routes.js

@@ -6,6 +6,13 @@ export default {
     title: 'Home',
     handler: require('./components/pages/Home')
   },
+  login: {
+    path: '/login',
+    method: 'get',
+    page: 'login',
+    title: 'Login',
+    handler: require('./components/pages/Login')
+  },
   game: {
     path: '/game',
     method: 'get',

stores/AuthStore.js

@@ -0,0 +1,79 @@
+import BaseStore from 'fluxible/addons/BaseStore';
+
+export default class AuthStore extends BaseStore {
+
+  static getToken () {
+    let val = '; ' + document.cookie;
+    let parts = val.split('; token=');
+    if (parts.length !== 2) { return null; }
+    return parts.pop().split(';').shift();
+  }
+
+  constructor (dispatcher) {
+    super(dispatcher);
+    this._user = null;
+    this._jwt = null;
+    this._lognupMessage = null;
+  }
+
+  handleLognup (email) {
+
+    fetch('/api/users', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ email })
+    })
+    .then(res => { return res.json(); })
+    .then(data => {
+      this._lognupMessage = data.message;
+      this.emitChange();
+    });
+
+  }
+
+  handleLogin () {
+    fetch('/api/users/me', {
+      method: 'GET',
+      headers: { Authorization: 'Bearer ' + 'tttt' }
+    })
+    .then(user => {
+      console.log(user);
+    })
+    .catch(err => {
+      console.log(err);
+    });
+    this._jwt = jwt;
+    this._user = {};
+    this.emitChange();
+  }
+
+  handleLogout () {
+    this._jwt = null;
+    this._user = null;
+    this.emitChange();
+  }
+
+  getUser () {
+    return this._user;
+  }
+
+  getLognupMessage () {
+    return this._lognupMessage;
+  }
+
+  isLogged () {
+    return !!this._user;
+  }
+
+}
+
+AuthStore.storeName = 'AuthStore';
+
+AuthStore.handlers = {
+  USER_LOGNUP: 'handleLognup',
+  USER_LOGIN: 'handleLogin',
+  USER_LOGOUT: 'handleLogout'
+};

webpack.config.js

@@ -46,6 +46,9 @@ var webpackConfig = {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
         BROWSER: JSON.stringify(true)
       }
+    }),
+    new webpack.ProvidePlugin({
+      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
     })
   ],
   devtool: 'eval'

webpack.config.production.js

@@ -43,6 +43,9 @@ var webpackConfig = {
       compress: {
         warnings: false
       }
+    }),
+    new webpack.ProvidePlugin({
+      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
     })
   ]
 };