Skip to content

Commit b4488d2

Browse files
prakashsvmxprakashsvmx
committed
Login page UX
1 parent 820fa61 commit b4488d2

File tree

3 files changed

+160
-61
lines changed

3 files changed

+160
-61
lines changed

‎portal-ui/src/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,17 @@ declare module "@mui/styles/defaultTheme" {
4141
const GlobalCss = withStyles({
4242
// @global is handled by jss-plugin-global.
4343
"@global": {
44+
body: {
45+
height: "100vh",
46+
width: "100vw",
47+
},
48+
"#root": {
49+
height: "100%",
50+
width: "100%",
51+
display: "flex",
52+
flexFlow: "column",
53+
alignItems: "stretch",
54+
},
4455
".min-icon": {
4556
// height: 26,
4657
width: 26,

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,7 @@ const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
9595
const Account = React.lazy(() => import("./Account/Account"));
9696
const Users = React.lazy(() => import("./Users/Users"));
9797
const Groups = React.lazy(() => import("./Groups/Groups"));
98-
const ConfigurationMain = React.lazy(
99-
() => import("./Configurations/ConfigurationMain")
100-
);
98+
10199
const TenantDetails = React.lazy(
102100
() => import("./Tenants/TenantDetails/TenantDetails")
103101
);
@@ -108,6 +106,11 @@ const ConfigurationOptions = React.lazy(
108106

109107
const styles = (theme: Theme) =>
110108
createStyles({
109+
"@global": {
110+
body: {
111+
backgroundColor: "#FFFFFF",
112+
},
113+
},
111114
root: {
112115
display: "flex",
113116
"& .MuiPaper-root.MuiSnackbarContent-root": {

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

Lines changed: 143 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { connect } from "react-redux";
1919
import { OutlinedInputProps } from "@mui/material/OutlinedInput";
2020
import {
2121
CircularProgress,
22+
InputAdornment,
2223
LinearProgress,
2324
Paper,
2425
TextFieldProps,
@@ -40,31 +41,10 @@ import history from "../../history";
4041
import RefreshIcon from "../../icons/RefreshIcon";
4142
import MainError from "../Console/Common/MainError/MainError";
4243
import { encodeFileName } from "../../common/utils";
44+
import { LockIcon, UsersIcon, VersionIcon } from "../../icons";
4345

4446
const styles = (theme: Theme) =>
4547
createStyles({
46-
"@global": {
47-
body: {
48-
backgroundColor: "#FAFAFA",
49-
},
50-
},
51-
paper: {
52-
borderRadius: 8,
53-
display: "flex",
54-
flexDirection: "column",
55-
alignItems: "center",
56-
width: 800,
57-
height: 424,
58-
margin: "auto",
59-
position: "absolute",
60-
top: "50%",
61-
left: "50%",
62-
marginLeft: -400,
63-
marginTop: -212,
64-
"&.MuiPaper-root": {
65-
borderRadius: 8,
66-
},
67-
},
6848
avatar: {
6949
margin: theme.spacing(1),
7050
backgroundColor: theme.palette.secondary.main,
@@ -86,42 +66,118 @@ const styles = (theme: Theme) =>
8666
justifyContent: "center",
8767
alignItems: "center",
8868
position: "absolute",
69+
zIndex: 9,
8970
left: "50%",
9071
top: "50%",
91-
marginLeft: -400,
92-
marginTop: -290,
72+
9373
color: "#fff",
9474
fontWeight: 700,
9575
fontSize: 14,
9676
borderRadius: 8,
9777
padding: 10,
9878
boxSizing: "border-box",
9979
},
100-
mainContainer: {
80+
loginPage: {
81+
height: "100%",
82+
display: "flex",
83+
flexFlow: "column",
84+
alignItems: "stretch",
10185
position: "relative",
102-
height: 424,
86+
padding: 84,
87+
88+
"@media (max-width: 900px)": {
89+
padding: 0,
90+
},
10391
},
104-
theOcean: {
105-
borderTopLeftRadius: 8,
106-
borderBottomLeftRadius: 8,
107-
background:
108-
"transparent linear-gradient(to bottom, #073052 0%,#05122b 100%); 0% 0% no-repeat padding-box;",
92+
shadowBox: {
93+
boxShadow: "0px 3px 10px #00000014",
94+
height: "100%",
10995
},
110-
oceanBg: {
111-
backgroundImage: "url(/images/BG_Illustration.svg)",
112-
backgroundRepeat: "no-repeat",
113-
backgroundPosition: "bottom left",
96+
loginContainer: {
97+
flex: 1,
11498
height: "100%",
115-
width: 324,
99+
100+
"& .right-items": {
101+
padding: 50,
102+
flex: 1,
103+
height: "100%",
104+
display: "flex",
105+
flexFlow: "column",
106+
alignItems: "center",
107+
justifyContent: "center",
108+
maxWidth: "33%",
109+
110+
"@media (max-width: 900px)": {
111+
maxWidth: "100%",
112+
margin: "auto",
113+
},
114+
},
115+
"& .consoleTextBanner": {
116+
// font: "normal normal 100 100px/100px Lato",
117+
fontFamily: "Lato, sans-serif",
118+
fontSize: "calc(3vw + 3vh + 1.5vmin)",
119+
lineHeight: 1.15,
120+
color: "#ffffff",
121+
flex: 1,
122+
textAlign: "center",
123+
height: "100%",
124+
display: "flex",
125+
justifyContent: "flex-start",
126+
margin: "auto",
127+
flexFlow: "column",
128+
background: "linear-gradient(120deg,#081c42,#073052)",
129+
130+
"& .logoLine": {
131+
display: "flex",
132+
alignItems: "center",
133+
fontSize: 18,
134+
marginTop: 40,
135+
},
136+
"& .left-items": {
137+
margin: "auto",
138+
textAlign: "left",
139+
},
140+
},
116141
},
117-
theLogin: {
118-
padding: "40px 45px 20px 45px",
142+
"@media (max-width: 900px)": {
143+
loginContainer: {
144+
display: "flex",
145+
flexFlow: "column",
146+
147+
"& .consoleTextBanner": {
148+
margin: 0,
149+
flex: 2,
150+
151+
"& .left-items": {
152+
alignItems: "center",
153+
textAlign: "center",
154+
},
155+
156+
"& .logoLine": {
157+
justifyContent: "center",
158+
},
159+
},
160+
},
119161
},
162+
inputField: {
163+
"& input": {
164+
padding: 5,
165+
"&::placeholder": {
166+
fontSize: 12,
167+
},
168+
"@media (max-width: 900px)": {
169+
padding: 10,
170+
},
171+
},
172+
"& svg": { height: 16 },
173+
},
174+
120175
loadingLoginStrategy: {
121176
textAlign: "center",
122177
},
123178
headerTitle: {
124-
marginBottom: 10,
179+
marginRight: "auto",
180+
marginBottom: 15,
125181
},
126182
submitContainer: {
127183
textAlign: "right",
@@ -292,29 +348,47 @@ const Login = ({
292348
<LoginField
293349
fullWidth
294350
id="accessKey"
351+
className={classes.inputField}
295352
value={accessKey}
296353
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
297354
setAccessKey(e.target.value)
298355
}
299-
label="Enter Username"
356+
placeholder={"Enter Username"}
300357
name="accessKey"
301358
autoComplete="username"
302359
disabled={loginSending}
360+
variant={"outlined"}
361+
InputProps={{
362+
startAdornment: (
363+
<InputAdornment position="start">
364+
<UsersIcon />
365+
</InputAdornment>
366+
),
367+
}}
303368
/>
304369
</Grid>
305370
<Grid item xs={12}>
306371
<LoginField
307372
fullWidth
373+
className={classes.inputField}
308374
value={secretKey}
309375
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
310376
setSecretKey(e.target.value)
311377
}
312378
name="secretKey"
313-
label="Enter Password"
314379
type="password"
315380
id="secretKey"
316381
autoComplete="current-password"
317382
disabled={loginSending}
383+
placeholder={"Enter Password"}
384+
variant={"outlined"}
385+
InputProps={{
386+
startAdornment: (
387+
<InputAdornment position="start">
388+
<LockIcon />
389+
</InputAdornment>
390+
),
391+
}}
318392
/>
319393
</Grid>
320394
</Grid>
@@ -340,13 +414,6 @@ const Login = ({
340414
case loginStrategyType.redirect: {
341415
loginComponent = (
342416
<React.Fragment>
343-
<Typography
344-
component="h1"
345-
variant="h6"
346-
className={classes.headerTitle}
347-
>
348-
Welcome
349-
</Typography>
350417
<Button
351418
component={"a"}
352419
href={loginStrategy.redirect}
@@ -376,16 +443,25 @@ const Login = ({
376443
<Grid item xs={12} className={classes.jwtInput}>
377444
<LoginField
378445
required
446+
className={classes.inputField}
379447
fullWidth
380448
id="jwt"
381449
value={jwt}
382450
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
383451
setJwt(e.target.value)
384452
}
385-
label="JWT"
386453
name="jwt"
387454
autoComplete="off"
388455
disabled={loginSending}
456+
placeholder={"Enter JWT"}
457+
variant={"outlined"}
458+
InputProps={{
459+
startAdornment: (
460+
<InputAdornment position="start">
461+
<LockIcon />
462+
</InputAdornment>
463+
),
464+
}}
389465
/>
390466
</Grid>
391467
</Grid>
@@ -425,6 +501,7 @@ const Login = ({
425501
}}
426502
endIcon={<RefreshIcon />}
427503
color={"primary"}
504+
variant="outlined"
428505
className={classes.retryButton}
429506
>
430507
Retry
@@ -438,16 +515,24 @@ const Login = ({
438515

439516
return (
440517
<React.Fragment>
441-
<Paper className={classes.paper}>
442-
<MainError customStyle={{ marginTop: -140 }} />
443-
<Grid container className={classes.mainContainer}>
444-
<Grid item xs={7} className={classes.theOcean}>
445-
<div className={classes.oceanBg} />
446-
</Grid>
447-
<Grid item xs={5} className={classes.theLogin}>
448-
{loginComponent}
518+
<Paper className={classes.loginPage}>
519+
<MainError />
520+
<div className={classes.shadowBox}>
521+
<Grid container className={classes.loginContainer}>
522+
<Grid item className="consoleTextBanner">
523+
<div className="left-items">
524+
<div className="text-line1">Welcome to</div>
525+
<div className="text-line2">CONSOLE</div>
526+
<div className="logoLine">
527+
<VersionIcon /> MinIO Console
528+
</div>
529+
</div>
530+
</Grid>
531+
<Grid item className="right-items">
532+
{loginComponent}
533+
</Grid>
449534
</Grid>
450-
</Grid>
535+
</div>
451536
</Paper>
452537
</React.Fragment>
453538
);

0 commit comments

Comments
 (0)