diff --git a/CHANGELOG.md b/CHANGELOG.md index 84c1bda54..dfcb79337 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,7 @@ All notable, unreleased changes to this project will be documented in this file. - Fix crashing views - #422 by @dominik-zeglen - Add "Ready to capture" to the "Status" order filter - #430 by @dominik-zeglen - Reset state after closing - #456 by @dominik-zeglen +- Password validation errors are not shown - #471 by @gabmartinez ## 2.0.0 diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx index 4f6359937..36e2e3cf4 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx +++ b/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", () => ( - undefined} /> + undefined} /> )) .add("loading", () => ( - undefined} /> + undefined} /> + )) + .add("too short error", () => ( + ({ + __typename: "AccountError", + code: AccountErrorCode.PASSWORD_TOO_SHORT, + field + }))} + disabled={false} + onSubmit={() => undefined} + /> )); diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index 83e003579..2dfd65389 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx @@ -7,13 +7,24 @@ 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 => ({ + 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 +36,7 @@ export interface NewPasswordPageFormData { } export interface NewPasswordPageProps { disabled: boolean; + errors: SetPassword_setPassword_errors[]; onSubmit: (data: NewPasswordPageFormData) => void; } @@ -34,10 +46,14 @@ const initialForm: NewPasswordPageFormData = { }; const NewPasswordPage: React.FC = props => { - const { disabled, 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 (
@@ -47,6 +63,13 @@ const NewPasswordPage: React.FC = props => { return ( <> + {!!error && ( +
+ + {error} + +
+ )} diff --git a/src/auth/views/NewPassword.tsx b/src/auth/views/NewPassword.tsx index c667f92d0..b2373720b 100644 --- a/src/auth/views/NewPassword.tsx +++ b/src/auth/views/NewPassword.tsx @@ -38,6 +38,7 @@ const NewPassword: React.FC = ({ location }) => { return ( diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 0b8918365..ec5bc21de 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -15166,6 +15166,133 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] = `; +exports[`Storyshots Views / Authentication / Set up a new password too short error 1`] = ` +
+
+
+ +
+
+ This password is too short +
+
+
+ Please set up a new password. +
+
+
+ +
+ + +
+
+
+
+ +
+ + +
+
+
+ + +
+
+
+`; + exports[`Storyshots Views / Authentication / Verifying remembered user default 1`] = `