Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-09-20 06:11:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Login shaking

Browse source
This commit is contained in:
An Phan 2016-01-03 16:08:55 +08:00
parent ddc56c28d6
commit f51740fe3a
1 changed files with 33 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
resources/assets/js/components/auth/login-form.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<form @submit.prevent="login" :class="{ error: failed }"> <form @submit.prevent="login" :class="{ error: failed }">
<input v-model="email" type="email" name="email" placeholder="Email Address" autofocus required> <input v-model="email" type="email" placeholder="Email Address" autofocus required>
<input v-model="password" type="password" name="password" placeholder="Password" required> <input v-model="password" type="password" placeholder="Password" required>
<button type="submit">Log In</button> <button type="submit">Log In</button>
</form> </form>
</template> </template>
@ -20,8 +20,14 @@
methods: { methods: {
login() { login() {
this.failed = false;
userStore.login(this.email, this.password, () => { userStore.login(this.email, this.password, () => {
this.failed = false; this.failed = false;
// Reset the password so that the next login will have this field empty.
this.password = '';
this.$dispatch('user:loggedin'); this.$dispatch('user:loggedin');
}, () => { }, () => {
this.failed = true; this.failed = true;
@ -36,6 +42,30 @@
@import "resources/assets/sass/partials/_mixins.scss"; @import "resources/assets/sass/partials/_mixins.scss";
@import "resources/assets/sass/partials/_shared.scss"; @import "resources/assets/sass/partials/_shared.scss";
/**
* I like to move it move it
* I like to move it move it
* I like to move it move it
* You like to - move it!
*/
@keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
}
25%, 58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%, 100% {
-webkit-transform: translateX(0);
}
}
form { form {
width: 300px; width: 300px;
padding: 24px; padding: 24px;
@ -46,6 +76,7 @@
form.error { form.error {
border-color: #8e4947; border-color: #8e4947;
animation: shake .5s;
} }
form:before { form:before {