working on UserCreate form...

resources/js/components/Users/UserForm.vue

@@ -0,0 +1,110 @@
+<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 
+                v-model:value="userModel.username"
+            />
+        </n-form-item>
+
+        <n-form-item label="Ist Admin?" path="is_admin">
+            <n-checkbox v-model:checked="userModel.is_admin" />
+        </n-form-item>
+
+        <n-form-item label="Passwort" path="password">
+            <n-input 
+                type="password"
+                show-password-on="mouseclick"
+                placeholder="Passwort"
+                v-model:value="userModel.password"
+                @input="handlePasswordInput"
+            />
+        </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(['userModel'])
+const emit = defineEmits(['validateUsername'])
+
+const passwordRepeatRef = ref(null)
+
+const rules = {
+    username: [{
+        required: true,
+        message: "Benutzername ist erforderlich",
+    }],
+    password: [{
+        required: true,
+        message: "Passwort ist erforderlich",
+    }],
+    password_repeat: [{
+        required: true,
+        message: "Wiederholtes Passwort ist erforderlich",
+        trigger: ["input", "blur"],
+    },{
+        validator: passwordStartsWith,
+        message: "Passwörter stimmen nicht überein",
+        trigger: "input",
+    },{
+        validator: passwordSame,
+        message: "Passwörter stimmen nicht überein",
+        trigger: ["blur", "password-input"],
+    }]
+}
+
+function passwordStartsWith(rule, value) {
+    return !!props.userModel.password && props.userModel.password.startsWith(value) && props.userModel.password.length >= value.length;
+}
+
+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>