From 8df5b6eb76f884203217a4b4029794ed893b0c30 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 5 Nov 2024 20:21:52 +0100
Subject: [PATCH] #239: Add loading indicator to password reset submit button
 for better UX

---
 .../screens/partials/login/ResetPasswordModal.vue  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/screens/partials/login/ResetPasswordModal.vue b/src/components/screens/partials/login/ResetPasswordModal.vue
index 75568ce..1a0a650 100644
--- a/src/components/screens/partials/login/ResetPasswordModal.vue
+++ b/src/components/screens/partials/login/ResetPasswordModal.vue
@@ -14,7 +14,13 @@
           </div>
           <div class="grid grid-flow-col justify-stretch gap-4">
             <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click.stop="() => emit('close')">Cancel</button>
-            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit">Send mail</button>
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-flex items-center justify-center" type="submit">
+              <svg v-if="isLoading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Send mail
+            </button>
           </div>
         </form>
       </div>
@@ -31,6 +37,7 @@ import { useGameStore } from '@/stores/gameStore'
 const emit = defineEmits(['close'])
 
 const gameStore = useGameStore()
+const isLoading = ref(false)
 const email = ref('')
 const resetPasswordError = ref('')
 
@@ -41,11 +48,14 @@ async function resetPasswordFunc() {
     return
   }
 
+  isLoading.value = true
+
   // send reset password event to server
   const response = await resetPassword(email.value)
 
   if (response.success === undefined) {
     resetPasswordError.value = response.error
+    isLoading.value = false
     return
   }
 
@@ -54,6 +64,8 @@ async function resetPasswordFunc() {
     message: 'Password reset email sent'
   })
 
+  isLoading.value = false
+
   emit('close')
 }
 </script>