Use v-model in network form, auto size commands

client/components/NetworkForm.vue

@@ -6,7 +6,7 @@
 		<form class="container" method="post" action="" @submit.prevent="onSubmit">
 			<h1 class="title">
 				<template v-if="defaults.uuid">
-					<input type="hidden" name="uuid" :value="defaults.uuid" />
+					<input v-model="defaults.uuid" type="hidden" name="uuid" />
 					Edit {{ defaults.name }}
 				</template>
 				<template v-else>
@@ -20,9 +20,9 @@
 					<label for="connect:name">Name</label>
 					<input
 						id="connect:name"
+						v-model="defaults.name"
 						class="input"
 						name="name"
-						:value="defaults.name"
 						maxlength="100"
 					/>
 				</div>
@@ -31,9 +31,9 @@
 					<div class="input-wrap">
 						<input
 							id="connect:host"
+							v-model="defaults.host"
 							class="input"
 							name="host"
-							:value="defaults.host"
 							aria-label="Server address"
 							maxlength="255"
 							required
@@ -41,13 +41,12 @@
 						<span id="connect:portseparator">:</span>
 						<input
 							id="connect:port"
-							ref="serverPort"
+							v-model="defaults.port"
 							class="input"
 							type="number"
 							min="1"
 							max="65535"
 							name="port"
-							:value="defaults.port"
 							aria-label="Server port"
 						/>
 					</div>
@@ -74,11 +73,10 @@
 					<div class="input-wrap">
 						<label class="tls">
 							<input
+								v-model="defaults.tls"
 								type="checkbox"
 								name="tls"
-								:checked="defaults.tls ? true : false"
-								:disabled="defaults.hasSTSPolicy ? true : false"
-								@change="onSecureChanged"
+								:disabled="defaults.hasSTSPolicy"
 							/>
 							Use secure connection (TLS)
 							<span
@@ -90,9 +88,9 @@
 						</label>
 						<label class="tls">
 							<input
+								v-model="defaults.rejectUnauthorized"
 								type="checkbox"
 								name="rejectUnauthorized"
-								:checked="defaults.rejectUnauthorized ? true : false"
 							/>
 							Only allow trusted certificates
 						</label>
@@ -105,10 +103,10 @@
 				<label for="connect:nick">Nick</label>
 				<input
 					id="connect:nick"
+					v-model="defaults.nick"
 					class="input nick"
 					name="nick"
 					pattern="[^\s:!@]+"
-					:value="defaults.nick"
 					maxlength="100"
 					required
 					@input="onNickChanged"
@@ -120,9 +118,9 @@
 					<input
 						id="connect:username"
 						ref="usernameInput"
+						v-model="defaults.username"
 						class="input username"
 						name="username"
-						:value="defaults.username"
 						maxlength="100"
 					/>
 				</div>
@@ -131,28 +129,44 @@
 				<label for="connect:realname">Real name</label>
 				<input
 					id="connect:realname"
+					v-model="defaults.realname"
 					class="input"
 					name="realname"
-					:value="defaults.realname"
 					maxlength="300"
 				/>
 			</div>
-			<template v-if="defaults.uuid">
+			<template v-if="defaults.uuid && !$store.state.serverConfiguration.public">
 				<div class="connect-row">
-					<label for="connect:commands">Commands</label>
+					<label for="connect:commands">
+						Commands
+						<span
+							class="tooltipped tooltipped-ne tooltipped-no-delay"
+							aria-label="One /command per line.
+Each command will be executed in
+the server tab on new connection"
+						>
+							<button class="extra-help" />
+						</span>
+					</label>
 					<textarea
 						id="connect:commands"
+						ref="commandsInput"
+						:value="defaults.commands ? defaults.commands.join('\n') : ''"
 						class="input"
 						name="commands"
-						placeholder="One /command per line, each command will be executed in the server tab on new connection"
-						:value="defaults.commands ? defaults.commands.join('\n') : ''"
+						@input="resizeCommandsInput"
 					/>
 				</div>
 			</template>
-			<template v-else>
+			<template v-else-if="!defaults.uuid">
 				<div class="connect-row">
 					<label for="connect:channels">Channels</label>
