Initial work adding support for non-GET Inertia visits

This commit is contained in:
Jonathan Reinink 2019-04-15 19:08:08 -04:00
parent aa2bf5202c
commit fbdaf9b656
8 changed files with 109 additions and 76 deletions

View File

@ -35,18 +35,6 @@ class LoginController extends Controller
public function showLoginForm() public function showLoginForm()
{ {
return Inertia::render('Auth/Login', [ return Inertia::render('Auth/Login');
'intendedUrl' => Session::pull('url.intended', URL::route('dashboard')),
]);
}
protected function authenticated(Request $request, $user)
{
return Response::json(['success' => true]);
}
protected function loggedOut(Request $request)
{
return Redirect::route('login');
} }
} }

View File

@ -6,6 +6,8 @@ use Inertia\Inertia;
use App\Organization; use App\Organization;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request; use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Redirect;
class OrganizationsController extends Controller class OrganizationsController extends Controller
{ {
@ -28,7 +30,7 @@ class OrganizationsController extends Controller
public function store() public function store()
{ {
return Auth::user()->account->organizations()->create( Auth::user()->account->organizations()->create(
Request::validate([ Request::validate([
'name' => ['required', 'max:100'], 'name' => ['required', 'max:100'],
'email' => ['nullable', 'max:50', 'email'], 'email' => ['nullable', 'max:50', 'email'],
@ -39,7 +41,9 @@ class OrganizationsController extends Controller
'country' => ['nullable', 'max:2'], 'country' => ['nullable', 'max:2'],
'postal_code' => ['nullable', 'max:25'], 'postal_code' => ['nullable', 'max:25'],
]) ])
)->only('id'); );
return Redirect::route('organizations');
} }
public function edit(Organization $organization) public function edit(Organization $organization)
@ -75,15 +79,21 @@ class OrganizationsController extends Controller
'postal_code' => ['nullable', 'max:25'], 'postal_code' => ['nullable', 'max:25'],
]) ])
); );
return Redirect::route('organizations.edit', $organization);
} }
public function destroy(Organization $organization) public function destroy(Organization $organization)
{ {
$organization->delete(); $organization->delete();
return Redirect::route('organizations.edit', $organization);
} }
public function restore(Organization $organization) public function restore(Organization $organization)
{ {
$organization->restore(); $organization->restore();
return Redirect::route('organizations.edit', $organization);
} }
} }

View File

