User name change and modify style

lib/components/modal/Preference/AppSettingTab.js

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
+import { updateUser } from 'boost/actions'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -9,9 +10,14 @@ export default class AppSettingTab extends React.Component {
   constructor (props) {
     super(props)
     let keymap = remote.getGlobal('keymap')
+    let userName = props.user != null ? props.user.name : null
 
     this.state = {
       toggleFinder: keymap.toggleFinder,
+      user: {
+        name: userName,
+        alert: null
+      },
       alert: null
     }
   }
@@ -54,6 +60,12 @@ export default class AppSettingTab extends React.Component {
     }
   }
 
+  handleNameSaveButtonClick (e) {
+    let { dispatch } = this.props
+
+    dispatch(updateUser({name: this.state.user.name}))
+  }
+
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
@@ -64,6 +76,17 @@ export default class AppSettingTab extends React.Component {
 
     return (
       <div className='AppSettingTab content'>
+        <div className='section'>
+          <div className='sectionTitle'>User's info</div>
+          <div className='sectionInput'>
+            <label>User name</label>
+            <input valueLink={this.linkState('user.name')} type='text'/>
+          </div>
+          <div className='sectionConfirm'>
+            <button onClick={e => this.handleNameSaveButtonClick(e)}>Save</button>
+            {alertElement}
+          </div>
+        </div>
         <div className='section'>
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
@@ -101,3 +124,6 @@ export default class AppSettingTab extends React.Component {
 }
 
 AppSettingTab.prototype.linkState = linkState
+AppSettingTab.propTypes = {
+  dispatch: PropTypes.func
+}

lib/components/modal/Preferences.js

@@ -62,7 +62,7 @@ class Preferences extends React.Component {
   }
 
   renderContent () {
-    let { folders, dispatch } = this.props
+    let { user, folders, dispatch } = this.props
 
     switch (this.state.currentTab) {
       case HELP:
@@ -80,12 +80,20 @@ class Preferences extends React.Component {
         )
       case APP:
       default:
-        return (<AppSettingTab/>)
+        return (
+          <AppSettingTab
+            user={user}
+            dispatch={dispatch}
+          />
+        )
     }
   }
 }
 
 Preferences.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string
+  }),
   folders: PropTypes.array,
   dispatch: PropTypes.func
 }
@@ -93,9 +101,10 @@ Preferences.propTypes = {
 Preferences.prototype.linkState = linkState
 
 function remap (state) {
-  let { folders, status } = state
+  let { user, folders, status } = state
 
   return {
+    user,
     folders,
     status
   }