247 lines
9.8 KiB
JavaScript
247 lines
9.8 KiB
JavaScript
import React, { Component } from 'react'
|
|
import Loading from '../components/Loading'
|
|
|
|
class UserSettings extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
userImageMenuOpen: false,
|
|
changePasswordOpen: false,
|
|
changeName: false,
|
|
loading: false,
|
|
imagePreview: null,
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
newPasswordConfirmation: '',
|
|
name: '',
|
|
email: '',
|
|
emailsAllowed: false,
|
|
followTopicOnCreated: false,
|
|
followTopicOnContributed: false,
|
|
followMapOnCreated: false,
|
|
followMapOnContributed: false,
|
|
removeImage: '0' // can be '0' or '1', 0 means keep, 1 means remove
|
|
}
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.setState({
|
|
name: this.props.currentUser.get('name'),
|
|
email: this.props.currentUser.get('email'),
|
|
image: this.props.currentUser.get('image'),
|
|
emailsAllowed: this.props.currentUser.get('emails_allowed'),
|
|
followTopicOnCreated: this.props.currentUser.get('follow_topic_on_created'),
|
|
followTopicOnContributed: this.props.currentUser.get('follow_topic_on_contributed'),
|
|
followMapOnCreated: this.props.currentUser.get('follow_map_on_created'),
|
|
followMapOnContributed: this.props.currentUser.get('follow_map_on_contributed')
|
|
})
|
|
}
|
|
|
|
init = (serverData) => {
|
|
Account.userIconUrl = serverData['user.png']
|
|
}
|
|
|
|
initListeners = () => {
|
|
/*
|
|
$('#user_image').change(self.showImagePreview)
|
|
*/
|
|
}
|
|
|
|
toggleChangePicture = () => {
|
|
this.setState({
|
|
userImageMenuOpen: !this.state.userImageMenuOpen
|
|
})
|
|
}
|
|
|
|
openChangePicture = () => {
|
|
this.setState({
|
|
userImageMenuOpen: true
|
|
})
|
|
}
|
|
|
|
closeChangePicture = () => {
|
|
this.setState({
|
|
userImageMenuOpen: false
|
|
})
|
|
}
|
|
|
|
showLoading = () => {
|
|
this.setState({ loading: true })
|
|
}
|
|
|
|
showImagePreview = () => {
|
|
var file = $('#user_image')[0].files[0]
|
|
|
|
var reader = new window.FileReader()
|
|
|
|
reader.onload = function(e) {
|
|
var $canvas = $('<canvas>').attr({
|
|
width: 84,
|
|
height: 84
|
|
})
|
|
var context = $canvas[0].getContext('2d')
|
|
var imageObj = new window.Image()
|
|
|
|
imageObj.onload = function() {
|
|
$('.userImageDiv canvas').remove()
|
|
$('.userImageDiv img').hide()
|
|
|
|
var imgWidth = imageObj.width
|
|
var imgHeight = imageObj.height
|
|
|
|
var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth
|
|
// draw cropped image
|
|
var nonZero = Math.abs(imgHeight - imgWidth) / 2
|
|
var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero
|
|
var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero
|
|
var sourceWidth = dimensionToMatch
|
|
var sourceHeight = dimensionToMatch
|
|
var destX = 0
|
|
var destY = 0
|
|
var destWidth = 84
|
|
var destHeight = 84
|
|
|
|
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
|
|
$('.userImageDiv').prepend($canvas)
|
|
}
|
|
imageObj.src = reader.result
|
|
}
|
|
|
|
if (file) {
|
|
reader.readAsDataURL(file)
|
|
$('.userImageMenu').hide()
|
|
$('#remove_image').val('0')
|
|
}
|
|
}
|
|
|
|
removePicture = () => {
|
|
/*
|
|
$('.userImageDiv canvas').remove()
|
|
$('.userImageDiv img').attr('src', '/images/user.png').show()
|
|
$('.userImageMenu').hide()
|
|
|
|
var input = $('#user_image')
|
|
input.replaceWith(input.val('').clone(true))
|
|
$('#remove_image').val('1')
|
|
*/
|
|
this.setState({ removeImage: '1' })
|
|
}
|
|
|
|
changeName = () => {
|
|
this.setState({ changeName: true })
|
|
}
|
|
|
|
showPass = () => {
|
|
this.setState({ changePasswordOpen: true })
|
|
}
|
|
|
|
hidePass = () => {
|
|
this.setState({
|
|
changePasswordOpen: false,
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
newPasswordConfirmation: ''
|
|
})
|
|
}
|
|
|
|
updateForKey = (key) => {
|
|
return (event) => {
|
|
const newState = {}
|
|
if (event.target.type === 'checkbox') {
|
|
newState[key] = !this.state[key]
|
|
} else {
|
|
newState[key] = event.target.value
|
|
}
|
|
this.setState(newState)
|
|
}
|
|
}
|
|
|
|
render = () => {
|
|
const id = this.props.currentUser.get('id')
|
|
const name = this.props.currentUser.get('name')
|
|
return (
|
|
<div id="yield">
|
|
<form className="edit_user centerGreyForm" id={`edit_user_${id}`} encType="multipart/form-data" action={`/users/${id}`} acceptCharset="UTF-8" method="patch">
|
|
<input name="utf8" type="hidden" value="✓" />
|
|
<h3>Edit Settings</h3>
|
|
<div className="userImage">
|
|
<div className="userImageDiv" onClick={this.toggleChangePicture}>
|
|
<img src={this.state.image} alt="11835c3" width="84" height="84" />
|
|
<div className="editPhoto"></div>
|
|
</div>
|
|
{this.state.userImageMenuOpen && <div className="userImageMenu">
|
|
<div className="userMenuArrow"></div>
|
|
<ul>
|
|
<li className="upload">
|
|
Upload Photo
|
|
<input type="hidden" name="remove_image" id="remove_image" value={this.state.removeImage} />
|
|
<input type="file" name="user[image]" id="user_image" />
|
|
<label htmlFor="user_image">Image</label>
|
|
</li>
|
|
<li className="remove" onClick={this.removePicture}>Remove</li>
|
|
<li className="cancel" onClick={this.closeChangePicture}>Cancel</li>
|
|
</ul>
|
|
</div>}
|
|
</div>
|
|
{!this.state.changeName && <div className="accountName" onClick={this.changeName}>
|
|
<div className="nameEdit">{ name }</div>
|
|
</div>}
|
|
{this.state.changeName && <div className="changeName">
|
|
<label className="firstFieldText" htmlFor="user_name">Name:</label>
|
|
<input type="text" name="user[name]" id="user_name" value={this.state.name} onChange={this.updateForKey('name')} />
|
|
</div>}
|
|
<div>
|
|
<label className="firstFieldText" htmlFor="user_email">Email:</label>
|
|
<input type="email" value={this.state.email} onChange={this.updateForKey('email')} name="user[email]" id="user_email" />
|
|
</div>
|
|
<div>
|
|
<label className="firstFieldText" htmlFor="user_emails_allowed">
|
|
<input className="inline" type="checkbox" value={this.state.emailsAllowed ? '1' : '0'} checked={this.state.emailsAllowed} onChange={this.updateForKey('emailsAllowed')} name="user[emails_allowed]" id="user_emails_allowed" />
|
|
Send Metamaps notifications to my email.
|
|
</label>
|
|
<label className="firstFieldText" htmlFor="settings_follow_topic_on_created">
|
|
<input className="inline" type="checkbox" value={this.state.followTopicOnCreated ? '1' : '0'} checked={this.state.followTopicOnCreated} onChange={this.updateForKey('followTopicOnCreated')} name="settings[follow_topic_on_created]" id="settings_follow_topic_on_created" />
|
|
Auto-follow topics you create.
|
|
</label>
|
|
<label className="firstFieldText" htmlFor="settings_follow_topic_on_contributed">
|
|
<input className="inline" type="checkbox" value={this.state.followTopicOnContributed ? '1' : '0'} checked={this.state.followTopicOnContributed} onChange={this.updateForKey('followTopicOnContributed')} name="settings[follow_topic_on_contributed]" id="settings_follow_topic_on_contributed" />
|
|
Auto-follow topics you edit.
|
|
</label>
|
|
<label className="firstFieldText" htmlFor="settings_follow_map_on_created">
|
|
<input className="inline" type="checkbox" value={this.state.followMapOnCreated ? '1' : '0'} checked={this.state.followMapOnCreated} onChange={this.updateForKey('followMapOnCreated')} name="settings[follow_map_on_created]" id="settings_follow_map_on_created" />
|
|
Auto-follow maps you create.
|
|
</label>
|
|
<label className="firstFieldText" htmlFor="settings_follow_map_on_contributed">
|
|
<input className="inline" type="checkbox" value={this.state.followMapOnContributed ? '1' : '0'} checked={this.state.followMapOnContributed} onChange={this.updateForKey('followMapOnContributed')} name="settings[follow_map_on_contributed]" id="settings_follow_map_on_contributed" />
|
|
Auto-follow maps you edit.
|
|
</label>
|
|
</div>
|
|
{!this.state.changePasswordOpen && <div className="changePass" onClick={this.showPass}>Change Password</div>}
|
|
{this.state.changePasswordOpen && <div>
|
|
<div>
|
|
<label className="firstFieldText" htmlFor="user_current_password">Current Password:</label>
|
|
<input type="password" name="current_password" id="current_password" value={this.state.currentPassword} onChange={this.updateForKey('currentPassword')} />
|
|
</div>
|
|
<div>
|
|
<label className="firstFieldText" htmlFor="user_password">New Password:</label>
|
|
<input autoComplete="off" type="password" name="user[password]" id="user_password" value={this.state.newPassword} onChange={this.updateForKey('newPassword')} />
|
|
</div>
|
|
<div>
|
|
<label className="firstFieldText" htmlFor="user_password_confirmation">Confirm New Password:</label>
|
|
<input autoComplete="off" type="password" name="user[password_confirmation]" id="user_password_confirmation" value={this.state.newPasswordConfirmation} onChange={this.updateForKey('newPasswordConfirmation')} />
|
|
</div>
|
|
<div className="noChangePass" onClick={this.hidePass}>Oops, don't change password</div>
|
|
</div>}
|
|
<div id="accountPageLoading">
|
|
{this.state.loading && <Loading />}
|
|
</div>
|
|
<input type="submit" name="commit" value="Update" className="update" onClick={this.showLoading} data-disable-with="Update" />
|
|
<div className="clearfloat"></div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default UserSettings
|