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

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

@@ -13,9 +13,17 @@ interface SignInContainerProps {
   setView: SetViewMutation;
 }
 
+interface SignUpContainerState {
+  errorMessage: string;
+}
+
 export type View = "SIGN_UP" | "FORGOT_PASSWORD";
 
-class SignInContainer extends Component<SignInContainerProps> {
+class SignInContainer extends Component<
+  SignInContainerProps,
+  SignUpContainerState
+> {
+  public state = { errorMessage: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -23,19 +31,28 @@ class SignInContainer extends Component<SignInContainerProps> {
   };
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
-      await this.props.signIn(input);
-      form.reset();
+      const res = await this.props.signIn(input);
+      console.log(res);
+      // form.reset();
     } catch (error) {
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
+      console.log(error);
+      this.setState({ errorMessage: `Error: ${error}` });
       // tslint:disable-next-line:no-console
       console.error(error);
     }
     return undefined;
   };
   public render() {
-    return <SignIn onSubmit={this.onSubmit} setView={this.setView} />;
+    return (
+      <SignIn
+        onSubmit={this.onSubmit}
+        setView={this.setView}
+        errorMessage={this.state.errorMessage}
+      />
+    );
   }
 }
 

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

@@ -14,9 +14,17 @@ interface SignUpContainerProps {
   setView: SetViewMutation;
 }
 
+interface SignUpContainerState {
+  errorMessage: string;
+}
+
 export type View = "SIGN_IN";
 
-class SignUpContainer extends Component<SignUpContainerProps> {
+class SignUpContainer extends Component<
+  SignUpContainerProps,
+  SignUpContainerState
+> {
+  public state = { errorMessage: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -24,19 +32,28 @@ class SignUpContainer extends Component<SignUpContainerProps> {
   };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
-      await this.props.signUp(input);
+      const res = await this.props.signUp(input);
+      console.log("response", res);
       form.reset();
     } catch (error) {
+      console.log("error", error);
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
+      this.setState({ errorMessage: `Something ${error}` });
       // tslint:disable-next-line:no-console
       console.error(error);
     }
     return undefined;
   };
   public render() {
-    return <SignUp onSubmit={this.onSubmit} setView={this.setView} />;
+    return (
+      <SignUp
+        onSubmit={this.onSubmit}
+        setView={this.setView}
+        errorMessage={this.state.errorMessage}
+      />
+    );
   }
 }