From cca0dbaf998b1ffb9c0985ad971b764fdf5060cf Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 19 Oct 2023 11:48:01 +0200
Subject: [PATCH] Add various display modes to the Spinner component

---
 resources/js_vue3/components/Spinner.vue | 35 ++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/resources/js_vue3/components/Spinner.vue b/resources/js_vue3/components/Spinner.vue
index ee23d252..009eb34f 100644
--- a/resources/js_vue3/components/Spinner.vue
+++ b/resources/js_vue3/components/Spinner.vue
@@ -5,15 +5,46 @@
             type: String,
             default: 'inline'
         },
+        message: {
+            type: String,
+            default: 'commons.generating_otp'
+        }
     })
 </script>
 
 <template>
     <div v-if="isVisible">
-        <div v-if="type == 'inline'" class="has-text-centered mt-6">
+        <div v-if="type == 'fullscreen'" class="spinner-container">
+            <div class="spinner-wrapper">
+                <span id="icnSpinnerFull" class="is-size-1 spinner">
+                    <FontAwesomeIcon :icon="['fas', 'spinner']" spin />
+                </span>
+                <span>{{ $t(message) }}</span>
+            </div>
+        </div>
+        <FontAwesomeIcon v-else-if="type == 'raw'" :icon="['fas', 'spinner']" spin />
+        <div v-else class="has-text-centered mt-6">
             <span id="icnSpinner" class="is-size-4">
                 <FontAwesomeIcon :icon="['fas', 'spinner']" spin />
             </span>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.spinner-container {
+    text-align: center;
+    z-index: 100000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.spinner {
+    display: block;
+}
+</style>