Add Groups

js/components/NewUserModal.js

@@ -11,9 +11,10 @@ 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;
-var Error = models.Error;
 
 module.exports = React.createClass({
 	displayName: "NewUserModal",
@@ -21,21 +22,19 @@ module.exports = React.createClass({
 		return {error: "",
 			name: "",
 			username: "",
+			group: null,
+			group_password: "",
 			email: "",
 			password: "",
-			confirm_password: "",
-			passwordChanged: false,
-			initial_password: ""};
+			confirm_password: ""};
 	},
 	passwordValidationState: function() {
-		if (this.state.passwordChanged) {
-			if (this.state.password.length >= 10)
-				return "success";
-			else if (this.state.password.length >= 6)
-				return "warning";
-			else
-				return "error";
-		}
+		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) {
@@ -45,16 +44,21 @@ module.exports = React.createClass({
 				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() {
-		if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
-			this.setState({passwordChanged: true});
 		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
@@ -67,10 +71,16 @@ module.exports = React.createClass({
 
 		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: password do not match"});
+			this.setState({error: "Error: passwords do not match"});
 			return;
 		}
 
@@ -79,13 +89,17 @@ module.exports = React.createClass({
 			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.Title>Create New User</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-				<span color="red">{this.state.error}</span>
+				<span style={{color: "red"}}>{this.state.error}</span>
 				<Form horizontal onSubmit={this.handleSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Name</Col>
@@ -105,6 +119,28 @@ module.exports = React.createClass({
 							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}>