Adding form validations for Forgot Password, ResetPassword, and more

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

@@ -1,7 +1,14 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
 import * as styles from "./SignIn.css";
 
+import {
+  composeValidators,
+  required,
+  validateEmail,
+} from "talk-framework/lib/validation";
+
 import {
   Button,
   Flex,
@@ -9,28 +16,61 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const ForgotPassword: StatelessComponent = props => {
+interface FormProps {
+  email: string;
+}
+
+export interface ForgotPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Forgot Password
-      </Typography>
-      <Typography variant="bodyCopy">
-        Enter your email address below and we will send you a link to reset your
-        password.
-      </Typography>
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Send Email
-        </Button>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Forgot Password
+            </Typography>
+            <Typography variant="bodyCopy">
+              Enter your email address below and we will send you a link to
+              reset your password.
+            </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>
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Send Email
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 

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

@@ -1,37 +1,111 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
 import * as styles from "./SignIn.css";
 
+import {
+  composeValidators,
+  required,
+  validateEqualPasswords,
+  validatePassword,
+} from "talk-framework/lib/validation";
+
 import {
   Button,
   Flex,
   FormField,
+  InputDescription,
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const ResetPassword: StatelessComponent = props => {
+interface FormProps {
+  password: string;
+  confirmPassword: string;
+}
+
+export interface ResetPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Reset Password
-      </Typography>
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <Typography>Must be at least 8 characters</Typography>
-        <TextField />
-      </FormField>
-      <FormField>
-        <InputLabel>Confirm Password</InputLabel>
-        <TextField />
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Reset Password
-        </Button>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Reset Password
+            </Typography>
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Password</InputLabel>
+                  <InputDescription>
+                    Must be at least 8 characters
+                  </InputDescription>
+                  <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>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="confirmPassword"
+              validate={composeValidators(
+                required,
+                validatePassword,
+                validateEqualPasswords
+              )}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Confirm Password</InputLabel>
+                  <InputDescription>
+                    Must be at least 8 characters
+                  </InputDescription>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Confirm Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Reset Password
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 

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

@@ -1,10 +1,11 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
+import React, { Component } from "react";
 import ForgotPassword from "../components/ForgotPassword";
 
-const ForgotPasswordContainer: StatelessComponent = () => {
-  return <ForgotPassword />;
-};
+class ForgotPasswordContainer extends Component {
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return <ForgotPassword onSubmit={() => {}} />;
+  }
+}
 
 export default ForgotPasswordContainer;

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

@@ -1,10 +1,11 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
+import React, { Component } from "react";
 import ResetPassword from "../components/ResetPassword";
 
-const ResetPasswordContainer: StatelessComponent = () => {
-  return <ResetPassword />;
-};
+class ResetPasswordContainer extends Component {
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return <ResetPassword onSubmit={() => {}} />;
+  }
+}
 
 export default ResetPasswordContainer;