First integration of forms

src/core/client/auth/components/SignUp.tsx

@@ -1,5 +1,8 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+import { required } from "talk-framework/lib/validation";
 import * as styles from "./SignUp.css";
 
 import {
@@ -11,53 +14,81 @@ import {
   Typography,
 } from "talk-ui/components";
 
-const SignUp: StatelessComponent = props => {
+interface FormProps {
+  email: string;
+  username: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface SignUpForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Flex direction="column">
-        <Typography variant="heading1" align="center">
-          Sign up to join the conversation
-        </Typography>
-        <FormField>
-          <InputLabel>Email Address</InputLabel>
-          <TextField />
-        </FormField>
-        <FormField>
-          <InputLabel>Username</InputLabel>
-          <Typography variant="inputDescription">
-            A unique identifier displayed on your comments. You may use “_” and
-            “.”
-          </Typography>
-          <TextField />
-        </FormField>
-        <FormField>
-          <InputLabel>Password</InputLabel>
-          <Typography variant="inputDescription">
-            Must be at least 8 characters
-          </Typography>
-          <TextField />
-        </FormField>
-        <FormField>
-          <InputLabel>Confirm Password</InputLabel>
-          <TextField />
-        </FormField>
-      </Flex>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Sign up and join the conversation
-        </Button>
-        <Flex
-          itemGutter="half"
-          justifyContent="center"
-          className={styles.subFooter}
-        >
-          <Typography>Already have an account?</Typography>
-          <Button variant="underlined" size="small" color="primary">
-            Sign In
-          </Button>
-        </Flex>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Flex direction="column">
+              <Typography variant="heading1" align="center">
+                Sign up to join the conversation
+              </Typography>
+
+              <Field name="email" validate={required}>
+                {({ input, meta }) => (
+                  <FormField>
+                    <InputLabel>Email Address</InputLabel>
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                    />
+                  </FormField>
+                )}
+              </Field>
+
+              <FormField>
+                <InputLabel>Username</InputLabel>
+                <Typography variant="inputDescription">
+                  A unique identifier displayed on your comments. You may use
+                  “_” and “.”
+                </Typography>
+                <TextField />
+              </FormField>
+              <FormField>
+                <InputLabel>Password</InputLabel>
+                <Typography variant="inputDescription">
+                  Must be at least 8 characters
+                </Typography>
+                <TextField />
+              </FormField>
+              <FormField>
+                <InputLabel>Confirm Password</InputLabel>
+                <TextField />
+              </FormField>
+            </Flex>
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Sign up and join the conversation
+              </Button>
+              <Flex
+                itemGutter="half"
+                justifyContent="center"
+                className={styles.subFooter}
+              >
+                <Typography>Already have an account?</Typography>
+                <Button variant="underlined" size="small" color="primary">
+                  Sign In
+                </Button>
+              </Flex>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 

src/core/client/auth/containers/SignUpContainer.tsx

@@ -1,10 +1,31 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import { BadUserInputError } from "talk-framework/lib/errors";
+import SignUp, { SignUpForm } from "../components/SignUp";
 
-import SignUp from "../components/SignUp";
+import React, { Component } from "react";
+import { SignUpMutation, withSignUpMutation } from "../mutations";
 
-const SignUpContainer: StatelessComponent = () => {
-  return <SignUp />;
-};
+interface SignUpContainerProps {
+  signUp: SignUpMutation;
+}
 
-export default SignUpContainer;
+class SignUpContainer extends Component<SignUpContainerProps> {
+  private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
+    try {
+      await this.props.signUp(input);
+      form.reset();
+    } catch (error) {
+      if (error instanceof BadUserInputError) {
+        return error.invalidArgsLocalized;
+      }
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+    return undefined;
+  };
+  public render() {
+    return <SignUp onSubmit={this.onSubmit} />;
+  }
+}
+
+const enhanced = withSignUpMutation(SignUpContainer);
+export default enhanced;

src/core/client/ui/components/TextField/TextField.tsx

@@ -37,6 +37,14 @@ export interface TextFieldProps {
    * Mark as readonly
    */
   readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * onChange
+   */
+  onChange?: <T>(event: any) => void;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {