expose onInput in component, force lowercase for email input

Client/src/Components/Inputs/Field/index.jsx

@@ -48,6 +48,7 @@ const Field = forwardRef(
       placeholder,
       value,
       onChange,
+      onInput,
       error,
       disabled,
     },
@@ -87,6 +88,7 @@ const Field = forwardRef(
           multiline={type === "description"}
           rows={type === "description" ? 4 : 1}
           value={value}
+          onInput={onInput}
           onChange={onChange}
           disabled={disabled}
           inputRef={ref}
@@ -176,6 +178,8 @@ const Field = forwardRef(
   }
 );
 
+Field.displayName = "Field";
+
 Field.propTypes = {
   type: PropTypes.oneOf(["text", "password", "url", "email", "description"]),
   id: PropTypes.string.isRequired,
@@ -189,6 +193,7 @@ Field.propTypes = {
   placeholder: PropTypes.string,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func,
+  onInput: PropTypes.func,
   error: PropTypes.string,
   disabled: PropTypes.bool,
 };

Client/src/Pages/Auth/Register/Register.jsx

@@ -226,6 +226,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
               placeholder="jordan.ellis@domain.com"
               autoComplete="email"
               value={form.email}
+              onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
               onChange={onChange}
               error={errors.email}
               ref={inputRef}