From 5eaec8231557746c6b262ad0ded7b47e32ae717c Mon Sep 17 00:00:00 2001
From: Jess Archer <jess@jessarcher.com>
Date: Tue, 2 Aug 2022 14:17:41 +1000
Subject: [PATCH] Display validation errors alongside the fields

---
 .../js/Components/ValidationErrors.jsx         | 17 -----------------
 .../js/Pages/Auth/ConfirmPassword.jsx          |  6 +++---
 .../resources/js/Pages/Auth/ForgotPassword.jsx |  6 +++---
 .../resources/js/Pages/Auth/Login.jsx          |  8 +++++---
 .../resources/js/Pages/Auth/Register.jsx       | 12 +++++++++---
 .../resources/js/Pages/Auth/ResetPassword.jsx  | 10 +++++++---
 .../js/Components/ValidationErrors.vue         | 18 ------------------
 .../js/Pages/Auth/ConfirmPassword.vue          |  5 ++---
 .../resources/js/Pages/Auth/ForgotPassword.vue |  5 ++---
 .../resources/js/Pages/Auth/Login.vue          |  6 +++---
 .../resources/js/Pages/Auth/Register.vue       |  8 +++++---
 .../resources/js/Pages/Auth/ResetPassword.vue  |  7 ++++---
 12 files changed, 43 insertions(+), 65 deletions(-)
 delete mode 100644 stubs/inertia-react/resources/js/Components/ValidationErrors.jsx
 delete mode 100644 stubs/inertia-vue/resources/js/Components/ValidationErrors.vue

diff --git a/stubs/inertia-react/resources/js/Components/ValidationErrors.jsx b/stubs/inertia-react/resources/js/Components/ValidationErrors.jsx
deleted file mode 100644
index 7153aaa43..000000000
--- a/stubs/inertia-react/resources/js/Components/ValidationErrors.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export default function ValidationErrors({ errors }) {
-    return (
-        Object.keys(errors).length > 0 && (
-            <div className="mb-4">
-                <div className="font-medium text-red-600">Whoops! Something went wrong.</div>
-
-                <ul className="mt-3 list-disc list-inside text-sm text-red-600">
-                    {Object.keys(errors).map(function (key, index) {
-                        return <li key={index}>{errors[key]}</li>;
-                    })}
-                </ul>
-            </div>
-        )
-    );
-}
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
index 4f76330da..2f46a267a 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import Button from '@/Components/Button';
 import Guest from '@/Layouts/Guest';
 import Input from '@/Components/Input';
+import InputError from '@/Components/InputError';
 import Label from '@/Components/Label';
-import ValidationErrors from '@/Components/ValidationErrors';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ConfirmPassword() {
@@ -35,8 +35,6 @@ export default function ConfirmPassword() {
                 This is a secure area of the application. Please confirm your password before continuing.
             </div>
 
-            <ValidationErrors errors={errors} />
-
             <form onSubmit={submit}>
                 <div className="mt-4">
                     <Label forInput="password" value="Password" />
@@ -49,6 +47,8 @@ export default function ConfirmPassword() {
                         isFocused={true}
                         handleChange={onHandleChange}
                     />
+
+                    <InputError message={errors.password} className="mt-2" />
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
index cfd760380..89c6c1d07 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Button from '@/Components/Button';
 import Guest from '@/Layouts/Guest';
 import Input from '@/Components/Input';
-import ValidationErrors from '@/Components/ValidationErrors';
+import InputError from '@/Components/InputError';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ForgotPassword({ status }) {
@@ -31,8 +31,6 @@ export default function ForgotPassword({ status }) {
 
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
-            <ValidationErrors errors={errors} />
-
             <form onSubmit={submit}>
                 <Input
                     type="text"
@@ -43,6 +41,8 @@ export default function ForgotPassword({ status }) {
                     handleChange={onHandleChange}
                 />
 
+                <InputError message={errors.email} className="mt-2" />
+
                 <div className="flex items-center justify-end mt-4">
                     <Button className="ml-4" processing={processing}>
                         Email Password Reset Link
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
index 557d15d1a..d56b3d056 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -3,8 +3,8 @@ import Button from '@/Components/Button';
 import Checkbox from '@/Components/Checkbox';
 import Guest from '@/Layouts/Guest';
 import Input from '@/Components/Input';
+import InputError from '@/Components/InputError';
 import Label from '@/Components/Label';
-import ValidationErrors from '@/Components/ValidationErrors';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
 
 export default function Login({ status, canResetPassword }) {
@@ -36,8 +36,6 @@ export default function Login({ status, canResetPassword }) {
 
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
-            <ValidationErrors errors={errors} />
-
             <form onSubmit={submit}>
                 <div>
                     <Label forInput="email" value="Email" />
@@ -51,6 +49,8 @@ export default function Login({ status, canResetPassword }) {
                         isFocused={true}
                         handleChange={onHandleChange}
                     />
+
+                    <InputError message={errors.email} className="mt-2" />
                 </div>
 
                 <div className="mt-4">
@@ -64,6 +64,8 @@ export default function Login({ status, canResetPassword }) {
                         autoComplete="current-password"
                         handleChange={onHandleChange}
                     />
+
+                    <InputError message={errors.password} className="mt-2" />
                 </div>
 
                 <div className="block mt-4">
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
index 2b1abf579..d0a70baf4 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import Button from '@/Components/Button';
 import Guest from '@/Layouts/Guest';
 import Input from '@/Components/Input';
+import InputError from '@/Components/InputError';
 import Label from '@/Components/Label';
-import ValidationErrors from '@/Components/ValidationErrors';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
 
 export default function Register() {
@@ -34,8 +34,6 @@ export default function Register() {
         <Guest>
             <Head title="Register" />
 
-            <ValidationErrors errors={errors} />
-
             <form onSubmit={submit}>
                 <div>
                     <Label forInput="name" value="Name" />
@@ -50,6 +48,8 @@ export default function Register() {
                         handleChange={onHandleChange}
                         required
                     />
+
+                    <InputError message={errors.name} className="mt-2" />
                 </div>
 
                 <div className="mt-4">
@@ -64,6 +64,8 @@ export default function Register() {
                         handleChange={onHandleChange}
                         required
                     />
+
+                    <InputError message={errors.email} className="mt-2" />
                 </div>
 
                 <div className="mt-4">
@@ -78,6 +80,8 @@ export default function Register() {
                         handleChange={onHandleChange}
                         required
                     />
+
+                    <InputError message={errors.password} className="mt-2" />
                 </div>
 
                 <div className="mt-4">
@@ -91,6 +95,8 @@ export default function Register() {
                         handleChange={onHandleChange}
                         required
                     />
+
+                    <InputError message={errors.password_confirmation} className="mt-2" />
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
index 5ece3a188..48bfbd68e 100644
--- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
+++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import Button from '@/Components/Button';
 import Guest from '@/Layouts/Guest';
 import Input from '@/Components/Input';
+import InputError from '@/Components/InputError';
 import Label from '@/Components/Label';
-import ValidationErrors from '@/Components/ValidationErrors';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ResetPassword({ token, email }) {
@@ -34,8 +34,6 @@ export default function ResetPassword({ token, email }) {
         <Guest>
             <Head title="Reset Password" />
 
-            <ValidationErrors errors={errors} />
-
             <form onSubmit={submit}>
                 <div>
                     <Label forInput="email" value="Email" />
@@ -48,6 +46,8 @@ export default function ResetPassword({ token, email }) {
                         autoComplete="username"
                         handleChange={onHandleChange}
                     />
+
+                    <InputError message={errors.email} className="mt-2" />
                 </div>
 
                 <div className="mt-4">
@@ -62,6 +62,8 @@ export default function ResetPassword({ token, email }) {
                         isFocused={true}
                         handleChange={onHandleChange}
                     />
+
+                    <InputError message={errors.password} className="mt-2" />
                 </div>
 
                 <div className="mt-4">
@@ -75,6 +77,8 @@ export default function ResetPassword({ token, email }) {
                         autoComplete="new-password"
                         handleChange={onHandleChange}
                     />
+
+                    <InputError message={errors.password_confirmation} className="mt-2" />
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
diff --git a/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue b/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue
deleted file mode 100644
index fa4853162..000000000
--- a/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { usePage } from '@inertiajs/inertia-vue3';
-
-const errors = computed(() => usePage().props.value.errors);
-
-const hasErrors = computed(() => Object.keys(errors.value).length > 0);
-</script>
-
-<template>
-    <div v-if="hasErrors">
-        <div class="font-medium text-red-600">Whoops! Something went wrong.</div>
-
-        <ul class="mt-3 list-disc list-inside text-sm text-red-600">
-            <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
-        </ul>
-    </div>
-</template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
index aa69dbaf8..3d71fba66 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -2,8 +2,8 @@
 import BreezeButton from '@/Components/Button.vue';
 import BreezeGuestLayout from '@/Layouts/Guest.vue';
 import BreezeInput from '@/Components/Input.vue';
+import BreezeInputError from '@/Components/InputError.vue';
 import BreezeLabel from '@/Components/Label.vue';
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
 import { Head, useForm } from '@inertiajs/inertia-vue3';
 
 const form = useForm({
@@ -25,12 +25,11 @@ const submit = () => {
             This is a secure area of the application. Please confirm your password before continuing.
         </div>
 
-        <BreezeValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <BreezeLabel for="password" value="Password" />
                 <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
+                <BreezeInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="flex justify-end mt-4">
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
index 0a5b93dae..0b59e00bf 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
@@ -2,8 +2,8 @@
 import BreezeButton from '@/Components/Button.vue';
 import BreezeGuestLayout from '@/Layouts/Guest.vue';
 import BreezeInput from '@/Components/Input.vue';
+import BreezeInputError from '@/Components/InputError.vue';
 import BreezeLabel from '@/Components/Label.vue';
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
 import { Head, useForm } from '@inertiajs/inertia-vue3';
 
 defineProps({
@@ -31,12 +31,11 @@ const submit = () => {
             {{ status }}
         </div>
 
-        <BreezeValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <BreezeLabel for="email" value="Email" />
                 <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+                <BreezeInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
index 76002b0f5..7eab17159 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
@@ -3,8 +3,8 @@ import BreezeButton from '@/Components/Button.vue';
 import BreezeCheckbox from '@/Components/Checkbox.vue';
 import BreezeGuestLayout from '@/Layouts/Guest.vue';
 import BreezeInput from '@/Components/Input.vue';
+import BreezeInputError from '@/Components/InputError.vue';
 import BreezeLabel from '@/Components/Label.vue';
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
 
 defineProps({
@@ -29,8 +29,6 @@ const submit = () => {
     <BreezeGuestLayout>
         <Head title="Log in" />
 
-        <BreezeValidationErrors class="mb-4" />
-
         <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
             {{ status }}
         </div>
@@ -39,11 +37,13 @@ const submit = () => {
             <div>
                 <BreezeLabel for="email" value="Email" />
                 <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+                <BreezeInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
                 <BreezeLabel for="password" value="Password" />
                 <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
+                <BreezeInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="block mt-4">
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
index 67c83bf89..3f16b5182 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
@@ -2,8 +2,8 @@
 import BreezeButton from '@/Components/Button.vue';
 import BreezeGuestLayout from '@/Layouts/Guest.vue';
 import BreezeInput from '@/Components/Input.vue';
+import BreezeInputError from '@/Components/InputError.vue';
 import BreezeLabel from '@/Components/Label.vue';
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
 
 const form = useForm({
@@ -25,27 +25,29 @@ const submit = () => {
     <BreezeGuestLayout>
         <Head title="Register" />
 
-        <BreezeValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <BreezeLabel for="name" value="Name" />
                 <BreezeInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus autocomplete="name" />
+                <BreezeInputError class="mt-2" :message="form.errors.name" />
             </div>
 
             <div class="mt-4">
                 <BreezeLabel for="email" value="Email" />
                 <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" />
+                <BreezeInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
                 <BreezeLabel for="password" value="Password" />
                 <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
+                <BreezeInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="mt-4">
                 <BreezeLabel for="password_confirmation" value="Confirm Password" />
                 <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
+                <BreezeInputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>
 
             <div class="flex items-center justify-end mt-4">
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
index 3c60703b2..ab9deac7f 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
@@ -2,8 +2,8 @@
 import BreezeButton from '@/Components/Button.vue';
 import BreezeGuestLayout from '@/Layouts/Guest.vue';
 import BreezeInput from '@/Components/Input.vue';
+import BreezeInputError from '@/Components/InputError.vue';
 import BreezeLabel from '@/Components/Label.vue';
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
 import { Head, useForm } from '@inertiajs/inertia-vue3';
 
 const props = defineProps({
@@ -29,22 +29,23 @@ const submit = () => {
     <BreezeGuestLayout>
         <Head title="Reset Password" />
 
-        <BreezeValidationErrors class="mb-4" />
-
         <form @submit.prevent="submit">
             <div>
                 <BreezeLabel for="email" value="Email" />
                 <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+                <BreezeInputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
                 <BreezeLabel for="password" value="Password" />
                 <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
+                <BreezeInputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="mt-4">
                 <BreezeLabel for="password_confirmation" value="Confirm Password" />
                 <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
+                <BreezeInputError class="mt-2" :message="form.errors.password_confirmation" />
             </div>
 
             <div class="flex items-center justify-end mt-4">