tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add API key and instructions to Cards / Access page

Browse Source
This commit is contained in:
Tanner Collin 2020-04-23 04:19:46 +00:00
parent 276254f71d
commit 3b6cd0a392
2 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webclient/src/App.js
View File

@ -219,7 +219,7 @@ function App() {
</Route> </Route>
<Route path='/cards'> <Route path='/cards'>
<Cards user={user} /> <Cards token={token} user={user} />
</Route> </Route>
<Route path='/training'> <Route path='/training'>

59
webclient/src/Cards.js
View File

@ -1,12 +1,13 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { BasicTable, requester } from './utils.js'; import { BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
export function Cards(props) { export function Cards(props) {
const { user } = props; const { user, token } = props;
const [open, setOpen] = useState(false);
const cardStatus = (c) => c.active_status === 'card_active' ? 'Yes' : 'No'; const cardStatus = (c) => c.active_status === 'card_active' ? 'Yes' : 'No';
const card = user.cards[0]; const card = user.cards[0];
@ -65,22 +66,66 @@ export function Cards(props) {
<p>No cards yet! Ask a director for one after you are vetted.</p> <p>No cards yet! Ask a director for one after you are vetted.</p>
} }
{!!user.door_code && <div> {!!user.door_code && <React.Fragment>
<Header size='medium'>Door Alarm Code</Header> <Header size='medium'>Door Alarm Code</Header>
<p>Only share this with vetted Protospace members:</p> <p>Only share this with vetted Protospace members:</p>
<p>{user.door_code}</p> <p>{user.door_code}</p>
</div>} </React.Fragment>}
{!!user.wifi_pass && <div> {!!user.wifi_pass && <React.Fragment>
<p />
<Header size='medium'>Wi-Fi Password</Header> <Header size='medium'>Wi-Fi Password</Header>
<p>Only share this with Protospace members and guests:</p> <p>Only share this with Protospace members and guests:</p>
<p>{user.wifi_pass}</p> <p>{user.wifi_pass}</p>
</div>} </React.Fragment>}
<Header size='medium'>API Key</Header>
<p>Don't share this with anyone! Treat it like your password:</p>
{open ?
<React.Fragment>
<p>{token}</p>
<Header size='small'>API Docs</Header>
<p>
To learn how to use this, refer to the API docs:
<br />
<a href='https://docs.my.protospace.ca/api.html' target='_blank' rel='noopener noreferrer' aria-label='link to our API docs'>
https://docs.my.protospace.ca/api.html
</a>
</p>
<Header size='small'>API Examples</Header>
<p>Get your user info with Bash (curl):</p>
<p><code>$ curl -H "Authorization: Token {token}" https://api.my.protospace.ca/user/</code></p>
<p>Get your user info with Python 3 (and requests):</p>
<code>
import json, requests<br/>
<br />
SECRET_API_KEY = '{token}'<br />
<br />
headers = {'{'}'Authorization': 'Token '+SECRET_API_KEY{'}'}<br />
r = requests.get('https://api.my.protospace.ca/user/', headers=headers)<br />
<br />
print(json.dumps(r.json(), indent=4))<br />
</code>
</React.Fragment>
:
<p>
<Button onClick={() => setOpen(true)}>
Show Secret
</Button>
</p>
}
</Container> </Container>
); );
}; };