Update password reset pages (#1714)

* Update password reset pages

* Update src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -42,9 +42,15 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
 
         return (
           <>
+            <Typography variant="h3" className={classes.header}>
+              <FormattedMessage
+                defaultMessage="Set up new password"
+                description="page title"
+              />
+            </Typography>
             {!!error && <div className={classes.panel}>{error}</div>}
-            <Typography>
-              <FormattedMessage defaultMessage="Please set up a new password." />
+            <Typography variant="caption" color="textSecondary">
+              <FormattedMessage defaultMessage="Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it." />
             </Typography>
             <FormSpacer />
             <TextField

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

@@ -9,6 +9,7 @@ import ResetPasswordPage, { ResetPasswordPageProps } from "./ResetPasswordPage";
 const props: ResetPasswordPageProps = {
   disabled: false,
   error: undefined,
+  onBack: () => undefined,
   onSubmit: () => undefined
 };
 storiesOf("Views / Authentication / Reset password", module)

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -2,7 +2,7 @@ import { TextField, Typography } from "@material-ui/core";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { commonMessages } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
+import { ArrowRightIcon, Button, IconButton } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -14,11 +14,12 @@ export interface ResetPasswordPageFormData {
 export interface ResetPasswordPageProps {
   disabled: boolean;
   error: string;
+  onBack: () => void;
   onSubmit: (data: ResetPasswordPageFormData) => void;
 }
 
 const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
-  const { disabled, error, onSubmit } = props;
+  const { disabled, error, onBack, onSubmit } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
@@ -27,9 +28,15 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
     <Form initial={{ email: "" }} onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <>
+          <IconButton className={classes.backBtn} onClick={onBack}>
+            <ArrowRightIcon className={classes.arrow} />
+          </IconButton>
+          <Typography variant="h3" className={classes.header}>
+            <FormattedMessage defaultMessage="Reset password" />
+          </Typography>
           {!!error && <div className={classes.panel}>{error}</div>}
-          <Typography>
-            <FormattedMessage defaultMessage="Forgot your password? Don't worry, we'll reset it for you." />
+          <Typography variant="caption" color="textSecondary">
+            <FormattedMessage defaultMessage="Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes." />
           </Typography>
           <FormSpacer />
           <TextField
@@ -54,7 +61,7 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
             type="submit"
           >
             <FormattedMessage
-              defaultMessage="Send Instructions"
+              defaultMessage="Send an email with reset link"
               description="password reset, button"
             />
           </Button>

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

@@ -20,6 +20,9 @@ const ResetPasswordSuccessPage: React.FC<ResetPasswordSuccessPageProps> = props
 
   return (
     <>
+      <Typography variant="h3" className={classes.header}>
+        <FormattedMessage defaultMessage="Reset password" />
+      </Typography>
       <Typography>
         <FormattedMessage defaultMessage="Success! In a few minutes you’ll receive a message with instructions on how to reset your password." />
       </Typography>

src/auth/components/styles.ts

@@ -2,6 +2,12 @@ import { makeStyles } from "@saleor/macaw-ui";
 
 const useStyles = makeStyles(
   theme => ({
+    arrow: {
+      transform: "rotate(180deg)"
+    },
+    backBtn: {
+      marginBottom: theme.spacing(3)
+    },
     buttonContainer: {
       display: "flex",
       justifyContent: "flex-end"

src/auth/views/ResetPassword.tsx

@@ -53,6 +53,7 @@ const ResetPasswordView: React.FC = () => {
           <ResetPasswordPage
             disabled={requestPasswordResetOpts.loading}
             error={error}
+            onBack={() => navigate(APP_MOUNT_URI)}
             onSubmit={handleSubmit}
           />
         );

src/auth/views/ResetPasswordSuccess.tsx

@@ -1,3 +1,4 @@
+import { APP_MOUNT_URI } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import React from "react";
 
@@ -6,7 +7,7 @@ import ResetPasswordSuccessPage from "../components/ResetPasswordSuccessPage";
 const ResetPasswordSuccessView: React.FC = () => {
   const navigate = useNavigator();
 
-  return <ResetPasswordSuccessPage onBack={() => navigate("/")} />;
+  return <ResetPasswordSuccessPage onBack={() => navigate(APP_MOUNT_URI)} />;
 };
 ResetPasswordSuccessView.displayName = "ResetPasswordSuccessView";
 export default ResetPasswordSuccessView;