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:29:39 +00:00
parent a5b3970d7f
commit b80bba3d3d
1 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/views/LoginPage.vue
View file

@ -14,10 +14,10 @@
@keyup.enter="submitLogin" @keyup.enter="submitLogin"
v-model="user.password" clearable v-model="user.password" clearable
type="password"></v-text-field> 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-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-responsive>
</v-form> </v-form>
</v-card> </v-card>
@ -34,13 +34,16 @@ export default {
email: "", email: "",
password: "" password: ""
}, },
error: "", show_error: false,
error_message: "",
error_count: 0, error_count: 0,
logging_in: false logging_in: false
} }
}, },
methods: { methods: {
submitLogin() { submitLogin() {
this.error_message = ""
this.show_error = false
let url = this.$api_url + "/users/login" let url = this.$api_url + "/users/login"
this.logging_in = true this.logging_in = true
console.log("Logging in...") console.log("Logging in...")
@ -62,28 +65,32 @@ export default {
window.location.href = '/' window.location.href = '/'
} }
} else { } else {
this.error = "Login failed. Invalid username or password." this.error_message = "Login failed. Invalid username or password."
this.error_count += 1 this.error_count += 1
} }
}) })
.catch(error => { .catch(error => {
console.log(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 this.error_count += 1
}) })
.finally(() => { .finally(() => {
console.log(this.error_count) setTimeout(() => {
this.logging_in = false if (this.error_message != ""){
if (this.error_count > 2) { this.show_error = true
let box = document.getElementById("login-box") }
box.classList.add("animate__animated") this.logging_in = false
box.classList.add("animate__hinge") if (this.error_count > 2) {
setTimeout(() => { let box = document.getElementById("login-box")
box.classList.add("animate__fadeInUp") box.classList.add("animate__animated")
box.classList.remove("animate__hinge") box.classList.add("animate__hinge")
},5000) setTimeout(() => {
this.error_count = 0 box.classList.add("animate__fadeInUp")
} box.classList.remove("animate__hinge")
},5000)
this.error_count = 0
}
},2000)
}) })
} }
} }