implemented some login stuff.

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"
-        ref="formRef"
+        :model="form"
+        @submit.prevent="onClickLogin"
         :rules="rules"
+        ref="formRef"
     >
-        <n-form-item label="Benutzername" path="username">
-            <n-input v-model:value="formValue.username" placeholder="Benutzername" />
+        <n-form-item 
+            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 formValue = reactive({
+    const form = ref({
         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>