Display validation errors on NewPassword page

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

@@ -9,8 +9,8 @@ storiesOf("Views / Authentication / Set up a new password", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
   .add("default", () => (
-    <NewPasswordPage disabled={false} onSubmit={() => undefined} />
+    <NewPasswordPage error={null} disabled={false} onSubmit={() => undefined} />
   ))
   .add("loading", () => (
-    <NewPasswordPage disabled={true} onSubmit={() => undefined} />
+    <NewPasswordPage error={null} disabled={true} onSubmit={() => undefined} />
   ));

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -9,11 +9,20 @@ import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 
 const useStyles = makeStyles(
-  {
+  theme => ({
+    errorText: {
+      color: theme.palette.error.contrastText
+    },
+    panel: {
+      background: theme.palette.error.main,
+      borderRadius: theme.spacing(),
+      marginBottom: theme.spacing(3),
+      padding: theme.spacing(1.5)
+    },
     submit: {
       width: "100%"
     }
-  },
+  }),
   {
     name: "NewPasswordPage"
   }
@@ -25,6 +34,7 @@ export interface NewPasswordPageFormData {
 }
 export interface NewPasswordPageProps {
   disabled: boolean;
+  error: string;
   onSubmit: (data: NewPasswordPageFormData) => void;
 }
 
@@ -34,7 +44,7 @@ const initialForm: NewPasswordPageFormData = {
 };
 
 const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
-  const { disabled, onSubmit } = props;
+  const { disabled, error, onSubmit } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
@@ -47,6 +57,13 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
 
         return (
           <>
+            {!!error && (
+              <div className={classes.panel}>
+                <Typography variant="caption" className={classes.errorText}>
+                  {error}
+                </Typography>
+              </div>
+            )}
             <Typography>
               <FormattedMessage defaultMessage="Please set up a new password." />
             </Typography>

src/auth/views/NewPassword.tsx

@@ -4,6 +4,9 @@ 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";
@@ -14,6 +17,8 @@ import { NewPasswordUrlQueryParams } from "../urls";
 const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
   const navigate = useNavigator();
   const { loginByToken } = useUser();
+  const [error, setError] = React.useState<string>();
+  const intl = useIntl();
 
   const params: NewPasswordUrlQueryParams = parseQs(location.search.substr(1));
 
@@ -21,6 +26,15 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
     if (data.setPassword.errors.length === 0) {
       loginByToken(data.setPassword.token, data.setPassword.user);
       navigate("/", true);
+    } else {
+      const error = data.setPassword.errors.find(
+        err => err.field === "password"
+      );
+      if (error) {
+        setError(getAccountErrorMessage(error, intl));
+      } else {
+        setError(intl.formatMessage(commonMessages.somethingWentWrong));
+      }
     }
   };
 
@@ -38,6 +52,7 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
 
         return (
           <NewPasswordPage
+            error={error}
             disabled={setPasswordOpts.loading}
             onSubmit={handleSubmit}
           />