mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
use new Form components
This commit is contained in:
parent
9ff1495058
commit
39c31498c0
5 changed files with 148 additions and 133 deletions
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import _ from 'lodash';
|
||||
import { Table, Button, FormControl, FormLabel, FormCheck, Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||
import { Table, Button, Form, Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Icon from './icon';
|
||||
|
||||
|
|
@ -112,9 +112,11 @@ class CustomTable extends Component {
|
|||
|
||||
cell.push(<span>
|
||||
|
||||
<FormLabel column={false} className={labelStyle}>
|
||||
<Form.Label
|
||||
column={false}
|
||||
className={labelStyle}>
|
||||
{labelContent}
|
||||
</FormLabel>
|
||||
</Form.Label>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -152,7 +154,7 @@ class CustomTable extends Component {
|
|||
: false;
|
||||
|
||||
cell.push(
|
||||
<FormCheck
|
||||
<Form.Check
|
||||
className="table-control-checkbox"
|
||||
inline
|
||||
disabled={isDisabled}
|
||||
|
|
@ -333,9 +335,10 @@ class CustomTable extends Component {
|
|||
tabIndex={tabIndex}
|
||||
onClick={evtHdls.onCellClick}
|
||||
onFocus={evtHdls.onCellFocus}
|
||||
onBlur={evtHdls.onCellBlur}>
|
||||
{(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex) ? (
|
||||
<FormControl
|
||||
onBlur={evtHdls.onCellBlur}
|
||||
>
|
||||
{(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex) ?
|
||||
<Form.Control
|
||||
as='input'
|
||||
type={children[cellIndex].props.inputType}
|
||||
value={cell}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
|
||||
import { Form, Col } from 'react-bootstrap';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
|
|
@ -28,12 +28,12 @@ class EditOwnUserDialog extends React.Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
username: '',
|
||||
id: '',
|
||||
mail: '',
|
||||
username: this.props.user.username,
|
||||
id: this.props.user.id,
|
||||
mail: this.props.user.mail,
|
||||
password: '',
|
||||
oldPassword: '',
|
||||
confirmpassword: ''
|
||||
confirmPassword: ''
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,43 +83,41 @@ class EditOwnUserDialog extends React.Component {
|
|||
|
||||
resetState() {
|
||||
this.setState({
|
||||
username: '',
|
||||
mail: '',
|
||||
username: this.props.user.username,
|
||||
id: this.props.user.id,
|
||||
mail: this.props.user.mail,
|
||||
oldPassword: '',
|
||||
confirmPassword: '',
|
||||
password: '',
|
||||
id: this.props.user.id,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup as={Col} controlId="username">
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.user.username} value={this.state.username} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="mail">
|
||||
<FormLabel>E-mail</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.user.mail} value={this.state.mail} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="oldPassword">
|
||||
<FormLabel>Old Password</FormLabel>
|
||||
<FormControl type="password" placeholder="Enter current password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} controlId="password">
|
||||
<FormLabel>New Password</FormLabel>
|
||||
<FormControl type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} controlId="confirmpassword">
|
||||
<FormLabel>Confirm New Password</FormLabel>
|
||||
<FormControl type="password" placeholder="Enter password" value={this.state.confirmpassword} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId="username">
|
||||
<Form.Label>Username</Form.Label>
|
||||
<Form.Control type="text" value={this.state.username} onChange={(e) => this.handleChange(e)} autocomplete="username" />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="mail">
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="text" value={this.state.mail} onChange={(e) => this.handleChange(e)} autocomplete="email" />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="oldPassword">
|
||||
<Form.Label>Old Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter current password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} autocomplete="current-password" />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="password">
|
||||
<Form.Label>New Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter new password" value={this.state.password} onChange={(e) => this.handleChange(e)} autocomplete="new-password" />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="confirmPassword">
|
||||
<Form.Label>Confirm New Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Repeat new password" value={this.state.confirmPassword} onChange={(e) => this.handleChange(e)} autocomplete="new-password" />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
|
||||
import { Form, Col } from 'react-bootstrap';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
|
|
@ -27,13 +27,13 @@ class EditUserDialog extends React.Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
username: '',
|
||||
mail: '',
|
||||
role: '',
|
||||
id: '',
|
||||
username: props.user.username,
|
||||
mail: props.user.mail,
|
||||
role: props.user.role,
|
||||
id: props.user.id,
|
||||
active: props.user.active,
|
||||
password: '',
|
||||
active: '',
|
||||
confirmpassword: '',
|
||||
confirmPassword: '',
|
||||
oldPassword: ''
|
||||
}
|
||||
}
|
||||
|
|
@ -94,8 +94,8 @@ class EditUserDialog extends React.Component {
|
|||
|
||||
resetState() {
|
||||
this.setState({
|
||||
//username: this.props.user.username,
|
||||
//mail: this.props.user.mail,
|
||||
username: this.props.user.username,
|
||||
mail: this.props.user.mail,
|
||||
role: this.props.user.role,
|
||||
id: this.props.user.id
|
||||
});
|
||||
|
|
@ -104,46 +104,44 @@ class EditUserDialog extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup as={Col} controlId="username">
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.user.username} value={this.state.username} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="mail">
|
||||
<FormLabel>E-mail</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.user.mail} value={this.state.mail} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="oldPassword">
|
||||
<FormLabel>Admin Password</FormLabel>
|
||||
<FormControl type="password" placeholder="Enter admin password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="password">
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="confirmpassword">
|
||||
<FormLabel>Confirm New Password</FormLabel>
|
||||
<FormControl type="password" placeholder="Enter password" value={this.state.confirmpassword} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="role">
|
||||
<FormLabel>Role</FormLabel>
|
||||
<FormControl as="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId="username">
|
||||
<Form.Label>Username</Form.Label>
|
||||
<Form.Control type="text" value={this.state.username} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="mail">
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="text" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="oldPassword">
|
||||
<Form.Label>Admin Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter admin password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="password">
|
||||
<Form.Label>Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="confirmPassword">
|
||||
<Form.Label>Confirm New Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter password" value={this.state.confirmPassword} onChange={(e) => this.handleChange(e)} />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="role">
|
||||
<Form.Label>Role</Form.Label>
|
||||
<Form.Control 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>
|
||||
|
||||
<FormGroup as={Col} controlId="active">
|
||||
<FormLabel>Active</FormLabel>
|
||||
<FormControl as="select" placeholder="Select Active state" value={this.state.active} onChange={(e) => this.handleChange(e)}>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="active">
|
||||
<Form.Label>Active</Form.Label>
|
||||
<Form.Control as="select" placeholder="Select Active state" value={this.state.active} onChange={(e) => this.handleChange(e)}>
|
||||
<option key='1' value='yes'>Yes</option>
|
||||
<option key='2' value='no'>No</option>
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
|
||||
</form>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormControl, FormLabel, FormText, Col } from 'react-bootstrap';
|
||||
import { Form, Col } from 'react-bootstrap';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
|
|
@ -68,32 +68,32 @@ class NewUserDialog extends React.Component {
|
|||
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 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 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 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 as={Col} controlId="role">
|
||||
<FormLabel>Role</FormLabel>
|
||||
<FormControl as="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId="username">
|
||||
<Form.Label>Username</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter username" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
<Form.Text>Min 3 characters.</Form.Text>
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="mail">
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="password">
|
||||
<Form.Label>Password</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="role">
|
||||
<Form.Label>Role</Form.Label>
|
||||
<Form.Control 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>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import {Button, Col, Row, FormGroup} from 'react-bootstrap';
|
||||
import { Button, Form, Row, Col } from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import UsersStore from './users-store';
|
||||
|
|
@ -101,35 +101,51 @@ class User extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let user = this.state.currentUser;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Your User Account</h1>
|
||||
<h1>Account</h1>
|
||||
|
||||
{this.state.currentUser !== undefined && this.state.currentUser !== null ?
|
||||
{user ?
|
||||
<>
|
||||
<Form>
|
||||
<Form.Group as={Row} controlId="username">
|
||||
<Form.Label column sm={2}>Username</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly defaultValue={user.username} />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} controlId="mail">
|
||||
<Form.Label column sm={2}>E-mail</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly defaultValue={user.mail} type="email" />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} controlId="role">
|
||||
<Form.Label column sm={2}>Role</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly defaultValue={user.role} />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} controlId="formBasicEmail">
|
||||
<Form.Label column sm={2}>Created at</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly defaultValue={user.createdAt} />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Button variant="primary" onClick={() => this.setState({ editModal: true })}>
|
||||
<Icon icon='edit' /> Edit
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<form>
|
||||
|
||||
<Row>
|
||||
<FormGroup as={Col} sm={2} controlId="details">
|
||||
<div style={{ alignItems: 'right' }}>Username:</div>
|
||||
<div style={{ alignItems: 'right' }}>E-mail:</div>
|
||||
<div style={{ alignItems: 'right' }}>Role:</div>
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} sm={3} controlId="information" >
|
||||
<div> {this.state.currentUser.username}</div>
|
||||
<div>{this.state.currentUser.mail}</div>
|
||||
<div>{this.state.currentUser.role}</div>
|
||||
<span className='icon-button'>
|
||||
<Button variant='light' size='lg' variant='light' style={{margin: '10px'}} onClick={() => this.setState({ editModal: true })}><Icon size='lg' classname='icon-color' icon='edit' /> </Button>
|
||||
</span>
|
||||
</FormGroup>
|
||||
</Row>
|
||||
|
||||
<EditOwnUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)}
|
||||
user={this.state.currentUser} />
|
||||
|
||||
</form> : "Loading user data..."
|
||||
<EditOwnUserDialog
|
||||
show={this.state.editModal}
|
||||
onClose={(data) => this.closeEditModal(data)}
|
||||
user={this.state.currentUser}
|
||||
/>
|
||||
</>
|
||||
: <div/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue