diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx index 4f6359937..b5578abc1 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx +++ b/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", () => ( - undefined} /> + undefined} /> )) .add("loading", () => ( - undefined} /> + undefined} /> )); diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index 83e003579..119dce750 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/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 = 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 = props => { return ( <> + {!!error && ( +
+ + {error} + +
+ )} diff --git a/src/auth/views/NewPassword.tsx b/src/auth/views/NewPassword.tsx index c667f92d0..ddd5cf9da 100644 --- a/src/auth/views/NewPassword.tsx +++ b/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 = ({ location }) => { const navigate = useNavigator(); const { loginByToken } = useUser(); + const [error, setError] = React.useState(); + const intl = useIntl(); const params: NewPasswordUrlQueryParams = parseQs(location.search.substr(1)); @@ -21,6 +26,15 @@ const NewPassword: React.FC = ({ 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 = ({ location }) => { return (