Update edit user form to use the new Inertia form

resources/js/Pages/Users/Edit.vue

@@ -12,21 +12,21 @@
       This user has been deleted.
       This user has been deleted.
     </trashed-message>
     </trashed-message>
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
-      <form @submit.prevent="submit">
+      <form @submit.prevent="form.post(route('users.update', user.id))">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.first_name" :error="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="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
-          <text-input v-model="form.email" :error="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.password" :error="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="errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
+          <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="true">Yes</option>
             <option :value="false">No</option>
             <option :value="false">No</option>
           </select-input>
           </select-input>
-          <file-input v-model="form.photo" :error="errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
+          <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>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
           <button v-if="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
           <button v-if="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
-          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
+          <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
         </div>
         </div>
       </form>
       </form>
     </div>
     </div>
@@ -56,45 +56,23 @@ export default {
     TrashedMessage,
     TrashedMessage,
   },
   },
   props: {
   props: {
-    errors: Object,
     user: Object,
     user: Object,
   },
   },
   remember: 'form',
   remember: 'form',
   data() {
   data() {
     return {
     return {
-      sending: false,
-      form: {
+      form: this.$inertia.form({
+        _method: 'put',
         first_name: this.user.first_name,
         first_name: this.user.first_name,
         last_name: this.user.last_name,
         last_name: this.user.last_name,
         email: this.user.email,
         email: this.user.email,
         password: this.user.password,
         password: this.user.password,
         owner: this.user.owner,
         owner: this.user.owner,
         photo: null,
         photo: null,
-      },
+      }),
     }
     }
   },
   },
   methods: {
   methods: {
-    submit() {
-      var data = new FormData()
-      data.append('first_name', this.form.first_name || '')
-      data.append('last_name', this.form.last_name || '')
-      data.append('email', this.form.email || '')
-      data.append('password', this.form.password || '')
-      data.append('owner', this.form.owner ? '1' : '0')
-      data.append('photo', this.form.photo || '')
-      data.append('_method', 'put')
-
-      this.$inertia.post(this.route('users.update', this.user.id), data, {
-        onStart: () => this.sending = true,
-        onFinish: () => this.sending = false,
-        onSuccess: () => {
-          if (Object.keys(this.$page.props.errors).length === 0) {
-            this.form.photo = null
-            this.form.password = null
-          }
-        },
-      })
-    },
     destroy() {
     destroy() {
       if (confirm('Are you sure you want to delete this user?')) {
       if (confirm('Are you sure you want to delete this user?')) {
         this.$inertia.delete(this.route('users.destroy', this.user.id))
         this.$inertia.delete(this.route('users.destroy', this.user.id))