forked from CringeStudios/gamja
Add UI to add a new bouncer network
This commit is contained in:
Simon Ser
parent
4c62b7571e
commit
f84334c31e
@ -7,6 +7,7 @@ import MemberList from "./member-list.js";
|
||||
import ConnectForm from "./connect-form.js";
|
||||
import JoinForm from "./join-form.js";
|
||||
import Help from "./help.js";
|
||||
import NetworkForm from "./network-form.js";
|
||||
import Composer from "./composer.js";
|
||||
import ScrollManager from "./scroll-manager.js";
|
||||
import Dialog from "./dialog.js";
|
||||
@ -185,6 +186,8 @@ export default class App extends Component {
|
||||
this.autocomplete = this.autocomplete.bind(this);
|
||||
this.handleBufferScrollTop = this.handleBufferScrollTop.bind(this);
|
||||
this.handleDialogDismiss = this.handleDialogDismiss.bind(this);
|
||||
this.handleAddNetworkClick = this.handleAddNetworkClick.bind(this);
|
||||
this.handleAddNetworkSubmit = this.handleAddNetworkSubmit.bind(this);
|
||||
this.dismissError = this.dismissError.bind(this);
|
||||
|
||||
this.saveReceipts = debounce(this.saveReceipts.bind(this), 500);
|
||||
@ -980,6 +983,23 @@ export default class App extends Component {
|
||||
this.setState({ dialog: null });
|
||||
}
|
||||
|
||||
handleAddNetworkClick() {
|
||||
this.setState({ dialog: "add-network" });
|
||||
}
|
||||
|
||||
handleAddNetworkSubmit(attrs) {
|
||||
var client = this.clients.values().next().value;
|
||||
client.send({
|
||||
command: "BOUNCER",
|
||||
params: ["ADDNETWORK", irc.formatTags({
|
||||
...attrs,
|
||||
name: attrs.host,
|
||||
tls: 1,
|
||||
})],
|
||||
});
|
||||
this.setState({ dialog: null });
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.state.connectParams.autoconnect) {
|
||||
this.connect(this.state.connectParams);
|
||||
@ -990,9 +1010,13 @@ export default class App extends Component {
|
||||
|
||||
render() {
|
||||
var activeBuffer = null, activeNetwork = null;
|
||||
var isBouncer = false;
|
||||
if (this.state.buffers.get(this.state.activeBuffer)) {
|
||||
activeBuffer = this.state.buffers.get(this.state.activeBuffer);
|
||||
activeNetwork = this.state.networks.get(activeBuffer.network);
|
||||
|
||||
var activeClient = this.clients.get(activeBuffer.network);
|
||||
isBouncer = activeClient && activeClient.enabledCaps["soju.im/bouncer-networks"];
|
||||
}
|
||||
|
||||
if (!activeNetwork || (activeNetwork.status !== NetworkStatus.REGISTERED && !activeBuffer)) {
|
||||
@ -1017,8 +1041,10 @@ export default class App extends Component {
|
||||
<${BufferHeader}
|
||||
buffer=${activeBuffer}
|
||||
network=${activeNetwork}
|
||||
isBouncer=${isBouncer}
|
||||
onClose=${() => this.close(activeBuffer)}
|
||||
onJoin=${() => this.handleJoinClick(activeBuffer.network)}
|
||||
onAddNetwork=${this.handleAddNetworkClick}
|
||||
/>
|
||||
</section>
|
||||
`;
|
||||
@ -1041,6 +1067,13 @@ export default class App extends Component {
|
||||
|
||||
var dialog = null;
|
||||
switch (this.state.dialog) {
|
||||
case "add-network":
|
||||
dialog = html`
|
||||
<${Dialog} title="Add network" onDismiss=${this.handleDialogDismiss}>
|
||||
<${NetworkForm} onSubmit=${this.handleAddNetworkSubmit}/>
|
||||
</>
|
||||
`;
|
||||
break;
|
||||
case "help":
|
||||
dialog = html`
|
||||
<${Dialog} title="Help" onDismiss=${this.handleDialogDismiss}>
|
||||
@ -1074,6 +1107,7 @@ export default class App extends Component {
|
||||
buffers=${this.state.buffers}
|
||||
networks=${this.state.networks}
|
||||
bouncerNetworks=${this.state.bouncerNetworks}
|
||||
isBouncer=${isBouncer}
|
||||
activeBuffer=${this.state.activeBuffer}
|
||||
onBufferClick=${this.handleBufferListClick}
|
||||
/>
|
||||
|
||||
@ -28,6 +28,10 @@ export default function BufferHeader(props) {
|
||||
event.preventDefault();
|
||||
props.onJoin();
|
||||
}
|
||||
function handleAddNetworkClick(event) {
|
||||
event.preventDefault();
|
||||
props.onAddNetwork();
|
||||
}
|
||||
|
||||
var description = null;
|
||||
if (props.buffer.serverInfo) {
|
||||
@ -71,7 +75,11 @@ export default function BufferHeader(props) {
|
||||
var closeText = "Close";
|
||||
switch (props.buffer.type) {
|
||||
case BufferType.SERVER:
|
||||
if (props.isBouncer && !props.network.isupport.get("BOUNCER_NETID")) {
|
||||
actions = html`<a href="#" onClick=${handleAddNetworkClick}>Add network</a>`;
|
||||
} else {
|
||||
actions = html`<a href="#" onClick=${handleJoinClick}>Join</a>`;
|
||||
}
|
||||
closeText = "Disconnect";
|
||||
break;
|
||||
case BufferType.CHANNEL:
|
||||
|
||||
@ -26,7 +26,7 @@ function BufferItem(props) {
|
||||
|
||||
var name = props.buffer.name;
|
||||
if (props.buffer.type == BufferType.SERVER) {
|
||||
name = getNetworkName(props.network, props.bouncerNetwork, props.bouncer);
|
||||
name = getNetworkName(props.network, props.bouncerNetwork, props.isBouncer);
|
||||
}
|
||||
|
||||
var classes = ["type-" + props.buffer.type];
|
||||
@ -46,9 +46,6 @@ function BufferItem(props) {
|
||||
|
||||
|
||||
export default function BufferList(props) {
|
||||
// TODO: check bouncer-networks cap instead
|
||||
var bouncer = props.bouncerNetworks.size > 0;
|
||||
|
||||
var items = Array.from(props.buffers.values()).map((buf) => {
|
||||
var network = props.networks.get(buf.network);
|
||||
|
||||
@ -59,7 +56,7 @@ export default function BufferList(props) {
|
||||
}
|
||||
|
||||
return html`
|
||||
<${BufferItem} key=${buf.id} buffer=${buf} network=${network} bouncer=${bouncer} bouncerNetwork=${bouncerNetwork} onClick=${() => props.onBufferClick(buf)} active=${props.activeBuffer == buf.id}/>
|
||||
<${BufferItem} key=${buf.id} buffer=${buf} network=${network} isBouncer=${props.isBouncer} bouncerNetwork=${bouncerNetwork} onClick=${() => props.onBufferClick(buf)} active=${props.activeBuffer == buf.id}/>
|
||||
`;
|
||||
});
|
||||
|
||||
|
||||
91
components/network-form.js
Normal file
91
components/network-form.js
Normal file
@ -0,0 +1,91 @@
|
||||
import { html, Component } from "../lib/index.js";
|
||||
|
||||
export default class NetworkForm extends Component {
|
||||
state = {
|
||||
host: "",
|
||||
port: 6697,
|
||||
nickname: "",
|
||||
username: "",
|
||||
realname: "",
|
||||
pass: "",
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
var target = event.target;
|
||||
var value = target.type == "checkbox" ? target.checked : target.value;
|
||||
this.setState({ [target.name]: value });
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var params = {
|
||||
host: this.state.host,
|
||||
port: this.state.port,
|
||||
nickname: this.state.nickname,
|
||||
username: this.state.username,
|
||||
realname: this.state.realname,
|
||||
pass: this.state.pass,
|
||||
};
|
||||
|
||||
this.props.onSubmit(params);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
|
||||
<label>
|
||||
Hostname:<br/>
|
||||
<input type="text" name="host" value=${this.state.host} autofocus required/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
|
||||
<details>
|
||||
<summary>Advanced options</summary>
|
||||
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
Port:<br/>
|
||||
<input type="number" name="port" value=${this.state.port}/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
|
||||
<label>
|
||||
Nickname:<br/>
|
||||
<input type="username" name="nickname" value=${this.state.nickname}/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
|
||||
<label>
|
||||
Username:<br/>
|
||||
<input type="username" name="username" value=${this.state.username}/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
|
||||
<label>
|
||||
Real name:<br/>
|
||||
<input type="text" name="realname" value=${this.state.realname}/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
|
||||
<label>
|
||||
Server password:<br/>
|
||||
<input type="password" name="pass" value=${this.state.pass} placeholder="None"/>
|
||||
</label>
|
||||
<br/>
|
||||
</details>
|
||||
|
||||
<br/>
|
||||
<button>Add network</button>
|
||||
</form>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user