From b80bba3d3da30a17652b848623269807618058cc Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@paulwilde.uk>
Date: Fri, 17 Mar 2023 15:29:39 +0000
Subject: [PATCH] added hinge animation when login fails

---
 src/views/LoginPage.vue | 43 ++++++++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index 50c45a2..7f4591f 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -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)
                 })
         }
     }