working on flashmessages

resources/js/Layouts/LoginLayout.vue

@@ -1,9 +1,7 @@
 <template>
     <main class="bg-slate-100 flex justify-center h-screen">
         <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
-            <n-message-provider>
                 <slot></slot>
-            </n-message-provider>
         </div>
     </main>
-</template>
+</template>

resources/js/components/MainNav.vue

@@ -1,5 +1,10 @@
 <template>
-    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
+    <n-menu 
+        v-model:value="activeKey" 
+        mode="horizontal" 
+        :options="menuOptions" 
+        class="-mx-4"
+    />
 </template>
 
 <script setup>
@@ -12,47 +17,51 @@
         LogOutFilled as Logout
     } from '@vicons/material'
 
-    const { request } = usePage().props
+    const { request, isAdmin } = usePage().props
     const activeKey = ref(request.url)
 
-    const menuOptions = ref([
-        {
-            label: () =>
-                h(
-                    Link, {
-                        href: "/events",
-                        methode: "get"
-                    },
-                    "Veranstaltungen"
-                ),
-                key: '/events',
-                icon: renderIcon(Events)
-        },
-        {
-            label: () => 
-                h(
-                    Link, {
-                        href: "/users",
-                        method: "get"
-                    },
-                    "Benutzer"
-                ),
-                key: '/users',
-                icon: renderIcon(Users)
-        },
-        {
-            label: () =>
-                h(
-                    Link, {
-                        href: "/login",
-                        method: "get"
-                    },
-                    "Abmelden"
-                ),
-                key: '/logout',
-                icon: renderIcon(Logout)
-        }
-    ])
+    const menuOptions = ref([])
+    menuOptions.value.push({
+        label: () =>
+            h(
+                Link, {
+                    href: "/events",
+                    methode: "get"
+                },
+                () => "Veranstaltungen"
+            ),
+            key: '/events',
+            icon: renderIcon(Events)
+    })
+
+    if(isAdmin) menuOptions.value.push({
+        label: () => 
+            h(
+                Link, {
+                    href: "/users",
+                    method: "get"
+                },
+                () => "Benutzer"
+            ),
+            key: '/users',
+            icon: renderIcon(Users)
+    })
+
+    menuOptions.value.push({
+        label: () =>
+            h(
+                Link, {
+                    href: "/logout",
+                    method: "post",
+                    as: "button"
+                },
+                () => "Abmelden"
+            ),
+            key: '/logout',
+            icon: renderIcon(Logout)
+    })
+
+    
 
     function renderIcon(icon) {
         return () => h(NIcon, null, { default: () => h(icon) })

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)
         })