- {
- !usersFetched ?
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+ createUser = () => {
+ this.setState({
+ creating: true,
+ user: {
+ username: "",
+ password: "",
+ roles: []
+ }
+ });
+ };
+
+ uniqueUsername = username => {
+ return !this.props.userData.users.find(u => u.username === username);
+ }
+
+ usersValid = username => {
+ return !!this.props.userData.users.find(u => u.roles.includes("admin"));
+ }
+
+ startEditingUser = user => {
+ this.setState({
+ creating: false,
+ user
+ });
+ };
+
+ cancelEditingUser = () => {
+ this.setState({
+ user: undefined
+ });
+ }
+
+ sortedUsers(users) {
+ return users.sort(compareUsers);
+ }
+
+ doneEditingUser = () => {
+ const { user } = this.state;
+ const { userData } = this.props;
+ let { users } = userData;
+ users = users.filter(u => u.username !== user.username);
+ users.push(user);
+ this.props.setData({ ...userData, users });
+ this.setState({
+ user: undefined
+ });
+ };
+
+ handleUserValueChange = name => event => {
+ const { user } = this.state;
+ if (user) {
+ this.setState({
+ user: {
+ ...user, [name]: event.target.value
+ }
+ });
+ }
+ };
+
+ render() {
+ const { classes, userData, userDataFetched, errorMessage, onSubmit, onReset, handleValueChange } = this.props;
+ const { user, creating } = this.state;
+ return (
+
+ {
+ !userDataFetched ?
Loading...
-
- : users ?
-
-
-
-
-
- Username
- Password
- Role(s)
- Action
-
-
-
- {users.users.map(user => (
-
-
- {user.username}
-
- {user.password}
-
-
+ :
+ userData ?
+ user ?
+
+ :
+
+
+
+
+ Username
+ Role(s)
+ Action
+
+
+
+ {this.sortedUsers(userData.users).map(user => (
+
+
+ {user.username}
+
+
+ {
+ user.roles.map(role => (
+
+ ))
+ }
+
+
+
+
+
+ this.startEditingUser(user)}>
+
+
+
+
+ ))}
+
+
+
+
+ {
+ !this.usersValid() &&
+
+ You must have at least one admin user configured.
+
+ }
-
-
-
-
-
-
+
- ))}
-
-
-
-
-
-
-
-
+
+
+
+
+
:
-
-
+
{errorMessage}
-
+
+
}
-
+
);
}
+
}
ManageUsersForm.propTypes = {
classes: PropTypes.object.isRequired,
- users: PropTypes.object,
- usersFetched: PropTypes.bool.isRequired,
+ userData: PropTypes.object,
+ userDataFetched: PropTypes.bool.isRequired,
errorMessage: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
- handleValueChange: PropTypes.func.isRequired,
- handleCheckboxChange: PropTypes.func.isRequired,
+ setData: PropTypes.func.isRequired,
+ handleValueChange: PropTypes.func.isRequired
};
export default withStyles(styles)(ManageUsersForm);
diff --git a/interface/src/forms/UserForm.js b/interface/src/forms/UserForm.js
new file mode 100644
index 0000000..99785a7
--- /dev/null
+++ b/interface/src/forms/UserForm.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+import PasswordValidator from '../components/PasswordValidator';
+
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Chip from '@material-ui/core/Chip';
+
+const styles = theme => ({
+ textField: {
+ width: "100%"
+ },
+ checkboxControl: {
+ width: "100%"
+ },
+ chips: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ chip: {
+ marginRight: theme.spacing.unit,
+ },
+ button: {
+ marginRight: theme.spacing.unit * 2,
+ marginTop: theme.spacing.unit * 2,
+ }
+});
+
+class UserForm extends React.Component {
+
+ componentWillMount() {
+ ValidatorForm.addValidationRule('uniqueUsername', this.props.uniqueUsername);
+ }
+
+ render() {
+ const { classes, user, roles, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props;
+ return (
+