From 06b08593b758b8dee1a714f53b9c8623907ae090 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Wed, 24 Nov 2021 00:38:24 +0530 Subject: [PATCH] Login page UX (#1248) --- portal-ui/src/index.tsx | 11 + portal-ui/src/screens/Console/Console.tsx | 5 + portal-ui/src/screens/LoginPage/LoginPage.tsx | 211 +++++++++++++----- 3 files changed, 166 insertions(+), 61 deletions(-) diff --git a/portal-ui/src/index.tsx b/portal-ui/src/index.tsx index 11a3ce998..75b68b6c7 100644 --- a/portal-ui/src/index.tsx +++ b/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, diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx index ed18668d6..54ada76f1 100644 --- a/portal-ui/src/screens/Console/Console.tsx +++ b/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": { diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx index b72064043..d532555e7 100644 --- a/portal-ui/src/screens/LoginPage/LoginPage.tsx +++ b/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,10 +66,10 @@ 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, @@ -97,31 +77,106 @@ const styles = (theme: Theme) => padding: 10, boxSizing: "border-box", }, - mainContainer: { - position: "relative", - height: 424, - }, - theOcean: { - borderTopLeftRadius: 8, - borderBottomLeftRadius: 8, - background: - "transparent linear-gradient(to bottom, #073052 0%,#05122b 100%); 0% 0% no-repeat padding-box;", - }, - oceanBg: { - backgroundImage: "url(/images/BG_Illustration.svg)", - backgroundRepeat: "no-repeat", - backgroundPosition: "bottom left", + loginPage: { height: "100%", - width: 324, + display: "flex", + flexFlow: "column", + alignItems: "stretch", + position: "relative", + padding: 84, + + "@media (max-width: 900px)": { + padding: 0, + }, }, - theLogin: { - padding: "40px 45px 20px 45px", + shadowBox: { + boxShadow: "0px 3px 10px #00000014", + height: "100%", }, + loginContainer: { + flex: 1, + height: "100%", + + "& .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", + }, + }, + }, + "@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 = ({ ) => setAccessKey(e.target.value) } - label="Enter Username" + placeholder={"Enter Username"} name="accessKey" autoComplete="username" disabled={loginSending} + variant={"outlined"} + InputProps={{ + startAdornment: ( + + + + ), + }} /> ) => 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: ( + + + + ), + }} /> @@ -340,13 +413,6 @@ const Login = ({ case loginStrategyType.redirect: { loginComponent = ( - - Welcome -