From 909a7645ff3168a528f208965ac1b69085981b4c Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Mon, 28 Jan 2019 16:42:33 -0700
Subject: [PATCH] Add a link to auth server for admins

---
 webclient/src/Admin.js      |  29 ++++++++++
 webclient/src/App.js        |   2 +-
 webclient/src/Categories.js |   9 ++-
 webclient/src/Category.js   |  56 +++++++++---------
 webclient/src/Tool.js       | 112 ++++++++++++++++++------------------
 5 files changed, 118 insertions(+), 90 deletions(-)
 create mode 100644 webclient/src/Admin.js

diff --git a/webclient/src/Admin.js b/webclient/src/Admin.js
new file mode 100644
index 0000000..965c041
--- /dev/null
+++ b/webclient/src/Admin.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { Breadcrumb, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Link } from 'react-router-dom';
+
+class Admin extends Component {
+	render() {
+		const data = this.props.data;
+		const match = this.props.match;
+
+		return (
+			<div>
+				<Breadcrumb size='large'>
+					<Breadcrumb.Section active>Admin</Breadcrumb.Section>
+				</Breadcrumb>
+
+				<Item.Group link unstackable divided>
+					<Item as='a' href='https://tools-auth.protospace.ca'>
+						<Item.Content>
+							<Item.Header>Auth Server</Item.Header>
+							<Item.Description>Manage tools, members, courses, and firmware</Item.Description>
+						</Item.Content>
+					</Item>
+				</Item.Group>
+			</div>
+		);
+	}
+}
+
+export default Admin;
diff --git a/webclient/src/App.js b/webclient/src/App.js
index 0ee4cb0..654f141 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -235,7 +235,7 @@ class App extends Component {
 									{user.profile.selected_courses ?
 										<div>
 											<Route exact path='/' render={props =>
-												<Categories {...props} data={toolData} />
+												<Categories {...props} data={toolData} user={user} />
 											} />
 
 											<Route exact path='/:category' render={props =>
diff --git a/webclient/src/Categories.js b/webclient/src/Categories.js
index 473e7f8..aaad40b 100644
--- a/webclient/src/Categories.js
+++ b/webclient/src/Categories.js
@@ -1,14 +1,16 @@
 import React, { Component } from 'react';
-import { Breadcrumb, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Breadcrumb, Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
+import Admin from './Admin';
 
 class Categories extends Component {
 	render() {
 		const data = this.props.data;
+		const user = this.props.user;
 		const match = this.props.match;
 
 		return (
-			<div>
+			<Container>
 				<Breadcrumb size='large'>
 					<Breadcrumb.Section active>Categories</Breadcrumb.Section>
 				</Breadcrumb>
@@ -25,7 +27,8 @@ class Categories extends Component {
 						</Item>
 					)}
 				</Item.Group>
-			</div>
+				{user.profile.lockout_admin && <Admin />}
+			</Container>
 		);
 	}
 }
diff --git a/webclient/src/Category.js b/webclient/src/Category.js
index bb74686..e26248f 100644
--- a/webclient/src/Category.js
+++ b/webclient/src/Category.js
@@ -13,36 +13,34 @@ class Category extends Component {
 		);
 
 		return (
-			<div>
-				<Container>
-					<Breadcrumb size='large'>
-						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
-						<Breadcrumb.Divider icon='right angle' />
-						<Breadcrumb.Section active>{category.name}</Breadcrumb.Section>
-					</Breadcrumb>
+			<Container>
+				<Breadcrumb size='large'>
+					<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
+					<Breadcrumb.Divider icon='right angle' />
+					<Breadcrumb.Section active>{category.name}</Breadcrumb.Section>
+				</Breadcrumb>
 
-					<Item.Group link unstackable divided>
-						{category.tools.map((x, n) =>
-							<Item as={Link} to={'/' + category.slug + '/' + x.slug} key={n}>
-								<Item.Image size='tiny' src={x.photo} />
-								<Item.Content>
-									<Item.Header>{x.name}</Item.Header>
-									<Item.Description>
-										{user.profile.authorized_tools.includes(x.slug) ?
-											<Label color='green'>
-												<Icon name='check' /> Authorized
-											</Label> : <Label color='red'>
-												<Icon name='x' /> Unauthorized
-											</Label>
-										}
-									</Item.Description>
-									<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
-								</Item.Content>
-							</Item>
-						)}
-					</Item.Group>
-				</Container>
-			</div>
+				<Item.Group link unstackable divided>
+					{category.tools.map((x, n) =>
+						<Item as={Link} to={'/' + category.slug + '/' + x.slug} key={n}>
+							<Item.Image size='tiny' src={x.photo} />
+							<Item.Content>
+								<Item.Header>{x.name}</Item.Header>
+								<Item.Description>
+									{user.profile.authorized_tools.includes(x.slug) ?
+										<Label color='green'>
+											<Icon name='check' /> Authorized
+										</Label> : <Label color='red'>
+											<Icon name='x' /> Unauthorized
+										</Label>
+									}
+								</Item.Description>
+								<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
+							</Item.Content>
+						</Item>
+					)}
+				</Item.Group>
+			</Container>
 		);
 	}
 }
diff --git a/webclient/src/Tool.js b/webclient/src/Tool.js
index aaca7fe..6afede3 100644
--- a/webclient/src/Tool.js
+++ b/webclient/src/Tool.js
@@ -43,65 +43,63 @@ class Tool extends Component {
 		const approved = user.profile.authorized_tools.includes(tool.slug);
 
 		return (
-			<div>
-				<Container>
-					<Breadcrumb size='large'>
-						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
-						<Breadcrumb.Divider icon='right angle' />
-						<Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section>
-						<Breadcrumb.Divider icon='right angle' />
-						<Breadcrumb.Section active>{tool.name}</Breadcrumb.Section>
-					</Breadcrumb>
+			<Container>
+				<Breadcrumb size='large'>
+					<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
+					<Breadcrumb.Divider icon='right angle' />
+					<Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section>
+					<Breadcrumb.Divider icon='right angle' />
+					<Breadcrumb.Section active>{tool.name}</Breadcrumb.Section>
+				</Breadcrumb>
 
-					<Segment>
-						<Image src={tool.photo} size='medium' centered rounded />
-						<Segment textAlign='center' basic>
-							<p>Status: {decodedStatus.msg}</p>
-							<div>
-								<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>
-						</Segment>
-
-						<Table basic='very' unstackable>
-							<Table.Body>
-								<Table.Row>
-									<Table.Cell>Cat</Table.Cell>
-									<Table.Cell>Meow</Table.Cell>
-								</Table.Row>
-								<Table.Row>
-									<Table.Cell>Dog</Table.Cell>
-									<Table.Cell warning>
-										<Icon name='attention' />
-										Bark
-									</Table.Cell>
-								</Table.Row>
-								<Table.Row>
-									<Table.Cell>Bird</Table.Cell>
-									<Table.Cell>Chrip</Table.Cell>
-								</Table.Row>
-							</Table.Body>
-						</Table>
-
-						<Header as='h4'>Notes</Header>
-						<p>{tool.notes}</p>
+				<Segment>
+					<Image src={tool.photo} size='medium' centered rounded />
+					<Segment textAlign='center' basic>
+						<p>Status: {decodedStatus.msg}</p>
+						<div>
+							<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>
 					</Segment>
-				</Container>
-			</div>
+
+					<Table basic='very' unstackable>
+						<Table.Body>
+							<Table.Row>
+								<Table.Cell>Cat</Table.Cell>
+								<Table.Cell>Meow</Table.Cell>
+							</Table.Row>
+							<Table.Row>
+								<Table.Cell>Dog</Table.Cell>
+								<Table.Cell warning>
+									<Icon name='attention' />
+									Bark
+								</Table.Cell>
+							</Table.Row>
+							<Table.Row>
+								<Table.Cell>Bird</Table.Cell>
+								<Table.Cell>Chrip</Table.Cell>
+							</Table.Row>
+						</Table.Body>
+					</Table>
+
+					<Header as='h4'>Notes</Header>
+					<p>{tool.notes}</p>
+				</Segment>
+			</Container>
 		);
 	}
 }