From 6c479e80d6c585631f4c0bb053e8dad75f67e209 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Sun, 8 Jun 2025 00:53:27 +0200
Subject: [PATCH 1/3] feat: enhance login form with sign-up input-fields and
 autocomplete attributes

---
 src/components/labeled-input.tsx   |  3 +
 src/components/user/login-form.tsx | 88 ++++++++++++++++++++++++------
 2 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx
index 250dd5f..94563dc 100644
--- a/src/components/labeled-input.tsx
+++ b/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>
   );
diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx
index a8e6382..2ed61e4 100644
--- a/src/components/user/login-form.tsx
+++ b/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
-        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'
-      />
+      {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'>
-          Login
+          {isSignUp ? 'Sign Up' : 'Login'}
         </Button>
-        <Button type='submit' variant='outline_primary'>
-          Sign Up
+        <Button
+          type='button'
+          variant='outline_primary'
+          onClick={() => setIsSignUp((v) => !v)}
+        >
+          {isSignUp ? 'Back to Login' : 'Sign Up'}
         </Button>
       </div>
     </form>

From 386d72d9141f574b30506b87ed422941cdc178a4 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Sun, 8 Jun 2025 00:56:37 +0200
Subject: [PATCH 2/3] fix: correct typo in Prisma command in README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e9319f3..d9ca71b 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ This project is built with a modern tech stack:
       yarn prisma:generate
       ```
       ```bash
-      yarn prisa:db:push
+      yarn prisma:db:push
       ```
     - Run the following command to apply migrations and generate Prisma Client:
       ```bash

From 9183117a20c7921fc51016cd84695bcca1256660 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Tue, 10 Jun 2025 09:23:09 +0200
Subject: [PATCH 3/3] feat: add form reset functionality and ref to login form

---
 src/components/user/login-form.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx
index 2ed61e4..8a00749 100644
--- a/src/components/user/login-form.tsx
+++ b/src/components/user/login-form.tsx
@@ -4,15 +4,18 @@ 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';
+import { useRef, useState } from 'react';
 
 const SIGNIN_ERROR_URL = '/error';
 
 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';
@@ -91,7 +94,10 @@ export default function LoginForm() {
         <Button
           type='button'
           variant='outline_primary'
-          onClick={() => setIsSignUp((v) => !v)}
+          onClick={() => {
+            formRef.current?.reset();
+            setIsSignUp((v) => !v);
+          }}
         >
           {isSignUp ? 'Back to Login' : 'Sign Up'}
         </Button>