From 27e2839f4cffdd04a7cd8862cca0344a9c42c315 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 2 Apr 2020 21:53:18 +0200
Subject: [PATCH] Work around browsers preventing Vue bindings from working
 with autofill (Fixes #78)

---
 src/components/user/Login.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/user/Login.vue b/src/components/user/Login.vue
index 1c4031985..13607c435 100644
--- a/src/components/user/Login.vue
+++ b/src/components/user/Login.vue
@@ -9,13 +9,13 @@
 				<div class="field">
 					<label class="label" for="username">Username</label>
 					<div class="control">
-						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" v-model="credentials.username" required/>
+						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" ref="username" required/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="password">Password</label>
 					<div class="control">
-						<input type="password" class="input" id="password" name="password" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
+						<input type="password" class="input" id="password" name="password" placeholder="e.g. ••••••••••••" ref="password" required/>
 					</div>
 				</div>
 
@@ -43,10 +43,6 @@
 	export default {
 		data() {
 			return {
-				credentials: {
-					username: '',
-					password: ''
-				},
 				errorMsg: '',
 				confirmedEmailSuccess: false,
 				loading: false
@@ -79,9 +75,12 @@
 			submit() {
 				this.loading = true
 				this.errorMsg = ''
-				let credentials = {
-					username: this.credentials.username,
-					password: this.credentials.password
+				// Some browsers prevent Vue bindings from working with autofilled values.
+				// To work around this, we're manually getting the values here instead of relying on vue bindings.
+				// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
+				const credentials = {
+					username: this.$refs.username.value,
+					password: this.$refs.password.value,
 				}
 
 				auth.login(this, credentials, 'home')