Handling error messages

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

@@ -9,6 +9,7 @@ import {
 } from "talk-framework/lib/validation";
 import {
   Button,
+  CallOut,
   Flex,
   FormField,
   InputLabel,
@@ -27,6 +28,7 @@ interface FormProps {
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
   setView: (view: View) => void;
+  errorMessage: string;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -34,6 +36,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
           <Flex itemGutter direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation

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

@@ -12,6 +12,7 @@ import {
 } from "talk-framework/lib/validation";
 import {
   Button,
+  CallOut,
   Flex,
   FormField,
   InputDescription,
@@ -33,11 +34,13 @@ interface FormProps {
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
   setView: (view: View) => void;
+  errorMessage: string;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
+      {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
@@ -155,7 +158,13 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               </Field>
             </Flex>
             <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
                 Sign up and join the conversation
               </Button>
               <Flex