Add various display modes to the Spinner component

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>
+</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>