99 lines
3.4 KiB
React
99 lines
3.4 KiB
React
// Tinode config panel.
|
|
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import CheckBox from '../widgets/checkbox.jsx';
|
|
|
|
import HostSelector from '../widgets/host-selector.jsx';
|
|
|
|
export default class SettingsView extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
transport: props.transport || 'def',
|
|
serverAddress: props.serverAddress,
|
|
secureConnection: props.secureConnection,
|
|
};
|
|
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
this.handleTransportSelected = this.handleTransportSelected.bind(this);
|
|
this.handleServerAddressChange = this.handleServerAddressChange.bind(this);
|
|
this.handleToggleSecure = this.handleToggleSecure.bind(this);
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault();
|
|
this.props.onUpdate({
|
|
transport: this.state.transport,
|
|
serverAddress: this.state.serverAddress,
|
|
secureConnection: this.state.secureConnection,
|
|
});
|
|
}
|
|
|
|
handleTransportSelected(e) {
|
|
this.setState({transport: e.currentTarget.value});
|
|
}
|
|
|
|
handleServerAddressChange(name) {
|
|
this.setState({serverAddress: name});
|
|
}
|
|
|
|
handleToggleSecure(e) {
|
|
this.setState({secureConnection: !this.state.secureConnection});
|
|
}
|
|
|
|
render() {
|
|
const names = {def: "default", ws: "websocket", lp: "long polling"};
|
|
const transportOptions = [];
|
|
['def', 'ws', 'lp'].forEach(item => {
|
|
const id = 'transport-' + item;
|
|
const name = names[item];
|
|
transportOptions.push(
|
|
<li key={item}>
|
|
<input type="radio" id={id} name="transport-select" value={item}
|
|
checked={this.state.transport === item}
|
|
onChange={this.handleTransportSelected} />
|
|
<label htmlFor={id}>{name}</label>
|
|
</li>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<form id="settings-form" className="panel-form" onSubmit={this.handleSubmit}>
|
|
<div className="panel-form-row">
|
|
<label className="small">
|
|
<FormattedMessage id="label_server_to_use" defaultMessage="Server to use:"
|
|
description="Label for server selector in SettingsView" />
|
|
</label>
|
|
</div>
|
|
<HostSelector serverAddress={this.state.serverAddress} onServerAddressChange={this.handleServerAddressChange} />
|
|
<div className="panel-form-row">
|
|
<CheckBox id="secure-connection" name="secure-connection" checked={this.state.secureConnection}
|
|
className="quoted" onChange={this.handleToggleSecure} /><label htmlFor="secure-connection">
|
|
<FormattedMessage id="label_use_secure_connection" defaultMessage="Use secure connection"
|
|
description="Label for WS/WSS connection type in SettingsView" />
|
|
</label>
|
|
</div>
|
|
<div className="panel-form-row">
|
|
<label className="small">
|
|
<FormattedMessage id="label_wire_transport" defaultMessage="Wire transport:"
|
|
description="Label for wire transport selection in SettingsView" />
|
|
</label>
|
|
</div>
|
|
<div className="panel-form-row">
|
|
<ul className="quoted">
|
|
{transportOptions}
|
|
</ul>
|
|
</div>
|
|
<div className="dialog-buttons">
|
|
<button type="submit" className="primary">
|
|
<FormattedMessage id="button_update" defaultMessage="Update"
|
|
description="Button [Update]" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
};
|