Add UI to add a new bouncer network

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