import { html, Component, createRef } from "../lib/index.js"; import linkify from "../lib/linkify.js"; export default class ConnectForm extends Component { state = { url: "", pass: "", nick: "", password: "", rememberMe: false, username: "", realname: "", autojoin: true, }; nickInput = createRef(); constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); if (props.params) { this.state = { ...this.state, url: props.params.url || "", nick: props.params.nick || "", rememberMe: props.params.autoconnect || false, username: props.params.username || "", realname: props.params.realname || "", }; } } handleChange(event) { let target = event.target; let value = target.type == "checkbox" ? target.checked : target.value; this.setState({ [target.name]: value }); } handleSubmit(event) { event.preventDefault(); if (this.props.connecting) { return; } let params = { url: this.state.url, pass: this.state.pass, nick: this.state.nick, autoconnect: this.state.rememberMe, username: this.state.username, realname: this.state.realname, saslPlain: null, autojoin: [], }; if (this.state.password) { params.saslPlain = { username: params.username || params.nick, password: this.state.password, }; } else if (this.props.auth === "external") { params.saslExternal = true; } else if (this.props.auth === "oauth2") { params.saslOauthBearer = this.props.params.saslOauthBearer; } if (this.state.autojoin) { params.autojoin = this.props.params.autojoin || []; } this.props.onSubmit(params); } componentDidMount() { if (this.nickInput.current) { this.nickInput.current.focus(); } } render() { let disabled = this.props.connecting; let serverURL = null; if (!this.props.params || !this.props.params.url) { serverURL = html`

`; } let status = null; if (this.props.connecting) { status = html`

Connecting...

`; } else if (this.props.error) { status = html`

${linkify(this.props.error)}

`; } let auth = null; if (this.props.auth !== "disabled" && this.props.auth !== "external" && this.props.auth !== "oauth2") { auth = html`

`; } let autojoin = null; let channels = this.props.params.autojoin || []; if (channels.length > 0) { let s = channels.length > 1 ? "s" : ""; autojoin = html`

`; } return html`

Connect to IRC



${auth} ${autojoin}

Advanced options
${serverURL}






${status}
`; } }