Tracker [WIP]

package.json

@@ -47,7 +47,7 @@
     "@kadira/storybook-addon-knobs": "^1.7.1",
     "@storybook/react": "3.2.5",
     "autoprefixer": "^7.1.4",
-    "axios": "^0.16.2",
+    "axios": "0.17.1",
     "babel-polyfill": "^6.23.0",
     "body-parser": "^1.17.1",
     "bson-objectid": "^1.1.5",
@@ -72,11 +72,13 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^21.2.1",
     "jest-cli": "^21.2.1",
+    "js-cookie": "^2.2.0",
     "kladrapi-for-node": "github:wormen/kladrapi-for-nodejs",
     "lodash.debounce": "^4.0.8",
     "memoizee": "^0.4.5",
     "method-override": "^2.3.8",
-    "moment": "^2.18.1",
+    "moment": "2.20.1",
+    "moment-duration-format": "^2.2.2",
     "passport": "^0.3.2",
     "passport-github2": "^0.1.9",
     "piping": "^1.0.0-rc.4",
@@ -93,12 +95,14 @@
     "prop-types": "^15.5.10",
     "pure-render-decorator": "^1.2.1",
     "raf": "^3.3.2",
-    "ramda": "^0.24.1",
+    "ramda": "0.25.0",
     "raw-loader": "^0.5.1",
     "react": "^15.6.1",
     "react-addons-perf": "^15.4.2",
+    "react-autosize-textarea": "^3.0.2",
+    "react-bootstrap": "^0.31.5",
     "react-container-query": "0.6.0",
-    "react-cookie": "^0.4.6",
+    "react-cookie": "2.1.2",
     "react-datepicker": "^0.52.0",
     "react-dom": "^15.6.1",
     "react-fontawesome": "^1.6.1",
@@ -109,7 +113,7 @@
     "react-lazy-cache": "^3.0.1",
     "react-lazy-load": "^3.0.12",
     "react-parallax": "^1.4.1",
-    "react-portal": "^3.1.0",
+    "react-portal": "^4.1.4",
     "react-redux": "https://github.com/Imater/react-redux/tarball/54306c8b15b3e77db247b7d0842fa1efc3f5574a",
     "react-redux-perfomance": "^5.0.7",
     "react-render-logger": "^1.0.1",
@@ -129,15 +133,15 @@
     "redux-devtools": "^3.4.0",
     "redux-devtools-dock-monitor": "^1.1.2",
     "redux-devtools-log-monitor": "^1.3.0",
-    "redux-form": "^7.0.3",
+    "redux-form": "7.3.0",
     "redux-loop": "2.2.2",
-    "remote-redux-devtools": "^0.5.12",
     "reselect": "^3.0.1",
     "scrollbarwidth": "^0.1.0",
     "serialize-javascript": "^1.1.2",
     "serve-favicon": "^2.4.2",
     "socket.io": "^2.0.3",
     "socket.io-client": "^2.0.3",
+    "split.js": "^1.3.5",
     "superagent": "^3.5.2",
     "transform-loader": "^0.2.3",
     "url-loader": "^0.5.9",

src/client.js

@@ -15,9 +15,11 @@ import { useScroll } from 'react-router-scroll'
 import cookie from 'react-cookie'
 import Perf from 'react-addons-perf'
 import { Provider as ProviderTunnel } from 'react-tunnel'
+import Split from 'split.js'
 import getRoutes from './routes'
 
 window.Perf = Perf
+window.Split = Split
 
 const dest = document.getElementById('content')
 const store = createStore(browserHistory, { cookie }, window.__data)
@@ -96,4 +98,3 @@ if (process.env.NODE_ENV !== 'production') {
   //   console.log(`renderEnd_${this.props.id}`);
   // }
 }
-

src/components/Auth/Auth.jsx

@@ -0,0 +1,54 @@
+import React, { PureComponent, PropTypes as pt } from 'react'
+import { Field } from 'redux-form'
+import cn from 'classnames'
+
+import styles from './Auth.styl'
+
+export default class Auth extends PureComponent {
+  static propTypes = {
+    isAuthorized: pt.bool,
+    submitSucceeded: pt.bool,
+    handleSubmit: pt.func.isRequired
+  }
+
+  static defaultProps = {
+    handleSubmit: () => {}
+  }
+
+  renderInput = field => {
+    const { isAuthorized, submitSucceeded } = this.props
+    const { type, placeholder, input } = field
+    const isError = !isAuthorized && submitSucceeded
+
+    return (
+      <input
+        className={cn(styles.input, {
+          [styles.input_error]: isError
+        })}
+        type={type}
+        placeholder={placeholder}
+        {...input}
+      />
+    )
+  }
+
+  render() {
+    const { handleSubmit } = this.props
+
+    return (
+      <form
+        className={styles.auth}
+        onSubmit={handleSubmit}
+      >
+        <Field
+          name='token'
+          type='text'
+          placeholder='API token'
+          component={this.renderInput}
+        />
+
+        <button className={styles.submit} />
+      </form>
+    )
+  }
+}

src/components/Auth/Auth.styl

@@ -0,0 +1,17 @@
+.auth
+  display block
+
+.input
+  padding-right 5px
+  padding-left 5px
+  width 260px
+  height 30px
+  text-align center
+  border none
+  border-bottom 1px solid gray
+
+  &_error
+    border-color red
+
+.submit
+  display none

src/components/Auth/index.js

@@ -0,0 +1 @@
+export { default } from './Auth'