Add error state to login and register forms

apps/nextjs-app/src/components/ui/form/error.tsx

@@ -1,15 +1,19 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+import { cn } from '@/utils/cn';
+
 export type ErrorProps = {
   errorMessage?: string | null;
-};
+} & ComponentPropsWithoutRef<'div'>;
 
-export const Error = ({ errorMessage }: ErrorProps) => {
+export const Error = ({ errorMessage, className }: ErrorProps) => {
   if (!errorMessage) return null;
 
   return (
     <div
       role="alert"
       aria-label={errorMessage}
-      className="text-sm font-semibold text-red-500"
+      className={cn('text-sm font-semibold text-red-500', className)}
     >
       {errorMessage}
     </div>

apps/nextjs-app/src/features/auth/components/login-form.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input } from '@/components/ui/form';
+import { Error } from '@/components/ui/form/error';
 import { paths } from '@/config/paths';
 import { useLogin, loginInputSchema } from '@/lib/auth';
 
@@ -13,17 +14,17 @@ type LoginFormProps = {
 };
 
 export const LoginForm = ({ onSuccess }: LoginFormProps) => {
-  const login = useLogin({
+  const { mutate, isPending, error } = useLogin({
     onSuccess,
   });
-
   const searchParams = useSearchParams();
   const redirectTo = searchParams?.get('redirectTo');
+
   return (
     <div>
       <Form
         onSubmit={(values) => {
-          login.mutate(values);
+          mutate(values);
         }}
         schema={loginInputSchema}
       >
@@ -42,11 +43,8 @@ export const LoginForm = ({ onSuccess }: LoginFormProps) => {
               registration={register('password')}
             />
             <div>
-              <Button
-                isLoading={login.isPending}
-                type="submit"
-                className="w-full"
-              >
+              {error && <Error className="mb-2" errorMessage={error.message} />}
+              <Button isLoading={isPending} type="submit" className="w-full">
                 Log in
               </Button>
             </div>

apps/nextjs-app/src/features/auth/components/register-form.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Form, Input, Select, Label, Switch } from '@/components/ui/form';
+import { Error } from '@/components/ui/form/error';
 import { paths } from '@/config/paths';
 import { useRegister, registerInputSchema } from '@/lib/auth';
 import { Team } from '@/types/api';
@@ -24,14 +25,15 @@ export const RegisterForm = ({
   teams,
 }: RegisterFormProps) => {
   const registering = useRegister({ onSuccess });
+  const { mutate, isPending, error } = useRegister({ onSuccess });
   const searchParams = useSearchParams();
   const redirectTo = searchParams?.get('redirectTo');
 
   return (
     <div>
       <Form
         onSubmit={(values) => {
-          registering.mutate(values);
+          mutate(values);
         }}
         schema={registerInputSchema}
         options={{
@@ -96,11 +98,8 @@ export const RegisterForm = ({
               />
             )}
             <div>
-              <Button
-                isLoading={registering.isPending}
-                type="submit"
-                className="w-full"
-              >
+              {error && <Error className="mb-2" errorMessage={error.message} />}
+              <Button isLoading={isPending} type="submit" className="w-full">
                 Register
               </Button>
             </div>