esp8266-react-framework/interface/src/security/ManageUsersForm.tsx

192 lines
5.7 KiB
TypeScript
Raw Normal View History

import React, { Fragment } from 'react';
2019-05-25 08:45:49 +00:00
import { ValidatorForm } from 'react-material-ui-form-validator';
2019-05-21 22:34:48 +00:00
import { Table, TableBody, TableCell, TableHead, TableFooter, TableRow } from '@material-ui/core';
import { Box, Button, Typography, } from '@material-ui/core';
2019-05-21 22:34:48 +00:00
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
2019-05-25 08:45:49 +00:00
import CloseIcon from '@material-ui/icons/Close';
import CheckIcon from '@material-ui/icons/Check';
import IconButton from '@material-ui/core/IconButton';
import SaveIcon from '@material-ui/icons/Save';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
import { RestFormProps, FormActions, FormButton } from '../components';
import UserForm from './UserForm';
import { SecuritySettings, User } from './types';
2019-05-21 22:34:48 +00:00
function compareUsers(a: User, b: User) {
if (a.username < b.username) {
return -1;
}
if (a.username > b.username) {
return 1;
}
return 0;
}
type ManageUsersFormProps = RestFormProps<SecuritySettings> & AuthenticatedContextProps;
2019-05-21 22:34:48 +00:00
type ManageUsersFormState = {
creating: boolean;
user?: User;
}
class ManageUsersForm extends React.Component<ManageUsersFormProps, ManageUsersFormState> {
state: ManageUsersFormState = {
creating: false
};
createUser = () => {
this.setState({
creating: true,
user: {
username: "",
password: "",
2019-05-25 08:45:49 +00:00
admin: true
}
});
};
uniqueUsername = (username: string) => {
return !this.props.data.users.find(u => u.username === username);
}
2019-05-25 08:45:49 +00:00
noAdminConfigured = () => {
return !this.props.data.users.find(u => u.admin);
}
removeUser = (user: User) => {
const { data } = this.props;
const users = data.users.filter(u => u.username !== user.username);
this.props.setData({ ...data, users });
}
startEditingUser = (user: User) => {
this.setState({
creating: false,
user
});
};
cancelEditingUser = () => {
this.setState({
user: undefined
});
}
doneEditingUser = () => {
const { user } = this.state;
if (user) {
const { data } = this.props;
const users = data.users.filter(u => u.username !== user.username);
users.push(user);
this.props.setData({ ...data, users });
this.setState({
user: undefined
});
}
};
handleUserValueChange = (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ user: { ...this.state.user!, [name]: event.target.value } });
};
handleUserCheckboxChange = (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ user: { ...this.state.user!, [name]: event.target.checked } });
2019-05-25 08:45:49 +00:00
}
onSubmit = () => {
this.props.saveData();
this.props.authenticatedContext.refresh();
2019-05-25 08:45:49 +00:00
}
2019-05-21 22:34:48 +00:00
render() {
const { data, loadData } = this.props;
const { user, creating } = this.state;
2019-05-21 22:34:48 +00:00
return (
2019-08-09 17:21:28 +00:00
<Fragment>
<ValidatorForm onSubmit={this.onSubmit}>
<Table size="small">
2019-08-09 17:21:28 +00:00
<TableHead>
<TableRow>
<TableCell>Username</TableCell>
<TableCell align="center">Admin?</TableCell>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
{data.users.sort(compareUsers).map(user => (
2019-08-09 17:21:28 +00:00
<TableRow key={user.username}>
<TableCell component="th" scope="row">
{user.username}
</TableCell>
<TableCell align="center">
{
user.admin ? <CheckIcon /> : <CloseIcon />
}
</TableCell>
<TableCell align="center">
<IconButton size="small" aria-label="Delete" onClick={() => this.removeUser(user)}>
2019-08-09 17:21:28 +00:00
<DeleteIcon />
</IconButton>
<IconButton size="small" aria-label="Edit" onClick={() => this.startEditingUser(user)}>
2019-08-09 17:21:28 +00:00
<EditIcon />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2} />
<TableCell align="center">
<Button startIcon={<PersonAddIcon />} variant="contained" color="secondary" onClick={this.createUser}>
2019-08-09 17:21:28 +00:00
Add User
</Button>
</TableCell>
</TableRow>
</TableFooter>
</Table>
{
this.noAdminConfigured() &&
(
2019-08-09 17:21:28 +00:00
<Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
<Typography variant="body1">
You must have at least one admin user configured.
</Typography>
2019-08-09 17:21:28 +00:00
</Box>
)
2019-08-09 17:21:28 +00:00
}
<FormActions>
<FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit" disabled={this.noAdminConfigured()}>
Save
</FormButton>
<FormButton variant="contained" color="secondary" onClick={loadData}>
Reset
</FormButton>
</FormActions>
2019-08-09 17:21:28 +00:00
</ValidatorForm>
{
user &&
<UserForm
user={user}
creating={creating}
onDoneEditing={this.doneEditingUser}
onCancelEditing={this.cancelEditingUser}
handleValueChange={this.handleUserValueChange}
uniqueUsername={this.uniqueUsername}
/>
}
</Fragment>
2019-05-21 22:34:48 +00:00
);
}
2019-05-21 22:34:48 +00:00
}
export default withAuthenticatedContext(ManageUsersForm);