Add reset password page

src/auth/components/Layout.tsx

@@ -0,0 +1,100 @@
+import { Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import backgroundArt from "@assets/images/login-background.svg";
+import saleorDarkLogo from "@assets/images/logo-dark.svg";
+import saleorLightLogo from "@assets/images/logo-light.svg";
+import useTheme from "@saleor/hooks/useTheme";
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    logo: {
+      "& svg": {
+        display: "block",
+        height: 40,
+        marginBottom: theme.spacing.unit * 4
+      }
+    },
+    mainPanel: {
+      [theme.breakpoints.down("sm")]: {
+        padding: theme.spacing.unit * 2
+      },
+      background: theme.palette.background.paper,
+      display: "flex",
+      flexDirection: "column",
+      height: "100vh",
+      justifyContent: "center",
+      padding: theme.spacing.unit * 6,
+      width: "100%"
+    },
+    mainPanelContent: {
+      [theme.breakpoints.up("xs")]: {
+        width: "100%"
+      },
+      [theme.breakpoints.up("sm")]: {
+        width: 328
+      },
+      "@media (min-width: 1440px)": {
+        width: 464
+      },
+      margin: "auto",
+      width: "100%"
+    },
+    root: {
+      [theme.breakpoints.up("lg")]: {
+        gridTemplateColumns: "376px 1fr"
+      },
+      "@media (min-width: 1440px)": {
+        gridTemplateColumns: "520px 1fr"
+      },
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      height: "100vh",
+      overflow: "hidden",
+      width: "100vw"
+    },
+    sidebar: {
+      [theme.breakpoints.up("lg")]: {
+        display: "block"
+      },
+      display: "none"
+    },
+    sidebarArt: {
+      "& svg": {
+        width: "100%"
+      }
+    }
+  }),
+  {
+    name: "Layout"
+  }
+);
+
+const Layout: React.FC = props => {
+  const { children } = props;
+
+  const classes = useStyles(props);
+  const { isDark } = useTheme();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.sidebar}>
+        <SVG className={classes.sidebarArt} src={backgroundArt} />
+      </div>
+      <div className={classes.mainPanel}>
+        <div className={classes.mainPanelContent}>
+          <SVG
+            className={classes.logo}
+            src={isDark ? saleorDarkLogo : saleorLightLogo}
+          />
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Layout.displayName = "Layout";
+export default Layout;

src/auth/components/LoginPage/LoginPage.tsx

