revision: auth page components

src/components/input/InputField.tsx

@@ -20,7 +20,7 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
             <input
                 onChange={onChange}
                 className='py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
-                id={htmlFor}
+                name={htmlFor}
                 {...inputProps} />
             {children}
         </div>

src/components/input/MultiInputField.tsx

@@ -12,7 +12,7 @@ type Props = {
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
 
 
-function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, value = '' }: Props) {
+function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className, value = '', ...restProps }: Props) {
     const values = value?.toString().split('').slice(0, maxLength);
     const inputRefs = useRef(Array.from({ length: maxLength }, () => createRef<HTMLInputElement>()));
     const [prevLength, setPrevLength] = useState(0);
@@ -54,15 +54,16 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className,
                 htmlFor={htmlFor}>
                 {labelText}
             </label>
-            <div className='inline-flex justify-between items-center gap-2'>
+            <div id={htmlFor} className='inline-flex justify-between items-center gap-2'>
                 {inputRefs?.current?.map((ref, i) => {
                     return (
                         <input
+                            {...restProps}
                             key={i}
                             onKeyDown={keyDown}
                             onChange={onChange}
-                            id={`${htmlFor}-data-${i}`}
-                            readOnly={Math.max(0, values?.length) != i && prevLength != i}
+                            name={`${htmlFor}-data-${i}`}
+                            readOnly={i != maxLength - 1 && Math.max(0, values?.length) != i && prevLength != i}
                             ref={ref}
                             value={values?.at(i) ?? ''}
                             maxLength={1}