ui: fix props not being forwarded to children in form

apps/web/src/components/dialogs/logindialog.js

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { Button, Text } from "rebass";
+import { Box, Button, Text } from "rebass";
 import Input from "../inputs";
 import * as Icon from "../icons";
 import Dialog, { showDialog } from "./dialog";
 import { showSignUpDialog } from "./signupdialog";
 import { useStore } from "../../stores/user-store";
 import PasswordInput from "../inputs/password";
-import Form from "../form";
+import Dropper from "../dropper";
 
 function LoginDialog(props) {
   const { onClose } = props;
@@ -35,14 +35,16 @@ function LoginDialog(props) {
         }
       }}
     >
-      <Form mt={1} gutter={2} form={form}>
-        <Input autoFocus name="username" title="Username" />
-        <PasswordInput />
+      <Box mt={1}>
+        <Dropper mt={2} form={form}>
+          <Input autoFocus name="username" title="Username" />
+          <PasswordInput />
+        </Dropper>
         <Button variant="anchor" onClick={showSignUpDialog}>
           Create a New Account
         </Button>
         {error && <Text variant="error">{error}</Text>}
-      </Form>
+      </Box>
     </Dialog>
   );
 }

apps/web/src/components/dialogs/signupdialog.js

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { Text } from "rebass";
+import { Text, Box } from "rebass";
 import Input from "../inputs";
 import * as Icon from "../icons";
 import Dialog, { showDialog } from "./dialog";
 //import { db } from "../../common";
 import EmailInput from "../inputs/email";
 import PasswordInput from "../inputs/password";
-import Form from "../form";
+import Dropper from "../dropper";
 
 function SignUpDialog(props) {
   const { onClose } = props;
@@ -32,12 +32,14 @@ function SignUpDialog(props) {
         }
       }}
     >
-      <Form mt={1} gutter={2} form={form}>
-        <Input autoFocus title="Username" name="username" />
-        <EmailInput />
-        <PasswordInput confirm />
+      <Box mt={1}>
+        <Dropper mt={2} form={form}>
+          <Input autoFocus title="Username" name="username" />
+          <EmailInput />
+          <PasswordInput confirm />
+        </Dropper>
         {error && <Text variant="error">{error}</Text>}
-      </Form>
+      </Box>
     </Dialog>
   );
 }

apps/web/src/components/dropper/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function Dropper(props) {
+  const { children } = props;
+  const fillChildren = React.Children.map(children, (child, index) => {
+    if (!child) return;
+    const childProps = { ...props, children: child.props.children };
+    return React.cloneElement(child, childProps);
+  });
+  return <React.Fragment>{fillChildren}</React.Fragment>;
+}
+export default Dropper;

apps/web/src/components/form/index.js

@@ -1,14 +0,0 @@
-import React from "react";
-import { Box } from "rebass";
-
-function Form(props) {
-  const { gutter, children, form } = props;
-  const childrenWithGutter = React.Children.map(children, (child, index) => {
-    if (!child) return;
-    const props = { mt: index && gutter, form };
-    return React.cloneElement(child, props);
-  });
-  return <Box {...props}>{childrenWithGutter}</Box>;
-}
-
-export default Form;

apps/web/src/components/inputs/email.js

@@ -2,7 +2,7 @@ import React from "react";
 import Input from "./index";
 import { isValidEmail } from "../../utils/validation";
 
-function EmailInput() {
+function EmailInput(props) {
   return (
     <Input
       title="Email"
@@ -10,6 +10,7 @@ function EmailInput() {
       type="email"
       error="Email is not valid."
       validate={isValidEmail}
+      {...props}
     />
   );
 }

apps/web/src/components/inputs/password.js

@@ -1,10 +1,11 @@
 import React from "react";
 import Input from "./index";
+import Dropper from "../dropper";
 
 function PasswordInput(props) {
   const { confirm } = props;
   return (
-    <>
+    <Dropper {...props}>
       <Input title="Password" type="password" name="password" />
       {confirm && (
         <Input
@@ -14,7 +15,8 @@ function PasswordInput(props) {
           validate={(password, form) => form.password === password}
         />
       )}
-    </>
+    </Dropper>
   );
 }
+
 export default PasswordInput;