[2.x] Display validation errors alongside fields in the Inertia stack (#1123)

jessarcher · daleweaver777 · web-flow · commit 448c3e009f59 · 2022-08-16T09:32:33.000-05:00
* Display validation errors alongside the fields

* Revert formatting

* Update error key for recovery_code

* Bump Fortify

Co-authored-by: Dale Weaver &lt;dalew@missionconnect.me&gt;
diff --git a/composer.json b/composer.json
@@ -19,7 +19,7 @@
         "illuminate/console": "^9.21",
         "illuminate/support": "^9.21",
         "jenssegers/agent": "^2.6",
-        "laravel/fortify": "^1.12"
+        "laravel/fortify": "^1.13.3"
     },
     "require-dev": {
         "inertiajs/inertia-laravel": "^0.6.3",
diff --git a/stubs/inertia/resources/js/Components/ValidationErrors.vue b/stubs/inertia/resources/js/Components/ValidationErrors.vue
diff --git a/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -5,8 +5,8 @@ import JetAuthenticationCard from '@/Components/AuthenticationCard.vue';
 import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import JetButton from '@/Components/Button.vue';
 import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetLabel from '@/Components/Label.vue';
-import JetValidationErrors from '@/Components/ValidationErrors.vue';
 
 const form = useForm({
     password: '',
@@ -37,8 +37,6 @@ const submit = () => {
             This is a secure area of the application. Please confirm your password before continuing.
         </div>
 
-        <JetValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <JetLabel for="password" value="Password" />
@@ -52,6 +50,7 @@ const submit = () => {
                     autocomplete="current-password"
                     autofocus
                 />
+                <JetInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="flex justify-end mt-4">
diff --git a/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue
@@ -4,8 +4,8 @@ import JetAuthenticationCard from '@/Components/AuthenticationCard.vue';
 import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import JetButton from '@/Components/Button.vue';
 import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetLabel from '@/Components/Label.vue';
-import JetValidationErrors from '@/Components/ValidationErrors.vue';
 
 defineProps({
     status: String,
@@ -36,8 +36,6 @@ const submit = () => {
             {{ status }}
         </div>
 
-        <JetValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <JetLabel for="email" value="Email" />
@@ -49,6 +47,7 @@ const submit = () => {
                     required
                     autofocus
                 />
+                <JetInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
diff --git a/stubs/inertia/resources/js/Pages/Auth/Login.vue b/stubs/inertia/resources/js/Pages/Auth/Login.vue
@@ -4,9 +4,9 @@ import JetAuthenticationCard from '@/Components/AuthenticationCard.vue';
 import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import JetButton from '@/Components/Button.vue';
 import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetCheckbox from '@/Components/Checkbox.vue';
 import JetLabel from '@/Components/Label.vue';
-import JetValidationErrors from '@/Components/ValidationErrors.vue';
 
 defineProps({
     canResetPassword: Boolean,
@@ -37,8 +37,6 @@ const submit = () => {
             <JetAuthenticationCardLogo />
         </template>
 
-        <JetValidationErrors class="mb-4" />
-
         <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
             {{ status }}
         </div>
@@ -54,6 +52,7 @@ const submit = () => {
                     required
                     autofocus
                 />
+                <JetInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
@@ -66,6 +65,7 @@ const submit = () => {
                     required
                     autocomplete="current-password"
                 />
+                <JetInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="block mt-4">
diff --git a/stubs/inertia/resources/js/Pages/Auth/Register.vue b/stubs/inertia/resources/js/Pages/Auth/Register.vue
@@ -4,9 +4,9 @@ import JetAuthenticationCard from '@/Components/AuthenticationCard.vue';
 import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import JetButton from '@/Components/Button.vue';
 import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetCheckbox from '@/Components/Checkbox.vue';
 import JetLabel from '@/Components/Label.vue';
-import JetValidationErrors from '@/Components/ValidationErrors.vue';
 
 const form = useForm({
     name: '',
@@ -31,8 +31,6 @@ const submit = () => {
             <JetAuthenticationCardLogo />
         </template>
 
-        <JetValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <JetLabel for="name" value="Name" />
@@ -45,6 +43,7 @@ const submit = () => {
                     autofocus
                     autocomplete="name"
                 />
+                <JetInputError class="mt-2" :message="form.errors.name" />
             </div>
 
             <div class="mt-4">
@@ -56,6 +55,7 @@ const submit = () => {
                     class="mt-1 block w-full"
                     required
                 />
+                <JetInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
@@ -68,6 +68,7 @@ const submit = () => {
                     required
                     autocomplete="new-password"
                 />
+                <JetInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="mt-4">
@@ -80,6 +81,7 @@ const submit = () => {
                     required
                     autocomplete="new-password"
                 />
+                <JetInputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>
 
             <div v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature" class="mt-4">
diff --git a/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue
@@ -4,8 +4,8 @@ import JetAuthenticationCard from '@/Components/AuthenticationCard.vue';
 import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import JetButton from '@/Components/Button.vue';
 import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetLabel from '@/Components/Label.vue';
-import JetValidationErrors from '@/Components/ValidationErrors.vue';
 
 const props = defineProps({
     email: String,
@@ -34,8 +34,6 @@ const submit = () => {
             <JetAuthenticationCardLogo />
         </template>
 
-        <JetValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <JetLabel for="email" value="Email" />
@@ -47,6 +45,7 @@ const submit = () => {
                     required
                     autofocus
                 />
+                <JetInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
@@ -59,6 +58,7 @@ const submit = () => {
                     required
                     autocomplete="new-password"
                 />
+                <JetInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="mt-4">
@@ -71,6 +71,7 @@ const submit = () => {
                     required
                     autocomplete="new-password"
                 />
+                <JetInputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
diff --git a/stubs/inertia/resources/js/Pages/Auth/TwoFactorChallenge.vue b/stubs/inertia/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -5,8 +5,8 @@ import JetAuthenticationCard from '@/Components/AuthenticationCard.vue';
 import JetAuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import JetButton from '@/Components/Button.vue';
 import JetInput from '@/Components/Input.vue';
+import JetInputError from '@/Components/InputError.vue';
 import JetLabel from '@/Components/Label.vue';
-import JetValidationErrors from '@/Components/ValidationErrors.vue';
 
 const recovery = ref(false);
 
@@ -55,8 +55,6 @@ const submit = () => {
             </template>
         </div>
 
-        <JetValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div v-if="! recovery">
                 <JetLabel for="code" value="Code" />
@@ -70,6 +68,7 @@ const submit = () => {
                     autofocus
                     autocomplete="one-time-code"
                 />
+                <JetInputError class="mt-2" :message="form.errors.code" />
             </div>
 
             <div v-else>
@@ -82,6 +81,7 @@ const submit = () => {
                     class="mt-1 block w-full"
                     autocomplete="one-time-code"
                 />
+                <JetInputError class="mt-2" :message="form.errors.recovery_code" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
