Fix stories

src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx

@@ -1,10 +1,12 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import CardDecorator from "@saleor/storybook//CardDecorator";
 import Decorator from "@saleor/storybook//Decorator";
 import NewPasswordPage from "./NewPasswordPage";
 
 storiesOf("Views / Authentication / Set up a new password", module)
+  .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (
     <NewPasswordPage disabled={false} onSubmit={() => undefined} />

src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx

@@ -1,14 +1,21 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Decorator from "@saleor/storybook//Decorator";
+import CardDecorator from "@saleor/storybook/CardDecorator";
-import ResetPasswordPage from "./ResetPasswordPage";
+import Decorator from "@saleor/storybook/Decorator";
+import { formError } from "@saleor/storybook/misc";
+import ResetPasswordPage, { ResetPasswordPageProps } from "./ResetPasswordPage";
 
+const props: ResetPasswordPageProps = {
+  disabled: false,
+  error: undefined,
+  onSubmit: () => undefined
+};
 storiesOf("Views / Authentication / Reset password", module)
+  .addDecorator(CardDecorator)
   .addDecorator(Decorator)
-  .add("default", () => (
+  .add("default", () => <ResetPasswordPage {...props} />)
-    <ResetPasswordPage disabled={false} onSubmit={() => undefined} />
+  .add("loading", () => <ResetPasswordPage {...props} disabled={true} />)
-  ))
+  .add("error", () => (
-  .add("loading", () => (
+    <ResetPasswordPage {...props} error={formError("").message} />
-    <ResetPasswordPage disabled={true} onSubmit={() => undefined} />
   ));

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,4 +1,5 @@
 import Button from "@material-ui/core/Button";
+import { Theme } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/styles";
@@ -10,11 +11,20 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import { commonMessages } from "@saleor/intl";
 
 const useStyles = makeStyles(
-  {
+  (theme: Theme) => ({
+    panel: {
+      "& span": {
+        color: theme.palette.error.contrastText
+      },
+      background: theme.palette.error.main,
+      borderRadius: theme.spacing.unit,
+      marginBottom: theme.spacing.unit * 3,
+      padding: theme.spacing.unit * 1.5
+    },
     submit: {
       width: "100%"
     }
-  },
+  }),
   {
     name: "ResetPasswordPage"
   }
@@ -25,11 +35,12 @@ export interface ResetPasswordPageFormData {
 }
 export interface ResetPasswordPageProps {
   disabled: boolean;
+  error: string;
   onSubmit: (data: ResetPasswordPageFormData) => void;
 }
 
 const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
-  const { disabled, onSubmit } = props;
+  const { disabled, error, onSubmit } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
@@ -38,6 +49,11 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
     <Form initial={{ email: "" }} onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <>
+          {!!error && (
+            <div className={classes.panel}>
+              <Typography variant="caption">{error}</Typography>
+            </div>
+          )}
           <Typography>
             <FormattedMessage defaultMessage="Forgot your password? Don't worry, we'll reset it for you." />
           </Typography>

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx

@@ -1,9 +1,11 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
+import CardDecorator from "@saleor/storybook/CardDecorator";
 import Decorator from "@saleor/storybook/Decorator";
 import ResetPasswordSuccessPage from "./ResetPasswordSuccessPage";
 
 storiesOf("Views / Authentication / Reset password success", module)
+  .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => <ResetPasswordSuccessPage onBack={() => undefined} />);

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

@@ -34,7 +34,7 @@ const ResetPasswordSuccessPage: React.FC<
   return (
     <>
       <Typography>
-        <FormattedMessage defaultMessage="Success! If we have your e-mail, you’ll receive a message with instructions on how to reset your password." />
+        <FormattedMessage defaultMessage="Success! In a few minutes you’ll receive a message with instructions on how to reset your password." />
       </Typography>
       <FormSpacer />
       <Button

src/auth/views/ResetPassword.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import urlJoin from "url-join";
 
 import { APP_MOUNT_URI } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
+import { commonMessages } from "@saleor/intl";
 import ResetPasswordPage, {
   ResetPasswordPageFormData
 } from "../components/ResetPasswordPage";
@@ -11,11 +13,24 @@ import { RequestPasswordReset } from "../types/RequestPasswordReset";
 import { newPasswordUrl, passwordResetSuccessUrl } from "../urls";
 
 const ResetPasswordView: React.FC = () => {
+  const [error, setError] = React.useState<string>();
   const navigate = useNavigator();
+  const intl = useIntl();
 
   const handleRequestPasswordReset = (data: RequestPasswordReset) => {
     if (data.requestPasswordReset.errors.length === 0) {
       navigate(passwordResetSuccessUrl);
+    } else {
+      if (data.requestPasswordReset.errors.find(err => err.field === "email")) {
+        setError(
+          intl.formatMessage({
+            defaultMessage:
+              "Provided email address does not exist in our database."
+          })
+        );
+      } else {
+        setError(intl.formatMessage(commonMessages.somethingWentWrong));
+      }
     }
   };
 
@@ -37,6 +52,7 @@ const ResetPasswordView: React.FC = () => {
         return (
           <ResetPasswordPage
             disabled={requestPasswordResetOpts.loading}
+            error={error}
             onSubmit={handleSubmit}
           />
         );

src/storybook/stories/auth/LoginPage.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import LoginPage, { LoginCardProps } from "../../../auth/components/LoginPage";
+import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
 
 const props: Omit<LoginCardProps, "classes"> = {
@@ -13,6 +14,7 @@ const props: Omit<LoginCardProps, "classes"> = {
 };
 
 storiesOf("Views / Authentication / Log in", module)
+  .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => <LoginPage {...props} />)
   .add("error", () => <LoginPage {...props} error={true} />)