<template>
<div>
<Head title="Create User" />
<h1 class="mb-8 font-bold text-3xl">
<Link class="text-indigo-400 hover:text-indigo-600" href="/users">Users</Link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
<text-input v-model="form.last_name" :error="form.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
<text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.password" :error="form.errors.password" class="pr-6 pb-8 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
<select-input v-model="form.owner" :error="form.errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
<option :value="true">Yes</option>
<option :value="false">No</option>
</select-input>
<file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
</div>
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create User</loading-button>
</div>
</form>
</div>
</div>
</template>
<script>
import { Head, Link } from '@inertiajs/inertia-vue3'
import Layout from '@/Shared/Layout'
import FileInput from '@/Shared/FileInput'
import TextInput from '@/Shared/TextInput'
import SelectInput from '@/Shared/SelectInput'
import LoadingButton from '@/Shared/LoadingButton'
export default {
components: {
FileInput,
Head,
Link,
LoadingButton,
SelectInput,
TextInput,
},
layout: Layout,
remember: 'form',
data() {
return {
form: this.$inertia.form({
first_name: null,
last_name: null,
email: null,
password: null,
owner: false,
photo: null,
}),
}
},
methods: {
store() {
this.form.post('/users')
},
},
}
</script>