Grab tool data from web server

webclient/src/Tool.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Menu, Segment, Table, Input } from 'semantic-ui-react'
+import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Label, Menu, Segment, Table, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 
 class Tool extends Component {
@@ -16,6 +16,8 @@ class Tool extends Component {
 			x.id == match.params.id
 		);
 
+		const approved = user.authorizedTools.includes(tool.id);
+
 		return (
 			<div>
 				<Container>
@@ -28,14 +30,20 @@ class Tool extends Component {
 					</Breadcrumb>
 
 					<Segment>
-						<Image src={tool.photo} size='medium' centered />
+						<Image src={tool.photo} size='medium' centered rounded />
 						<Segment textAlign='center' basic>
-							<Button color='green'>
+							<p>Status: Off</p>
+							<div>
+							<Button color='green' disabled={!approved}>
 								<Icon name='lightning' /> Arm
 							</Button>
-							<Button color='red'>
+							<Button color='red' disabled={!approved}>
 								<Icon name='stop' /> Disarm
 							</Button>
+							</div>
+							{approved || <Label basic color='red' pointing>
+								Not authorized! Please take the xyz course.
+							</Label>}
 						</Segment>
 
 						<Table basic='very' unstackable>