@ -19,6 +19,7 @@ class Kernel extends HttpKernel
\App\Http\Middleware\TrimStrings::class, \App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\App\Http\Middleware\TrustProxies::class, \App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\ConvertRedirects::class,
]; ];
/** /**

View File

@ -0,0 +1,20 @@
<?php
namespace App\Http\Middleware;
use Closure;
use Symfony\Component\HttpFoundation\RedirectResponse;
class ConvertRedirects
{
public function handle($request, Closure $next)
{
$response = $next($request);
if ($response instanceof RedirectResponse) {
$response->setStatusCode(303);
}
return $response;
}
}

View File

@ -12,6 +12,7 @@ use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Date; use Illuminate\Support\Facades\Date;
use Illuminate\Support\Facades\Config; use Illuminate\Support\Facades\Config;
use Illuminate\Support\Facades\Request; use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\ServiceProvider; use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\LengthAwarePaginator; use Illuminate\Pagination\LengthAwarePaginator;
@ -25,6 +26,9 @@ class AppServiceProvider extends ServiceProvider
public function register() public function register()
{ {
Inertia::share('app.name', Config::get('app.name')); Inertia::share('app.name', Config::get('app.name'));
Inertia::share('errors', function () {
return Session::get('errors') ? Session::get('errors')->getBag('default')->getMessages() : (object) [];
});
Inertia::share('auth.user', function () { Inertia::share('auth.user', function () {
if (Auth::user()) { if (Auth::user()) {
return [ return [

View File

@ -6,16 +6,16 @@
<div class="px-10 py-12"> <div class="px-10 py-12">
<h1 class="text-center font-bold text-3xl">Welcome Back!</h1> <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
<div class="mx-auto mt-6 w-24 border-b-2" /> <div class="mx-auto mt-6 w-24 border-b-2" />
<text-input v-model="form.fields.email" class="mt-10" label="Email" :error="form.errors.first('email')" type="email" autofocus autocapitalize="off" /> <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.fields.password" class="mt-6" label="Password" :error="form.errors.first('password')" type="password" /> <text-input v-model="form.password" class="mt-6" label="Password" type="password" />
<label class="mt-6 select-none flex items-center" for="remember"> <label class="mt-6 select-none flex items-center" for="remember">
<input id="remember" v-model="form.fields.remember" class="mr-1" type="checkbox"> <input id="remember" v-model="form.remember" class="mr-1" type="checkbox">
<span class="text-sm">Remember Me</span> <span class="text-sm">Remember Me</span>
</label> </label>
</div> </div>
<div class="px-10 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-between items-center"> <div class="px-10 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-between items-center">
<a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a> <a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
<loading-button :loading="form.sending" class="btn-indigo" type="submit">Login</loading-button> <loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button>
</div> </div>
</form> </form>
</div> </div>
@ -24,7 +24,6 @@
<script> <script>
import { Inertia } from 'inertia-vue' import { Inertia } from 'inertia-vue'
import Form from '@/Utils/Form'
import LoadingButton from '@/Shared/LoadingButton' import LoadingButton from '@/Shared/LoadingButton'
import Logo from '@/Shared/Logo' import Logo from '@/Shared/Logo'
import TextInput from '@/Shared/TextInput' import TextInput from '@/Shared/TextInput'
@ -36,16 +35,17 @@ export default {
TextInput, TextInput,
}, },
props: { props: {
intendedUrl: String, errors: Object,
}, },
inject: ['page'], inject: ['page'],
data() { data() {
return { return {
form: new Form({ sending: false,
form: {
email: null, email: null,
password: null, password: null,
remember: null, remember: null,
}), },
} }
}, },
mounted() { mounted() {
@ -53,10 +53,12 @@ export default {
}, },
methods: { methods: {
submit() { submit() {
this.form.post({ this.sending = true
url: this.route('login.attempt').url(), Inertia.post(this.route('login.attempt').url(), {
then: () => Inertia.visit(this.intendedUrl), email: this.form.email,
}) password: this.form.password,
remember: this.form.remember,
}).then(() => this.sending = false)
}, },
}, },
} }

View File

@ -7,21 +7,21 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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.fields.name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('name')" label="Name" /> <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.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.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.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.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.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.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.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.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.fields.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('region')" label="Province/State" /> <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.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country"> <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">
<option :value="null" /> <option :value="null" />
<option value="CA">Canada</option> <option value="CA">Canada</option>
<option value="US">United States</option> <option value="US">United States</option>
</select-input> </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" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.postal_code ? errors.postal_code[0] : null" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <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 Organization</loading-button> <loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
</div> </div>
</form> </form>
</div> </div>
@ -30,7 +30,6 @@
<script> <script>
import { Inertia, InertiaLink } from 'inertia-vue' import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton' import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput' import SelectInput from '@/Shared/SelectInput'
@ -44,26 +43,41 @@ export default {
SelectInput, SelectInput,
TextInput, TextInput,
}, },
props: {
organization: {
type: Object,
default: () => ({}),
},
errors: {
type: Object,
default: () => ({}),
},
},
data() { data() {
return { return {
form: new Form({ sending: false,
name: null, form: {
email: null, name: this.organization.name,
phone: null, email: this.organization.email,
address: null, phone: this.organization.phone,
city: null, address: this.organization.address,
region: null, city: this.organization.city,
country: null, region: this.organization.region,
postal_code: null, country: this.organization.country,
}), postal_code: this.organization.postal_code,
},
} }
}, },
watch: {
form: {
handler: form => Inertia.cache('organization', form),
deep: true,
},
},
methods: { methods: {
submit() { submit() {
this.form.post({ this.sending = true
url: this.route('organizations.store').url(), Inertia.post(this.route('organizations.store').url(), this.form).then(() => this.sending = false)
then: data => Inertia.visit(this.route('organizations.edit', data.id)),
})
}, },
}, },
} }

View File

@ -1,9 +1,9 @@
<template> <template>
<layout :title="form.fields.name"> <layout :title="form.name">
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-light font-medium">/</span>
{{ form.fields.name }} {{ form.name }}
</h1> </h1>
<trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
This organization has been deleted. This organization has been deleted.
@ -11,18 +11,18 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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.fields.name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('name')" label="Name" /> <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.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.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.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.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.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.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.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.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.fields.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('region')" label="Province/State" /> <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.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country"> <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">
<option :value="null" /> <option :value="null" />
<option value="CA">Canada</option> <option value="CA">Canada</option>
<option value="US">United States</option> <option value="US">United States</option>
</select-input> </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" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.postal_code ? errors.postal_code[0] : null" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center"> <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> <button v-if="!organization.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
@ -71,7 +71,6 @@
<script> <script>
import { Inertia, InertiaLink } from 'inertia-vue' import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Icon from '@/Shared/Icon' import Icon from '@/Shared/Icon'
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton' import LoadingButton from '@/Shared/LoadingButton'
@ -91,10 +90,14 @@ export default {
}, },
props: { props: {
organization: Object, organization: Object,
errors: {
type: Object,
default: () => ({}),
},
}, },
data() { data() {
return { return {
form: new Form({ form: {
name: this.organization.name, name: this.organization.name,
email: this.organization.email, email: this.organization.email,
phone: this.organization.phone, phone: this.organization.phone,
@ -103,30 +106,21 @@ export default {
region: this.organization.region, region: this.organization.region,
country: this.organization.country, country: this.organization.country,
postal_code: this.organization.postal_code, postal_code: this.organization.postal_code,
}), },
} }
}, },
methods: { methods: {
submit() { submit() {
this.form.put({ Inertia.put(this.route('organizations.update', this.organization.id).url(), this.form)
url: this.route('organizations.update', this.organization.id).url(),
then: () => Inertia.visit(this.route('organizations')),
})
}, },
destroy() { destroy() {
if (confirm('Are you sure you want to delete this organization?')) { if (confirm('Are you sure you want to delete this organization?')) {
this.form.delete({ Inertia.delete(this.route('organizations.destroy', this.organization.id).url())
url: this.route('organizations.destroy', this.organization.id).url(),
then: () => Inertia.replace(this.route('organizations.edit', this.organization.id).url()),
})
} }
}, },
restore() { restore() {
if (confirm('Are you sure you want to restore this organization?')) { if (confirm('Are you sure you want to restore this organization?')) {
this.form.put({ Inertia.put(this.route('organizations.restore', this.organization.id).url())
url: this.route('organizations.restore', this.organization.id).url(),
then: () => Inertia.replace(this.route('organizations.edit', this.organization.id).url()),
})
} }
}, },
}, },