added hinge animation when login fails
This commit is contained in:
parent
bdf42122f7
commit
a5b3970d7f
1 changed files with 18 additions and 3 deletions
|
@ -1,14 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card width="500" min-height="350"
|
<v-card width="500" min-height="350"
|
||||||
class="mx-auto my-12"
|
class="mx-auto my-12"
|
||||||
|
id="login-box"
|
||||||
title="Welcome!"
|
title="Welcome!"
|
||||||
subtitle="Please Log In">
|
subtitle="Please Log In">
|
||||||
<v-form>
|
<v-form>
|
||||||
<v-responsive class="mx-auto" max-width="475">
|
<v-responsive class="mx-auto" max-width="475">
|
||||||
<v-text-field label="Username"
|
<v-text-field label="Username"
|
||||||
@keyup.enter="submitLogin"
|
@keyup.enter="submitLogin"
|
||||||
clearable
|
clearable
|
||||||
v-model="user.email"></v-text-field>
|
v-model="user.email"></v-text-field>
|
||||||
<v-text-field label="Password"
|
<v-text-field label="Password"
|
||||||
@keyup.enter="submitLogin"
|
@keyup.enter="submitLogin"
|
||||||
v-model="user.password" clearable
|
v-model="user.password" clearable
|
||||||
|
@ -34,6 +35,7 @@ export default {
|
||||||
password: ""
|
password: ""
|
||||||
},
|
},
|
||||||
error: "",
|
error: "",
|
||||||
|
error_count: 0,
|
||||||
logging_in: false
|
logging_in: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -61,14 +63,27 @@ export default {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.error = "Login failed. Invalid username or password."
|
this.error = "Login failed. Invalid username or password."
|
||||||
|
this.error_count += 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
this.error = "Login failed. Invalid username or password."
|
this.error = "Login failed. Invalid username or password."
|
||||||
|
this.error_count += 1
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
console.log(this.error_count)
|
||||||
this.logging_in = false
|
this.logging_in = false
|
||||||
|
if (this.error_count > 2) {
|
||||||
|
let box = document.getElementById("login-box")
|
||||||
|
box.classList.add("animate__animated")
|
||||||
|
box.classList.add("animate__hinge")
|
||||||
|
setTimeout(() => {
|
||||||
|
box.classList.add("animate__fadeInUp")
|
||||||
|
box.classList.remove("animate__hinge")
|
||||||
|
},5000)
|
||||||
|
this.error_count = 0
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue