move auth error above submit button

xvvvyz · Mar 14, 2024 · 054cdd8 · 054cdd8
1 parent 0dd8efb
commit 054cdd8
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/app/_components/change-password-form.tsx b/app/_components/change-password-form.tsx
@@ -17,14 +17,14 @@ const ChangePasswordForm = () => {
         required
         type="password"
       />
+      {state?.error && <p className="text-center">{state.error}</p>}
       <Button
         className="mt-8 w-full"
         loadingText="Changing password…"
         type="submit"
       >
         Change password
       </Button>
-      {state?.error && <p className="text-center">{state.error}</p>}
     </form>
   );
 };

diff --git a/app/_components/forgot-password-form.tsx b/app/_components/forgot-password-form.tsx
@@ -11,10 +11,10 @@ const ForgotPasswordForm = () => {
   return (
     <form action={action} className="flex flex-col gap-6">
       <Input label="Email address" name="email" required type="email" />
+      {state?.error && <p className="text-center">{state.error}</p>}
       <Button className="mt-8 w-full" loadingText="Sending link…" type="submit">
         Send reset link
       </Button>
-      {state?.error && <p className="text-center">{state.error}</p>}
     </form>
   );
 };

diff --git a/app/_components/sign-in-form.tsx b/app/_components/sign-in-form.tsx
@@ -31,10 +31,10 @@ const SignInForm = ({ next }: SignInFormProps) => {
           Forgot password?
         </Button>
       </div>
+      {state?.error && <p className="text-center">{state.error}</p>}
       <Button className="mt-8 w-full" loadingText="Signing in…" type="submit">
         Sign in
       </Button>
-      {state?.error && <p className="text-center">{state.error}</p>}
     </form>
   );
 };

diff --git a/app/_components/sign-up-form.tsx b/app/_components/sign-up-form.tsx
@@ -26,14 +26,14 @@ const SignUpForm = ({ next }: SignUpFormProps) => {
         required
         type="password"
       />
+      {state?.error && <p className="text-center">{state.error}</p>}
       <Button
         className="mt-8 w-full"
         loadingText="Creating account…"
         type="submit"
       >
         Create account
       </Button>
-      {state?.error && <p className="text-center">{state.error}</p>}
     </form>
   );
 };