<template>
    <layout>
        <h1>Create User</h1>
        <form @submit.prevent="submit">
            <text-input label="First name" v-model="form.first_name" :error="errors.get('first_name')"></text-input>
            <text-input label="Last name" v-model="form.last_name" :error="errors.get('last_name')"></text-input>
            <text-input label="Email" v-model="form.email" :error="errors.get('email')"></text-input>
            <text-input label="Password" v-model="form.password" :error="errors.get('password')" type="password" autocomplete="new-password"></text-input>
            <button type="submit" :disabled="sending">Create User</button>
        </form>
    </layout>
</template>

<script>
export default {
    data() {
        return {
            form: {
                first_name: null,
                last_name: null,
                email: null,
                password: null,
            },
            sending: false,
            errors: ErrorBag.new({}),
        }
    },
    methods: {
        submit() {
            this.sending = true
            axios.post(route('users.store'), this.form)
                .then(response => window.location.href = route('users'))
                .catch(error => {
                    this.sending = false
                    this.errors = ErrorBag.new(error.response.data.errors)
                })
        },
    }
}
</script>
