implemented some login stuff.

app/Controllers/Http/AuthController.ts

@@ -3,10 +3,12 @@ import { schema } from '@ioc:Adonis/Core/Validator'
 import Logger from '@ioc:Adonis/Core/Logger'
 
 export default class AuthController {
-    public async login({ auth, request, session, response }: HttpContextContract){
+    public async login({ auth, request, response }: HttpContextContract){
         
-        const { username, password } = request.all() 
+        Logger.info("entering login")
-        /*const loginSchema = schema.create({
+        Logger.info(JSON.stringify(request.all()))
+
+        const loginSchema = schema.create({
             username: schema.string({trim: true}),
             password: schema.string()
         })
@@ -14,18 +16,12 @@ export default class AuthController {
         const { username, password } = await request.validate({
             schema: loginSchema,
             messages: {
-                required: 'This field is required'
+                required: 'This field is required' 
             }
-        })*/
+        })
 
-        try {
+        await auth.attempt(username, password)
-            await auth.attempt(username, password)
+        response.redirect().toRoute('events.index')
-
-            response.redirect('/events')
-        } catch (error) {
-            session.flash("notification", "Login fehlgeschlagen")
-            response.redirect("/")
-        }
     }
 
     public async logout({ auth, response }: HttpContextContract) {

app/Controllers/Http/UsersController.ts

@@ -1,16 +1,21 @@
 import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
 import User from 'App/Models/User'
+import Logger from '@ioc:Adonis/Core/Logger'
 
 export default class UsersController {
-  public async index({}: HttpContextContract) {
+  public async index({ auth, response, inertia }: HttpContextContract) {
 
+    if(auth.user?.isAdmin) {
+      return inertia.render('Users/Index')
+    }
+    else response.redirect().toRoute('events.index')
   }
 
   public async create({ auth, inertia }: HttpContextContract) {
     if(auth.user?.isAdmin) {
       inertia.render('Users/Create')
     } else {
-      inertia
+      
     }
   }
 

app/Exceptions/Handler.ts

@@ -15,6 +15,7 @@
 
 import Logger from '@ioc:Adonis/Core/Logger'
 import HttpExceptionHandler from '@ioc:Adonis/Core/HttpExceptionHandler'
+import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
 
 export default class ExceptionHandler extends HttpExceptionHandler {
   protected statusPages = {
@@ -26,4 +27,21 @@ export default class ExceptionHandler extends HttpExceptionHandler {
   constructor() {
     super(Logger)
   }
+
+  public async handle(error: any, ctx: HttpContextContract) {
+    const { session, response } = ctx;
+
+    /**
+     * Handle failed authentication attempt
+     */
+    if (['E_INVALID_AUTH_PASSWORD', 'E_INVALID_AUTH_UID'].includes(error.code)) {
+      session.flash('errors', { login: error.message });
+      return response.redirect().back();
+    }
+
+    /**
+     * Forward rest of the exceptions to the parent class
+     */
+    return super.handle(error, ctx);
+  }
 }

components.d.ts

@@ -7,10 +7,12 @@ 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']
     NInput: typeof import('naive-ui')['NInput']
     NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
   }
 }

resources/js/Layouts/BELayout.vue

@@ -1,7 +1,7 @@
 <template>
     <LoginLayout>
         <MainNav />
-        <slot />
+        <slot></slot>
 
     </LoginLayout>
 </template>

resources/js/Layouts/LoginLayout.vue

@@ -1,7 +1,9 @@
 <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">
-            <slot></slot>
+            <n-message-provider>
+                <slot></slot>
+            </n-message-provider>
         </div>
     </main>
 </template>

resources/js/components/MainNav.vue

@@ -4,7 +4,7 @@
 
 <script setup>
     import { Link, usePage } from '@inertiajs/vue3'
-    import { h, ref } from 'vue';
+    import { h, ref, watch } from 'vue';
     import { NIcon, NButton } from 'naive-ui'
     import {
         GroupsFilled as Users,
@@ -13,7 +13,6 @@
     } from '@vicons/material'
 
     const { request } = usePage().props
-
     const activeKey = ref(request.url)
 
     const menuOptions = ref([
@@ -30,7 +29,7 @@
                 icon: renderIcon(Events)
         },
         {
-            label: () =>
+            label: () => 
                 h(
                     Link, {
                         href: "/users",

resources/js/pages/Events/Index.vue

@@ -1,5 +1,7 @@
 <template>
-    
+    <div>
+        Bin in Events
+    </div>
 </template>
 
 <script setup>

resources/js/pages/Login.vue

@@ -2,42 +2,100 @@
   
     <n-form  
         label-placement="top"
-        :model="formValue"
+        :model="form"
-        ref="formRef"
+        @submit.prevent="onClickLogin"
         :rules="rules"
+        ref="formRef"
     >
-        <n-form-item label="Benutzername" path="username">
+        <n-form-item 
-            <n-input v-model:value="formValue.username" placeholder="Benutzername" />
+            label="Benutzername" 
+            path="username"
+        >
+            <n-input 
+                v-model:value="form.username" 
+                placeholder="Benutzername" 
+                @keydown.enter="onClickLogin"
+            />
         </n-form-item>
-        <n-form-item label="Passwort" path="password">
+
-            <n-input v-model:value="formValue.password" placeholder="Passwort"></n-input>
+        <n-form-item 
+            label="Passwort" 
+            path="password"
+        >
+            <n-input 
+                v-model:value="form.password" 
+                placeholder="Passwort"
+                @keydown.enter="onClickLogin"
+                type="password"
+                show-password-on="click"
+            />
         </n-form-item>
+
         <div class="flex justify-center">
-            <n-button class="bg-[#18A058]" type="success" @click="onClickLogin">Anmelden</n-button>
+            <n-button 
+                class="bg-[#18A058]" 
+                type="success" 
+                @click="onClickLogin"
+                :disabled="!form.password || !form.username"
+            >Anmelden</n-button>
         </div>
     </n-form>
-    <div>
-        {{ response }}
-    </div>
 </template>
 
 <script setup>
-    import { ref, reactive } from 'vue'
+    import { ref, reactive, watch } from 'vue'
+    import { useMessage } from 'naive-ui'
     import { router } from '@inertiajs/vue3'
     import LoginLayout from '@/layouts/LoginLayout.vue'
 
     defineOptions({ layout: LoginLayout })
-    const props = defineProps(['response'])
+    const message = useMessage()
+    const props = defineProps(['errors'])
+    const flashErrors = ref(props.errors)
 
-    const formRef = ref(null)
+    const form = ref({
-    const formValue = reactive({
         username: '',
         password: '',
     })
-    
+
-    const rules = ref(undefined)
+    const formRef = ref(null)
+
+    const rules = ref({
+        username: {
+            required: true,
+            message: "Benutzername erforderlich",
+            trigger: "input",
+        },
+        password: {
+            required: true,
+            message: "Passwort erforderlich",
+            trigger: "input",
+        }
+    })
+
+    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':
+                return "Falsches Passwort eingegeben."
+            case 'E_INVALID_AUTH_UID':
+                return "Benutzername nicht gefunden"
+        }
+    }
 
     function onClickLogin(){
-        router.post('/login', formValue)
+        flashErrors.value = null
+        formRef.value?.validate((errors) => {
+            if(!errors) router.post('login', form.value)
+        })
     }
 </script>

resources/js/pages/Users/Index.vue

@@ -1,5 +1,7 @@
 <template>
-
+ <div>
+    Bin in Users
+ </div>
 </template>
 
 <script setup>

start/routes.ts

@@ -23,7 +23,7 @@ import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
 
 Route.get('/', 'HomeController.index')
 
-Route.get('/login', async({inertia, response}: HttpContextContract) =>{
+Route.get('/login', async({inertia}: HttpContextContract) =>{
   return inertia.render('Login')
 })