working on flashmessages

app/Controllers/Http/AuthController.ts

@@ -1,18 +1,16 @@
 import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
 import { schema } from '@ioc:Adonis/Core/Validator'
-import Logger from '@ioc:Adonis/Core/Logger'
 
 export default class AuthController {
-    public async login({ auth, request, response }: HttpContextContract){
-        
-        Logger.info("entering login")
-        Logger.info(JSON.stringify(request.all()))
+    public async login({ auth, request, response, session }: HttpContextContract){
+
 
         const loginSchema = schema.create({
             username: schema.string({trim: true}),
             password: schema.string()
         })
 
+
         const { username, password } = await request.validate({
             schema: loginSchema,
             messages: {
@@ -24,9 +22,14 @@ export default class AuthController {
         response.redirect().toRoute('events.index')
     }
 
-    public async logout({ auth, response }: HttpContextContract) {
+    public async logout({ auth, response, session }: HttpContextContract) {
         await auth.logout()
 
+        session.flash('errors', {
+            logout: 'test'
+        })
+
+
         response.redirect('/login')
     }
 }

components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    NAlert: typeof import('naive-ui')['NAlert']
     NButton: typeof import('naive-ui')['NButton']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']

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

start/inertia.ts

@@ -11,9 +11,8 @@
 import Inertia from '@ioc:EidelLev/Inertia'
 
 Inertia.share({
-  errors: ({session}) => {
-    return session.flashMessages.get('errors')
-  },
+  //errors: ({session}) => session.flashMessages.get('errors'),
   request: ({ request }) => request,
   isAdmin: ({ auth }) => auth.user?.isAdmin,
+  flashMessages: ({ session }) => session.flashMessages.all(),
 }).version(() => Inertia.manifestFile('public/assets/manifest.json'))

start/routes.ts

@@ -26,6 +26,7 @@ Route.get('/', 'HomeController.index')
 Route.get('/login', async({inertia}: HttpContextContract) =>{
   return inertia.render('Login')
 })
+Route.post('/logout', 'AuthController.logout')
 
 Route.post('login', 'AuthController.login')