feat: implement credentials login

implements the credentials login functionality

src/components/labeled-input.tsx

@@ -8,6 +8,8 @@ export default function LabeledInput({
   value,
   name,
   autocomplete,
+  error,
+  ...rest
 }: {
   type: 'text' | 'email' | 'password';
   label: string;
@@ -15,7 +17,8 @@ export default function LabeledInput({
   value?: string;
   name?: string;
   autocomplete?: string;
-}) {
+  error?: string;
+} & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
     <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
@@ -27,7 +30,9 @@ export default function LabeledInput({
         id={name}
         name={name}
         autoComplete={autocomplete}
+        {...rest}
       />
+      {error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
     </div>
   );
 }

src/components/user/login-form.tsx

@@ -1,107 +1,214 @@
 'use client';
-import { signIn } from '@/auth';
+
+import React, { useState, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+
 import LabeledInput from '@/components/labeled-input';
 import { Button } from '@/components/custom-ui/button';
-import { AuthError } from 'next-auth';
-import { redirect } from 'next/navigation';
-import { useRef, useState } from 'react';
+import useZodForm from '@/lib/hooks/useZodForm';
+import { loginSchema, registerSchema } from '@/lib/validation/user';
+import { loginAction } from '@/lib/auth/login';
+import { registerAction } from '@/lib/auth/register';
 
-const SIGNIN_ERROR_URL = '/error';
+function LoginFormElement({
+  setIsSignUp,
+  formRef,
+}: {
+  setIsSignUp: (value: boolean | ((prev: boolean) => boolean)) => void;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+}) {
+  const { handleSubmit, formState, register, setError } =
+    useZodForm(loginSchema);
+  const router = useRouter();
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      const { error } = await loginAction(data);
+
+      if (error) {
+        setError('root', {
+          message: error,
+        });
+        return;
+      } else {
+        router.push('/home');
+        router.refresh();
+        return;
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error)
+        setError('root', {
+          message: error?.message,
+        });
+      else
+        setError('root', {
+          message: 'An unknown error occurred.',
+        });
+    }
+  });
+
+  return (
+    <form className='flex flex-col gap-5 w-full' onSubmit={onSubmit}>
+      <LabeledInput
+        type='text'
+        label='E-Mail or Username'
+        placeholder='What you are known as'
+        error={formState.errors.email?.message}
+        {...register('email')}
+      />
+      <LabeledInput
+        type='password'
+        label='Password'
+        placeholder="Let's hope you remember it"
+        error={formState.errors.password?.message}
+        {...register('password')}
+      />
+      <div className='grid grid-rows-2 gap-2'>
+        <Button type='submit' variant='primary'>
+          Login
+        </Button>
+        <Button
+          type='button'
+          variant='outline_primary'
+          onClick={() => {
+            formRef?.current?.reset();
+            setIsSignUp((v) => !v);
+          }}
+        >
+          Sign Up
+        </Button>
+      </div>
+      <div>
+        {formState.errors.root?.message && (
+          <p className='text-red-500'>{formState.errors.root?.message}</p>
+        )}
+      </div>
+    </form>
+  );
+}
+
+function RegisterFormElement({
+  setIsSignUp,
+  formRef,
+}: {
+  setIsSignUp: (value: boolean | ((prev: boolean) => boolean)) => void;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+}) {
+  const { handleSubmit, formState, register, setError } =
+    useZodForm(registerSchema);
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      const { error } = await registerAction(data);
+
+      if (error) {
+        setError('root', {
+          message: error,
+        });
+        return;
+      } else {
+        formRef?.current?.reset();
+        setIsSignUp(false);
+        // TODO: Show registration success message (reminder to verify email)
+        return;
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error)
+        setError('root', {
+          message: error?.message,
+        });
+      else
+        setError('root', {
+          message: 'An unknown error occurred.',
+        });
+    }
+  });
+
+  return (
+    <form
+      ref={formRef}
+      className='flex flex-col gap-5 w-full'
+      onSubmit={onSubmit}
+    >
+      <LabeledInput
+        type='text'
+        label='First Name'
+        placeholder='Your first name'
+        autocomplete='given-name'
+        error={formState.errors.firstName?.message}
+        {...register('firstName')}
+      />
+      <LabeledInput
+        type='text'
+        label='Last Name'
+        placeholder='Your last name'
+        autocomplete='family-name'
+        error={formState.errors.lastName?.message}
+        {...register('lastName')}
+      />
+      <LabeledInput
+        type='email'
+        label='E-Mail'
+        placeholder='Your email address'
+        autocomplete='email'
+        error={formState.errors.email?.message}
+        {...register('email')}
+      />
+      <LabeledInput
+        type='text'
+        label='Username'
+        placeholder='Your username'
+        autocomplete='username'
+        error={formState.errors.username?.message}
+        {...register('username')}
+      />
+      <LabeledInput
+        type='password'
+        label='Password'
+        placeholder='Create a password'
+        autocomplete='new-password'
+        error={formState.errors.password?.message}
+        {...register('password')}
+      />
+      <LabeledInput
+        type='password'
+        label='Confirm Password'
+        placeholder='Repeat your password'
+        autocomplete='new-password'
+        error={formState.errors.confirmPassword?.message}
+        {...register('confirmPassword')}
+      />
+      <div className='grid grid-rows-2 gap-2'>
+        <Button type='submit' variant='primary'>
+          Sign Up
+        </Button>
+        <Button
+          type='button'
+          variant='outline_primary'
+          onClick={() => {
+            formRef?.current?.reset();
+            setIsSignUp((v) => !v);
+          }}
+        >
+          Back to Login
+        </Button>
+      </div>
+      <div>
+        {formState.errors.root?.message && (
+          <p className='text-red-500'>{formState.errors.root?.message}</p>
+        )}
+      </div>
+    </form>
+  );
+}
 
 export default function LoginForm() {
   const [isSignUp, setIsSignUp] = useState(false);
 
   const formRef = useRef<HTMLFormElement>(null);
 
-  return (
-    <form
-      ref={formRef}
-      className='flex flex-col gap-5 w-full'
-      action={async (formData) => {
-        'use client';
-        try {
-          if (isSignUp) {
-            // handle sign up logic here
-          } else {
-            await signIn('credentials', formData);
-          }
-        } catch (error) {
-          if (error instanceof AuthError) {
-            return redirect(`${SIGNIN_ERROR_URL}?error=${error.type}`);
-          }
-          throw error;
-        }
-      }}
-    >
-      {isSignUp ? (
-        <>
-          <LabeledInput
-            type='text'
-            label='First Name'
-            placeholder='Your first name'
-            name='firstName'
-            autocomplete='given-name'
-          />
-          <LabeledInput
-            type='text'
-            label='Last Name'
-            placeholder='Your last name'
-            name='lastName'
-            autocomplete='family-name'
-          />
-          <LabeledInput
-            type='email'
-            label='E-Mail'
-            placeholder='Your email address'
-            name='email'
-            autocomplete='email'
-          />
-          <LabeledInput
-            type='password'
-            label='Password'
-            placeholder='Create a password'
-            name='password'
-            autocomplete='new-password'
-          />
-          <LabeledInput
-            type='password'
-            label='Confirm Password'
-            placeholder='Repeat your password'
-            name='confirmPassword'
-            autocomplete='new-password'
-          />
-        </>
-      ) : (
-        <>
-          <LabeledInput
-            type='email'
-            label='E-Mail or Username'
-            placeholder='What you are known as'
-            name='email'
-          />
-          <LabeledInput
-            type='password'
-            label='Password'
-            placeholder="Let's hope you remember it"
-            name='password'
-          />
-        </>
-      )}
-      <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary'>
-          {isSignUp ? 'Sign Up' : 'Login'}
-        </Button>
-        <Button
-          type='button'
-          variant='outline_primary'
-          onClick={() => {
-            formRef.current?.reset();
-            setIsSignUp((v) => !v);
-          }}
-        >
-          {isSignUp ? 'Back to Login' : 'Sign Up'}
-        </Button>
-      </div>
-    </form>
-  );
+  if (isSignUp) {
+    return <RegisterFormElement setIsSignUp={setIsSignUp} formRef={formRef} />;
+  }
+  return <LoginFormElement setIsSignUp={setIsSignUp} formRef={formRef} />;
 }