Adding storyshot for password too short error

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

@@ -3,14 +3,26 @@ import React from "react";
 
 import CardDecorator from "@saleor/storybook//CardDecorator";
 import Decorator from "@saleor/storybook//Decorator";
+import { AccountErrorCode } from "@saleor/types/globalTypes";
 import NewPasswordPage from "./NewPasswordPage";
 
 storiesOf("Views / Authentication / Set up a new password", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (
-    <NewPasswordPage error={null} disabled={false} onSubmit={() => undefined} />
+    <NewPasswordPage errors={[]} disabled={false} onSubmit={() => undefined} />
   ))
   .add("loading", () => (
-    <NewPasswordPage error={null} disabled={true} onSubmit={() => undefined} />
+    <NewPasswordPage errors={[]} disabled={true} onSubmit={() => undefined} />
+  ))
+  .add("too short error", () => (
+    <NewPasswordPage
+      errors={["password"].map(field => ({
+        __typename: "AccountError",
+        code: AccountErrorCode.PASSWORD_TOO_SHORT,
+        field
+      }))}
+      disabled={false}
+      onSubmit={() => undefined}
+    />
   ));

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -7,6 +7,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
+import { SetPassword_setPassword_errors } from "@saleor/auth/types/SetPassword";
+import getAccountErrorMessage from "@saleor/utils/errors/account";
 
 const useStyles = makeStyles(
   theme => ({
@@ -34,7 +36,7 @@ export interface NewPasswordPageFormData {
 }
 export interface NewPasswordPageProps {
   disabled: boolean;
-  error: string;
+  errors: SetPassword_setPassword_errors[];
   onSubmit: (data: NewPasswordPageFormData) => void;
 }
 
@@ -44,10 +46,14 @@ const initialForm: NewPasswordPageFormData = {
 };
 
 const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
-  const { disabled, error, onSubmit } = props;
+  const { disabled, errors, onSubmit } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
+  const error = getAccountErrorMessage(
+    errors.find(err => err.field === "password"),
+    intl
+  );
 
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>

src/auth/views/NewPassword.tsx

@@ -4,21 +4,22 @@ import { RouteComponentProps } from "react-router";
 
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
-import { useIntl } from "react-intl";
-import { commonMessages } from "@saleor/intl";
-import getAccountErrorMessage from "@saleor/utils/errors/account";
 import NewPasswordPage, {
   NewPasswordPageFormData
 } from "../components/NewPasswordPage";
 import { SetPasswordMutation } from "../mutations";
-import { SetPassword } from "../types/SetPassword";
+import {
+  SetPassword,
+  SetPassword_setPassword_errors
+} from "../types/SetPassword";
 import { NewPasswordUrlQueryParams } from "../urls";
 
 const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
   const navigate = useNavigator();
   const { loginByToken } = useUser();
-  const [error, setError] = React.useState<string>();
+  const [errors, setErrors] = React.useState<
-  const intl = useIntl();
+    SetPassword_setPassword_errors[]
+  >();
 
   const params: NewPasswordUrlQueryParams = parseQs(location.search.substr(1));
 
@@ -27,14 +28,7 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
       loginByToken(data.setPassword.token, data.setPassword.user);
       navigate("/", true);
     } else {
-      const error = data.setPassword.errors.find(
+      setErrors(data.setPassword.errors);
-        err => err.field === "password"
-      );
-      if (error) {
-        setError(getAccountErrorMessage(error, intl));
-      } else {
-        setError(intl.formatMessage(commonMessages.somethingWentWrong));
-      }
     }
   };
 
@@ -52,7 +46,7 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
 
         return (
           <NewPasswordPage
-            error={error}
+            errors={errors}
             disabled={setPasswordOpts.loading}
             onSubmit={handleSubmit}
           />

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -15166,6 +15166,133 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
 </div>
 `;
 
+exports[`Storyshots Views / Authentication / Set up a new password too short error 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <form>
+        <div
+          class="NewPasswordPage-panel-id"
+        >
+          <div
+            class="MuiTypography-root-id NewPasswordPage-errorText-id MuiTypography-caption-id"
+          >
+            This password is too short
+          </div>
+        </div>
+        <div
+          class="MuiTypography-root-id MuiTypography-body1-id"
+        >
+          Please set up a new password.
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+        >
+          <label
+            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+            data-shrink="false"
+          >
+            New Password
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <input
+              aria-invalid="false"
+              autocomplete="none"
+              autofocus=""
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              data-tc="password"
+              name="password"
+              type="password"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="PrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+        >
+          <label
+            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+            data-shrink="false"
+          >
+            Confirm Password
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <input
+              aria-invalid="false"
+              autocomplete="none"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+              data-tc="confirm-password"
+              name="confirmPassword"
+              type="password"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="PrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NewPasswordPage-submit-id MuiButton-containedPrimary-id"
+          tabindex="0"
+          type="submit"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Set new password
+          </span>
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Views / Authentication / Verifying remembered user default 1`] = `
 <div
   style="padding:24px"