diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx new file mode 100644 index 000000000..63de88bda --- /dev/null +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx @@ -0,0 +1,9 @@ +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import Decorator from "@saleor/storybook//Decorator"; +import NewPasswordPage from "./NewPasswordPage"; + +storiesOf("Views / Authentication / Set up a new password", module) + .addDecorator(Decorator) + .add("default", () => undefined} />); diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx new file mode 100644 index 000000000..5019637d8 --- /dev/null +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx @@ -0,0 +1,114 @@ +import Button from "@material-ui/core/Button"; +import TextField from "@material-ui/core/TextField"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/styles"; +import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; + +import Form from "@saleor/components/Form"; +import FormSpacer from "@saleor/components/FormSpacer"; +import Layout from "../Layout"; + +const useStyles = makeStyles( + { + submit: { + width: "100%" + } + }, + { + name: "NewPasswordPage" + } +); + +export interface NewPasswordPageFormData { + password: string; + confirmPassword: string; +} +export interface NewPasswordPageProps { + onSubmit: (data: NewPasswordPageFormData) => void; +} + +const initialForm: NewPasswordPageFormData = { + confirmPassword: "", + password: "" +}; + +const NewPasswordPage: React.FC = props => { + const { onSubmit } = props; + + const classes = useStyles(props); + const intl = useIntl(); + + return ( +
+ {({ change: handleChange, data, submit: handleSubmit }) => { + const passwordError = + data.password !== data.confirmPassword && data.password.length > 0; + + return ( + + + + + + + + + + + + ); + }} +
+ ); +}; + +NewPasswordPage.displayName = "NewPasswordPage"; +export default NewPasswordPage; diff --git a/src/auth/components/NewPasswordPage/index.ts b/src/auth/components/NewPasswordPage/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx index 2bf0e43e6..90c3ff061 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx +++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx @@ -1,5 +1,4 @@ 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"; diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx new file mode 100644 index 000000000..4edb5455b --- /dev/null +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.stories.tsx @@ -0,0 +1,11 @@ +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import Decorator from "@saleor/storybook/Decorator"; +import ResetPasswordSuccessPage from "./ResetPasswordSuccessPage"; + +storiesOf("Views / Authentication / Reset password success", module) + .addDecorator(Decorator) + .add("default", () => ( + undefined} /> + )); diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx new file mode 100644 index 000000000..b7b1bb694 --- /dev/null +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx @@ -0,0 +1,55 @@ +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/styles"; +import React from "react"; +import { FormattedMessage } from "react-intl"; + +import FormSpacer from "@saleor/components/FormSpacer"; +import Layout from "../Layout"; + +const useStyles = makeStyles( + { + submit: { + width: "100%" + } + }, + { + name: "ResetPasswordSuccessPage" + } +); + +export interface ResetPasswordSuccessPageFormData { + email: string; +} +export interface ResetPasswordSuccessPageProps { + onBack: () => void; +} + +const ResetPasswordSuccessPage: React.FC< + ResetPasswordSuccessPageProps +> = props => { + const { onBack } = props; + + const classes = useStyles(props); + + return ( + + + + + + + + ); +}; + +ResetPasswordSuccessPage.displayName = "ResetPasswordSuccessPage"; +export default ResetPasswordSuccessPage; diff --git a/src/auth/components/ResetPasswordSuccessPage/index.ts b/src/auth/components/ResetPasswordSuccessPage/index.ts new file mode 100644 index 000000000..e69de29bb