Replace the local Modal with 2fauth/ui Modal component

resources/js/app.js

@@ -42,7 +42,6 @@ app.use(Notifications)
 import ResponsiveWidthWrapper from '@/layouts/ResponsiveWidthWrapper.vue'
 import FormWrapper from '@/layouts/FormWrapper.vue'
 import Footer from '@/layouts/Footer.vue'
-import Modal from '@/layouts/Modal.vue'
 import Kicker           from '@/components/Kicker.vue'
 
 import {
@@ -57,6 +56,10 @@ import {
     VueButton
 } from '@2fauth/formcontrols'
 
+import {
+    Modal
+} from '@2fauth/ui'
+
 app
     .component('FontAwesomeIcon', FontAwesomeIcon)
     .component('ResponsiveWidthWrapper', ResponsiveWidthWrapper)

resources/js/layouts/Modal.vue

@@ -1,56 +0,0 @@
-<script setup>
-    const { notify }  = useNotification()
-
-    const props = defineProps({
-        modelValue: Boolean,
-        closable: {
-            type: Boolean,
-            default: true
-        },
-        isFullHeight:  {
-            type: Boolean,
-            default: false
-        }
-    })
-
-    const emit = defineEmits(['update:modelValue'])
-
-    const isActive = computed({
-        get() {
-            return props.modelValue
-        },
-        set(value) {
-            emit('update:modelValue', value)
-        }
-    })
-
-    function closeModal(event) {
-        notify({ clean: true })
-        isActive.value = false
-    }
-</script>
-
-<template>
-    <div class="modal modal-otp" v-bind:class="{ 'is-active': isActive }">
-        <div class="modal-background" @click.stop="closeModal"></div>
-        <div v-if="isFullHeight" class="modal-content modal-with-footer">
-            <div class="modal-slot p-4 has-text-centered">
-                <slot></slot>
-            </div>
-        </div>
-        <div v-else class="modal-content modal-with-footer">
-            <section class="section">
-                <div class="columns is-centered">
-                    <div class="column is-three-quarters">
-                        <div class="modal-slot box has-text-centered is-shadowless">
-                            <slot></slot>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-        <VueFooter v-if="props.closable" :showButtons="true" :internalFooterType="'modal'">
-            <NavigationButton action="close" :useLinkTag="false" @closed="closeModal" />
-        </VueFooter>
-    </div>
-</template>

resources/js/views/Error.vue

@@ -8,13 +8,6 @@
     const showModal = ref(true)
     const showDebug = computed(() => process.env.NODE_ENV === 'development')
 
-    const props = defineProps({
-        closable: {
-            type: Boolean,
-            default: true
-        }
-    })
-
     watch(showModal, (val) => {
         if (val == false) {
             exit()
@@ -40,7 +33,7 @@
 
 <template>
     <div>
-        <modal v-model="showModal" :closable="props.closable">
+        <Modal v-model="showModal">
             <div class="error-message" v-if="$route.name == '404' || $route.name == 'notFound'">
                 <p class="error-404"></p>
                 <p>{{ $t('message.resource_not_found') }}</p>
@@ -52,6 +45,6 @@
                 <p v-if="errorHandler.originalMessage" class="has-text-grey-lighter">{{ errorHandler.originalMessage }}</p>
                 <p v-if="showDebug && errorHandler.debug" class="is-size-7 is-family-code pt-3"><br>{{ errorHandler.debug }}</p>
             </div>
-        </modal>
+        </Modal>
     </div>
 </template>

resources/js/views/twofaccounts/Capture.vue

@@ -215,7 +215,7 @@
             <NavigationButton action="cancel" :isCapture="true" :useLinkTag="false" @canceled="exitStream()" />
         </div>
     </div>
-    <modal v-model="showQrContent">
+    <Modal v-model="showQrContent">
         <QrContentDisplay :qrContent="form.uri" />
-    </modal>
+    </Modal>
 </template>

resources/js/views/twofaccounts/CreateUpdate.vue

@@ -607,7 +607,7 @@
                 </VueFooter>
             </form>
             <!-- modal -->
-            <modal v-model="ShowTwofaccountInModal">
+            <Modal v-model="ShowTwofaccountInModal">
                 <OtpDisplay
                     ref="OtpDisplayForAdvancedForm"
                     v-bind="form.data()"
@@ -615,12 +615,12 @@
                     @validation-error="mapDisplayerErrors"
                     @please-close-me="ShowTwofaccountInModal = false">
                 </OtpDisplay>
-            </modal>
+            </Modal>
         </FormWrapper>
         <!-- alternatives -->
-        <modal v-model="showAlternatives">
+        <Modal v-model="showAlternatives">
             <QrContentDisplay :qrContent="uri" />
-        </modal>
+        </Modal>
     </div>
     </UseColorMode>
 </template>

resources/js/views/twofaccounts/Import.vue

@@ -465,7 +465,7 @@
             </VueFooter>
         </ResponsiveWidthWrapper>
         <!-- modal -->
-        <modal v-model="showTwofaccountInModal">
+        <Modal v-model="showTwofaccountInModal">
             <OtpDisplay
                 ref="otpDisplay"
                 v-bind="form.data()"
@@ -473,7 +473,7 @@
                 @validation-error=""
                 @please-close-me="showTwofaccountInModal = false">
             </OtpDisplay>
-        </modal>
+        </Modal>
     </div>
     </UseColorMode>
 </template>