Add reset password page
This commit is contained in:
dominik-zeglen
parent
7290087680
commit
70b8524239
5 changed files with 251 additions and 136 deletions
100
src/auth/components/Layout.tsx
Normal file
100
src/auth/components/Layout.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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,82 +65,71 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
|
|||
onSubmit={onSubmit}
|
||||
>
|
||||
{({ change: handleChange, data, submit: handleSubmit }) => (
|
||||
<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}
|
||||
/>
|
||||
{error && (
|
||||
<div className={classes.panel}>
|
||||
<Typography variant="caption">
|
||||
<FormattedMessage defaultMessage="Sorry, your username and/or password are incorrect. Please try again." />
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
<TextField
|
||||
autoFocus
|
||||
fullWidth
|
||||
autoComplete="username"
|
||||
label={intl.formatMessage(commonMessages.email)}
|
||||
name="email"
|
||||
onChange={handleChange}
|
||||
value={data.email}
|
||||
inputProps={{
|
||||
"data-tc": "email"
|
||||
}}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<TextField
|
||||
fullWidth
|
||||
autoComplete="current-password"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Password"
|
||||
})}
|
||||
name="password"
|
||||
onChange={handleChange}
|
||||
type="password"
|
||||
value={data.password}
|
||||
data-tc="password"
|
||||
/>
|
||||
<FormSpacer />
|
||||
<div className={classes.buttonContainer}>
|
||||
<ControlledCheckbox
|
||||
checked={data.rememberMe}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Remember me",
|
||||
description: "login"
|
||||
})}
|
||||
name="rememberMe"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<Button
|
||||
className={classes.loginButton}
|
||||
color="primary"
|
||||
disabled={disableLoginButton}
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
type="submit"
|
||||
data-tc="submit"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Login"
|
||||
description="button"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
{/* <FormSpacer />
|
||||
<Typography className={classes.link}>
|
||||
{i18n.t("Reset your password")}
|
||||
</Typography> */}
|
||||
<Layout>
|
||||
{error && (
|
||||
<div className={classes.panel}>
|
||||
<Typography variant="caption">
|
||||
<FormattedMessage defaultMessage="Sorry, your username and/or password are incorrect. Please try again." />
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
<TextField
|
||||
autoFocus
|
||||
fullWidth
|
||||
autoComplete="username"
|
||||
label={intl.formatMessage(commonMessages.email)}
|
||||
name="email"
|
||||
onChange={handleChange}
|
||||
value={data.email}
|
||||
inputProps={{
|
||||
"data-tc": "email"
|
||||
}}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<TextField
|
||||
fullWidth
|
||||
autoComplete="current-password"
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Password"
|
||||
})}
|
||||
name="password"
|
||||
onChange={handleChange}
|
||||
type="password"
|
||||
value={data.password}
|
||||
data-tc="password"
|
||||
/>
|
||||
<FormSpacer />
|
||||
<div className={classes.buttonContainer}>
|
||||
<ControlledCheckbox
|
||||
checked={data.rememberMe}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Remember me",
|
||||
description: "login"
|
||||
})}
|
||||
name="rememberMe"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<Button
|
||||
className={classes.loginButton}
|
||||
color="primary"
|
||||
disabled={disableLoginButton}
|
||||
variant="contained"
|
||||
onClick={handleSubmit}
|
||||
type="submit"
|
||||
data-tc="submit"
|
||||
>
|
||||
<FormattedMessage defaultMessage="Login" description="button" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<FormSpacer />
|
||||
<Typography className={classes.link}>
|
||||
<FormattedMessage
|
||||
defaultMessage="Reset your password"
|
||||
description="button"
|
||||
/>
|
||||
</Typography>
|
||||
</Layout>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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} />);
|
||||
78
src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
Normal file
78
src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
Normal file
|
|
@ -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;
|
||||
0
src/auth/components/ResetPasswordPage/index.ts
Normal file
0
src/auth/components/ResetPasswordPage/index.ts
Normal file
Loading…
Reference in a new issue