feat: enhance login form with sign-up input-fields and autocomplete attributes

src/components/labeled-input.tsx

@@ -7,12 +7,14 @@ export default function LabeledInput({
   placeholder,
   value,
   name,
+  autocomplete,
 }: {
   type: 'text' | 'email' | 'password';
   label: string;
   placeholder?: string;
   value?: string;
   name?: string;
+  autocomplete?: string;
 }) {
   return (
     <div className='grid grid-cols-1 gap-1'>
@@ -24,6 +26,7 @@ export default function LabeledInput({
         defaultValue={value}
         id={name}
         name={name}
+        autoComplete={autocomplete}
       />
     </div>
   );

src/components/user/login-form.tsx

@@ -1,19 +1,27 @@
+'use client';
 import { signIn } from '@/auth';
 import LabeledInput from '@/components/labeled-input';
 import { Button } from '@/components/custom-ui/button';
 import { AuthError } from 'next-auth';
 import { redirect } from 'next/navigation';
+import { useState } from 'react';
 
 const SIGNIN_ERROR_URL = '/error';
 
 export default function LoginForm() {
+  const [isSignUp, setIsSignUp] = useState(false);
+
   return (
     <form
       className='flex flex-col gap-5 w-full'
       action={async (formData) => {
-        'use server';
+        'use client';
         try {
-          await signIn('credentials', formData);
+          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}`);
@@ -22,24 +30,70 @@ export default function LoginForm() {
         }
       }}
     >
-      <LabeledInput
+      {isSignUp ? (
-        type='email'
+        <>
-        label='E-Mail or Username'
+          <LabeledInput
-        placeholder='What you are known as'
+            type='text'
-        name='email'
+            label='First Name'
-      />
+            placeholder='Your first name'
-      <LabeledInput
+            name='firstName'
-        type='password'
+            autocomplete='given-name'
-        label='Password'
+          />
-        placeholder="Let's hope you remember it"
+          <LabeledInput
-        name='password'
+            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'>
-          Login
+          {isSignUp ? 'Sign Up' : 'Login'}
         </Button>
-        <Button type='submit' variant='outline_primary'>
+        <Button
-          Sign Up
+          type='button'
+          variant='outline_primary'
+          onClick={() => setIsSignUp((v) => !v)}
+        >
+          {isSignUp ? 'Back to Login' : 'Sign Up'}
         </Button>
       </div>
     </form>