Add UI to add a new bouncer network

components/app.js

@@ -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}
 				/>

components/buffer-header.js

@@ -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:

components/buffer-list.js

@@ -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}/>
 		`;
 	});
 

components/network-form.js

@@ -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>
+		`;
+	}
+}