psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 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> <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
}
}) })
} }
} }