Skip to content

Commit

Permalink
Display validation errors alongside the fields
Browse files Browse the repository at this point in the history
  • Loading branch information
jessarcher committed Aug 2, 2022
1 parent 9419234 commit 53579c3
Show file tree
Hide file tree
Showing 12 changed files with 42 additions and 62 deletions.
17 changes: 0 additions & 17 deletions stubs/inertia-react/resources/js/Components/ValidationErrors.jsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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" />
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down
8 changes: 5 additions & 3 deletions stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down Expand Up @@ -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" />
Expand All @@ -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">
Expand All @@ -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">
Expand Down
12 changes: 9 additions & 3 deletions stubs/inertia-react/resources/js/Pages/Auth/Register.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -34,8 +34,6 @@ export default function Register() {
<Guest>
<Head title="Register" />

<ValidationErrors errors={errors} />

<form onSubmit={submit}>
<div>
<Label forInput="name" value="Name" />
Expand All @@ -50,6 +48,8 @@ export default function Register() {
handleChange={onHandleChange}
required
/>

<InputError message={errors.name} className="mt-2" />
</div>

<div className="mt-4">
Expand All @@ -64,6 +64,8 @@ export default function Register() {
handleChange={onHandleChange}
required
/>

<InputError message={errors.email} className="mt-2" />
</div>

<div className="mt-4">
Expand All @@ -78,6 +80,8 @@ export default function Register() {
handleChange={onHandleChange}
required
/>

<InputError message={errors.password} className="mt-2" />
</div>

<div className="mt-4">
Expand All @@ -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">
Expand Down
10 changes: 7 additions & 3 deletions stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down Expand Up @@ -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" />
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand Down
18 changes: 0 additions & 18 deletions stubs/inertia-vue/resources/js/Components/ValidationErrors.vue

This file was deleted.

5 changes: 2 additions & 3 deletions stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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="errors.password" />
</div>

<div class="flex justify-end mt-4">
Expand Down
5 changes: 2 additions & 3 deletions stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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="errors.email" />
</div>

<div class="flex items-center justify-end mt-4">
Expand Down
6 changes: 3 additions & 3 deletions stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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>
Expand All @@ -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="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="errors.password" />
</div>

<div class="block mt-4">
Expand Down
4 changes: 4 additions & 0 deletions stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,25 @@ const 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="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="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="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="errors.password_confirmation" />
</div>

<div class="flex items-center justify-end mt-4">
Expand Down
7 changes: 4 additions & 3 deletions stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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="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="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="errors.password_confirmation" />
</div>

<div class="flex items-center justify-end mt-4">
Expand Down

0 comments on commit 53579c3

Please sign in to comment.