2017-08-26 01:34:04 +02:00
|
|
|
import React, { Component } from 'react';
|
2017-09-08 04:06:49 +02:00
|
|
|
import { connect } from 'react-redux';
|
2017-09-07 11:35:15 +02:00
|
|
|
import {
|
2017-09-08 06:55:47 +02:00
|
|
|
Alert,
|
2017-09-07 11:35:15 +02:00
|
|
|
Card,
|
|
|
|
CardHeader,
|
|
|
|
CardBlock,
|
|
|
|
FormGroup,
|
2017-09-08 06:55:47 +02:00
|
|
|
Progress,
|
2017-09-07 11:35:15 +02:00
|
|
|
Label,
|
|
|
|
Input
|
|
|
|
} from 'reactstrap';
|
|
|
|
import { initialize } from '..';
|
2017-09-08 06:55:47 +02:00
|
|
|
import { SOCKET_STATE } from '../actions/socket';
|
2017-09-07 11:35:15 +02:00
|
|
|
|
2017-10-13 06:34:26 +02:00
|
|
|
const getURI = (uri, password) => ({ uri, password });
|
2017-09-10 12:45:45 +02:00
|
|
|
|
2017-09-08 04:06:49 +02:00
|
|
|
class ConnectionOverlay extends Component {
|
2017-09-07 11:35:15 +02:00
|
|
|
constructor() {
|
|
|
|
super();
|
2017-09-10 12:45:45 +02:00
|
|
|
this.connect = this.connect.bind(this);
|
2017-09-08 07:07:31 +02:00
|
|
|
const uri = localStorage.getItem("autoconnect");
|
2017-09-10 12:45:45 +02:00
|
|
|
const password = localStorage.getItem("password");
|
|
|
|
this.state = {
|
|
|
|
uri: uri || "ws://127.0.0.1:8412",
|
2017-10-23 06:21:28 +02:00
|
|
|
password,
|
2017-09-10 12:45:45 +02:00
|
|
|
autoconnect: !!uri
|
|
|
|
};
|
2017-09-08 07:07:31 +02:00
|
|
|
if (uri) {
|
2017-09-10 12:45:45 +02:00
|
|
|
initialize(getURI(this.state.uri, this.state.password));
|
2017-09-08 07:07:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
connect() {
|
|
|
|
if (this.state.autoconnect) {
|
|
|
|
localStorage.setItem("autoconnect", this.state.uri);
|
2017-09-10 12:45:45 +02:00
|
|
|
localStorage.setItem("password", this.state.password);
|
2017-09-08 07:07:31 +02:00
|
|
|
}
|
2017-09-10 12:45:45 +02:00
|
|
|
initialize(getURI(this.state.uri, this.state.password));
|
2017-09-07 11:35:15 +02:00
|
|
|
}
|
2017-08-26 01:34:04 +02:00
|
|
|
|
|
|
|
render() {
|
2017-09-08 04:06:49 +02:00
|
|
|
const { socket } = this.props;
|
2017-09-08 06:55:47 +02:00
|
|
|
if (socket.state === SOCKET_STATE.CONNECTED) {
|
2017-09-08 04:06:49 +02:00
|
|
|
return null;
|
|
|
|
}
|
2017-09-08 06:55:47 +02:00
|
|
|
if (socket.state === SOCKET_STATE.CONNECTING) {
|
|
|
|
return (
|
|
|
|
<div className="connection-overlay">
|
|
|
|
<Card>
|
|
|
|
<CardHeader>Connect to synapse</CardHeader>
|
|
|
|
<CardBlock>
|
|
|
|
<p className="text-center">Connecting...</p>
|
|
|
|
<Progress value={100} animated />
|
|
|
|
</CardBlock>
|
|
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-09-10 12:45:45 +02:00
|
|
|
const { uri, password, autoconnect } = this.state;
|
2017-08-26 01:34:04 +02:00
|
|
|
return (
|
2017-09-07 11:35:15 +02:00
|
|
|
<div className="connection-overlay">
|
|
|
|
<Card>
|
|
|
|
<CardHeader>Connect to synapse</CardHeader>
|
|
|
|
<CardBlock>
|
2017-09-08 06:55:47 +02:00
|
|
|
{socket.reason && <Alert color="info">{socket.reason}</Alert>}
|
2017-09-07 11:35:15 +02:00
|
|
|
<FormGroup>
|
|
|
|
<Label for="socket-uri">Server URI</Label>
|
|
|
|
<Input
|
|
|
|
id="socket-uri"
|
|
|
|
value={uri}
|
2017-09-10 12:45:45 +02:00
|
|
|
onKeyPress={e => e.keyCode === 13 && this.connect()}
|
2017-09-07 11:35:15 +02:00
|
|
|
onChange={e => this.setState({ uri: e.target.value })}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
2017-09-10 12:45:45 +02:00
|
|
|
<FormGroup>
|
|
|
|
<Label for="socket-password">Server Password</Label>
|
|
|
|
<Input
|
|
|
|
id="socket-password"
|
|
|
|
value={password}
|
|
|
|
type="password"
|
|
|
|
onKeyPress={e => e.keyCode === 13 && this.connect()}
|
|
|
|
onChange={e => this.setState({ password: e.target.value })}
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
2017-09-07 11:35:15 +02:00
|
|
|
<FormGroup>
|
|
|
|
<Label for="autoconnect" check>
|
|
|
|
<Input
|
|
|
|
id="autoconnect"
|
|
|
|
type="checkbox"
|
|
|
|
checked={autoconnect}
|
|
|
|
onChange={e => this.setState({ autoconnect: !autoconnect })}
|
|
|
|
check
|
|
|
|
/> Autoconnect to this server
|
|
|
|
</Label>
|
|
|
|
</FormGroup>
|
|
|
|
<button
|
|
|
|
className="btn btn-primary"
|
2017-09-10 12:45:45 +02:00
|
|
|
onClick={this.connect}
|
2017-09-08 06:55:47 +02:00
|
|
|
>{socket.reason ? "Reconnect" : "Connect"}</button>
|
2017-09-07 11:35:15 +02:00
|
|
|
</CardBlock>
|
|
|
|
</Card>
|
|
|
|
</div>
|
2017-08-26 01:34:04 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2017-09-08 04:06:49 +02:00
|
|
|
|
|
|
|
export default connect(state => ({ socket: state.socket }))(ConnectionOverlay);
|