Integrate login and auth server API

webclient/src/Tool.js

@@ -9,7 +9,7 @@ class Tool extends Component {
 		} else if (status.action == 'arm') {
 			return { msg: 'Arming...', canArm: false, canDisarm: true, };
 		} else if (status.action == 'disarm') {
-			return { msg: 'Disarming...', canArm: true, canDisarm: false, };
+			return { msg: 'Disarming...', canArm: false, canDisarm: false, };
 		} else if (status.state == 'off') {
 			return { msg: 'Off.', canArm: true, canDisarm: false, };
 		} else if (status.state == 'armed') {
@@ -33,16 +33,14 @@ class Tool extends Component {
 		);
 
 		const tool = category.tools.find(x =>
-			x.id.toString() === match.params.id
+			x.slug === match.params.slug
 		);
 
-		const status = toolStatus.find(x =>
-			x.id.toString() === match.params.id
-		) || null;
+		const status = toolStatus[match.params.slug] || null;
 		const decodedStatus = this.decodeStatus(status);
 		console.log(decodedStatus);
 
-		const approved = user.authorizedTools.includes(tool.id);
+		const approved = user.profile.authorized_tools.includes(tool.slug);
 
 		return (
 			<div>
@@ -58,24 +56,25 @@ class Tool extends Component {
 					<Segment>
 						<Image src={tool.photo} size='medium' centered rounded />
 						<Segment textAlign='center' basic>
-							<p> Status: {decodedStatus.msg}</p>
+							<p>Status: {decodedStatus.msg}</p>
 							<div>
-							<Button color='green'
-								disabled={!approved || !decodedStatus.canArm}
-								onClick={() => requestInterlock({toolId: tool.id, action: 'arm',})}
-							>
-									<Icon name='lightning' /> Arm
-							</Button>
-							<Button color='red'
-								disabled={!approved || !decodedStatus.canDisarm}
-								onClick={() => requestInterlock({toolId: tool.id, action: 'disarm',})}
-							>
-									<Icon name='stop' /> Disarm
-							</Button>
+								<Button color='green'
+									disabled={!approved || !decodedStatus.canArm}
+									onClick={() => requestInterlock({toolSlug: tool.slug, action: 'arm',})}
+								>
+										<Icon name='lightning' /> Arm
+								</Button>
+								<Button color='red'
+									disabled={!approved || !decodedStatus.canDisarm}
+									onClick={() => requestInterlock({toolSlug: tool.slug, action: 'disarm',})}
+								>
+										<Icon name='stop' /> Disarm
+								</Button>
+								<br />
+								{approved || <Label basic color='red' pointing>
+									Not authorized! Please take the xyz course.
+								</Label>}
 							</div>
-							{approved || <Label basic color='red' pointing>
-								Not authorized! Please take the xyz course.
-							</Label>}
 						</Segment>
 
 						<Table basic='very' unstackable>