fmartingr
/
shiori
mirror of https://github.com/fmartingr/shiori.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix login autofill 

Add <form> element, as some browsers won't autofill fields
not contained in form.

Remove username and password bindings, and explicitly read
inputs instead. Some browsers do not fire onChange events
when a field is autofilled for security reasons, so Vue
bindings don't register the change.

https://github.com/facebook/react/issues/1159#issuecomment-506584346
This commit is contained in:
Dean Jackson 2019-12-13 08:27:21 +01:00
parent 9f7c8bf6cb
commit a5cb2c6e40
2 changed files with 88 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
internal/view/login.html
View File

@ -26,25 +26,27 @@
<div id="login-scene" :class="{night: nightMode}"> <div id="login-scene" :class="{night: nightMode}">
<p class="error-message" v-if="error !== ''">{{error}}</p> <p class="error-message" v-if="error !== ''">{{error}}</p>
<div id="login-box"> <div id="login-box">
<div id="logo-area"> <form @submit.prevent="login">
<p id="logo"> <div id="logo-area">
<span>栞</span>shiori <p id="logo">
</p> <span>栞</span>shiori
<p id="tagline">simple bookmark manager</p> </p>
</div> <p id="tagline">simple bookmark manager</p>
<div id="input-area"> </div>
<label for="username">Username: </label> <div id="input-area">
<input type="text" name="username" v-model.trim="username" placeholder="Username" tabindex="1"> <label for="username">Username: </label>
<label for="password">Password: </label> <input id="username" type="text" name="username" placeholder="Username" tabindex="1">
<input type="password" name="password" v-model.trim="password" placeholder="Password" tabindex="2" @keyup.enter="login"> <label for="password">Password: </label>
<label class="checkbox-field"><input type="checkbox" name="remember" v-model="remember" tabindex="3">Remember me</label> <input id="password" type="password" name="password" placeholder="Password" tabindex="2" @keyup.enter="login">
</div> <label class="checkbox-field"><input type="checkbox" name="remember" v-model="remember" tabindex="3">Remember me</label>
<div id="button-area"> </div>
<a v-if="loading"> <div id="button-area">
<i class="fas fa-fw fa-spinner fa-spin"></i> <a v-if="loading">
</a> <i class="fas fa-fw fa-spinner fa-spin"></i>
<a v-else class="button" tabindex="4" @click="login" @keyup.enter="login">Log In</a> </a>
</div> <a v-else class="button" tabindex="4" @click="login" @keyup.enter="login">Log In</a>
</div>
</form>
</div> </div>
</div> </div>
@ -72,6 +74,10 @@
} }
}, },
login() { login() {
// needed to work around autofill issue
// https://github.com/facebook/react/issues/1159#issuecomment-506584346
this.username = document.querySelector('#username').value;
this.password = document.querySelector('#password').value;
// Validate input // Validate input
if (this.username === "") { if (this.username === "") {
this.error = "Username must not empty"; this.error = "Username must not empty";
@ -139,4 +145,4 @@
</script> </script>
</body> </body>
</html> </html>

124
internal/webserver/assets-prod.go
View File

File diff suppressed because one or more lines are too long