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

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

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