working on UserCreate form...

app/Controllers/Http/UsersController.ts

@@ -1,6 +1,7 @@
 import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
 import User from 'App/Models/User'
 import Database from '@ioc:Adonis/Lucid/Database'
+import { schema, rules } from '@ioc:Adonis/Core/Validator'
 
 export default class UsersController {
   public async index({ inertia, bouncer }: HttpContextContract) {
@@ -22,7 +23,40 @@ export default class UsersController {
     return inertia.render('Users/Create')
   }
 
-  public async store({}: HttpContextContract) {}
+  public async store({ bouncer, inertia, request }: HttpContextContract) {
+    await bouncer
+      .with('UserPolicy')
+      .authorize('store')
+
+    const newUserSchema = schema.create({
+      username: schema.string(
+        { trim: true },
+        [
+          rules.unique({ table: 'users', column: 'username' })
+        ]
+      ),
+      is_admin: schema.boolean(),
+      password: schema.string([
+        rules.confirmed("passwordRepeat")
+      ]),
+      password_repeat: schema.string(),
+    })
+    console.log(request.body())
+
+    const payload = await request.validate({ schema: newUserSchema })
+    console.log(payload)
+
+    if(request.qs().validate) {
+      console.log("darf ich jetzt einen user erstellen?")
+      await User.create({
+        username: payload.username,
+        isAdmin: payload.is_admin,
+        password: payload.password,
+      })
+
+      return inertia.render('Users')
+    }
+  }
 
   public async show({ bouncer, params, inertia }: HttpContextContract) {
     const queriedUser: User = await User.findByOrFail('id', params.id)

resources/js/Layouts/BELayout.vue

@@ -1,5 +1,5 @@
 <template>
-    <LoginLayout class="w-3/5">
+    <LoginLayout class="w-3/5 h-3/4">
         <MainNav />
         <slot></slot>
 

resources/js/components/Users/UserForm.vue

@@ -1,9 +1,11 @@
 <template>
     <n-form
         :model="userModel"
+        :rules="rules"
         label-placement="left"
         require-mark-placement="right-hanging"
         label-width="auto"
+        @submit.prevent="$emit('submit')"
     >
         <n-form-item label="Benutzername" path="username">
             <n-input 
@@ -21,25 +23,38 @@
                 show-password-on="mouseclick"
                 placeholder="Passwort"
                 v-model:value="userModel.password"
+                @input="handlePasswordInput"
             />
         </n-form-item>
 
-        <n-form-item>
+        <n-form-item label="Password wiederholen" path="password_repeat" ref="passwordRepeatRef">
             <n-input 
                 type="password"
+                :disabled="!userModel.password"
                 show-password-on="mouseclick"
                 placeholder="Passwort wiederholen"
                 v-model:value="userModel.password_repeat"
             />
         </n-form-item>
     </n-form>
+    <n-button
+    @click="validate"
+    >
+        validate
+    </n-button>
+    <div>
+        {{ userModel }}
+    </div>
 </template>
 
 <script setup>
+import { router } from '@inertiajs/vue3';
+import { reactive, ref } from 'vue'
 
-const props = defineProps({
+const props = defineProps(['userModel'])
-    userModel: Object
+const emit = defineEmits(['validateUsername'])
-})
+
+const passwordRepeatRef = ref(null)
 
 const rules = {
     username: [{
@@ -55,20 +70,41 @@ const rules = {
         message: "Wiederholtes Passwort ist erforderlich",
         trigger: ["input", "blur"],
     },{
-        validator: validatePassword,
+        validator: passwordStartsWith,
         message: "Passwörter stimmen nicht überein",
         trigger: "input",
     },{
-        validator: validatePassword,
+        validator: passwordSame,
         message: "Passwörter stimmen nicht überein",
         trigger: ["blur", "password-input"],
     }]
 }
 
-function validatePassword(rule, value) {
+function passwordStartsWith(rule, value) {
-    return (!!userModel.password 
+    return !!props.userModel.password && props.userModel.password.startsWith(value) && props.userModel.password.length >= value.length;
-        && userModel.password.startsWith(value) 
+}
-        && userModel.password.lenght >= value.length) 
+
-        || (userModel.password === value)
+function passwordSame(rule, value) {
+    return value === props.userModel.password;
+}
+
+function usernameUnique(rule, value) {
+}
+
+function validate() {
+    console.log("vue validate")
+
+    router.post('/users?validate=true', {
+        username: props.userModel.username,
+        is_admin: props.userModel.is_admin,
+        password: props.userModel.password,
+        password_repeat: props.userModel.password_repeat,
+    } )
+}
+
+function handlePasswordInput() {
+    if(props.userModel.password_repeat) {
+        passwordRepeatRef.value?.validate({ trigger: "password-input" })
+    }
 }
 </script>

resources/js/components/Users/UserNav.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="flex justify-between mb-4">
+        <n-button
+            :renderIcon="() => { return renderIcon(Back)}"
+            @click="$emit('clickBack')"
+        >
+        Zurück
+        </n-button>
+        
+        <n-button
+            secondary
+            type="primary"
+            :renderIcon="() => { return renderIcon(Save) }"
+            @click="$emit('clickSave')"
+        >
+        Speichern
+        </n-button>
+    </div>
+</template>
+
+<script setup>
+    import { renderIcon } from '@/util'
+    import {
+        ArrowBackRound as Back,
+        SaveRound as Save,
+    } from '@vicons/material'
+
+
+</script>

resources/js/pages/Users/Create.vue

@@ -1,22 +1,33 @@
 <template>
-    <div class="flex justify-between mb-2">
+    <UserNav
-        <n-button
+        @clickBack="() => { router.get('/users') }"
+    />
 
-        >
+    <UserForm
+        :userModel="form"
         
-        </n-button>
+    />
-        <n-button
-        >
-        Speichern
-        </n-button>
-    </div>
     
 </template>
 
 <script setup>
 import BELayout from '@/layouts/BELayout.vue'
-import UserForm from '@/components/UserForm.vue'
+import UserForm from '@/components/Users/UserForm.vue'
+import UserNav from '@/components/Users/UserNav.vue'
+
+import { router, useForm } from '@inertiajs/vue3'
 import { renderIcon } from '@/util'
+import {
+    ArrowBackRound as Back,
+    SaveRound as Save
+} from '@vicons/material'
 
 defineOptions({ layout: BELayout })
+
+const form = useForm({
+    username: null,
+    password: null,
+    is_admin: false,
+    password_repeat: null,
+})
 </script>

resources/js/pages/Users/Edit.vue

@@ -1,9 +1,8 @@
 <template>
-    <n-menu 
+    <UserNav
-        mode="horizontal"
+        @clickBack="() => { router.get('/users') }"
-        :options="menuOptions"
-        class="-mx-4"
     />
+
     <n-form
         :model="userModel"
         label-placement="left"
@@ -48,7 +47,10 @@
 <script setup>
 
 import BELayout from '@/layouts/BELayout.vue'
-import { Link } from '@inertiajs/vue3'
+import UserNav from '@/components/Users/UserNav.vue'
+
+import { router } from '@inertiajs/vue3'
+import { renderIcon } from '@/util'
 import { h, reactive } from 'vue'
 import { NIcon } from 'naive-ui'
 import {
@@ -63,19 +65,4 @@ const props = defineProps(['user'])
 
 const userModel = reactive(props.user)
 
-const menuOptions = [
-    {
-        label: () => 
-            h(
-                Link,
-                {
-                    href: "/users",
-                    method: "get",
-                }, 
-                () => "Zurück"
-            ),
-            key: 'back',
-            icon: () => h(NIcon, { component: Back }),
-    }
-]
 </script>