From 729e0fb6491f8adaa575292c1b39f00d06a0379d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Sat, 31 Aug 2024 23:50:34 +0200
Subject: [PATCH] Show error upon failed attempt to log in

---
 .../assets/js/prototype/screens/Login.vue     | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
index 26218354..45bf9a50 100644
--- a/resources/assets/js/prototype/screens/Login.vue
+++ b/resources/assets/js/prototype/screens/Login.vue
@@ -1,11 +1,12 @@
 <script setup>
 import axios from 'axios';
-import { Loader2 } from 'lucide-vue';
-import { getCurrentInstance, ref } from 'vue';
+import { XCircle, Loader2 } from 'lucide-vue';
+import { getCurrentInstance, ref, watch } from 'vue';
 
 const router = getCurrentInstance().proxy.$router;
 
 const isBusy = ref(false);
+const showError = ref(false);
 const email = ref('');
 const password = ref('');
 
@@ -29,18 +30,24 @@ const logIn = () => {
 
             if (json.error) {
                 isBusy.value = false;
+                showError.value = true;
                 password.value = '';
-
-                alert('Unable to log in');
             }
         })
         .catch(() => {
             isBusy.value = false;
+            showError.value = true;
             password.value = '';
-
-            alert('Unable to log in');
         });
 };
+
+watch(showError, value => {
+    if (value === true) {
+        setTimeout(() => {
+            showError.value = false;
+        }, 5000);
+    }
+});
 </script>
 
 <template>
@@ -64,5 +71,11 @@ const logIn = () => {
             </div>
             <div class="mt-5 text-sm text-center dark:text-white">{{ versionNumber }}</div>
         </div>
+        <div v-if="showError" class="absolute top-0 left-0 right-0 flex">
+            <div class="mt-10 mx-auto py-3 px-5 flex bg-white border border-gray-200 rounded-lg shadow-sm">
+                <XCircle class="text-red-600" :size="20" />
+                <div class="ml-3 text-sm">Unable to log in</div>
+            </div>
+        </div>
     </div>
 </template>