working on flashmessages

resources/js/pages/Login.vue

@@ -1,5 +1,9 @@
 <template>
-  
+    <n-message-provider>
+        <FlashMessages 
+            :messages="props.flashMessages"
+        />
+    </n-message-provider>
     <n-form  
         label-placement="top"
         :model="form"
@@ -44,14 +48,12 @@
 
 <script setup>
     import { ref, reactive, watch } from 'vue'
-    import { useMessage } from 'naive-ui'
     import { router } from '@inertiajs/vue3'
     import LoginLayout from '@/layouts/LoginLayout.vue'
+    import FlashMessages from '@/components/FlashMessages'
 
     defineOptions({ layout: LoginLayout })
-    const message = useMessage()
-    const props = defineProps(['errors'])
-    const flashErrors = ref(props.errors)
+    const props = defineProps(['flashMessages'])
 
     const form = ref({
         username: '',
@@ -73,16 +75,6 @@
         }
     })
 
-    watch(props, async(newVal, oldVal) => {
-        flashErrors.value = props.errors
-
-        if(flashErrors.value?.login) {
-            message.error(translateLoginError(flashErrors.value.login),{
-                closable: true
-            })
-        }
-    })
-
     function translateLoginError(errorMsg) {
         switch(errorMsg.split(":")[0]) {
             case 'E_INVALID_AUTH_PASSWORD':
@@ -93,7 +85,6 @@
     }
 
     function onClickLogin(){
-        flashErrors.value = null
         formRef.value?.validate((errors) => {
             if(!errors) router.post('login', form.value)
         })