From 359f3992da5f65bfaca107f025aea7b1d2aebb7b 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:34:10 +0200
Subject: [PATCH] Show spinner whilst attempting to log in

---
 resources/assets/js/prototype/screens/Login.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
index cd45c930..26218354 100644
--- a/resources/assets/js/prototype/screens/Login.vue
+++ b/resources/assets/js/prototype/screens/Login.vue
@@ -1,13 +1,17 @@
 <script setup>
 import axios from 'axios';
+import { Loader2 } from 'lucide-vue';
 import { getCurrentInstance, ref } from 'vue';
 
 const router = getCurrentInstance().proxy.$router;
 
+const isBusy = ref(false);
 const email = ref('');
 const password = ref('');
 
 const logIn = () => {
+    isBusy.value = true;
+
     axios
         .post('/api/log-in', { email: email.value, password: password.value })
         .then(response => {
@@ -24,10 +28,16 @@ const logIn = () => {
             }
 
             if (json.error) {
+                isBusy.value = false;
+                password.value = '';
+
                 alert('Unable to log in');
             }
         })
         .catch(() => {
+            isBusy.value = false;
+            password.value = '';
+
             alert('Unable to log in');
         });
 };
@@ -45,7 +55,12 @@ const logIn = () => {
                     <label class="block mb-2 text-sm dark:text-white">{{ $t('password') }}</label>
                     <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="password" v-model="password" @keyup.enter="logIn" />
                 </div>
-                <button class="w-full py-3 text-sm text-white bg-gray-900 dark:bg-gray-950 rounded-lg" @click="logIn">{{ $t('logIn') }}</button>
+                <button class="w-full py-3 text-sm text-white bg-gray-900 dark:bg-gray-950 rounded-lg" @click="logIn">
+                    <span v-if="!isBusy">{{ $t('logIn') }}</span>
+                    <div v-if="isBusy" class="flex justify-center h-5">
+                        <Loader2 class="animate-spin" :size="18" :strokeWidth="2.4" />
+                    </div>
+                </button>
             </div>
             <div class="mt-5 text-sm text-center dark:text-white">{{ versionNumber }}</div>
         </div>