refactor: update labels and placeholders in login form inputs

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>
   );

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'