[FIX] Show error messages of the input fields on the authentication pages

Author: beromir

resources/js/Pages/Auth/Login.svelte

@@ -12,7 +12,7 @@
     import JetInput from '@/Jetstream/Input.svelte'
     import JetCheckbox from '@/Jetstream/Checkbox.svelte'
     import JetLabel from '@/Jetstream/Label.svelte'
-    import ValidationErrors from "@/Jetstream/ValidationErrors.svelte";
+    import JetInputError from '@/Jetstream/InputError.svelte'
     import {route} from '@/utils';
 
     export let canResetPassword;
@@ -35,19 +35,18 @@
 <JetAuthenticationCard>
     <JetAuthenticationCardLogo slot="logo"/>
 
-    <ValidationErrors class="mt-4" errors={$form.errors} hasErrors={$form.hasErrors}/>
-
     <form on:submit|preventDefault={login}>
         <div>
             <JetLabel id="email" label="Email"/>
             <JetInput bind:value={$form.email} id="email" type="email" class="mt-1 block w-full" required autofocus/>
-            {#if $form.errors.email}{$form.errors.email}{/if}
+            <JetInputError message={$form.errors.email}/>
         </div>
 
         <div class="mt-4">
             <JetLabel id="password" label="Password"/>
             <JetInput bind:value={$form.password} id="password" type="password" class="mt-1 block w-full" required
                       autocomplete="current-password"/>
+            <JetInputError message={$form.errors.password}/>
         </div>
 
         <div class="block mt-4">

resources/js/Pages/Auth/Register.svelte

@@ -10,9 +10,8 @@
     import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo.svelte'
     import JetButton from '@/Jetstream/Button.svelte'
     import JetInput from '@/Jetstream/Input.svelte'
-    // import JetCheckbox from '@/Jetstream/Checkbox.svelte'
+    import JetInputError from '@/Jetstream/InputError.svelte'
     import JetLabel from '@/Jetstream/Label.svelte'
-    import JetValidationErrors from '@/Jetstream/ValidationErrors.svelte'
 
     $title = 'Register';
 
@@ -34,30 +33,32 @@
 <JetAuthenticationCard>
     <JetAuthenticationCardLogo slot="logo"/>
 
-    <JetValidationErrors class="mb-4"/>
-
     <form on:submit|preventDefault={register}>
         <div>
             <JetLabel id="name" label="Name"/>
             <JetInput id="name" class="mt-1 block w-full" bind:value={$form.name} required autofocus
                       autocomplete="name"/>
+            <JetInputError message={$form.errors.name}/>
         </div>
 
         <div class="mt-4">
             <JetLabel id="email" label="Email"/>
             <JetInput id="email" type="email" class="mt-1 block w-full" bind:value={$form.email} required/>
+            <JetInputError message={$form.errors.email}/>
         </div>
 
         <div class="mt-4">
             <JetLabel id="password" label="Password"/>
             <JetInput id="password" type="password" class="mt-1 block w-full" bind:value={$form.password} required
                       autocomplete="new-password"/>
+            <JetInputError message={$form.errors.password}/>
         </div>
 
         <div class="mt-4">
             <JetLabel id="password_confirmation" label="Confirm Password"/>
             <JetInput id="password_confirmation" type="password" class="mt-1 block w-full"
                       bind:value={$form.password_confirmation} required autocomplete="new-password"/>
+            <JetInputError message={$form.errors.password_confirmation}/>
         </div>
 
         <!--

resources/js/Pages/Auth/TwoFactorChallenge.svelte

@@ -10,7 +10,7 @@
     import JetButton from '@/Jetstream/Button.svelte';
     import JetInput from '@/Jetstream/Input.svelte';
     import JetLabel from '@/Jetstream/Label.svelte';
-    import JetValidationErrors from '@/Jetstream/ValidationErrors.svelte';
+    import JetInputError from '@/Jetstream/InputError.svelte';
     import {useForm} from "@inertiajs/inertia-svelte";
     import {tick} from 'svelte';
     import {route} from "@/utils";
@@ -60,18 +60,18 @@
         {/if}
     </div>
 
-    <JetValidationErrors hasErrors={$form.hasErrors} class="mb-4"/>
-
     <form on:submit|preventDefault={submit}>
         {#if !recovery}
             <JetLabel id="code" label="Code"/>
             <JetInput bind:this={codeInput} id="code" type="text" inputmode="numeric" class="mt-1 block w-full"
                       bind:value={$form.code} autofocus autocomplete="one-time-code"/>
+            <JetInputError message={$form.errors.code}/>
 
         {:else}
             <JetLabel id="recovery_code" label="Recovery Code"/>
             <JetInput bind:this={recoveryCodeInput} id="recovery_code" type="text" class="mt-1 block w-full"
                       bind:value={$form.recovery_code} autocomplete="one-time-code"/>
+            <JetInputError message={$form.errors.code}/>
         {/if}
 
         <div class="flex items-center justify-end mt-4">