Adding SignUp Form Functionality

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

@@ -1,6 +1,13 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import * as styles from "./SignIn.css";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+
+import {
+  composeValidators,
+  required,
+  validateEmail,
+  validatePassword,
+} from "talk-framework/lib/validation";
 
 import {
   Button,
@@ -9,43 +16,101 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const SignIn: StatelessComponent = props => {
+import * as styles from "./SignIn.css";
+
+interface FormProps {
+  email: string;
+  password: string;
+}
+
+export interface SignInForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const SignIn: StatelessComponent<SignInForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Sign in to join the conversation
-      </Typography>
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <TextField />
-        <span className={styles.forgotPassword}>
-          <Button variant="underlined" color="primary" size="small">
-            Forgot your password?
-          </Button>
-        </span>
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Sign in and join the conversation
-        </Button>
-        <Flex
-          itemGutter="half"
-          justifyContent="center"
-          className={styles.subFooter}
-        >
-          <Typography>Don't have an account?</Typography>
-          <Button variant="underlined" size="small" color="primary">
-            Sign Up
-          </Button>
-        </Flex>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Sign in to join the conversation
+            </Typography>
+
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Email Address</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Email Address"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Password</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                  <span className={styles.forgotPassword}>
+                    <Button variant="underlined" color="primary" size="small">
+                      Forgot your password?
+                    </Button>
+                  </span>
+                </FormField>
+              )}
+            </Field>
+
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Sign in and join the conversation
+              </Button>
+              <Flex
+                itemGutter="half"
+                justifyContent="center"
+                className={styles.subFooter}
+              >
+                <Typography>Don't have an account?</Typography>
+                <Button variant="underlined" size="small" color="primary">
+                  Sign Up
+                </Button>
+              </Flex>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 

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

@@ -37,7 +37,7 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting, invalid }) => (
+      {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
             <Flex direction="column">

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

@@ -1,10 +1,31 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import { BadUserInputError } from "talk-framework/lib/errors";
+import SignIn, { SignInForm } from "../components/SignIn";
 
-import SignIn from "../components/SignIn";
+import React, { Component } from "react";
+import { SignInMutation, withSignInMutation } from "../mutations";
 
-const SignInContainer: StatelessComponent = () => {
-  return <SignIn />;
-};
+interface SignInContainerProps {
+  signIn: SignInMutation;
+}
 
-export default SignInContainer;
+class SignInContainer extends Component<SignInContainerProps> {
+  private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
+    try {
+      await this.props.signIn(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 <SignIn onSubmit={this.onSubmit} />;
+  }
+}
+
+const enhanced = withSignInMutation(SignInContainer);
+export default enhanced;