diff --git a/interface/src/AppRouting.js b/interface/src/AppRouting.js index f668ba9..8a90d68 100644 --- a/interface/src/AppRouting.js +++ b/interface/src/AppRouting.js @@ -14,6 +14,7 @@ import NTPConfiguration from './containers/NTPConfiguration'; import OTAConfiguration from './containers/OTAConfiguration'; import APConfiguration from './containers/APConfiguration'; import SignInPage from './containers/SignInPage'; +import UserConfiguration from './containers/UserConfiguration'; class AppRouting extends Component { @@ -30,6 +31,7 @@ class AppRouting extends Component { + diff --git a/interface/src/components/MenuAppBar.js b/interface/src/components/MenuAppBar.js index 2c90010..4dd461e 100644 --- a/interface/src/components/MenuAppBar.js +++ b/interface/src/components/MenuAppBar.js @@ -22,6 +22,7 @@ import SystemUpdateIcon from '@material-ui/icons/SystemUpdate'; import AccessTimeIcon from '@material-ui/icons/AccessTime'; import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna'; +import PeopleIcon from '@material-ui/icons/People'; import { APP_NAME } from '../constants/App'; import { withAuthenticationContext } from '../authentication/Context.js'; @@ -131,6 +132,12 @@ class MenuAppBar extends React.Component { + + + + + + diff --git a/interface/src/constants/Endpoints.js b/interface/src/constants/Endpoints.js index cc13481..c9874b6 100644 --- a/interface/src/constants/Endpoints.js +++ b/interface/src/constants/Endpoints.js @@ -11,3 +11,4 @@ export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus"; export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings"; export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn"; export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization"; +export const USERS_ENDPOINT = ENDPOINT_ROOT + "users"; diff --git a/interface/src/containers/ManageUsers.js b/interface/src/containers/ManageUsers.js new file mode 100644 index 0000000..d2f17a3 --- /dev/null +++ b/interface/src/containers/ManageUsers.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; + +import { USERS_ENDPOINT } from '../constants/Endpoints'; +import {restComponent} from '../components/RestComponent'; +import SectionContent from '../components/SectionContent'; +import ManageUsersForm from '../forms/ManageUsersForm'; + +class ManageUsers extends Component { + + componentDidMount() { + this.props.loadData(); + } + + render() { + const { data, fetched, errorMessage } = this.props; + return ( + + + + ) + } + +} + +export default restComponent(USERS_ENDPOINT, ManageUsers); diff --git a/interface/src/containers/UserConfiguration.js b/interface/src/containers/UserConfiguration.js new file mode 100644 index 0000000..4a5b576 --- /dev/null +++ b/interface/src/containers/UserConfiguration.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; +import MenuAppBar from '../components/MenuAppBar'; +import ManageUsers from './ManageUsers'; + +class UserConfiguration extends Component { + render() { + return ( + + + + ) + } +} + +export default UserConfiguration diff --git a/interface/src/forms/ManageUsersForm.js b/interface/src/forms/ManageUsersForm.js new file mode 100644 index 0000000..1d9163f --- /dev/null +++ b/interface/src/forms/ManageUsersForm.js @@ -0,0 +1,137 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { ValidatorForm } from 'react-material-ui-form-validator'; + +import { withStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import Typography from '@material-ui/core/Typography'; + +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import IconButton from '@material-ui/core/IconButton'; + +import EditIcon from '@material-ui/icons/Edit'; +import DeleteIcon from '@material-ui/icons/Delete'; +import Chip from '@material-ui/core/Chip'; + +const styles = theme => ({ + loadingSettings: { + margin: theme.spacing.unit, + }, + loadingSettingsDetails: { + margin: theme.spacing.unit * 4, + textAlign: "center" + }, + switchControl: { + width: "100%", + marginTop: theme.spacing.unit * 2, + marginBottom: theme.spacing.unit + }, + textField: { + width: "100%" + }, + button: { + marginRight: theme.spacing.unit * 2, + marginTop: theme.spacing.unit * 2, + }, + chip: { + margin: theme.spacing.unit, + }, + table: { + '& td, & th': {padding: theme.spacing.unit} + } +}); + +class ManageUsersForm extends React.Component { + + render() { + const { classes, users, usersFetched, errorMessage, onSubmit, onReset } = this.props; + return ( +
+ { + !usersFetched ? + +
+ + + Loading... + +
+ + : users ? + + + + + + Username + Password + Role(s) + Action + + + + {users.users.map(user => ( + + + {user.username} + + {user.password} + + + + + + + + + + + + + ))} + +
+ + + + + + + : + +
+ + {errorMessage} + + +
+ } +
+ ); + } +} + +ManageUsersForm.propTypes = { + classes: PropTypes.object.isRequired, + users: PropTypes.object, + usersFetched: PropTypes.bool.isRequired, + errorMessage: PropTypes.string, + onSubmit: PropTypes.func.isRequired, + onReset: PropTypes.func.isRequired, + handleValueChange: PropTypes.func.isRequired, + handleCheckboxChange: PropTypes.func.isRequired, +}; + +export default withStyles(styles)(ManageUsersForm);