added hinge animation when login fails
This commit is contained in:
parent
a5b3970d7f
commit
b80bba3d3d
1 changed files with 25 additions and 18 deletions
|
@ -14,10 +14,10 @@
|
|||
@keyup.enter="submitLogin"
|
||||
v-model="user.password" clearable
|
||||
type="password"></v-text-field>
|
||||
<v-banner v-if="error" color="error" icon="mdi-exclamation-thick" theme="dark">
|
||||
<v-banner-text>{{ error }}</v-banner-text>
|
||||
</v-banner>
|
||||
<v-btn color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
|
||||
<v-banner v-if="show_error" color="error" icon="mdi-exclamation-thick" theme="dark">
|
||||
<v-banner-text>{{ error_message }}</v-banner-text>
|
||||
</v-banner>
|
||||
</v-responsive>
|
||||
</v-form>
|
||||
</v-card>
|
||||
|
@ -34,13 +34,16 @@ export default {
|
|||
email: "",
|
||||
password: ""
|
||||
},
|
||||
error: "",
|
||||
show_error: false,
|
||||
error_message: "",
|
||||
error_count: 0,
|
||||
logging_in: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitLogin() {
|
||||
this.error_message = ""
|
||||
this.show_error = false
|
||||
let url = this.$api_url + "/users/login"
|
||||
this.logging_in = true
|
||||
console.log("Logging in...")
|
||||
|
@ -62,28 +65,32 @@ export default {
|
|||
window.location.href = '/'
|
||||
}
|
||||
} else {
|
||||
this.error = "Login failed. Invalid username or password."
|
||||
this.error_message = "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_message = "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
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (this.error_message != ""){
|
||||
this.show_error = true
|
||||
}
|
||||
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
|
||||
}
|
||||
},2000)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue