From 74d7a10cf138c2aeb524dccea78d1ebcaf33d176 Mon Sep 17 00:00:00 2001
From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com>
Date: Tue, 13 May 2025 14:08:19 +0200
Subject: [PATCH 1/3] refactor: update labels and placeholders in login form
 inputs

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

diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx
index 20438e8..f2be41a 100644
--- a/src/components/user/login-form.tsx
+++ b/src/components/user/login-form.tsx
@@ -6,13 +6,15 @@ export default function LoginForm() {
     <form className='flex flex-col gap-5 w-full'>
       <LabeledInput
         type='email'
-        label='E-Mail'
-        placeholder='Enter your E-Mail'
+        label='E-Mail or Username'
+        placeholder='What you are known as.'
+        name='email'
       />
       <LabeledInput
         type='password'
         label='Password'
-        placeholder='Enter your Password'
+        placeholder="Let's hope you remember it."
+        name='password'
       />
       <Button
         className='hover:bg-blue-600 hover:text-white'

From 9116dd1085a1319e4cdf8762784d38f2a088abd6 Mon Sep 17 00:00:00 2001
From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com>
Date: Tue, 13 May 2025 14:22:09 +0200
Subject: [PATCH 2/3] fix: use name prop for label and input id in LabeledInput
 component

---
 src/components/labeled-input.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx
index 7b4768a..7a416d4 100644
--- a/src/components/labeled-input.tsx
+++ b/src/components/labeled-input.tsx
@@ -6,23 +6,24 @@ export default function LabeledInput({
   label,
   placeholder,
   value,
+  name,
 }: {
   type: 'text' | 'email' | 'password';
   label: string;
   placeholder?: string;
   value?: string;
+  name?: string;
 }) {
-  const elementId = Math.random().toString(36).substring(2, 15);
-
   return (
     <div className='flex flex-col gap-1'>
-      <Label htmlFor={elementId}>{label}</Label>
+      <Label htmlFor={name}>{label}</Label>
 
       <Input
         type={type}
         placeholder={placeholder}
         defaultValue={value}
-        id={elementId}
+        id={name}
+        name={name}
       />
     </div>
   );

From 798467552e7ce2b6f5e601f5080a26fe46f04d07 Mon Sep 17 00:00:00 2001
From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com>
Date: Tue, 13 May 2025 14:08:19 +0200
Subject: [PATCH 3/3] refactor: update labels and placeholders in login form
 inputs

---
 src/components/labeled-input.tsx   | 9 +++++----
 src/components/user/login-form.tsx | 8 +++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx
index 7b4768a..7a416d4 100644
--- a/src/components/labeled-input.tsx
+++ b/src/components/labeled-input.tsx
@@ -6,23 +6,24 @@ export default function LabeledInput({
   label,
   placeholder,
   value,
+  name,
 }: {
   type: 'text' | 'email' | 'password';
   label: string;
   placeholder?: string;
   value?: string;
+  name?: string;
 }) {
-  const elementId = Math.random().toString(36).substring(2, 15);
-
   return (
     <div className='flex flex-col gap-1'>
-      <Label htmlFor={elementId}>{label}</Label>
+      <Label htmlFor={name}>{label}</Label>
 
       <Input
         type={type}
         placeholder={placeholder}
         defaultValue={value}
-        id={elementId}
+        id={name}
+        name={name}
       />
     </div>
   );
diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx
index 20438e8..f2be41a 100644
--- a/src/components/user/login-form.tsx
+++ b/src/components/user/login-form.tsx
@@ -6,13 +6,15 @@ export default function LoginForm() {
     <form className='flex flex-col gap-5 w-full'>
       <LabeledInput
         type='email'
-        label='E-Mail'
-        placeholder='Enter your E-Mail'
+        label='E-Mail or Username'
+        placeholder='What you are known as.'
+        name='email'
       />
       <LabeledInput
         type='password'
         label='Password'
-        placeholder='Enter your Password'
+        placeholder="Let's hope you remember it."
+        name='password'
       />
       <Button
         className='hover:bg-blue-600 hover:text-white'