From 46764b2e1b67d4cb0ae590a30664426ef512ca77 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 15 Apr 2019 21:18:29 -0400
Subject: [PATCH] Update all pages to use Inertia for POST, PUT and DELETE
 requests

---
 app/Http/Controllers/ContactsController.php   | 13 ++++-
 .../Controllers/OrganizationsController.php   |  1 -
 app/Http/Controllers/UsersController.php      | 13 ++++-
 resources/js/Pages/Auth/Login.vue             |  2 +-
 resources/js/Pages/Contacts/Create.vue        | 49 ++++++++++-------
 resources/js/Pages/Contacts/Edit.vue          | 53 +++++++++----------
 resources/js/Pages/Organizations/Create.vue   | 19 +++----
 resources/js/Pages/Organizations/Edit.vue     | 21 ++++----
 resources/js/Pages/Users/Create.vue           | 50 ++++++++++-------
 resources/js/Pages/Users/Edit.vue             | 44 +++++++--------
 resources/js/Shared/SelectInput.vue           |  9 ++--
 resources/js/Shared/TextInput.vue             |  9 ++--
 resources/js/Shared/TextareaInput.vue         | 14 +++--
 resources/js/Utils/Form.js                    | 44 ---------------
 14 files changed, 174 insertions(+), 167 deletions(-)
 delete mode 100644 resources/js/Utils/Form.js

diff --git a/app/Http/Controllers/ContactsController.php b/app/Http/Controllers/ContactsController.php
index 835dfc8..2083752 100644
--- a/app/Http/Controllers/ContactsController.php
+++ b/app/Http/Controllers/ContactsController.php
@@ -7,6 +7,7 @@ use Inertia\Inertia;
 use Illuminate\Validation\Rule;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Request;
+use Illuminate\Support\Facades\Redirect;
 
 class ContactsController extends Controller
 {
@@ -46,7 +47,7 @@ class ContactsController extends Controller
 
     public function store()
     {
-        return Auth::user()->account->contacts()->create(
+        Auth::user()->account->contacts()->create(
             Request::validate([
                 'first_name' => ['required', 'max:50'],
                 'last_name' => ['required', 'max:50'],
@@ -61,7 +62,9 @@ class ContactsController extends Controller
                 'country' => ['nullable', 'max:2'],
                 'postal_code' => ['nullable', 'max:25'],
             ])
-        )->only('id');
+        );
+
+        return Redirect::route('contacts');
     }
 
     public function edit(Contact $contact)
@@ -107,15 +110,21 @@ class ContactsController extends Controller
                 'postal_code' => ['nullable', 'max:25'],
             ])
         );
+
+        return Redirect::route('contacts.edit', $contact);
     }
 
     public function destroy(Contact $contact)
     {
         $contact->delete();
+
+        return Redirect::route('contacts.edit', $contact);
     }
 
     public function restore(Contact $contact)
     {
         $contact->restore();
+
+        return Redirect::route('contacts.edit', $contact);
     }
 }
diff --git a/app/Http/Controllers/OrganizationsController.php b/app/Http/Controllers/OrganizationsController.php
index 9129d1e..45b5df2 100644
--- a/app/Http/Controllers/OrganizationsController.php
+++ b/app/Http/Controllers/OrganizationsController.php
@@ -6,7 +6,6 @@ use Inertia\Inertia;
 use App\Organization;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Request;
-use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Facades\Redirect;
 
 class OrganizationsController extends Controller
diff --git a/app/Http/Controllers/UsersController.php b/app/Http/Controllers/UsersController.php
index 0951b96..a5afc0a 100644
--- a/app/Http/Controllers/UsersController.php
+++ b/app/Http/Controllers/UsersController.php
@@ -7,6 +7,7 @@ use Inertia\Inertia;
 use Illuminate\Validation\Rule;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Request;
+use Illuminate\Support\Facades\Redirect;
 
 class UsersController extends Controller
 {
@@ -37,7 +38,7 @@ class UsersController extends Controller
 
     public function store()
     {
-        return Auth::user()->account->users()->create(
+        Auth::user()->account->users()->create(
             Request::validate([
                 'first_name' => ['required', 'max:50'],
                 'last_name' => ['required', 'max:50'],
@@ -45,7 +46,9 @@ class UsersController extends Controller
                 'password' => ['nullable'],
                 'owner' => ['required', 'boolean'],
             ])
-        )->only('id');
+        );
+
+        return Redirect::route('users');
     }
 
     public function edit(User $user)
@@ -77,15 +80,21 @@ class UsersController extends Controller
         if (Request::get('password')) {
             $user->update(['password' => Request::get('password')]);
         }
+
+        return Redirect::route('users.edit', $user);
     }
 
     public function destroy(User $user)
     {
         $user->delete();
+
+        return Redirect::route('users.edit', $user);
     }
 
     public function restore(User $user)
     {
         $user->restore();
+
+        return Redirect::route('users.edit', $user);
     }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index aa7ee4f..cd3e62e 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -6,7 +6,7 @@
         <div class="px-10 py-12">
           <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
           <div class="mx-auto mt-6 w-24 border-b-2" />
