|
|
|
@ -7,15 +7,21 @@ import { Link, Route } from 'react-router-dom'; |
|
|
|
|
import io from 'socket.io-client'; |
|
|
|
|
|
|
|
|
|
// Move to env var
|
|
|
|
|
const SOCKET_SERVER_URL = 'http://localhost:8080'; |
|
|
|
|
const AUTH_SERVER_URL = 'http://localhost:8000'; |
|
|
|
|
const SOCKET_SERVER_URL = 'https://tools-socket.protospace.ca'; |
|
|
|
|
const AUTH_SERVER_URL = 'https://tools-auth.protospace.ca'; |
|
|
|
|
|
|
|
|
|
class App extends Component { |
|
|
|
|
constructor() { |
|
|
|
|
super(); |
|
|
|
|
|
|
|
|
|
this.socket = io(SOCKET_SERVER_URL); |
|
|
|
|
this.storage = typeof localStorage !== 'undefined'; |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
localStorage.setItem('test', 'test'); |
|
|
|
|
this.storage = true; |
|
|
|
|
} catch (e) { |
|
|
|
|
this.storage = false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let token = this.storage ? localStorage.getItem('token') : null; |
|
|
|
|
|
|
|
|
@ -29,6 +35,11 @@ class App extends Component { |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
noNetwork = () => { |
|
|
|
|
this.setState({ network: false }); |
|
|
|
|
this.socket.disconnect(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getUser = () => { |
|
|
|
|
fetch(AUTH_SERVER_URL + '/user/', { |
|
|
|
|
headers: {'Authorization': 'Token ' + this.state.login.token}, |
|
|
|
@ -47,11 +58,16 @@ class App extends Component { |
|
|
|
|
|
|
|
|
|
componentDidMount() { |
|
|
|
|
fetch(AUTH_SERVER_URL + '/tooldata/') |
|
|
|
|
.then(response => response.json()) |
|
|
|
|
.then(data => this.setState({ toolData: data })) |
|
|
|
|
.then(response => { |
|
|
|
|
if (response.ok) { |
|
|
|
|
response.json().then(data => this.setState({ toolData: data })); |
|
|
|
|
} else { |
|
|
|
|
this.noNetwork(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(error => { |
|
|
|
|
console.log(error) |
|
|
|
|
this.setState({network: false}); |
|
|
|
|
this.noNetwork(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (this.state.login.token) this.getUser(); |
|
|
|
@ -85,7 +101,7 @@ class App extends Component { |
|
|
|
|
const value = event.target.value; |
|
|
|
|
|
|
|
|
|
this.setState({ |
|
|
|
|
login: {...this.state.login, [name]: value} |
|
|
|
|
login: {...this.state.login, [name]: value, error: false} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -99,17 +115,17 @@ class App extends Component { |
|
|
|
|
.then(response => { |
|
|
|
|
if (response.ok) { |
|
|
|
|
response.json().then(data => { |
|
|
|
|
this.setState({login: {...login, ...data, error: false}}); |
|
|
|
|
this.setState({ login: {...login, ...data, error: false} }); |
|
|
|
|
if (this.storage) localStorage.setItem('token', data.token); |
|
|
|
|
this.getUser(); |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.setState({login: {...login, error: true}}); |
|
|
|
|
this.setState({ login: {...login, error: true} }); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(error => { |
|
|
|
|
console.log(error) |
|
|
|
|
this.setState({network: false}); |
|
|
|
|
this.setState({ network: false }); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -200,11 +216,7 @@ class App extends Component { |
|
|
|
|
: |
|
|
|
|
<Container text> |
|
|
|
|
<Form size='large' onSubmit={this.handleSubmit}> |
|
|
|
|
{login.error ? |
|
|
|
|
<Message visible error header='Invalid username / password!' /> |
|
|
|
|
: |
|
|
|
|
<Message visible warning header='Please log in to access the tools!' /> |
|
|
|
|
} |
|
|
|
|
<Message visible warning header='Please log in to access the tools!' /> |
|
|
|
|
<Form.Field> |
|
|
|
|
<label>Protospace Username</label> |
|
|
|
|
<input name='username' placeholder='Username' value={login.username} onChange={this.handleChange} /> |
|
|
|
@ -214,6 +226,9 @@ class App extends Component { |
|
|
|
|
<input name='password' type='password' value={login.password} onChange={this.handleChange} /> |
|
|
|
|
</Form.Field> |
|
|
|
|
<Button type='submit'>Submit</Button> |
|
|
|
|
{login.error && <Label basic color='red' pointing='left'> |
|
|
|
|
Invalid username / password! |
|
|
|
|
</Label>} |
|
|
|
|
</Form> |
|
|
|
|
</Container> |
|
|
|
|
} |
|
|
|
|