Add Access Token class as template for generating future tokens

This commit is contained in:
williameriksson126 2020-11-27 09:27:54 +01:00
parent 51e91981e6
commit 12b43e3d61
3 changed files with 47 additions and 55 deletions

View File

@ -18,6 +18,7 @@ class App extends Component {
/> />
*/} */}
<AccessToken /> <AccessToken />
<NearbyStation />
<NavigationDrawer /> <NavigationDrawer />
<Header /> <Header />
<PageArea /> <PageArea />

View File

@ -1,10 +1,30 @@
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
var globToken = ''
const GetToken = () => {
const vars = {
credentials: 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth',
token: undefined,
device: '123',
}
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + vars.credentials
};
axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+vars.device, { headers })
.then(response => {
console.log(response);
globToken = response.data.access_token
});
}
class AccessToken extends React.Component { class AccessToken extends React.Component {
state = { state = {
token: 'No token', token: 'No Token',
responseFromVT: 'No response'
} }
handleChange = event => { handleChange = event => {
@ -14,56 +34,32 @@ class AccessToken extends React.Component {
handleSubmit = event => { handleSubmit = event => {
event.preventDefault(); event.preventDefault();
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + this.state.token
};
this.setState({ this.setState({
token: 'Attempting to send token' credentials: 'Attempting to send token'
}) });
GetToken();
}
axios.post('https://api.vasttrafik.se/token', { headers }) handleFetch = event => {
.then(response => { event.preventDefault();
this.setState({ this.setState({token: globToken})
responseFromVT: response.data.access_token,
token: 'token sent'
})
.error(res => {
this.setState({
responseFromVT: "some error",
token: "some error occured"
})
})
})
} }
render() { render() {
return ( return (
<div> <div>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<label>
Key:
<input type="text" name="token" onChange={this.handleChange} />
</label>
<button type="submit">Get Token</button> <button type="submit">Get Token</button>
</form> </form>
<h1>
{this.state.responseFromVT}
</h1>
<h1> <h1>
{this.state.token} {this.state.token}
</h1> </h1>
<form onSubmit={this.handleFetch}>
<button type="submit">fetch</button>
</form>
</div> </div>
) )
} }
} }
export default AccessToken export default AccessToken
//'https://reqres.in/api/articles'
//'https://api.vasttrafik.se/token'
//grant_type=client_credentials&scope=<device_id>
//5ty7gxmAfQlUHDHdm7kgaqXwK5Ia
//wpIOURnJJcTtO6rORYmYYPq4wXka

View File

@ -1,28 +1,15 @@
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
/*
const StopLocation = ({ name, id, lat, long, track }) => (
<div>
<div>
<p>{name}</p>
<p>{id}</p>
<p>{lat}</p>
<p>{lon}</p>
<p>{track}</p>
</div>
</div>
);
*/
class NearbyStation extends React.Component { class NearbyStation extends React.Component {
state = { state = {
lat: '57.5987', lat: '57.7',
long: '11.9454', long: '12.0',
token: '2d596c20-a6e7-3272-8df6-51ed2468da63',
stops: [], stops: [],
token: undefined,
device: '123',
} }
handleChangeLat = event => { handleChangeLat = event => {
this.setState({ lat: event.target.value}); this.setState({ lat: event.target.value});
} }
@ -31,6 +18,10 @@ class NearbyStation extends React.Component {
this.setState({ long: event.target.value}); this.setState({ long: event.target.value});
} }
handleChangeToken = event => {
this.setState({ token: event.target.value})
}
handleSubmit = event => { handleSubmit = event => {
event.preventDefault(); event.preventDefault();
@ -61,7 +52,11 @@ class NearbyStation extends React.Component {
Longitude coord: Longitude coord:
<input type="text" name="long" onChange={this.handleChangeLong} /> <input type="text" name="long" onChange={this.handleChangeLong} />
</label> </label>
<button type="submit">Get Token</button> <label>
Token:
<input type="text" name="token" onChange={this.handleChangeToken} />
</label>
<button type="submit">Stops</button>
</form> </form>
<h1> <h1>
{this.state.lat} {this.state.lat}