2016-02-12 20:36:59 -05:00
|
|
|
var React = require('react');
|
|
|
|
|
2016-09-27 11:30:39 -04:00
|
|
|
var ReactDOM = require('react-dom');
|
|
|
|
|
2016-02-13 16:31:12 -05:00
|
|
|
var ReactBootstrap = require('react-bootstrap');
|
|
|
|
var Modal = ReactBootstrap.Modal;
|
|
|
|
var Button = ReactBootstrap.Button;
|
|
|
|
var ButtonGroup = ReactBootstrap.ButtonGroup;
|
2016-09-27 11:30:39 -04:00
|
|
|
var Form = ReactBootstrap.Form;
|
|
|
|
var FormGroup = ReactBootstrap.FormGroup;
|
|
|
|
var FormControl = ReactBootstrap.FormControl;
|
|
|
|
var ControlLabel = ReactBootstrap.ControlLabel;
|
|
|
|
var Col = ReactBootstrap.Col;
|
2016-02-13 16:31:12 -05:00
|
|
|
|
2016-10-05 13:45:09 -04:00
|
|
|
var User = require('../models').User;
|
2016-02-12 20:36:59 -05:00
|
|
|
|
2017-06-07 19:12:53 -04:00
|
|
|
class AccountSettingsModal extends React.Component {
|
|
|
|
_getInitialState(props) {
|
|
|
|
return {
|
|
|
|
error: "",
|
|
|
|
name: props ? props.user.Name: "",
|
|
|
|
username: props ? props.user.Username : "",
|
|
|
|
email: props ? props.user.Email : "",
|
2016-02-13 16:31:12 -05:00
|
|
|
password: models.BogusPassword,
|
|
|
|
confirm_password: models.BogusPassword,
|
2016-02-12 20:36:59 -05:00
|
|
|
passwordChanged: false,
|
2017-06-07 19:12:53 -04:00
|
|
|
initial_password: models.BogusPassword
|
|
|
|
};
|
|
|
|
}
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = this._getInitialState();
|
|
|
|
this.onCancel = this.handleCancel.bind(this);
|
|
|
|
this.onChange = this.handleChange.bind(this);
|
|
|
|
this.onSubmit = this.handleSubmit.bind(this);
|
|
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
2016-02-12 20:36:59 -05:00
|
|
|
if (nextProps.show && !this.props.show) {
|
|
|
|
this.setState(this._getInitialState(nextProps));
|
|
|
|
}
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
passwordValidationState() {
|
2016-02-12 20:36:59 -05:00
|
|
|
if (this.state.passwordChanged) {
|
|
|
|
if (this.state.password.length >= 10)
|
|
|
|
return "success";
|
|
|
|
else if (this.state.password.length >= 6)
|
|
|
|
return "warning";
|
|
|
|
else
|
|
|
|
return "error";
|
|
|
|
}
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
confirmPasswordValidationState() {
|
2016-02-12 20:36:59 -05:00
|
|
|
if (this.state.confirm_password.length > 0) {
|
|
|
|
if (this.state.confirm_password == this.state.password)
|
|
|
|
return "success";
|
|
|
|
else
|
|
|
|
return "error";
|
|
|
|
}
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
handleCancel() {
|
2016-02-12 20:36:59 -05:00
|
|
|
if (this.props.onCancel != null)
|
|
|
|
this.props.onCancel();
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
handleChange() {
|
2016-09-27 11:30:39 -04:00
|
|
|
if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
|
2016-02-12 20:36:59 -05:00
|
|
|
this.setState({passwordChanged: true});
|
|
|
|
this.setState({
|
2016-09-27 11:30:39 -04:00
|
|
|
name: ReactDOM.findDOMNode(this.refs.name).value,
|
|
|
|
username: ReactDOM.findDOMNode(this.refs.username).value,
|
|
|
|
email: ReactDOM.findDOMNode(this.refs.email).value,
|
|
|
|
password: ReactDOM.findDOMNode(this.refs.password).value,
|
|
|
|
confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
|
2016-02-12 20:36:59 -05:00
|
|
|
});
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
handleSubmit(e) {
|
2016-02-12 20:36:59 -05:00
|
|
|
var u = new User();
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
u.UserId = this.props.user.UserId;
|
|
|
|
u.Name = this.state.name;
|
|
|
|
u.Username = this.state.username;
|
|
|
|
u.Email = this.state.email;
|
|
|
|
if (this.state.passwordChanged) {
|
|
|
|
u.Password = this.state.password;
|
|
|
|
if (u.Password != this.state.confirm_password) {
|
|
|
|
this.setState({error: "Error: password do not match"});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
} else {
|
2016-02-13 16:31:12 -05:00
|
|
|
u.Password = models.BogusPassword;
|
2016-02-12 20:36:59 -05:00
|
|
|
}
|
|
|
|
|
2016-10-05 13:36:47 -04:00
|
|
|
this.props.onUpdateUser(u);
|
|
|
|
this.props.onSubmit();
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
render() {
|
2016-02-12 20:36:59 -05:00
|
|
|
return (
|
2017-06-07 19:12:53 -04:00
|
|
|
<Modal show={this.props.show} onHide={this.onCancel} bsSize="large">
|
2016-02-12 20:36:59 -05:00
|
|
|
<Modal.Header closeButton>
|
|
|
|
<Modal.Title>Edit Account Settings</Modal.Title>
|
|
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
|
|
<span color="red">{this.state.error}</span>
|
2017-06-07 19:12:53 -04:00
|
|
|
<Form horizontal onSubmit={this.onSubmit}>
|
2016-09-27 11:30:39 -04:00
|
|
|
<FormGroup>
|
|
|
|
<Col componentClass={ControlLabel} xs={2}>Name</Col>
|
|
|
|
<Col xs={10}>
|
|
|
|
<FormControl type="text"
|
|
|
|
value={this.state.name}
|
2017-06-07 19:12:53 -04:00
|
|
|
onChange={this.onChange}
|
2016-09-27 11:30:39 -04:00
|
|
|
ref="name"/>
|
|
|
|
</Col>
|
|
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
|
|
<Col componentClass={ControlLabel} xs={2}>Username</Col>
|
|
|
|
<Col xs={10}>
|
|
|
|
<FormControl type="text"
|
2016-02-12 20:36:59 -05:00
|
|
|
value={this.state.username}
|
2017-06-07 19:12:53 -04:00
|
|
|
onChange={this.onChange}
|
2016-09-27 11:30:39 -04:00
|
|
|
ref="username"/>
|
|
|
|
</Col>
|
|
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
|
|
<Col componentClass={ControlLabel} xs={2}>Email</Col>
|
|
|
|
<Col xs={10}>
|
|
|
|
<FormControl type="email"
|
2016-02-12 20:36:59 -05:00
|
|
|
value={this.state.email}
|
2017-06-07 19:12:53 -04:00
|
|
|
onChange={this.onChange}
|
2016-09-27 11:30:39 -04:00
|
|
|
ref="email"/>
|
|
|
|
</Col>
|
|
|
|
</FormGroup>
|
|
|
|
<FormGroup validationState={this.passwordValidationState()}>
|
|
|
|
<Col componentClass={ControlLabel} xs={2}>Password</Col>
|
|
|
|
<Col xs={10}>
|
|
|
|
<FormControl type="password"
|
2016-02-12 20:36:59 -05:00
|
|
|
value={this.state.password}
|
2017-06-07 19:12:53 -04:00
|
|
|
onChange={this.onChange}
|
2016-09-27 11:30:39 -04:00
|
|
|
ref="password"/>
|
|
|
|
<FormControl.Feedback/>
|
|
|
|
</Col>
|
|
|
|
</FormGroup>
|
|
|
|
<FormGroup validationState={this.confirmPasswordValidationState()}>
|
|
|
|
<Col componentClass={ControlLabel} xs={2}>Confirm Password</Col>
|
|
|
|
<Col xs={10}>
|
|
|
|
<FormControl type="password"
|
2016-02-12 20:36:59 -05:00
|
|
|
value={this.state.confirm_password}
|
2017-06-07 19:12:53 -04:00
|
|
|
onChange={this.onChange}
|
2016-09-27 11:30:39 -04:00
|
|
|
ref="confirm_password"/>
|
|
|
|
<FormControl.Feedback/>
|
|
|
|
</Col>
|
|
|
|
</FormGroup>
|
|
|
|
</Form>
|
2016-02-12 20:36:59 -05:00
|
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
|
|
<ButtonGroup>
|
2017-06-07 19:12:53 -04:00
|
|
|
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
|
|
|
|
<Button onClick={this.onSubmit} bsStyle="success">Save Settings</Button>
|
2016-02-12 20:36:59 -05:00
|
|
|
</ButtonGroup>
|
|
|
|
</Modal.Footer>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
2017-06-07 19:12:53 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = AccountSettingsModal;
|