Started with user edit form

resources/js/pages/Users/Edit.vue

@@ -1,6 +1,81 @@
 <template>
+    <n-menu 
+        mode="horizontal"
+        :options="menuOptions"
+        class="-mx-4"
+    />
+    <n-form
+        :model="userModel"
+        label-placement="left"
+        require-mark-placement="right-hanging"
+        label-width="auto"
+    >
+        <n-form-item label="ID" path="id">
+            <n-text>{{ userModel.id }}</n-text>
+        </n-form-item>
+        <n-form-item label="Benutzername" path="username">
+            <n-input
+                class="align-middle"
+                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"
+            />
+        </n-form-item>
+        <n-form-item label="Passwort wiederholen" path="password_repeat">
+            <n-input
+                type="password"
+                show-password-on="mouseclick"
+                placeholder="Passwort wiederholen"
+                v-model:value="userModel.password_repeat"
+            />
+        </n-form-item>
+    </n-form>
+
+    {{ userModel }}
+    
 
 </template>
 
 <script setup>
+
+import BELayout from '@/layouts/BELayout.vue'
+import { Link } from '@inertiajs/vue3'
+import { h, reactive } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+    ArrowBackFilled as Back
+} from '@vicons/material'
+
+defineOptions({
+    layout: BELayout
+})
+
+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>