@@ -8,16 +8,12 @@ import {
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
-import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
+import Layout from "../Layout";
 
-import backgroundArt from "@assets/images/login-background.svg";
-import saleorDarkLogo from "@assets/images/logo-dark.svg";
-import saleorLightLogo from "@assets/images/logo-light.svg";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
-import useTheme from "@saleor/hooks/useTheme";
 import { commonMessages } from "@saleor/intl";
 
 export interface FormData {
@@ -41,38 +37,6 @@ const styles = (theme: Theme) =>
     loginButton: {
       width: 140
     },
-    logo: {
-      "& svg": {
-        display: "block",
-        height: 40,
-        marginBottom: theme.spacing.unit * 4
-      }
-    },
-    mainPanel: {
-      [theme.breakpoints.down("sm")]: {
-        padding: theme.spacing.unit * 2
-      },
-      background: theme.palette.background.paper,
-      display: "flex",
-      flexDirection: "column",
-      height: "100vh",
-      justifyContent: "center",
-      padding: theme.spacing.unit * 6,
-      width: "100%"
-    },
-    mainPanelContent: {
-      [theme.breakpoints.up("xs")]: {
-        width: "100%"
-      },
-      [theme.breakpoints.up("sm")]: {
-        width: 328
-      },
-      "@media (min-width: 1440px)": {
-        width: 464
-      },
-      margin: "auto",
-      width: "100%"
-    },
     panel: {
       "& span": {
         color: theme.palette.error.contrastText
@@ -81,30 +45,6 @@ const styles = (theme: Theme) =>
       borderRadius: theme.spacing.unit,
       marginBottom: theme.spacing.unit * 3,
       padding: theme.spacing.unit * 1.5
-    },
-    root: {
-      [theme.breakpoints.up("lg")]: {
-        gridTemplateColumns: "376px 1fr"
-      },
-      "@media (min-width: 1440px)": {
-        gridTemplateColumns: "520px 1fr"
-      },
-      display: "grid",
-      gridTemplateColumns: "1fr",
-      height: "100vh",
-      overflow: "hidden",
-      width: "100vw"
-    },
-    sidebar: {
-      [theme.breakpoints.up("lg")]: {
-        display: "block"
-      },
-      display: "none"
-    },
-    sidebarArt: {
-      "& svg": {
-        width: "100%"
-      }
     }
   });
 
@@ -117,7 +57,6 @@ export interface LoginCardProps extends WithStyles<typeof styles> {
 
 const LoginCard = withStyles(styles, { name: "LoginCard" })(
   ({ classes, error, disableLoginButton, onSubmit }: LoginCardProps) => {
-    const { isDark } = useTheme();
     const intl = useIntl();
 
     return (
@@ -126,16 +65,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
         onSubmit={onSubmit}
       >
         {({ change: handleChange, data, submit: handleSubmit }) => (
-          <div className={classes.root}>
+          <Layout>
-            <div className={classes.sidebar}>
-              <SVG className={classes.sidebarArt} src={backgroundArt} />
-            </div>
-            <div className={classes.mainPanel}>
-              <div className={classes.mainPanelContent}>
-                <SVG
-                  className={classes.logo}
-                  src={isDark ? saleorDarkLogo : saleorLightLogo}
-                />
             {error && (
               <div className={classes.panel}>
                 <Typography variant="caption">
@@ -189,19 +119,17 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
                 type="submit"
                 data-tc="submit"
               >
-                    <FormattedMessage
+                <FormattedMessage defaultMessage="Login" description="button" />
-                      defaultMessage="Login"
-                      description="button"
-                    />
               </Button>
             </div>
-                {/* <FormSpacer />
+            <FormSpacer />
             <Typography className={classes.link}>
-                  {i18n.t("Reset your password")}
+              <FormattedMessage
-                </Typography> */}
+                defaultMessage="Reset your password"
-              </div>
+                description="button"
-            </div>
+              />
-          </div>
+            </Typography>
+          </Layout>
         )}
       </Form>
     );

src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx

@@ -0,0 +1,9 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import Decorator from "@saleor/storybook//Decorator";
+import ResetPasswordPage from "./ResetPasswordPage";
+
+storiesOf("Views / Authentication / Reset password", module)
+  .addDecorator(Decorator)
+  .add("default", () => <ResetPasswordPage onSubmit={() => undefined} />);

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -0,0 +1,78 @@
+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";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import Form from "@saleor/components/Form";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { commonMessages } from "@saleor/intl";
+import Layout from "../Layout";
+
+const useStyles = makeStyles(
+  {
+    submit: {
+      width: "100%"
+    }
+  },
+  {
+    name: "ResetPasswordPage"
+  }
+);
+
+export interface ResetPasswordPageFormData {
+  email: string;
+}
+export interface ResetPasswordPageProps {
+  onSubmit: (data: ResetPasswordPageFormData) => void;
+}
+
+const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
+  const { onSubmit } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  return (
+    <Form initial={{ email: "" }} onSubmit={onSubmit}>
+      {({ change: handleChange, data, submit: handleSubmit }) => (
+        <Layout>
+          <Typography>
+            <FormattedMessage defaultMessage="Forgot your password? Don't worry, we'll reset it for you." />
+          </Typography>
+          <FormSpacer />
+          <TextField
+            autoFocus
+            fullWidth
+            autoComplete="username"
+            label={intl.formatMessage(commonMessages.email)}
+            name="email"
+            onChange={handleChange}
+            value={data.email}
+            inputProps={{
+              "data-tc": "email"
+            }}
+          />
+          <FormSpacer />
+          <Button
+            className={classes.submit}
+            color="primary"
+            variant="contained"
+            onClick={handleSubmit}
+            type="submit"
+          >
+            <FormattedMessage
+              defaultMessage="Send Instructions"
+              description="password reset, button"
+            />
+          </Button>
+        </Layout>
+      )}
+    </Form>
+  );
+};
+
+ResetPasswordPage.displayName = "ResetPasswordPage";
+export default ResetPasswordPage;