From 9c3e8f5bf791fc3afb008ff56160cbb74422d4f3 Mon Sep 17 00:00:00 2001
From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com>
Date: Fri, 17 Dec 2021 21:21:26 +0000
Subject: [PATCH] Login UX update (#1328)
---
portal-ui/src/icons/LoginMinIOLogo.tsx | 40 ++++++
portal-ui/src/icons/index.ts | 1 +
portal-ui/src/screens/LoginPage/LoginPage.tsx | 117 +++++++++++-------
3 files changed, 112 insertions(+), 46 deletions(-)
create mode 100644 portal-ui/src/icons/LoginMinIOLogo.tsx
diff --git a/portal-ui/src/icons/LoginMinIOLogo.tsx b/portal-ui/src/icons/LoginMinIOLogo.tsx
new file mode 100644
index 000000000..ff9f544d7
--- /dev/null
+++ 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 .
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LoginMinIOLogo = (props: SVGProps) => (
+
+);
+
+export default LoginMinIOLogo;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
index 10aec8ca2..4425c90b1 100644
--- 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
index 1d79b684a..a9a934e2f 100644
--- 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 (
}
+ classes={{
+ root: classes.root,
+ }}
variant="standard"
{...props}
/>
@@ -305,16 +344,9 @@ const Login = ({
case loginStrategyType.form: {
loginComponent = (
-
- Console Login
-