components/connect-form: replace auto-join text field with checkbox

The intent of the auto-join field is to ask the user whether they
really want to join the pre-filled channel. Users rarely want to
customize this field, they can just manually click "Join" after
connecting if they want to join another channel.
This commit is contained in:
Simon Ser 2021-11-27 12:08:23 +01:00
parent 3e309e9dfe
commit 0d2067e33e

View file

@ -9,7 +9,7 @@ export default class ConnectForm extends Component {
rememberMe: false, rememberMe: false,
username: "", username: "",
realname: "", realname: "",
autojoin: "", autojoin: true,
}; };
nickInput = createRef(); nickInput = createRef();
@ -27,7 +27,6 @@ export default class ConnectForm extends Component {
rememberMe: props.params.autoconnect || false, rememberMe: props.params.autoconnect || false,
username: props.params.username || "", username: props.params.username || "",
realname: props.params.realname || "", realname: props.params.realname || "",
autojoin: (props.params.autojoin || []).join(","),
}; };
} }
} }
@ -65,13 +64,9 @@ export default class ConnectForm extends Component {
params.saslExternal = true; params.saslExternal = true;
} }
this.state.autojoin.split(",").forEach(function(ch) { if (this.state.autojoin) {
ch = ch.trim(); params.autojoin = this.props.params.autojoin || [];
if (!ch) {
return;
} }
params.autojoin.push(ch);
});
this.props.onSubmit(params); this.props.onSubmit(params);
} }
@ -131,22 +126,22 @@ export default class ConnectForm extends Component {
`; `;
} }
let autojoin = html` let autojoin = null;
let channels = this.props.params.autojoin || [];
if (channels.length > 0) {
let s = channels.length > 1 ? "s" : "";
autojoin = html`
<label> <label>
Auto-join channels:<br/>
<input <input
type="text" type="checkbox"
name="autojoin" name="autojoin"
value=${this.state.autojoin} checked=${this.state.autojoin}
disabled=${disabled}
placeholder="Comma-separated list of channels"
/> />
Auto-join channel${s} <strong>${channels.join(', ')}</strong>
</label> </label>
<br/> <br/><br/>
`; `;
}
// Show autojoin field in advanced options, except if it's pre-filled
let isAutojoinAdvanced = (this.props.params.autojoin || []).length === 0;
return html` return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}> <form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
@ -167,7 +162,7 @@ export default class ConnectForm extends Component {
${auth} ${auth}
${!isAutojoinAdvanced ? [autojoin, html`<br/>`] : null} ${autojoin}
<label> <label>
<input <input
@ -222,8 +217,6 @@ export default class ConnectForm extends Component {
/> />
</label> </label>
<br/><br/> <br/><br/>
${isAutojoinAdvanced ? autojoin : null}
</details> </details>
<br/> <br/>