Login page rework (#1703)

* Rework login page * Remove outline * Fix logo and footer placement * Sort imports
saleor · Dec 28, 2021 · de3c825 · de3c825
1 parent f650a88
commit de3c825
Show file tree

Hide file tree

Showing 12 changed files with 311 additions and 363 deletions.
diff --git a/assets/images/login-background.svg b/assets/images/login-background.svg
diff --git a/assets/images/logo-dark.svg b/assets/images/logo-dark.svg
diff --git a/assets/images/logo-light.svg b/assets/images/logo-light.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.3.0-a.5",
+    "@saleor/macaw-ui": "^0.3.0-a.6",
     "@saleor/sdk": "^0.4.1",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

diff --git a/src/auth/components/Layout.tsx b/src/auth/components/Layout.tsx
@@ -8,6 +8,10 @@ import SVG from "react-inlinesvg";
 
 const useStyles = makeStyles(
   theme => ({
+    footer: {
+      position: "absolute",
+      bottom: theme.spacing(4)
+    },
     logo: {
       display: "block",
       height: 40,
@@ -22,7 +26,7 @@ const useStyles = makeStyles(
       flexDirection: "column",
       height: "100vh",
       justifyContent: "center",
-      padding: theme.spacing(6),
+      padding: theme.spacing(5, 6, 4, 6),
       width: "100%"
     },
     mainPanelContent: {
@@ -33,27 +37,30 @@ const useStyles = makeStyles(
         width: 328
       },
       "@media (min-width: 1440px)": {
-        width: 464
+        width: 380
       },
       margin: "auto",
       width: "100%"
     },
     root: {
       [theme.breakpoints.up("lg")]: {
-        gridTemplateColumns: "376px 1fr"
+        gridTemplateColumns: "560px 1fr"
       },
       "@media (min-width: 1440px)": {
-        gridTemplateColumns: "520px 1fr"
+        gridTemplateColumns: "780px 1fr"
       },
       display: "grid",
       gridTemplateColumns: "1fr",
+      gap: theme.spacing(3),
       height: "100vh",
       overflow: "hidden",
+      position: "relative",
       width: "100vw"
     },
     sidebar: {
       [theme.breakpoints.up("lg")]: {
-        display: "block"
+        alignItems: "center",
+        display: "flex"
       },
       display: "none"
     },
@@ -76,18 +83,19 @@ const Layout: React.FC = props => {
 
   return (
     <div className={classes.root}>
+      <div className={classes.mainPanel}>
+        <SVG
+          className={classes.logo}
+          src={themeType === "dark" ? saleorDarkLogo : saleorLightLogo}
+        />
+        <div className={classes.mainPanelContent}>{children}</div>
+        <footer className={classes.footer}>
+          ©2021 Saleor Commerce. All rights reserved
+        </footer>
+      </div>
       <div className={classes.sidebar}>
         <SVG className={classes.sidebarArt} src={backgroundArt} />
       </div>
-      <div className={classes.mainPanel}>
-        <div className={classes.mainPanelContent}>
-          <SVG
-            className={classes.logo}
-            src={themeType === "dark" ? saleorDarkLogo : saleorLightLogo}
-          />
-          {children}
-        </div>
-      </div>
     </div>
   );
 };

diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx
@@ -9,46 +9,14 @@ import { AvailableExternalAuthentications_shop_availableExternalAuthentications
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button, EyeIcon, IconButton } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import useStyles from "../styles";
 import LoginForm, { LoginFormData } from "./form";
 import { getErrorMessage } from "./messages";
 
-const useStyles = makeStyles(
-  theme => ({
-    buttonContainer: {
-      display: "flex",
-      justifyContent: "flex-end"
-    },
-    link: {
-      color: theme.palette.primary.main,
-      cursor: "pointer",
-      textDecoration: "underline"
-    },
-    loading: {
-      alignItems: "center",
-      display: "flex",
-      minHeight: "80vh",
-      justifyContent: "center"
-    },
-    loginButton: {
-      width: 140
-    },
-    panel: {
-      "& span": {
-        color: theme.palette.error.contrastText
-      },
-      background: theme.palette.error.main,
-      borderRadius: theme.spacing(),
-      marginBottom: theme.spacing(3),
-      padding: theme.spacing(1.5)
-    }
-  }),
-  { name: "LoginCard" }
-);
-
 export interface LoginCardProps {
   error?: UserContextError;
   disabled: boolean;
@@ -72,6 +40,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
 
   const classes = useStyles(props);
   const intl = useIntl();
+  const [showPassword, setShowPassword] = React.useState(false);
 
   if (loading) {
     return (
@@ -85,11 +54,15 @@ const LoginCard: React.FC<LoginCardProps> = props => {
     <LoginForm onSubmit={onSubmit}>
       {({ change: handleChange, data, submit }) => (
         <>
+          <Typography variant="h3" className={classes.header}>
+            <FormattedMessage
+              defaultMessage="Sign In"
+              description="card header"
+            />
+          </Typography>
           {error && (
             <div className={classes.panel} data-test="loginErrorMessage">
-              <Typography variant="caption">
-                {getErrorMessage(error, intl)}
-              </Typography>
+              {getErrorMessage(error, intl)}
             </div>
           )}
           <TextField
@@ -106,22 +79,44 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             disabled={disabled}
           />
           <FormSpacer />
-          <TextField
-            fullWidth
-            autoComplete="password"
-            label={intl.formatMessage({
-              defaultMessage: "Password"
-            })}
-            name="password"
-            onChange={handleChange}
-            type="password"
-            value={data.password}
-            inputProps={{
-              "data-test": "password"
-            }}
-            disabled={disabled}
-          />
-          <FormSpacer />
+          <div className={classes.passwordWrapper}>
+            <TextField
+              fullWidth
+              autoComplete="password"
+              label={intl.formatMessage({
+                defaultMessage: "Password"
+              })}
+              name="password"
+              onChange={handleChange}
+              type={showPassword ? "text" : "password"}
+              value={data.password}
+              inputProps={{
+                "data-test": "password"
+              }}
+              disabled={disabled}
+            />
+            {/* Not using endAdornment as it looks weird with autocomplete */}
+            <IconButton
+              className={classes.showPasswordBtn}
+              variant="secondary"
+              hoverOutline={false}
+              onMouseDown={() => setShowPassword(true)}
+              onMouseUp={() => setShowPassword(false)}
+            >
+              <EyeIcon />
+            </IconButton>
+          </div>
+          <Typography
+            component="a"
+            className={classes.link}
+            onClick={onPasswordRecovery}
+            variant="body2"
+          >
+            <FormattedMessage
+              defaultMessage="Forgot password?"
+              description="description"
+            />
+          </Typography>
           <div className={classes.buttonContainer}>
             <Button
               className={classes.loginButton}
@@ -131,26 +126,10 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               type="submit"
               data-test="submit"
             >
-              <FormattedMessage defaultMessage="Login" description="button" />
+              <FormattedMessage defaultMessage="Sign in" description="button" />
             </Button>
           </div>
-          <FormSpacer />
-          <Typography>
-            <FormattedMessage
-              defaultMessage="Forgot password? {resetPasswordLink}"
-              description="description"
-              values={{
-                resetPasswordLink: (
-                  <a className={classes.link} onClick={onPasswordRecovery}>
-                    <FormattedMessage
-                      defaultMessage="Use this link to recover it"
-                      description="link"
-                    />
-                  </a>
-                )
-              }}
-            />
-          </Typography>
+
           {externalAuthentications.length > 0 && (
             <>
               <FormSpacer />