-					<input id="connect:channels" class="input" name="join" :value="defaults.join" />
+					<input
+						id="connect:channels"
+						v-model="defaults.join"
+						class="input"
+						name="join"
+					/>
 				</div>
 			</template>
 
@@ -175,6 +189,7 @@
 						>
 							<input
 								id="connect:password"
+								ref="publicPassword"
 								v-model="defaults.password"
 								class="input"
 								:type="slotProps.isVisible ? 'text' : 'password'"
@@ -229,7 +244,7 @@
 						<label for="connect:username">Account</label>
 						<input
 							id="connect:saslAccount"
-							:value="defaults.saslAccount"
+							v-model="defaults.saslAccount"
 							class="input"
 							name="saslAccount"
 							maxlength="100"
@@ -244,7 +259,7 @@
 						>
 							<input
 								id="connect:saslPassword"
-								:value="defaults.saslPassword"
+								v-model="defaults.saslPassword"
 								class="input"
 								:type="slotProps.isVisible ? 'text' : 'password'"
 								name="saslPassword"
@@ -326,6 +341,26 @@ export default {
 			displayPasswordField: false,
 		};
 	},
+	watch: {
+		displayPasswordField(value) {
+			if (value) {
+				this.$nextTick(() => this.$refs.publicPassword.focus());
+			}
+		},
+		"defaults.commands"() {
+			this.$nextTick(this.resizeCommandsInput);
+		},
+		"defaults.tls"(isSecureChecked) {
+			const ports = [6667, 6697];
+			const newPort = isSecureChecked ? 0 : 1;
+
+			// If you disable TLS and current port is 6697,
+			// set it to 6667, and vice versa
+			if (this.defaults.port === ports[newPort]) {
+				this.defaults.port = ports[1 - newPort];
+			}
+		},
+	},
 	methods: {
 		setSaslAuth(type) {
 			this.defaults.sasl = type;
@@ -345,16 +380,6 @@ export default {
 
 			this.previousUsername = event.target.value;
 		},
-		onSecureChanged(event) {
-			const ports = ["6667", "6697"];
-			const newPort = event.target.checked ? 0 : 1;
-
-			// If you disable TLS and current port is 6697,
-			// set it to 6667, and vice versa
-			if (this.$refs.serverPort.value === ports[newPort]) {
-				this.$refs.serverPort.value = ports[1 - newPort];
-			}
-		},
 		onSubmit(event) {
 			const formData = new FormData(event.target);
 			const data = {};
@@ -365,6 +390,18 @@ export default {
 
 			this.handleSubmit(data);
 		},
+		resizeCommandsInput() {
+			if (!this.$refs.commandsInput) {
+				return;
+			}
+
+			// Reset height first so it can down size
+			this.$refs.commandsInput.style.height = "";
+
+			// 2 pixels to account for the border
+			this.$refs.commandsInput.style.height =
+				Math.ceil(this.$refs.commandsInput.scrollHeight + 2) + "px";
+		},
 	},
 };
 </script>

client/components/Windows/Settings.vue

@@ -481,6 +481,12 @@ This may break orientation if your browser does not support that."
 	</div>
 </template>
 
+<style>
+textarea#user-specified-css-input {
+	height: 100px;
+}
+</style>
+
 <script>
 import socket from "../../js/socket";
 import webpush from "../../js/webpush";

client/css/style.css

@@ -288,6 +288,7 @@ p {
 .channel-list-item::before,
 #footer .icon,
 #chat .count::before,
+#connect .extra-help,
 #settings .extra-help,
 #settings #play::before,
 #form #upload::before,
@@ -507,6 +508,7 @@ p {
 	line-height: 45px;
 }
 
+#connect .extra-help::before,
 #settings .extra-help::before {
 	content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
 }
@@ -938,7 +940,6 @@ background on hover (unless active) */
 
 textarea.input {
 	resize: vertical;
-	height: 100px;
 	min-height: 35px;
 	padding: 6px 10px;
 	line-height: 1.5;
@@ -1874,6 +1875,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-right: 6px;
 }
 
+#connect .extra-help,
 #settings .extra-help {
 	cursor: help;
 }