add PersonalSettingModal

browser/main/Components/PersonalSettingModal.jsx

@@ -0,0 +1,171 @@
+/* global localStorage */
+var React = require('react/addons')
+var request = require('superagent')
+
+var Catalyst = require('../Mixins/Catalyst')
+
+var AuthActions = require('../Actions/AuthActions')
+
+var apiUrl = 'http://localhost:8000/'
+
+module.exports = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin],
+  propTypes: {
+    close: React.PropTypes.func,
+    currentUser: React.PropTypes.object
+  },
+  getInitialState: function () {
+    return {
+      currentTab: 'profile',
+      userName: this.props.currentUser.name,
+      email: this.props.currentUser.email,
+      currentPassword: '',
+      newPassword: '',
+      confirmation: '',
+      contactTitle: '',
+      contactContent: ''
+    }
+  },
+  activeProfile: function () {
+    this.setState({currentTab: 'profile'})
+  },
+  activeContact: function () {
+    this.setState({currentTab: 'contact'})
+  },
+  activeInfo: function () {
+    this.setState({currentTab: 'info'})
+  },
+  activeLogout: function () {
+    this.setState({currentTab: 'logout'})
+  },
+  saveProfile: function () {
+    AuthActions.updateProfile({
+      name: this.state.userName,
+      email: this.state.email
+    })
+  },
+  savePassword: function () {
+    if (this.state.newPassword === this.state.confirmation) {
+      request
+        .put(apiUrl + 'auth/password')
+        .set({
+          Authorization: 'Bearer ' + localStorage.getItem('token')
+        })
+        .send({
+          currentPassword: this.state.currentPassword,
+          newPassword: this.state.newPassword
+        })
+        .end(function (err, res) {
+          this.setState({
+            currentPassword: '',
+            newPassword: '',
+            confirmation: ''
+          })
+          if (err) {
+            console.error(err)
+            return
+          }
+
+        }.bind(this))
+    }
+  },
+  sendEmail: function () {
+
+  },
+  logOut: function () {
+    AuthActions.logout()
+  },
+  interceptClick: function (e) {
+    e.stopPropagation()
+  },
+  render: function () {
+    var content
+    if (this.state.currentTab === 'profile') {
+      content = (
+        <div className='profile'>
+          <div className='profileTop'>
+            <div className='profileFormRow'>
+              <label>Name</label>
+              <input valueLink={this.linkState('userName')} className='block-input' type='text' placeholder='Name'/>
+            </div>
+            <div className='profileFormRow'>
+              <label>E-mail</label>
+              <input valueLink={this.linkState('email')} className='block-input' type='text' placeholder='E-mail'/>
+            </div>
+            <div className='profileFormRow'>
+              <button onClick={this.saveProfile} className='saveButton btn-primary'>Save</button>
+            </div>
+          </div>
+
+          <div className='profileBottom'>
+            <div className='profileFormRow'>
+              <label>Current password</label>
+              <input valueLink={this.linkState('currentPassword')} className='block-input' type='password' placeholder='Current password'/>
+            </div>
+            <div className='profileFormRow'>
+              <label>New password</label>
+              <input valueLink={this.linkState('newPassword')} className='block-input' type='password' placeholder='New password'/>
+            </div>
+            <div className='profileFormRow'>
+              <label>Confirmation</label>
+              <input valueLink={this.linkState('confirmation')} className='block-input' type='password' placeholder='Confirmation'/>
+            </div>
+            <div className='profileFormRow'>
+              <button onClick={this.savePassword} className='saveButton btn-primary'>Save</button>
+            </div>
+          </div>
+        </div>
+      )
+    } else if (this.state.currentTab === 'contact') {
+      content = (
+        <div className='contact'>
+          <p>
+            Let us know your opinion about CodeXen.<br/>
+          Your feedback might be used to improvement of CodeXen.
+          </p>
+          <input valueLink={this.linkState('contactTitle')} className='block-input' type='text' placeholder='title'/>
+          <textarea valueLink={this.linkState('contactContent')} className='block-input' placeholder='message content'/>
+          <div className='contactFormRow'>
+            <button onClick={this.sendEmail} className='saveButton btn-primary'>Send</button>
+          </div>
+        </div>
+      )
+    } else if (this.state.currentTab === 'info') {
+      content = (
+        <div className='info'>
+          <h2 className='infoLabel'>External links</h2>
+          <ul className='externalList'>
+            <li><a>CodeXen Homepage <i className='fa fa-external-link'/></a></li>
+            <li><a>Regulation <i className='fa fa-external-link'/></a></li>
+            <li><a>Private policy <i className='fa fa-external-link'/></a></li>
+          </ul>
+        </div>
+      )
+    } else {
+      content = (
+        <div className='logout'>
+          <p className='logoutLabel'>Are you sure to logout?</p>
+          <img className='userPhoto' width='150' height='150' src='../vendor/dummy.jpg'/><br/>
+          <button onClick={this.logOut} className='logoutButton btn-default'>Logout</button>
+        </div>
+      )
+    }
+
+    return (
+      <div onClick={this.interceptClick} className='PersonalSettingModal modal'>
+        <div className='settingNav'>
+          <h1>Personal setting</h1>
+          <nav>
+            <button className={this.state.currentTab === 'profile' ? 'active' : ''} onClick={this.activeProfile}><i className='fa fa-user fa-fw'/> Profile</button>
+            <button className={this.state.currentTab === 'contact' ? 'active' : ''} onClick={this.activeContact}><i className='fa fa-phone fa-fw'/> Contact</button>
+            <button className={this.state.currentTab === 'info' ? 'active' : ''} onClick={this.activeInfo}><i className='fa fa-info-circle fa-fw'/> Info</button>
+            <button className={this.state.currentTab === 'logout' ? 'active' : ''} onClick={this.activeLogout}><i className='fa fa-sign-out fa-fw'/> Logout</button>
+          </nav>
+        </div>
+        <div className='settingBody'>
+          {content}
+        </div>
+      </div>
+    )
+  }
+})