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;
<label> let channels = this.props.params.autojoin || [];
Auto-join channels:<br/> if (channels.length > 0) {
<input let s = channels.length > 1 ? "s" : "";
type="text" autojoin = html`
name="autojoin" <label>
value=${this.state.autojoin} <input
disabled=${disabled} type="checkbox"
placeholder="Comma-separated list of channels" name="autojoin"
/> checked=${this.state.autojoin}
</label> />
<br/> Auto-join channel${s} <strong>${channels.join(', ')}</strong>
`; </label>
<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/>