153 lines
3.9 KiB
JavaScript
153 lines
3.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { createSelector } from 'reselect';
|
|
import Navicon from 'containers/Navicon';
|
|
|
|
const getSortedDefaultChannels = createSelector(
|
|
defaults => defaults.channels,
|
|
channels => channels.concat().sort()
|
|
);
|
|
|
|
export default class Connect extends Component {
|
|
state = {
|
|
showOptionals: false,
|
|
passwordTouched: false
|
|
};
|
|
|
|
handleSubmit = e => {
|
|
const { connect, select, join, defaults } = this.props;
|
|
|
|
e.preventDefault();
|
|
|
|
const nick = e.target.nick.value.trim();
|
|
let { address, channels } = defaults;
|
|
const opts = {
|
|
name: defaults.name
|
|
};
|
|
|
|
if (!defaults.readonly) {
|
|
address = e.target.address.value.trim();
|
|
channels = e.target.channels.value
|
|
.split(',')
|
|
.map(s => s.trim())
|
|
.filter(s => s);
|
|
opts.name = e.target.name.value.trim();
|
|
opts.tls = e.target.ssl.checked;
|
|
|
|
if (this.state.showOptionals) {
|
|
opts.realname = e.target.realname.value.trim();
|
|
opts.username = e.target.username.value.trim();
|
|
|
|
if (this.state.passwordTouched) {
|
|
opts.password = e.target.password.value.trim();
|
|
}
|
|
}
|
|
}
|
|
|
|
if (address.indexOf('.') > 0 && nick) {
|
|
connect(address, nick, opts);
|
|
|
|
const i = address.indexOf(':');
|
|
if (i > 0) {
|
|
address = address.slice(0, i);
|
|
}
|
|
|
|
select(address);
|
|
|
|
if (channels.length > 0) {
|
|
join(channels, address);
|
|
}
|
|
}
|
|
};
|
|
|
|
handleShowClick = () => {
|
|
this.setState({ showOptionals: !this.state.showOptionals });
|
|
};
|
|
|
|
handlePasswordChange = () => {
|
|
this.setState({ passwordTouched: true });
|
|
};
|
|
|
|
render() {
|
|
const { defaults } = this.props;
|
|
let optionals = null;
|
|
|
|
if (this.state.showOptionals) {
|
|
optionals = (
|
|
<div>
|
|
<input name="username" type="text" placeholder="Username" />
|
|
<input
|
|
name="password"
|
|
type="password"
|
|
placeholder="Password"
|
|
defaultValue={defaults.password ? ' ' : null}
|
|
onChange={this.handlePasswordChange}
|
|
/>
|
|
<input name="realname" type="text" placeholder="Realname" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let form;
|
|
|
|
if (defaults.readonly) {
|
|
form = (
|
|
<form className="connect-form" onSubmit={this.handleSubmit}>
|
|
<h1>Connect</h1>
|
|
{defaults.showDetails && (
|
|
<div className="connect-details">
|
|
<h2>{defaults.address}</h2>
|
|
{getSortedDefaultChannels(defaults).map(channel => (
|
|
<p>{channel}</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
<input name="nick" type="text" placeholder="Nick" />
|
|
<input type="submit" value="Connect" />
|
|
</form>
|
|
);
|
|
} else {
|
|
form = (
|
|
<form className="connect-form" onSubmit={this.handleSubmit}>
|
|
<h1>Connect</h1>
|
|
<input
|
|
name="name"
|
|
type="text"
|
|
placeholder="Name"
|
|
defaultValue={defaults.name}
|
|
/>
|
|
<input
|
|
name="address"
|
|
type="text"
|
|
placeholder="Address"
|
|
defaultValue={defaults.address}
|
|
/>
|
|
<input name="nick" type="text" placeholder="Nick" />
|
|
<input
|
|
name="channels"
|
|
type="text"
|
|
placeholder="Channels"
|
|
defaultValue={
|
|
defaults.channels ? defaults.channels.join(',') : null
|
|
}
|
|
/>
|
|
{optionals}
|
|
<p>
|
|
<label htmlFor="ssl">
|
|
<input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL
|
|
</label>
|
|
<i className="icon-ellipsis" onClick={this.handleShowClick} />
|
|
</p>
|
|
<input type="submit" value="Connect" />
|
|
</form>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="connect">
|
|
<Navicon />
|
|
{form}
|
|
</div>
|
|
);
|
|
}
|
|
}
|