From 0d2067e33e5228e72f20ad776bda444935a8a1d5 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Sat, 27 Nov 2021 12:08:23 +0100
Subject: [PATCH] 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.
---
 components/connect-form.js | 49 ++++++++++++++++----------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

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