nova/esp8266-react-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

disable buttons which are not accessable when non-admin user is authenticated

Browse Source
This commit is contained in:
Rick Watson 2019-05-31 21:33:12 +01:00
parent 22d922c699
commit d7d33a50c8
5 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
interface/src/components/MenuAppBar.js
View File

@ -74,7 +74,7 @@ const styles = theme => ({
}, },
authMenuActions: { authMenuActions: {
padding: theme.spacing(2), padding: theme.spacing(2),
"& > * + *" :{ "& > * + *": {
marginLeft: theme.spacing(2), marginLeft: theme.spacing(2),
} }
}, },
@ -118,31 +118,31 @@ class MenuAppBar extends React.Component {
</Toolbar> </Toolbar>
<Divider /> <Divider />
<List> <List>
<ListItem button component={Link} to='/wifi/' selected={path.startsWith('/wifi/')}> <ListItem to='/wifi/' selected={path.startsWith('/wifi/')} button component={Link}>
<ListItemIcon> <ListItemIcon>
<WifiIcon /> <WifiIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="WiFi Connection" /> <ListItemText primary="WiFi Connection" />
</ListItem> </ListItem>
<ListItem button component={Link} to='/ap/' selected={path.startsWith('/ap/')}> <ListItem to='/ap/' selected={path.startsWith('/ap/')} button component={Link}>
<ListItemIcon> <ListItemIcon>
<SettingsInputAntennaIcon /> <SettingsInputAntennaIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Access Point" /> <ListItemText primary="Access Point" />
</ListItem> </ListItem>
<ListItem button component={Link} to='/ntp/' selected={path.startsWith('/ntp/')}> <ListItem to='/ntp/' selected={path.startsWith('/ntp/')} button component={Link}>
<ListItemIcon> <ListItemIcon>
<AccessTimeIcon /> <AccessTimeIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Network Time" /> <ListItemText primary="Network Time" />
</ListItem> </ListItem>
<ListItem button component={Link} to='/security/' selected={path.startsWith('/security/')}> <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticationContext.isAdmin()}>
<ListItemIcon> <ListItemIcon>
<LockIcon /> <LockIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Security" /> <ListItemText primary="Security" />
</ListItem> </ListItem>
<ListItem button component={Link} to='/system/' selected={path.startsWith('/system/')}> <ListItem to='/system/' selected={path.startsWith('/system/')} button component={Link} >
<ListItemIcon> <ListItemIcon>
<SettingsIcon /> <SettingsIcon />
</ListItemIcon> </ListItemIcon>
@ -189,7 +189,7 @@ class MenuAppBar extends React.Component {
<AccountCircleIcon /> <AccountCircleIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary={"Signed in as: " + authenticationContext.user.username} secondary={ authenticationContext.isAdmin() ? "Admin User" : undefined} /> <ListItemText primary={"Signed in as: " + authenticationContext.user.username} secondary={authenticationContext.isAdmin() ? "Admin User" : undefined} />
</ListItem> </ListItem>
</List> </List>
</CardContent> </CardContent>

6
interface/src/sections/AccessPoint.js
View File

@ -8,6 +8,7 @@ import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
import MenuAppBar from '../components/MenuAppBar'; import MenuAppBar from '../components/MenuAppBar';
import APSettings from '../containers/APSettings'; import APSettings from '../containers/APSettings';
import APStatus from '../containers/APStatus'; import APStatus from '../containers/APStatus';
import { withAuthenticationContext } from '../authentication/Context.js';
class AccessPoint extends Component { class AccessPoint extends Component {
@ -16,11 +17,12 @@ class AccessPoint extends Component {
}; };
render() { render() {
const { authenticationContext } = this.props;
return ( return (
<MenuAppBar sectionTitle="Access Point"> <MenuAppBar sectionTitle="Access Point">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth"> <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/ap/status" label="Access Point Status" /> <Tab value="/ap/status" label="Access Point Status" />
<Tab value="/ap/settings" label="Access Point Settings" /> <Tab value="/ap/settings" label="Access Point Settings" disabled={!authenticationContext.isAdmin()} />
</Tabs> </Tabs>
<Switch> <Switch>
<AuthenticatedRoute exact={true} path="/ap/status" component={APStatus} /> <AuthenticatedRoute exact={true} path="/ap/status" component={APStatus} />
@ -32,4 +34,4 @@ class AccessPoint extends Component {
} }
} }
export default AccessPoint; export default withAuthenticationContext(AccessPoint);

6
interface/src/sections/NetworkTime.js
View File

@ -8,6 +8,7 @@ import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
import MenuAppBar from '../components/MenuAppBar'; import MenuAppBar from '../components/MenuAppBar';
import NTPSettings from '../containers/NTPSettings'; import NTPSettings from '../containers/NTPSettings';
import NTPStatus from '../containers/NTPStatus'; import NTPStatus from '../containers/NTPStatus';
import { withAuthenticationContext } from '../authentication/Context.js';
class NetworkTime extends Component { class NetworkTime extends Component {
@ -16,11 +17,12 @@ class NetworkTime extends Component {
}; };
render() { render() {
const { authenticationContext } = this.props;
return ( return (
<MenuAppBar sectionTitle="Network Time"> <MenuAppBar sectionTitle="Network Time">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth"> <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/ntp/status" label="NTP Status" /> <Tab value="/ntp/status" label="NTP Status" />
<Tab value="/ntp/settings" label="NTP Settings" /> <Tab value="/ntp/settings" label="NTP Settings" disabled={!authenticationContext.isAdmin()} />
</Tabs> </Tabs>
<Switch> <Switch>
<AuthenticatedRoute exact={true} path="/ntp/status" component={NTPStatus} /> <AuthenticatedRoute exact={true} path="/ntp/status" component={NTPStatus} />
@ -32,4 +34,4 @@ class NetworkTime extends Component {
} }
} }
export default NetworkTime export default withAuthenticationContext(NetworkTime)

6
interface/src/sections/System.js
View File

@ -8,6 +8,7 @@ import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
import MenuAppBar from '../components/MenuAppBar'; import MenuAppBar from '../components/MenuAppBar';
import OTASettings from '../containers/OTASettings'; import OTASettings from '../containers/OTASettings';
import SystemStatus from '../containers/SystemStatus'; import SystemStatus from '../containers/SystemStatus';
import { withAuthenticationContext } from '../authentication/Context.js';
class System extends Component { class System extends Component {
@ -16,11 +17,12 @@ class System extends Component {
}; };
render() { render() {
const { authenticationContext } = this.props;
return ( return (
<MenuAppBar sectionTitle="System"> <MenuAppBar sectionTitle="System">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth"> <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/system/status" label="System Status" /> <Tab value="/system/status" label="System Status" />
<Tab value="/system/ota" label="OTA Settings" /> <Tab value="/system/ota" label="OTA Settings" disabled={!authenticationContext.isAdmin()} />
</Tabs> </Tabs>
<Switch> <Switch>
<AuthenticatedRoute exact={true} path="/system/status" component={SystemStatus} /> <AuthenticatedRoute exact={true} path="/system/status" component={SystemStatus} />
@ -32,4 +34,4 @@ class System extends Component {
} }
} }
export default System export default withAuthenticationContext(System);

8
interface/src/sections/WiFiConnection.js
View File

@ -9,6 +9,7 @@ import MenuAppBar from '../components/MenuAppBar';
import WiFiNetworkScanner from '../containers/WiFiNetworkScanner'; import WiFiNetworkScanner from '../containers/WiFiNetworkScanner';
import WiFiSettings from '../containers/WiFiSettings'; import WiFiSettings from '../containers/WiFiSettings';
import WiFiStatus from '../containers/WiFiStatus'; import WiFiStatus from '../containers/WiFiStatus';
import { withAuthenticationContext } from '../authentication/Context.js';
class WiFiConnection extends Component { class WiFiConnection extends Component {
@ -35,6 +36,7 @@ class WiFiConnection extends Component {
}; };
render() { render() {
const { authenticationContext } = this.props;
const ConfiguredWiFiNetworkScanner = (props) => { const ConfiguredWiFiNetworkScanner = (props) => {
return ( return (
<WiFiNetworkScanner <WiFiNetworkScanner
@ -55,8 +57,8 @@ class WiFiConnection extends Component {
<MenuAppBar sectionTitle="WiFi Connection"> <MenuAppBar sectionTitle="WiFi Connection">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth"> <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/wifi/status" label="WiFi Status" /> <Tab value="/wifi/status" label="WiFi Status" />
<Tab value="/wifi/scan" label="Scan Networks" /> <Tab value="/wifi/scan" label="Scan Networks" disabled={!authenticationContext.isAdmin()} />
<Tab value="/wifi/settings" label="WiFi Settings" /> <Tab value="/wifi/settings" label="WiFi Settings" disabled={!authenticationContext.isAdmin()} />
</Tabs> </Tabs>
<Switch> <Switch>
<AuthenticatedRoute exact={true} path="/wifi/status" component={WiFiStatus} /> <AuthenticatedRoute exact={true} path="/wifi/status" component={WiFiStatus} />
@ -69,4 +71,4 @@ class WiFiConnection extends Component {
} }
} }
export default WiFiConnection; export default withAuthenticationContext(WiFiConnection);