mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
revise form for adding a new user
- some modifications required due to React update - merge form validation with handling changes - role of new user defaults to User instead of Admin
This commit is contained in:
parent
2a04039e2a
commit
2ecd1890d9
1 changed files with 20 additions and 34 deletions
|
@ -20,7 +20,7 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormControl, FormLabel, FormText } from 'react-bootstrap';
|
||||
import { FormGroup, FormControl, FormLabel, FormText, Col } from 'react-bootstrap';
|
||||
|
||||
import Dialog from './dialog';
|
||||
|
||||
|
@ -33,9 +33,8 @@ class NewUserDialog extends React.Component {
|
|||
this.state = {
|
||||
username: '',
|
||||
mail: '',
|
||||
role: 'admin',
|
||||
role: 'User',
|
||||
password: '',
|
||||
id: 0
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -51,65 +50,52 @@ class NewUserDialog extends React.Component {
|
|||
|
||||
handleChange(e) {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
|
||||
// check all controls
|
||||
let username = this.state.username !== '' && this.state.username.length >= 3;
|
||||
let password = this.state.password !== '';
|
||||
let role = this.state.role !== '';
|
||||
let mail = this.state.mail !== '';
|
||||
|
||||
this.valid = username && password && role && mail;
|
||||
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({
|
||||
username: '',
|
||||
mail: '',
|
||||
role: 'admin',
|
||||
role: 'User',
|
||||
password: '',
|
||||
id: 0
|
||||
});
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
let username = this.state.username !== '' && this.state.username.length >= 3;
|
||||
let password = this.state.password !== '';
|
||||
let id = this.state.id !== 0;
|
||||
|
||||
this.valid = username && password && id;
|
||||
|
||||
// return state to control
|
||||
switch(target) {
|
||||
case 'username':
|
||||
return username ? "success" : "error";
|
||||
case 'password':
|
||||
return password ? "success" : "error";
|
||||
case 'id':
|
||||
return id ? "success" : "error";
|
||||
default:
|
||||
return "success";
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="New user" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="username" validationState={this.validateForm('username')}>
|
||||
<FormGroup as={Col} controlId="username">
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter username" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
<FormText>Min 3 characters.</FormText>
|
||||
</FormGroup>
|
||||
<FormGroup controlId="mail">
|
||||
<FormGroup as={Col} controlId="mail">
|
||||
<FormLabel>E-mail</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="password" validationState={this.validateForm('password')}>
|
||||
<FormGroup as={Col} controlId="password">
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="role" validationState={this.validateForm('role')}>
|
||||
<FormGroup as={Col} controlId="role">
|
||||
<FormLabel>Role</FormLabel>
|
||||
<FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
|
||||
<option key='1' value='admin'>Administrator</option>
|
||||
<option key='2' value='user'>User</option>
|
||||
<option key='3' value='guest'>Guest</option>
|
||||
<FormControl as="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
|
||||
<option key='1' value='Admin'>Administrator</option>
|
||||
<option key='2' value='User'>User</option>
|
||||
<option key='3' value='Guest'>Guest</option>
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</form>
|
||||
|
|
Loading…
Add table
Reference in a new issue