gamja/components/connect-form.js

import { html, Component } from "../lib/index.js";

export default class ConnectForm extends Component {
	state = {
		serverURL: "",
		serverPass: "",
		nick: "",
		password: "",
		rememberMe: false,
		username: "",
		realname: "",
		autojoin: "",
	};

	constructor(props) {
		super(props);

		this.handleChange = this.handleChange.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);

		if (props.params) {
			this.state = {
				...this.state,
				serverURL: props.params.serverURL || "",
				nick: props.params.nick || "",
				rememberMe: props.params.autoconnect || false,
				username: props.params.username || "",
				realname: props.params.realname || "",
				autojoin: (props.params.autojoin || []).join(","),
			};
		}
	}

	handleChange(event) {
		var target = event.target;
		var value = target.type == "checkbox" ? target.checked : target.value;
		this.setState({ [target.name]: value });
	}

	handleSubmit(event) {
		event.preventDefault();

		if (this.props.disabled) {
			return;
		}

		var params = {
			url: this.state.serverURL,
			pass: this.state.serverPass,
			nick: this.state.nick,
			autoconnect: this.state.rememberMe,
			username: this.state.username || this.state.nick,
			realname: this.state.realname || this.state.nick,
			saslPlain: null,
			autojoin: [],
		};

		if (this.state.password) {
			params.saslPlain = {
				username: params.username,
				password: this.state.password,
			};
		}

		this.state.autojoin.split(",").forEach(function(ch) {
			ch = ch.trim();
			if (!ch) {
				return;
			}
			params.autojoin.push(ch);
		});

		this.props.onSubmit(params);
	}

	render() {
		var rememberMe = null;
		if (window.localStorage) {
			rememberMe = html`
				<label>
					<input type="checkbox" name="rememberMe" checked=${this.state.rememberMe} disabled=${this.props.disabled}/>
					Remember me
				</label>
				<br/><br/>
			`;
		}

		return html`
			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
				<h2>Connect to IRC</h2>

				<label>
					Nickname:<br/>
					<input type="username" name="nick" value=${this.state.nick} disabled=${this.props.disabled} autofocus required/>
				</label>
				<br/><br/>

				<label>
					Password:<br/>
					<input type="password" name="password" value=${this.state.password} disabled=${this.props.disabled}/>
				</label>
				<br/><br/>

				${rememberMe}

				<details>
					<summary>Advanced options</summary>

					<br/>

					<label>
						Server URL:<br/>
						<input type="url" name="serverURL" value=${this.state.serverURL} disabled=${this.props.disabled} required/>
					</label>
					<br/><br/>

					<label>
						Username:<br/>
						<input type="username" name="username" value=${this.state.username} disabled=${this.props.disabled} placeholder="Same as nickname"/>
					</label>
					<br/><br/>

					<label>
						Real name:<br/>
						<input type="text" name="realname" value=${this.state.realname} disabled=${this.props.disabled} placeholder="Same as nickname"/>
					</label>
					<br/><br/>

					<label>
						Server password:<br/>
						<input type="text" name="serverPass" value=${this.state.serverPass} disabled=${this.props.disabled} placeholder="None"/>
					</label>
					<br/><br/>

					<label>
						Auto-join channels:<br/>
						<input type="text" name="autojoin" value=${this.state.autojoin} disabled=${this.props.disabled} placeholder="Comma-separated list of channels"/>
					</label>
					<br/>
				</details>

				<br/>
				${this.props.error ? html`
					<p class="error-text">${this.props.error || ""}</p>
				` : null}
				<button disabled=${this.props.disabled}>Connect</button>
			</form>
		`;
	}
}