psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

added hinge animation when login fails

Browse source
This commit is contained in:
Paul Wilde 2023-03-17 15:09:09 +00:00
parent bdf42122f7
commit a5b3970d7f
1 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/views/LoginPage.vue
View file

@ -1,14 +1,15 @@
<template>
<v-card width="500" min-height="350"
class="mx-auto my-12"
id="login-box"
title="Welcome!"
subtitle="Please Log In">
<v-form>
<v-responsive class="mx-auto" max-width="475">
<v-text-field label="Username"
@keyup.enter="submitLogin"
clearable
v-model="user.email"></v-text-field>
@keyup.enter="submitLogin"
clearable
v-model="user.email"></v-text-field>
<v-text-field label="Password"
@keyup.enter="submitLogin"
v-model="user.password" clearable
@ -34,6 +35,7 @@ export default {
password: ""
},
error: "",
error_count: 0,
logging_in: false
}
},
@ -61,14 +63,27 @@ export default {
}
} else {
this.error = "Login failed. Invalid username or password."
this.error_count += 1
}
})
.catch(error => {
console.log(error)
this.error = "Login failed. Invalid username or password."
this.error_count += 1
})
.finally(() => {
console.log(this.error_count)
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
}
})
}
}