-          <text-input v-model="form.email" class="mt-10" label="Email" :error="errors.email ? errors.email[0] : null" type="email" autofocus autocapitalize="off" />
+          <text-input v-model="form.email" :errors="errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" />
           <text-input v-model="form.password" class="mt-6" label="Password" type="password" />
           <label class="mt-6 select-none flex items-center" for="remember">
             <input id="remember" v-model="form.remember" class="mr-1" type="checkbox">
diff --git a/resources/js/Pages/Contacts/Create.vue b/resources/js/Pages/Contacts/Create.vue
index 6ca1b17..7731c6e 100644
--- a/resources/js/Pages/Contacts/Create.vue
+++ b/resources/js/Pages/Contacts/Create.vue
@@ -7,26 +7,26 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-lg">
       <form @submit.prevent="submit">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
-          <text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
-          <select-input v-model="form.fields.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('organization_id')" label="Organization">
+          <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
+          <select-input v-model="form.organization_id" :errors="errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
             <option :value="null" />
             <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
           </select-input>
-          <text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
-          <text-input v-model="form.fields.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('phone')" label="Phone" />
-          <text-input v-model="form.fields.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('address')" label="Address" />
-          <text-input v-model="form.fields.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('city')" label="City" />
-          <text-input v-model="form.fields.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('region')" label="Province/State" />
-          <select-input v-model="form.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country">
+          <text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.fields.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('postal_code')" label="Postal code" />
+          <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
-          <loading-button :loading="form.sending" class="btn-indigo" type="submit">Create Contact</loading-button>
+          <loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button>
         </div>
       </form>
     </div>
@@ -35,7 +35,6 @@
 
 <script>
 import { Inertia, InertiaLink } from 'inertia-vue'
-import Form from '@/Utils/Form'
 import Layout from '@/Shared/Layout'
 import LoadingButton from '@/Shared/LoadingButton'
 import SelectInput from '@/Shared/SelectInput'
@@ -50,11 +49,20 @@ export default {
     TextInput,
   },
   props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
     organizations: Array,
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
-      form: new Form({
+      sending: false,
+      form: {
         first_name: null,
         last_name: null,
         organization_id: null,
@@ -65,15 +73,20 @@ export default {
         region: null,
         country: null,
         postal_code: null,
-      }),
+      },
     }
   },
+  watch: {
+    form: {
+      handler: form => Inertia.cache('contact', form),
+      deep: true,
+    },
+  },
   methods: {
     submit() {
-      this.form.post({
-        url: this.route('contacts.store'),
-        then: data => Inertia.visit(this.route('contacts.edit', data.id)),
-      })
+      this.sending = true
+      Inertia.post(this.route('contacts.store'), this.form)
+        .then(() => this.sending = false)
     },
   },
 }
diff --git a/resources/js/Pages/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index f27d3b7..bfa15a3 100644
--- a/resources/js/Pages/Contacts/Edit.vue
+++ b/resources/js/Pages/Contacts/Edit.vue
@@ -1,9 +1,9 @@
 <template>
-  <layout :title="`${form.fields.first_name} ${form.fields.last_name}`">
+  <layout :title="`${form.first_name} ${form.last_name}`">
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
       <span class="text-indigo-light font-medium">/</span>
-      {{ form.fields.first_name }} {{ form.fields.last_name }}
+      {{ form.first_name }} {{ form.last_name }}
     </h1>
     <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
       This contact has been deleted.
@@ -11,27 +11,27 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-lg">
       <form @submit.prevent="submit">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
-          <text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
-          <select-input v-model="form.fields.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('organization_id')" label="Organization">
+          <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
+          <select-input v-model="form.organization_id" :errors="errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
             <option :value="null" />
             <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
           </select-input>
