From 08f45eabb25ac33b4f14f7911138431c0c6d83d6 Mon Sep 17 00:00:00 2001
From: Nachtalb <info@nachtalb.io>
Date: Sun, 4 Apr 2021 03:28:13 +0200
Subject: [PATCH] Restrict what the browser should try to autocomplete

Browsers often autocomplete into wrong fields. Eg. wanting to put the password in a fields in the settings screen and then use a sudo random other fields for username etc.
This is rather annoying and can break someones configuration, thus we should only enable it on fields where it somewhat makes sense (name, server & password fields).
---
 client/components/NetworkForm.vue      |  2 ++
 client/components/Windows/Settings.vue | 31 ++++++++++++++++----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/client/components/NetworkForm.vue b/client/components/NetworkForm.vue
index cc9820b5..d14f307e 100644
--- a/client/components/NetworkForm.vue
+++ b/client/components/NetworkForm.vue
@@ -172,6 +172,7 @@
 				<input
 					id="connect:leaveMessage"
 					v-model="defaults.leaveMessage"
+					autocomplete="off"
 					class="input"
 					name="leaveMessage"
 					placeholder="The Lounge - https://thelounge.chat"
@@ -193,6 +194,7 @@ the server tab on new connection"
 					<textarea
 						id="connect:commands"
 						ref="commandsInput"
+						autocomplete="off"
 						:value="defaults.commands ? defaults.commands.join('\n') : ''"
 						class="input"
 						name="commands"
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index 81bec2dd..0ce2cf06 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -3,7 +3,13 @@
 		<div class="header">
 			<SidebarToggle />
 		</div>
-		<form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
+		<form
+			ref="settingsForm"
+			class="container"
+			autocomplete="off"
+			@change="onChange"
+			@submit.prevent
+		>
 			<h1 class="title">Settings</h1>
 
 			<div>
@@ -359,7 +365,7 @@ This may break orientation if your browser does not support that."
 						Custom highlights
 						<span
 							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="If a message contains any of these comma-separated 
+							aria-label="If a message contains any of these comma-separated
 expressions, it will trigger a highlight."
 						>
 							<button class="extra-help" />
@@ -382,8 +388,8 @@ expressions, it will trigger a highlight."
 						Highlight exceptions
 						<span
 							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="If a message contains any of these comma-separated 
-expressions, it will not trigger a highlight even if it contains 
+							aria-label="If a message contains any of these comma-separated
+expressions, it will not trigger a highlight even if it contains
 your nickname or expressions defined in custom highlights."
 						>
 							<button class="extra-help" />
@@ -411,10 +417,11 @@ your nickname or expressions defined in custom highlights."
 			>
 				<h2 id="label-change-password">Change password</h2>
 				<div class="password-container">
-					<label for="old_password_input" class="sr-only"> Enter current password </label>
+					<label for="current-password" class="sr-only"> Enter current password </label>
 					<RevealPassword v-slot:default="slotProps">
 						<input
-							id="old_password_input"
+							id="current-password"
+							autocomplete="current-password"
 							:type="slotProps.isVisible ? 'text' : 'password'"
 							name="old_password"
 							class="input"
@@ -423,26 +430,26 @@ your nickname or expressions defined in custom highlights."
 					</RevealPassword>
 				</div>
 				<div class="password-container">
-					<label for="new_password_input" class="sr-only">
-						Enter desired new password
-					</label>
+					<label for="new-password" class="sr-only"> Enter desired new password </label>
 					<RevealPassword v-slot:default="slotProps">
 						<input
-							id="new_password_input"
+							id="new-password"
 							:type="slotProps.isVisible ? 'text' : 'password'"
 							name="new_password"
+							autocomplete="new-password"
 							class="input"
 							placeholder="Enter desired new password"
 						/>
 					</RevealPassword>
 				</div>
 				<div class="password-container">
-					<label for="verify_password_input" class="sr-only"> Repeat new password </label>
+					<label for="new-password-verify" class="sr-only"> Repeat new password </label>
 					<RevealPassword v-slot:default="slotProps">
 						<input
-							id="verify_password_input"
+							id="new-password-verify"
 							:type="slotProps.isVisible ? 'text' : 'password'"
 							name="verify_password"
+							autocomplete="new-password"
 							class="input"
 							placeholder="Repeat new password"
 						/>