120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
var React = require('react');
|
|
var ReactDOM = require('react-dom');
|
|
|
|
var ReactBootstrap = require('react-bootstrap');
|
|
var Modal = ReactBootstrap.Modal;
|
|
var Form = ReactBootstrap.Form;
|
|
var FormGroup = ReactBootstrap.FormGroup;
|
|
var FormControl = ReactBootstrap.FormControl;
|
|
var ControlLabel = ReactBootstrap.ControlLabel;
|
|
var Col = ReactBootstrap.Col;
|
|
var Button = ReactBootstrap.Button;
|
|
var ButtonGroup = ReactBootstrap.ButtonGroup;
|
|
|
|
var models = require('../models');
|
|
var Group = models.Group;
|
|
|
|
module.exports = React.createClass({
|
|
displayName: "NewGroupModal",
|
|
getInitialState: function() {
|
|
return {error: "",
|
|
name: "",
|
|
password: "",
|
|
confirm_password: ""};
|
|
},
|
|
passwordValidationState: function() {
|
|
if (this.state.password.length >= 10)
|
|
return "success";
|
|
else if (this.state.password.length >= 6)
|
|
return "warning";
|
|
else
|
|
return "error";
|
|
},
|
|
confirmPasswordValidationState: function() {
|
|
if (this.state.confirm_password.length > 0) {
|
|
if (this.state.confirm_password == this.state.password)
|
|
return "success";
|
|
else
|
|
return "error";
|
|
}
|
|
},
|
|
handleCancel: function() {
|
|
if (this.props.onCancel != null)
|
|
this.props.onCancel();
|
|
},
|
|
handleChange: function() {
|
|
this.setState({
|
|
name: ReactDOM.findDOMNode(this.refs.name).value,
|
|
password: ReactDOM.findDOMNode(this.refs.password).value,
|
|
confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
|
|
});
|
|
},
|
|
handleSubmit: function(e) {
|
|
var g = new Group();
|
|
var error = "";
|
|
e.preventDefault();
|
|
|
|
g.Name = this.state.name;
|
|
g.Password = this.state.password;
|
|
if (g.Password != this.state.confirm_password) {
|
|
this.setState({error: "Error: passwords do not match"});
|
|
return;
|
|
}
|
|
|
|
this.props.createNewGroup(g);
|
|
if (this.props.onSubmit != null)
|
|
this.props.onSubmit(g);
|
|
},
|
|
render: function() {
|
|
return (
|
|
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Create New Group</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<span style={{color: "red"}}>{this.state.error}</span>
|
|
<Form horizontal onSubmit={this.handleSubmit}>
|
|
<FormGroup>
|
|
<Col componentClass={ControlLabel} xs={2}>Name</Col>
|
|
<Col xs={10}>
|
|
<FormControl type="text"
|
|
value={this.state.name}
|
|
onChange={this.handleChange}
|
|
ref="name"/>
|
|
</Col>
|
|
</FormGroup>
|
|
<FormGroup validationState={this.passwordValidationState()}>
|
|
<Col componentClass={ControlLabel} xs={2}>Group Password</Col>
|
|
<Col xs={10}>
|
|
<FormControl type="password"
|
|
value={this.state.password}
|
|
onChange={this.handleChange}
|
|
ref="password"/>
|
|
<FormControl.Feedback/>
|
|
</Col>
|
|
</FormGroup>
|
|
<FormGroup validationState={this.confirmPasswordValidationState()}>
|
|
<Col componentClass={ControlLabel} xs={2}>Confirm Password</Col>
|
|
<Col xs={10}>
|
|
<FormControl type="password"
|
|
value={this.state.confirm_password}
|
|
onChange={this.handleChange}
|
|
ref="confirm_password"/>
|
|
<FormControl.Feedback/>
|
|
</Col>
|
|
</FormGroup>
|
|
</Form>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<ButtonGroup>
|
|
<Button onClick={this.handleCancel}
|
|
bsStyle="warning">Cancel</Button>
|
|
<Button onClick={this.handleSubmit}
|
|
bsStyle="success">Create New Group</Button>
|
|
</ButtonGroup>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
);
|
|
}
|
|
});
|