From c5326e87958b1e99ca9405da5c8d17e3f45c983c Mon Sep 17 00:00:00 2001
From: Reto Brunner <reto@slightlybroken.com>
Date: Sun, 18 Jun 2023 15:12:41 +0200
Subject: [PATCH] Sign in: use v-model

There's no need to mess with DOM elements, we can use the normal
v-model approach for both username and password
---
 client/components/Windows/SignIn.vue | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/client/components/Windows/SignIn.vue b/client/components/Windows/SignIn.vue
index 30963206..2145cf0e 100644
--- a/client/components/Windows/SignIn.vue
+++ b/client/components/Windows/SignIn.vue
@@ -19,14 +19,13 @@
 			<label for="signin-username">Username</label>
 			<input
 				id="signin-username"
-				ref="username"
+				v-model="username"
 				class="input"
 				type="text"
 				name="username"
 				autocapitalize="none"
 				autocorrect="off"
 				autocomplete="username"
-				:value="getStoredUser()"
 				required
 				autofocus
 			/>
@@ -36,9 +35,8 @@
 				<RevealPassword v-slot:default="slotProps">
 					<input
 						id="signin-password"
-						ref="password"
+						v-model="password"
 						:type="slotProps.isVisible ? 'text' : 'password'"
-						name="password"
 						class="input"
 						autocapitalize="none"
 						autocorrect="off"
@@ -70,8 +68,8 @@ export default defineComponent({
 		const inFlight = ref(false);
 		const errorShown = ref(false);
 
-		const username = ref<HTMLInputElement | null>(null);
-		const password = ref<HTMLInputElement | null>(null);
+		const username = ref(storage.get("user") || "");
+		const password = ref("");
 
 		const onAuthFailed = () => {
 			inFlight.value = false;
@@ -89,8 +87,8 @@ export default defineComponent({
 			errorShown.value = false;
 
 			const values = {
-				user: username.value?.value,
-				password: password.value?.value,
+				user: username.value,
+				password: password.value,
 			};
 
 			storage.set("user", values.user);
@@ -98,10 +96,6 @@ export default defineComponent({
 			socket.emit("auth:perform", values);
 		};
 
-		const getStoredUser = () => {
-			return storage.get("user");
-		};
-
 		onMounted(() => {
 			socket.on("auth:failed", onAuthFailed);
 		});
@@ -116,7 +110,6 @@ export default defineComponent({
 			username,
 			password,
 			onSubmit,
-			getStoredUser,
 		};
 	},
 });