mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-15 10:46:32 +00:00
add PersonalSettingModal
This commit is contained in:
Rokt33r
171
browser/main/Components/PersonalSettingModal.jsx
Normal file
171
browser/main/Components/PersonalSettingModal.jsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -22,8 +22,8 @@ module.exports = React.createClass({
|
||||
this.setState({currentTab: 'planetProfile'})
|
||||
|
||||
},
|
||||
activeManageMember: function () {
|
||||
this.setState({currentTab: 'manageMember'})
|
||||
activeMembers: function () {
|
||||
this.setState({currentTab: 'members'})
|
||||
},
|
||||
saveProfile: function () {
|
||||
var currentPlanet = this.props.currentPlanet
|
||||
@@ -79,7 +79,7 @@ module.exports = React.createClass({
|
||||
}.bind(this))
|
||||
|
||||
content = (
|
||||
<div className='manageMember'>
|
||||
<div className='members'>
|
||||
<ul className='userList'>
|
||||
{members}
|
||||
</ul>
|
||||
@@ -99,8 +99,8 @@ module.exports = React.createClass({
|
||||
<div className='settingNav'>
|
||||
<h1>Planet setting</h1>
|
||||
<nav>
|
||||
<button className={this.state.currentTab === 'planetProfile' ? 'active' : ''} onClick={this.activePlanetProfile}><i className='fa fa-globe'/> Planet profile</button>
|
||||
<button className={this.state.currentTab === 'manageMember' ? 'active' : ''} onClick={this.activeManageMember}><i className='fa fa-group'/> Manage member</button>
|
||||
<button className={this.state.currentTab === 'planetProfile' ? 'active' : ''} onClick={this.activePlanetProfile}><i className='fa fa-globe fa-fw'/> Planet profile</button>
|
||||
<button className={this.state.currentTab === 'members' ? 'active' : ''} onClick={this.activeMembers}><i className='fa fa-group fa-fw'/> Members</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
|
||||
var ModalBase = require('./ModalBase')
|
||||
var PersonalSettingModal = require('./PersonalSettingModal')
|
||||
var PlanetCreateModal = require('./PlanetCreateModal')
|
||||
|
||||
var AuthStore = require('../Stores/AuthStore')
|
||||
@@ -27,6 +28,12 @@ module.exports = React.createClass({
|
||||
onLogout: function () {
|
||||
this.transitionTo('login')
|
||||
},
|
||||
openPersonalSettingModal: function () {
|
||||
this.setState({isPersonalSettingModalOpen: true})
|
||||
},
|
||||
closePersonalSettingModal: function () {
|
||||
this.setState({isPersonalSettingModalOpen: false})
|
||||
},
|
||||
openPlanetCreateModal: function () {
|
||||
this.setState({isPlanetCreateModalOpen: true})
|
||||
},
|
||||
@@ -51,13 +58,18 @@ module.exports = React.createClass({
|
||||
|
||||
return (
|
||||
<div tabIndex='2' className='UserNavigator'>
|
||||
<Link to='userHome' params={{userName: this.props.currentUser.name}} className='userConfig'>
|
||||
<button onClick={this.openPersonalSettingModal} className='userButton'>
|
||||
<img width='50' height='50' src='../vendor/dummy.jpg'/>
|
||||
</Link>
|
||||
<ul>
|
||||
</button>
|
||||
<ul className='planetList'>
|
||||
{planets}
|
||||
</ul>
|
||||
<button onClick={this.openPlanetCreateModal} className='newPlanet'><i className='fa fa-plus'/></button>
|
||||
|
||||
<ModalBase isOpen={this.state.isPersonalSettingModalOpen} close={this.closePersonalSettingModal}>
|
||||
<PersonalSettingModal currentUser={this.props.currentUser} close={this.closePersonalSettingModal}/>
|
||||
</ModalBase>
|
||||
|
||||
<ModalBase isOpen={this.state.isPlanetCreateModalOpen} close={this.closePlanetCreateModal}>
|
||||
<PlanetCreateModal close={this.closePlanetCreateModal}/>
|
||||
</ModalBase>
|
||||
|
||||
Reference in New Issue
Block a user