Login UX update (#1328)

prakashsvmx · web-flow · commit 9c3e8f5bf791 · 2021-12-17T15:21:26.000-06:00
diff --git a/portal-ui/src/icons/LoginMinIOLogo.tsx b/portal-ui/src/icons/LoginMinIOLogo.tsx
@@ -0,0 +1,40 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LoginMinIOLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="284.616"
+    height="49.568"
+    viewBox="0 0 284.616 49.568"
+    {...props}
+  >
+    <g transform="translate(0.5 0.5)">
+      <path
+        d="M10822.423,3589.089c0-14.873,14.033-24.285,33.612-24.285s33.7,9.328,33.7,24.285-13.782,24.282-33.7,24.282C10836.374,3613.371,10822.423,3604.046,10822.423,3589.089Zm7.731,0c0,11.763,11.263,18.065,25.881,18.065s25.966-6.3,25.966-18.065c0-11.681-11.345-18.068-25.966-18.068S10830.154,3577.408,10830.154,3589.089Zm-43.43,23.094-41.918-22.23a1.586,1.586,0,0,0-2.329,1.4v21.011H10726.5v-42.123a4.421,4.421,0,0,1,4.42-4.422h.029a4.4,4.4,0,0,1,2.077.519l41.752,22.233a1.587,1.587,0,0,0,2.334-1.4v-21.35h16.11v42.454a4.42,4.42,0,0,1-6.493,3.905Zm-88.75.186v-46.534h15.884v46.534Zm-28.218,0v-20.147a1.588,1.588,0,0,0-2.392-1.367l-19.068,11.186a5.668,5.668,0,0,1-5.818-.055l-18.07-11.057a1.589,1.589,0,0,0-2.416,1.355v20.084h-15.876v-42.323a4.423,4.423,0,0,1,4.423-4.422h.038a4.453,4.453,0,0,1,2.3.648l32.246,19.694a1.429,1.429,0,0,0,1.5,0l32.243-19.694a4.453,4.453,0,0,1,2.3-.648h.041a4.421,4.421,0,0,1,4.42,4.422v42.323Zm136.353-.011v-46.534h7.39v46.534Z"
+        transform="translate(-10606.116 -3564.803)"
+        fill="#fff"
+        stroke="rgba(0,0,0,0)"
+        strokeWidth="1"
+      />
+    </g>
+  </svg>
+);
+
+export default LoginMinIOLogo;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
@@ -118,3 +118,4 @@ export { default as VersionIcon } from "./VersionIcon";
 export { default as WarnIcon } from "./WarnIcon";
 export { default as WarpIcon } from "./WarpIcon";
 export { default as WatchIcon } from "./WatchIcon";
+export { default as LoginMinIOLogo } from "./LoginMinIOLogo";
diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { OutlinedInputProps } from "@mui/material/OutlinedInput";
 import {
   CircularProgress,
   InputAdornment,
@@ -31,7 +30,6 @@ import withStyles from "@mui/styles/withStyles";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
 import { ILoginDetails, loginStrategyType } from "./types";
 import { SystemState } from "../../types";
 import { setErrorSnackMessage, userLoggedIn } from "../../actions";
@@ -41,7 +39,8 @@ import history from "../../history";
 import RefreshIcon from "../../icons/RefreshIcon";
 import MainError from "../Console/Common/MainError/MainError";
 import { encodeFileName } from "../../common/utils";
-import { LockIcon, UsersIcon, VersionIcon } from "../../icons";
+import { LockIcon, UsersIcon, LoginMinIOLogo } from "../../icons";
+import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -67,7 +66,7 @@ const styles = (theme: Theme) =>
       },
     },
     shadowBox: {
-      boxShadow: "0px 3px 10px #00000014",
+      boxShadow: "0px 3px 20px #00000014",
       height: "100%",
     },
     loginContainer: {
@@ -113,6 +112,36 @@ const styles = (theme: Theme) =>
           margin: "auto",
           textAlign: "left",
         },
