Login page UX (#1248)

Author: prakashsvmx

portal-ui/src/index.tsx

@@ -41,6 +41,17 @@ declare module "@mui/styles/defaultTheme" {
 const GlobalCss = withStyles({
   // @global is handled by jss-plugin-global.
   "@global": {
+    body: {
+      height: "100vh",
+      width: "100vw",
+    },
+    "#root": {
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      flexFlow: "column",
+      alignItems: "stretch",
+    },
     ".min-icon": {
       // height: 26,
       width: 26,

portal-ui/src/screens/Console/Console.tsx

@@ -106,6 +106,11 @@ const ConfigurationOptions = React.lazy(
 
 const styles = (theme: Theme) =>
   createStyles({
+    "@global": {
+      body: {
+        backgroundColor: "#FFFFFF",
+      },
+    },
     root: {
       display: "flex",
       "& .MuiPaper-root.MuiSnackbarContent-root": {

portal-ui/src/screens/LoginPage/LoginPage.tsx

@@ -19,6 +19,7 @@ import { connect } from "react-redux";
 import { OutlinedInputProps } from "@mui/material/OutlinedInput";
 import {
   CircularProgress,
+  InputAdornment,
   LinearProgress,
   Paper,
   TextFieldProps,
@@ -40,31 +41,10 @@ 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";
 
 const styles = (theme: Theme) =>
   createStyles({
-    "@global": {
-      body: {
-        backgroundColor: "#FAFAFA",
-      },
-    },
-    paper: {
-      borderRadius: 8,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: 800,
-      height: 424,
-      margin: "auto",
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      marginLeft: -400,
-      marginTop: -212,
-      "&.MuiPaper-root": {
-        borderRadius: 8,
-      },
-    },
     avatar: {
       margin: theme.spacing(1),
       backgroundColor: theme.palette.secondary.main,
@@ -86,42 +66,117 @@ const styles = (theme: Theme) =>
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
+      zIndex: 9,
       left: "50%",
       top: "50%",
-      marginLeft: -400,
-      marginTop: -290,
+
       color: "#fff",
       fontWeight: 700,
       fontSize: 14,
       borderRadius: 8,
       padding: 10,
       boxSizing: "border-box",
     },
-    mainContainer: {
+    loginPage: {
+      height: "100%",
+      display: "flex",
+      flexFlow: "column",
+      alignItems: "stretch",
       position: "relative",
-      height: 424,
+      padding: 84,
+
+      "@media (max-width: 900px)": {
+        padding: 0,
+      },
     },
-    theOcean: {
-      borderTopLeftRadius: 8,
-      borderBottomLeftRadius: 8,
-      background:
-        "transparent linear-gradient(to bottom, #073052 0%,#05122b 100%); 0% 0% no-repeat padding-box;",
+    shadowBox: {
+      boxShadow: "0px 3px 10px #00000014",
+      height: "100%",
     },
-    oceanBg: {
-      backgroundImage: "url(/images/BG_Illustration.svg)",
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "bottom left",
+    loginContainer: {
+      flex: 1,
       height: "100%",
-      width: 324,
+
+      "& .right-items": {
+        padding: 50,
+        flex: 1,
+        height: "100%",
+        display: "flex",
+        flexFlow: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        maxWidth: "33%",
+
+        "@media (max-width: 900px)": {
+          maxWidth: "100%",
+          margin: "auto",
+        },
+      },
+      "& .consoleTextBanner": {
+        fontWeight: 300,
+        fontSize: "calc(3vw + 3vh + 1.5vmin)",
+        lineHeight: 1.15,
+        color: "#ffffff",
+        flex: 1,
+        textAlign: "center",
+        height: "100%",
+        display: "flex",
+        justifyContent: "flex-start",
+        margin: "auto",
+        flexFlow: "column",
+        background: "linear-gradient(120deg,#081c42,#073052)",
+
+        "& .logoLine": {
+          display: "flex",
+          alignItems: "center",
+          fontSize: 18,
+          marginTop: 40,
+        },
+        "& .left-items": {
+          margin: "auto",
+          textAlign: "left",
+        },
+      },
     },
-    theLogin: {
-      padding: "40px 45px 20px 45px",
+    "@media (max-width: 900px)": {
+      loginContainer: {
+        display: "flex",
+        flexFlow: "column",
+
+        "& .consoleTextBanner": {
+          margin: 0,
+          flex: 2,
+
+          "& .left-items": {
+            alignItems: "center",
+            textAlign: "center",
+          },
+
+          "& .logoLine": {
+            justifyContent: "center",
+          },
+        },
+      },
+    },
+    inputField: {
+      "& input": {
+        padding: 5,
+        "&::placeholder": {
+          fontSize: 12,
+        },
+        "@media (max-width: 900px)": {
+          padding: 10,
+        },
+      },
+      "& svg": { height: 16 },
     },
+
     loadingLoginStrategy: {
       textAlign: "center",
     },
     headerTitle: {
-      marginBottom: 10,
+      marginRight: "auto",
+      marginBottom: 15,
     },
     submitContainer: {
       textAlign: "right",
@@ -292,29 +347,47 @@ const Login = ({
                 <LoginField
                   fullWidth
                   id="accessKey"
+                  className={classes.inputField}
                   value={accessKey}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setAccessKey(e.target.value)
                   }
-                  label="Enter Username"
+                  placeholder={"Enter Username"}
                   name="accessKey"
                   autoComplete="username"
                   disabled={loginSending}
+                  variant={"outlined"}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <UsersIcon />
+                      </InputAdornment>
+                    ),
+                  }}
                 />
               </Grid>
               <Grid item xs={12}>
                 <LoginField
                   fullWidth
+                  className={classes.inputField}
                   value={secretKey}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setSecretKey(e.target.value)
                   }
                   name="secretKey"
-                  label="Enter Password"
                   type="password"
                   id="secretKey"
                   autoComplete="current-password"
                   disabled={loginSending}
+                  placeholder={"Enter Password"}
+                  variant={"outlined"}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <LockIcon />
+                      </InputAdornment>
+                    ),
+                  }}
                 />
               </Grid>
             </Grid>
@@ -340,13 +413,6 @@ const Login = ({
     case loginStrategyType.redirect: {
       loginComponent = (
         <React.Fragment>
-          <Typography
-            component="h1"
-            variant="h6"
-            className={classes.headerTitle}
-          >
-            Welcome
-          </Typography>
           <Button
             component={"a"}
             href={loginStrategy.redirect}
@@ -376,16 +442,25 @@ const Login = ({
               <Grid item xs={12} className={classes.jwtInput}>
                 <LoginField
                   required
+                  className={classes.inputField}
                   fullWidth
                   id="jwt"
                   value={jwt}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setJwt(e.target.value)
                   }
-                  label="JWT"
                   name="jwt"
                   autoComplete="off"
                   disabled={loginSending}
+                  placeholder={"Enter JWT"}
+                  variant={"outlined"}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <LockIcon />
+                      </InputAdornment>
+                    ),
+                  }}
                 />
               </Grid>
             </Grid>
@@ -425,6 +500,7 @@ const Login = ({
                   }}
                   endIcon={<RefreshIcon />}
                   color={"primary"}
+                  variant="outlined"
                   className={classes.retryButton}
                 >
                   Retry
@@ -436,18 +512,31 @@ const Login = ({
       );
   }
 
+  const consoleText =
+    loginStrategy.loginStrategy === loginStrategyType.serviceAccount
+      ? "Operator"
+      : "Console";
+
   return (
     <React.Fragment>
-      <Paper className={classes.paper}>
-        <MainError customStyle={{ marginTop: -140 }} />
-        <Grid container className={classes.mainContainer}>
-          <Grid item xs={7} className={classes.theOcean}>
-            <div className={classes.oceanBg} />
-          </Grid>
-          <Grid item xs={5} className={classes.theLogin}>
-            {loginComponent}
+      <Paper className={classes.loginPage}>
+        <MainError />
+        <div className={classes.shadowBox}>
+          <Grid container className={classes.loginContainer}>
+            <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>
+              </div>
+            </Grid>
+            <Grid item className="right-items">
+              {loginComponent}
+            </Grid>
           </Grid>
-        </Grid>
+        </div>
       </Paper>
     </React.Fragment>
   );