-          <text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
-          <text-input v-model="form.fields.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('phone')" label="Phone" />
-          <text-input v-model="form.fields.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('address')" label="Address" />
-          <text-input v-model="form.fields.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('city')" label="City" />
-          <text-input v-model="form.fields.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('region')" label="Province/State" />
-          <select-input v-model="form.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country">
+          <text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.fields.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('postal_code')" label="Postal code" />
+          <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
           <button v-if="!contact.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
-          <loading-button :loading="form.sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
+          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
         </div>
       </form>
     </div>
@@ -40,7 +40,6 @@
 
 <script>
 import { Inertia, InertiaLink } from 'inertia-vue'
-import Form from '@/Utils/Form'
 import Layout from '@/Shared/Layout'
 import LoadingButton from '@/Shared/LoadingButton'
 import SelectInput from '@/Shared/SelectInput'
@@ -59,10 +58,15 @@ export default {
   props: {
     contact: Object,
     organizations: Array,
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
-      form: new Form({
+      sending: false,
+      form: {
         first_name: this.contact.first_name,
         last_name: this.contact.last_name,
         organization_id: this.contact.organization_id,
@@ -73,30 +77,23 @@ export default {
         region: this.contact.region,
         country: this.contact.country,
         postal_code: this.contact.postal_code,
-      }),
+      },
     }
   },
   methods: {
     submit() {
-      this.form.put({
-        url: this.route('contacts.update', this.contact.id),
-        then: () => Inertia.visit(this.route('contacts')),
-      })
+      this.sending = true
+      Inertia.put(this.route('contacts.update', this.contact.id), this.form)
+        .then(() => this.sending = false)
     },
     destroy() {
       if (confirm('Are you sure you want to delete this contact?')) {
-        this.form.delete({
-          url: this.route('contacts.destroy', this.contact.id),
-          then: () => Inertia.replace(this.route('contacts.edit', this.contact.id)),
-        })
+        Inertia.delete(this.route('contacts.destroy', this.contact.id))
       }
     },
     restore() {
       if (confirm('Are you sure you want to restore this contact?')) {
-        this.form.put({
-          url: this.route('contacts.restore', this.contact.id),
-          then: () => Inertia.replace(this.route('contacts.edit', this.contact.id)),
-        })
+        Inertia.put(this.route('contacts.restore', this.contact.id))
       }
     },
   },
diff --git a/resources/js/Pages/Organizations/Create.vue b/resources/js/Pages/Organizations/Create.vue
index 0ed043a..d39c518 100644
--- a/resources/js/Pages/Organizations/Create.vue
+++ b/resources/js/Pages/Organizations/Create.vue
@@ -7,18 +7,18 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-lg">
       <form @submit.prevent="submit">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.name" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.name ? errors.name[0] : null" label="Name" />
-          <text-input v-model="form.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.email ? errors.email[0] : null" label="Email" />
-          <text-input v-model="form.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.phone ? errors.phone[0] : null" label="Phone" />
-          <text-input v-model="form.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.address ? errors.address[0] : null" label="Address" />
-          <text-input v-model="form.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.city ? errors.city[0] : null" label="City" />
-          <text-input v-model="form.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.region ? errors.region[0] : null" label="Province/State" />
-          <select-input v-model="form.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.country ? errors.country[0] : null" label="Country">
+          <text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
+          <text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.postal_code ? errors.postal_code[0] : null" label="Postal code" />
+          <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
           <loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
@@ -77,7 +77,8 @@ export default {
   methods: {
     submit() {
       this.sending = true
-      Inertia.post(this.route('organizations.store'), this.form).then(() => this.sending = false)
+      Inertia.post(this.route('organizations.store'), this.form)
+        .then(() => this.sending = false)
     },
   },
 }
diff --git a/resources/js/Pages/Organizations/Edit.vue b/resources/js/Pages/Organizations/Edit.vue
index e0e0a31..86afe22 100644
--- a/resources/js/Pages/Organizations/Edit.vue
+++ b/resources/js/Pages/Organizations/Edit.vue
@@ -11,22 +11,22 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-lg">
       <form @submit.prevent="submit">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.name" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.name ? errors.name[0] : null" label="Name" />
-          <text-input v-model="form.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.email ? errors.email[0] : null" label="Email" />
-          <text-input v-model="form.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.phone ? errors.phone[0] : null" label="Phone" />
-          <text-input v-model="form.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.address ? errors.address[0] : null" label="Address" />
-          <text-input v-model="form.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.city ? errors.city[0] : null" label="City" />
-          <text-input v-model="form.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.region ? errors.region[0] : null" label="Province/State" />
-          <select-input v-model="form.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.country ? errors.country[0] : null" label="Country">
+          <text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
+          <text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.postal_code ? errors.postal_code[0] : null" label="Postal code" />
+          <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
           <button v-if="!organization.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
-          <loading-button :loading="form.sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
+          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
         </div>
       </form>
     </div>
@@ -97,6 +97,7 @@ export default {
   },
   data() {
     return {
+      sending: false,
       form: {
         name: this.organization.name,
         email: this.organization.email,
@@ -111,7 +112,9 @@ export default {
   },
   methods: {
     submit() {
+      this.sending = true
       Inertia.put(this.route('organizations.update', this.organization.id), this.form)
+        .then(() => this.sending = false)
     },
     destroy() {
       if (confirm('Are you sure you want to delete this organization?')) {
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index e30fec7..4d0d6e7 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -7,17 +7,17 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-lg">
       <form @submit.prevent="submit">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
-          <text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
-          <text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
-          <text-input v-model="form.fields.password" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('password')" type="password" autocomplete="new-password" label="Password" />
-          <select-input v-model="form.fields.owner" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('owner')" label="Owner">
+          <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
+          <text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.password" :errors="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" :errors="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>
         </div>
         <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
-          <loading-button :loading="form.sending" class="btn-indigo" type="submit">Create User</loading-button>
+          <loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button>
         </div>
       </form>
     </div>
@@ -26,7 +26,6 @@
 
 <script>
 import { Inertia, InertiaLink } from 'inertia-vue'
-import Form from '@/Utils/Form'
 import Layout from '@/Shared/Layout'
 import LoadingButton from '@/Shared/LoadingButton'
 import SelectInput from '@/Shared/SelectInput'
@@ -41,25 +40,38 @@ export default {
     TextInput,
   },
   props: {
-    organizations: Array,
+    user: {
+      type: Object,
+      default: () => ({ owner: false }),
+    },
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
-      form: new Form({
-        first_name: null,
-        last_name: null,
-        email: null,
-        password: null,
-        owner: null,
-      }),
+      sending: false,
+      form: {
+        first_name: this.user.first_name,
+        last_name: this.user.last_name,
+        email: this.user.email,
+        password: this.user.password,
+        owner: this.user.owner,
+      },
     }
   },
+  watch: {
+    form: {
+      handler: form => Inertia.cache('user', form),
+      deep: true,
+    },
+  },
   methods: {
     submit() {
-      this.form.post({
-        url: this.route('users.store'),
-        then: data => Inertia.visit(this.route('users.edit', data.id)),
-      })
+      this.sending = true
+      Inertia.post(this.route('users.store'), this.form)
+        .then(() => this.sending = false)
     },
   },
 }
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index beb8552..de5939a 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -1,9 +1,9 @@
 <template>
-  <layout :title="`${form.fields.first_name} ${form.fields.last_name}`">
+  <layout :title="`${form.first_name} ${form.last_name}`">
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
       <span class="text-indigo-light font-medium">/</span>
-      {{ form.fields.first_name }} {{ form.fields.last_name }}
+      {{ form.first_name }} {{ form.last_name }}
     </h1>
     <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
       This user has been deleted.
@@ -11,18 +11,18 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-lg">
       <form @submit.prevent="submit">
         <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
-          <text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
-          <text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
-          <text-input v-model="form.fields.password" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('password')" type="password" autocomplete="new-password" label="Password" />
-          <select-input v-model="form.fields.owner" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('owner')" label="Owner">
+          <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
+          <text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.password" :errors="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" :errors="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>
         </div>
         <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
           <button v-if="!user.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
-          <loading-button :loading="form.sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
+          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
         </div>
       </form>
     </div>
@@ -31,7 +31,6 @@
 
 <script>
 import { Inertia, InertiaLink } from 'inertia-vue'
-import Form from '@/Utils/Form'
 import Layout from '@/Shared/Layout'
 import LoadingButton from '@/Shared/LoadingButton'
 import SelectInput from '@/Shared/SelectInput'
@@ -49,40 +48,37 @@ export default {
   },
   props: {
     user: Object,
-    organizations: Array,
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
-      form: new Form({
+      sending: false,
+      form: {
         first_name: this.user.first_name,
         last_name: this.user.last_name,
         email: this.user.email,
         password: this.user.password,
         owner: this.user.owner,
-      }),
+      },
     }
   },
   methods: {
     submit() {
-      this.form.put({
-        url: this.route('users.update', this.user.id),
-        then: () => Inertia.visit(this.route('users')),
-      })
+      this.sending = true
+      Inertia.put(this.route('users.update', this.user.id), this.form)
+        .then(() => this.sending = false)
     },
     destroy() {
       if (confirm('Are you sure you want to delete this user?')) {
-        this.form.delete({
-          url: this.route('users.destroy', this.user.id),
-          then: () => Inertia.replace(this.route('users.edit', this.user.id)),
-        })
+        Inertia.delete(this.route('users.destroy', this.user.id))
       }
     },
     restore() {
       if (confirm('Are you sure you want to restore this user?')) {
-        this.form.put({
-          url: this.route('users.restore', this.user.id),
-          then: () => Inertia.replace(this.route('users.edit', this.user.id)),
-        })
+        Inertia.put(this.route('users.restore', this.user.id))
       }
     },
   },
diff --git a/resources/js/Shared/SelectInput.vue b/resources/js/Shared/SelectInput.vue
index d9abf36..5b8900a 100644
--- a/resources/js/Shared/SelectInput.vue
+++ b/resources/js/Shared/SelectInput.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
-    <select :id="id" ref="input" v-model="selected" v-bind="$attrs" class="form-select" :class="{ error: error }">
+    <select :id="id" ref="input" v-model="selected" v-bind="$attrs" class="form-select" :class="{ error: errors.length }">
       <slot />
     </select>
-    <div v-if="error" class="form-error">{{ error }}</div>
+    <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
   </div>
 </template>
 
@@ -20,7 +20,10 @@ export default {
     },
     value: [String, Number, Boolean],
     label: String,
-    error: String,
+    errors: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
diff --git a/resources/js/Shared/TextInput.vue b/resources/js/Shared/TextInput.vue
index 9c98a9c..f32374d 100644
--- a/resources/js/Shared/TextInput.vue
+++ b/resources/js/Shared/TextInput.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
-    <input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: error }" :type="type" :value="value" @input="$emit('input', $event.target.value)">
-    <div v-if="error" class="form-error">{{ error }}</div>
+    <input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: errors.length }" :type="type" :value="value" @input="$emit('input', $event.target.value)">
+    <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
   </div>
 </template>
 
@@ -22,7 +22,10 @@ export default {
     },
     value: String,
     label: String,
-    error: String,
+    errors: {
+      type: Array,
+      default: () => [],
+    },
   },
   methods: {
     focus() {
diff --git a/resources/js/Shared/TextareaInput.vue b/resources/js/Shared/TextareaInput.vue
index 44eeffe..357b731 100644
--- a/resources/js/Shared/TextareaInput.vue
+++ b/resources/js/Shared/TextareaInput.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
-    <textarea :id="id" ref="input" v-bind="$attrs" class="form-textarea" :class="{ error: error }" :value="value" @input="$emit('input', $event.target.value)" />
-    <div v-if="error" class="form-error">{{ error }}</div>
+    <textarea :id="id" ref="input" v-bind="$attrs" class="form-textarea" :class="{ error: errors.length }" :value="value" @input="$emit('input', $event.target.value)" />
+    <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
   </div>
 </template>
 
@@ -20,8 +20,14 @@ export default {
     },
     value: String,
     label: String,
-    error: String,
-    autosize: Boolean,
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+    autosize: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     if (this.autosize) {
diff --git a/resources/js/Utils/Form.js b/resources/js/Utils/Form.js
deleted file mode 100644
index a9e8d94..0000000
--- a/resources/js/Utils/Form.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import axios from 'axios'
-import Errors from '@/Utils/Errors'
-
-class Form {
-  constructor(fields = {}) {
-    this.fields = fields
-    this.sending = false
-    this.errors = new Errors()
-    this.http = axios.create({
-      headers: { 'X-Requested-With': 'XMLHttpRequest' },
-    })
-  }
-
-  delete({ url, then }) {
-    this.request(this.http.delete(url), then)
-  }
-
-  post({ url, data = this.fields, then }) {
-    this.request(this.http.post(url, data), then)
-  }
-
-  put({ url, data = this.fields, then }) {
-    this.request(this.http.put(url, data), then)
-  }
-
-  request(request, then) {
-    this.sending = true
-
-    request.then(response => {
-      this.sending = false
-      then(response.data)
-    }).catch(error => {
-      this.sending = false
-
-      if (error.response && error.response.status === 422) {
-        this.errors.record(error.response.data.errors)
-      } else {
-        return Promise.reject(error)
-      }
-    })
-  }
-}
-
-export default Form