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
+}