Set up a global notification handler & Error view & Modal component

resources/js_vue3/views/Error.vue

@@ -0,0 +1,41 @@
+<script setup>
+    import { useNotifyStore } from '@/stores/notify'
+    
+    const errorHandler = useNotifyStore()
+    const router = useRouter()
+    const route = useRoute()
+
+    const showModal = true
+    const showDebug = computed(() => process.env.NODE_ENV === 'development')
+
+    const props = defineProps({
+        closable: {
+            type: Boolean,
+            default: true
+        }
+    })
+
+    function exit() {
+        window.history.length > 1 && route.name !== '404' ? router.go(-1) : router.push({ name: 'accounts' })
+    }
+
+</script>
+
+<template>
+    <div class="error-message">
+        <modal v-model="showModal" :closable="props.closable" @modal-closed="exit">
+            <div class="error-message" v-if="$route.name == '404'">
+                <p class="error-404"></p>
+                <p>{{ $t('errors.resource_not_found') }}</p>
+            </div>
+            <div v-else>
+                <p class="error-generic"></p>
+                <p>{{ $t('errors.error_occured') }} </p>
+                <p v-if="errorHandler.message" class="has-text-grey-lighter">{{ errorHandler.message }}</p>
+                <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"><br>{{ errorHandler.debug }}
+                </p>
+            </div>
+        </modal>
+    </div>
+</template>

resources/js_vue3/views/auth/Login.vue

@@ -4,15 +4,16 @@
     // import { useStorage } from '@vueuse/core'
     import Form from '@/components/formElements/Form'
     import { useUserStore } from '@/stores/user'
+    import { useNotifyStore } from '@/stores/notify'
     import { useAppSettingsStore } from '@/stores/appSettings'
     // import { useRouter } from 'vue-router';
     // import { useNotification } from "@kyvg/vue3-notification";
     // import { trans } from 'laravel-vue-i18n';
 
     const $2fauth = inject('2fauth')
-    const { notify }  = useNotification()
     const router = useRouter()
     const user = useUserStore()
+    const notify = useNotifyStore()
     const appSettings = useAppSettingsStore()
     const showWebauthnForm = user.preferences.useWebauthnOnly ? true : useStorage($2fauth.prefix + 'showWebauthnForm', true) 
     const form = reactive(new Form({
@@ -43,10 +44,10 @@
         })
         .catch(error => {
             if( error.response.status === 401 ) {
-                notify({ type: 'is-danger', text: trans('auth.forms.authentication_failed'), duration:-1 })
+                notify.alert({text: trans('auth.forms.authentication_failed'), duration:5 })
             }
             else if( error.response.status !== 422 ) {
-                router.push({ name: 'genericError', params: { err: error.response } });
+                notify.error(error)
             }
         });
     }