+        "& .text-line1": {
+          font: "normal 100 70px 'Lato'",
+          marginBottom: 20,
+          "@media (max-width: 600px)": {
+            fontSize: 35,
+          },
+        },
+        "& .text-line2": {
+          fontSize: 70,
+          marginLeft: 25,
+          fontWeight: 400,
+
+          "@media (max-width: 600px)": {
+            fontSize: 35,
+            marginLeft: 0,
+          },
+        },
+        "& .logo-console": {
+          display: "flex",
+          alignItems: "center",
+
+          "@media (max-width: 900px)": {
+            marginTop: 20,
+            flexFlow: "column",
+
+            "& svg": {
+              width: "50%",
+            },
+          },
+        },
       },
     },
     "@media (max-width: 900px)": {
@@ -135,19 +164,6 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    inputField: {
-      "& input": {
-        padding: 5,
-        "&::placeholder": {
-          fontSize: 12,
-        },
-        "@media (max-width: 900px)": {
-          padding: 10,
-        },
-      },
-      "& svg": { height: 16 },
-    },
-
     loadingLoginStrategy: {
       textAlign: "center",
     },
@@ -158,9 +174,6 @@ const styles = (theme: Theme) =>
     submitContainer: {
       textAlign: "right",
     },
-    jwtInput: {
-      marginTop: 45,
-    },
     linearPredef: {
       height: 10,
     },
@@ -176,14 +189,38 @@ const styles = (theme: Theme) =>
     retryButton: {
       alignSelf: "flex-end",
     },
+    ...spacingUtils,
   });
 
 const inputStyles = makeStyles((theme: Theme) =>
   createStyles({
-    disabled: {
-      "&.MuiInput-underline::before": {
-        borderColor: "#eaeaea",
-        borderBottomStyle: "solid",
+    root: {
+      "& .MuiOutlinedInput-root": {
+        paddingLeft: 0,
+        "& svg": { height: 16 },
+        "& input": {
+          padding: 5,
+          paddingLeft: 0,
+          "&::placeholder": {
+            fontSize: 12,
+          },
+          "@media (max-width: 900px)": {
+            padding: 10,
+          },
+        },
+        "& fieldset": {
+          border: "none", // default
+          borderBottom: "1px solid #EAEAEA",
+          borderRadius: 0,
+        },
+        "&.Mui-focused fieldset": {
+          borderBottom: "1px solid #000000",
+          borderRadius: 0,
+        },
+        "& fieldset:hover": {
+          borderBottom: "2px solid #000000",
+          borderRadius: 0,
+        },
       },
     },
   })
@@ -194,7 +231,9 @@ function LoginField(props: TextFieldProps) {
 
   return (
     <TextField
-      InputProps={{ classes } as Partial<OutlinedInputProps>}
+      classes={{
+        root: classes.root,
+      }}
       variant="standard"
       {...props}
     />
@@ -305,16 +344,9 @@ const Login = ({
     case loginStrategyType.form: {
       loginComponent = (
         <React.Fragment>
-          <Typography
-            component="h1"
-            variant="h6"
-            className={classes.headerTitle}
-          >
-            Console Login
-          </Typography>
           <form className={classes.form} noValidate onSubmit={formSubmit}>
             <Grid container spacing={2}>
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.spacerBottom}>
                 <LoginField
                   fullWidth
                   id="accessKey"
@@ -323,7 +355,7 @@ const Login = ({
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setAccessKey(e.target.value)
                   }
-                  placeholder={"Enter Username"}
+                  placeholder={"Username"}
                   name="accessKey"
                   autoComplete="username"
                   disabled={loginSending}
@@ -350,7 +382,7 @@ const Login = ({
                   id="secretKey"
                   autoComplete="current-password"
                   disabled={loginSending}
-                  placeholder={"Enter Password"}
+                  placeholder={"Password"}
                   variant={"outlined"}
                   InputProps={{
                     startAdornment: (
@@ -401,16 +433,9 @@ const Login = ({
     case loginStrategyType.serviceAccount: {
       loginComponent = (
         <React.Fragment>
-          <Typography
-            component="h1"
-            variant="h6"
-            className={classes.headerTitle}
-          >
-            Operator Login
-          </Typography>
           <form className={classes.form} noValidate onSubmit={formSubmit}>
             <Grid container spacing={2}>
-              <Grid item xs={12} className={classes.jwtInput}>
+              <Grid item xs={12}>
                 <LoginField
                   required
                   className={classes.inputField}
@@ -497,9 +522,9 @@ const Login = ({
             <Grid item className="consoleTextBanner">
               <div className="left-items">
                 <div className="text-line1">Welcome to</div>
-                <div className="text-line2">{consoleText}</div>
-                <div className="logoLine">
-                  <VersionIcon /> MinIO {consoleText}
+                <div className="logo-console">
+                  <LoginMinIOLogo />
+                  <div className="text-line2">{consoleText}</div>
                 </div>
               </div>
             </Grid>
