lunch/js/components/NewUserModal.js

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 DropdownList = require('react-widgets').DropdownList;

var models = require('../models');
var User = models.User;

module.exports = React.createClass({
	displayName: "NewUserModal",
	getInitialState: function() {
		return {error: "",
			name: "",
			username: "",
			group: null,
			group_password: "",
			email: "",
			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";
		}
	},
	groupPasswordValidationState: function() {
		if (this.state.group_password.length >= 1)
			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,
			username: ReactDOM.findDOMNode(this.refs.username).value,
			group_password: ReactDOM.findDOMNode(this.refs.group_password).value,
			email: ReactDOM.findDOMNode(this.refs.email).value,
			password: ReactDOM.findDOMNode(this.refs.password).value,
			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
		});
	},
	handleSubmit: function(e) {
		var u = new User();
		var error = "";
		e.preventDefault();

		u.Name = this.state.name;
		u.Username = this.state.username;
		if (!this.state.group) {
			this.setState({error: "Error: No group specified!"});
			return;
		}
		u.GroupId = this.state.group.GroupId;
		u.GroupPassword = this.state.group_password;
		u.Email = this.state.email;
		u.Password = this.state.password;
		if (u.Password != this.state.confirm_password) {
			this.setState({error: "Error: passwords do not match"});
			return;
		}

		this.props.createNewUser(u);
		if (this.props.onSubmit != null)
			this.props.onSubmit(u);
	},
	render: function() {
		var groupList = [];
		for (var groupIdx in this.props.groups)
			groupList.push(this.props.groups[groupIdx]);

		return (
			<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
				<Modal.Header closeButton>
					<Modal.Title>Create New User</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>
						<Col componentClass={ControlLabel} xs={2}>Username</Col>
						<Col xs={10}>
						<FormControl type="text"
							value={this.state.username}
							onChange={this.handleChange}
							ref="username"/>
						</Col>
					</FormGroup>
					<FormGroup>
						<Col componentClass={ControlLabel} xs={2}>Group</Col>
						<Col xs={10}>
						<DropdownList
							value={this.state.group}
							data={groupList}
							valueField="GroupId"
							textField="Name"
							onChange={group => this.setState({group})}
							messages={{'emptyList': "There are no groups yet, please create one first"}}/>
						</Col>
					</FormGroup>
					<FormGroup validationState={this.groupPasswordValidationState()}>
						<Col componentClass={ControlLabel} xs={2}>Group Password</Col>
						<Col xs={10}>
						<FormControl type="password"
							value={this.state.group_password}
							onChange={this.handleChange}
							ref="group_password"/>
						<FormControl.Feedback/>
						</Col>
					</FormGroup>
					<FormGroup>
						<Col componentClass={ControlLabel} xs={2}>Email</Col>
						<Col xs={10}>
						<FormControl type="email"
							value={this.state.email}
							onChange={this.handleChange}
							ref="email"/>
						</Col>
					</FormGroup>
					<FormGroup validationState={this.passwordValidationState()}>
						<Col componentClass={ControlLabel} xs={2}>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 User</Button>
					</ButtonGroup>
				</Modal.Footer>
			</Modal>
		);
	}
});