add login/signup action

browser/main/Actions/login.js

@@ -0,0 +1,5 @@
+var Reflux = require('reflux')
+
+var login = Reflux.createAction()
+
+module.exports = login

browser/main/Actions/register.js

@@ -0,0 +1,5 @@
+var Reflux = require('reflux')
+
+var register = Reflux.createAction()
+
+module.exports = register

browser/main/Actions/snippetUpdate.js

@@ -0,0 +1,6 @@
+var Reflux = require('reflux')
+
+// Creating an Action
+var snippetUpdate = Reflux.createAction()
+
+module.exports = snippetUpdate

browser/main/Components/CodeEditor.jsx

@@ -10,8 +10,8 @@ var CodeEditor = React.createClass({
   componentDidMount: function () {
     var el = React.findDOMNode(this.refs.target)
     var editor = ace.edit(el)
-    editor.setValue(this.props.code)
     editor.$blockScrolling = Infinity
+    editor.setValue(this.props.code)
     editor.renderer.setShowGutter(true)
     editor.setTheme('ace/theme/xcode')
 

browser/main/Components/CodeViewer.jsx

@@ -9,8 +9,8 @@ var CodeViewer = React.createClass({
   componentDidMount: function () {
     var el = React.findDOMNode(this.refs.target)
     var editor = ace.edit(el)
-    editor.setValue(this.props.code)
     editor.$blockScrolling = Infinity
+    editor.setValue(this.props.code)
     editor.renderer.setShowGutter(false)
     editor.setReadOnly(true)
     editor.setTheme('ace/theme/xcode')

browser/main/Containers/LoginContainer.jsx

@@ -1,7 +1,9 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
-var Auth = require('../Services/Auth')
+
+var AuthStore = require('../Stores/AuthStore')
+var login = require('../Actions/login')
 
 module.exports = React.createClass({
   mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
@@ -11,31 +13,54 @@ module.exports = React.createClass({
       password: ''
     }
   },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onLogin)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
   handleSubmit: function (e) {
-    console.log(this.state)
-    Auth.attempt()
-    // TODO: request user data
-      .then(function (user) {
-        this.transitionTo('dashboard', {userName: user.name, planetName: user.name})
-      }.bind(this))
+    login({
+      email: this.state.email,
+      password: this.state.password
+    })
     e.preventDefault()
   },
+  onLogin: function (user) {
+    var planet = user.Planets.length > 0 ? user.Planets[0] : null
+    if (planet == null) {
+      this.transitionTo('user', {userName: user.name})
+      return
+    }
+    this.transitionTo('dashboard', {userName: user.name, planetName: planet.name})
+  },
   render: function () {
     return (
       <div className='LoginContainer'>
-        <h1 className='text-center'>CodeXen</h1>
-        <h2 className='text-center'>Log In | <small><Link to='register'>Register</Link></small></h2>
+        <img className='logo' src='resources/favicon-230x230.png'/>
+
+        <nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='register'>Sign Up</Link></nav>
+
+        <div className='socialControl'>
+          <p>Connect with</p>
+          <button className='facebookBtn'><i className='fa fa-facebook fa-fw'/></button>
+          <button className='githubBtn'><i className='fa fa-github fa-fw'/></button>
+        </div>
+
+        <div className='divider'>
+          <hr/>
+          <div className='dividerLabel'>or</div>
+        </div>
+
         <form onSubmit={this.handleSubmit}>
           <div className='form-group'>
-            <label>E-mail</label>
-            <input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
+            <input className='stripInput' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
           </div>
           <div className='form-group'>
-            <label>Password</label>
-            <input className='block-input' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
+            <input className='stripInput' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
           </div>
           <div className='form-group'>
-            <button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>
+            <button className='btn-primary' type='submit'><i className='fa fa-sign-in'></i> Log In</button>
           </div>
         </form>
       </div>

browser/main/Containers/PlanetContainer.jsx

@@ -14,7 +14,7 @@ var currentUser = {
 var userPlanets = [
   {
     id: 1,
-    name: 'testcat',
+    name: 'myplanet',
     profileName: 'TestCat'
   },
   {

browser/main/Containers/RegisterContainer.jsx

@@ -1,7 +1,9 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
-var Auth = require('../Services/Auth')
+
+var AuthStore = require('../Stores/AuthStore')
+var register = require('../Actions/register')
 
 module.exports = React.createClass({
   mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
@@ -13,42 +15,67 @@ module.exports = React.createClass({
       profileName: ''
     }
   },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onRegister)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
   handleSubmit: function (e) {
-    Auth.register()
-    // TODO: request user data
-      .then(function (user) {
-        this.transitionTo('dashboard', {userName: user.name, planetName: user.name})
-      }.bind(this))
+    register({
+      email: this.state.email,
+      password: this.state.password,
+      name: this.state.name,
+      profileName: this.state.profileName
+    })
 
     e.preventDefault()
   },
+  onRegister: function (user) {
+    var planet = user.Planets.length > 0 ? user.Planets[0] : null
+    if (planet == null) {
+      this.transitionTo('user', {userName: user.name})
+      return
+    }
+    this.transitionTo('dashboard', {userName: user.name, planetName: planet.name})
+  },
   render: function () {
     return (
       <div className='RegisterContainer'>
-        <h1 className='text-center'>CodeXen</h1>
-        <h2 className='text-center'><small><Link to='login'>Log In</Link></small> | Register</h2>
+        <img className='logo' src='resources/favicon-230x230.png'/>
+
+        <nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='register'>Sign Up</Link></nav>
+
+        <div className='socialControl'>
+          <p>Connect with</p>
+          <button className='facebookBtn'><i className='fa fa-facebook fa-fw'/></button>
+          <button className='githubBtn'><i className='fa fa-github fa-fw'/></button>
+        </div>
+
+        <div className='divider'>
+          <hr/>
+          <div className='dividerLabel'>or</div>
+        </div>
+
         <form onSubmit={this.handleSubmit}>
           <div className='form-group'>
-            <label>E-mail</label>
-            <input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
+            <input className='stripInput' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
           </div>
           <div className='form-group'>
-            <label>Password</label>
-            <input className='block-input' valueLink={this.linkState('password')} type='password' placeholder='Password'/>
-          </div>
-          <hr></hr>
-          <div className='form-group'>
-            <label>User name</label>
-            <input className='block-input' valueLink={this.linkState('name')} type='text' placeholder='name'/>
+            <input className='stripInput' valueLink={this.linkState('password')} type='password' placeholder='Password'/>
           </div>
           <div className='form-group'>
-            <label>Profile name</label>
-            <input className='block-input' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
+            <input className='stripInput' valueLink={this.linkState('name')} type='text' placeholder='name'/>
           </div>
           <div className='form-group'>
-            <button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>
+            <input className='stripInput' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
+          </div>
+          <div className='form-group'>
+            <button className='btn-primary' type='submit'><i className='fa fa-sign-in'></i> Sign Up</button>
           </div>
         </form>
+
+        <p>Sign Upをクリックすることで、当サイトの利用規約及びCookieの使用を含むデータに関するポリシーに同意するものとします。</p>
       </div>
     )
   }

browser/main/Services/Snippet.js

@@ -1,7 +1,7 @@
 var Snippet = {}
 
 var snippets = {
-  testcat: [
+  myplanet: [
     {
       id: 1,
       callSign: 'alert',

browser/main/Stores/AuthStore.js

@@ -0,0 +1,39 @@
+/* global localStorage */
+var Reflux = require('reflux')
+var request = require('superagent')
+
+var login = require('../Actions/login')
+var register = require('../Actions/register')
+
+var AuthStore = Reflux.createStore({
+    init: function () {
+      this.listenTo(login, this.login)
+      this.listenTo(register, this.register)
+    },
+    login: function (input) {
+      request
+        .post('http://localhost:8000/auth/login')
+        .send(input)
+        .set('Accept', 'application/json')
+        .end(function (err, res) {
+          if (err) console.error(err)
+          var user = res.body.user
+          localStorage.setItem('token', res.body.token)
+          this.trigger(user)
+        }.bind(this))
+    },
+    register: function (input) {
+      request
+        .post('http://localhost:8000/auth/signup')
+        .send(input)
+        .set('Accept', 'application/json')
+        .end(function (err, res) {
+          if (err) console.error(err)
+          var user = res.body.user
+          localStorage.setItem('token', res.body.token)
+          this.trigger(user)
+        }.bind(this))
+    }
+})
+
+module.exports = AuthStore

browser/main/index.html

@@ -4,6 +4,7 @@
   <title>CodeXen</title>
 
   <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+  <link rel="shortcut icon" href="favicon.ico">
 
   <script src="../vendor/react/react-with-addons.js"></script>
   <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>

browser/styles/main/containers/LoginContainer.styl

@@ -0,0 +1,55 @@
+.LoginContainer, .RegisterContainer
+  margin 15px auto
+  padding 25px 15px
+  box-sizing border-box
+  color inactiveTextColor
+  .logo
+    display block
+    margin 0 auto
+  .authNavigator
+    margin 15px 0
+    a
+      font-size 1.5em
+      text-decoration none
+      color inactiveTextColor
+      &:hover, &.hover, &:active, &.active
+        color brandColor
+  .socialControl
+    text-align center
+    margin 25px 0
+    p
+      margin-bottom 25px
+    .facebookBtn, .githubBtn
+      padding 20px
+      margin 0 45px
+      background-image none
+      font-size 25px
+      color white
+      border none
+      circle()
+      cursor pointer
+    .facebookBtn
+      background-color facebookColor
+      &:hover, &.hover
+        background-color lighten(facebookColor, 25%)
+    .githubBtn
+      background-color githubBtn
+      &:hover, &.hover
+        background-color lighten(githubBtn, 25%)
+  .divider
+    .dividerLabel
+      text-align center
+      position relative
+      top -35px
+      background-color backgroundColor
+      margin 0 auto
+      width 50px
+  form
+    width 400px
+    margin 0 auto 45px
+    div.form-group:last-child
+      margin-top 45px
+      .btn-primary
+        display block
+        width 200px
+        margin 0 auto

browser/styles/main/index.styl

@@ -38,11 +38,23 @@ button
   text-align center
 
 .form-group
-  margin-bottom 15px
+  margin-bottom 20px
   &>label
     display block
     margin-bottom 5px
 
+.stripInput
+  border none
+  border-bottom 1px solid borderColor
+  padding 5px 15px
+  width 100%
+  display block
+  font-size 1em
+  height 33px
+  box-sizing border-box
+  &:focus, &.focus
+    border-bottom 1px solid brandBorderColor
+    outline none
 
 .block-input, .inline-input
   border solid 1px borderColor
@@ -74,14 +86,6 @@ textarea.block-input
 #content
   fullsize()
 
-.LoginContainer, .RegisterContainer
-  width 400px
-  margin 15px auto
-  padding 25px 15px
-  box-sizing border-box
-  h1, h2
-    margin 5px auto 25px
-
 .UserNavigator
   background-color planetNavBgColor
   absolute left top bottom

browser/styles/shared/modal.styl

@@ -39,5 +39,5 @@
 
     .ace_editor
       height 300px
-      border-radius 5px
+      border-radius 10px
       border solid 1px borderColor

browser/styles/vars.styl

@@ -11,6 +11,7 @@ hoverBackgroundColor= transparentify(#444, 3%)
 
 
 // v0.2.0
+inactiveTextColor = #888
 textColor = #4D4D4D
 backgroundColor= white
 
@@ -27,3 +28,6 @@ planetAnchorActiveBgColor = white
 
 popupShadow = 0 0 5px 0 #888
 modalBaseColor = transparentify(white, 65%)
+
+facebookColor= #3b5998
+githubBtn= #201F1F

package.json

@@ -31,6 +31,7 @@
   "homepage": "https://github.com/Rokt33r/codexen-app#readme",
   "dependencies": {
     "dotenv": "^1.1.0",
+    "halogen": "^0.1.10",
     "marked": "^0.3.3",
     "moment": "^2.10.3",
     "node-jsx": "^0.13.3",
@@ -39,7 +40,8 @@
     "react-router": "^0.13.3",
     "react-select": "^0.5.4",
     "react-tooltip": "^0.3.3",
-    "reflux": "^0.2.8"
+    "reflux": "^0.2.8",
+    "superagent": "^1.2.0"
   },
   "devDependencies": {
     "css-loader": "^0.15.1",