From 2fe372162e7efc93fd9bbd6d700bc9269a86a911 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia Date: Tue, 4 Apr 2023 09:18:31 +0200 Subject: [PATCH 1/3] Update Login Message Signed-off-by: Daniel Valdivia --- portal-ui/src/screens/LoginPage/LoginPage.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx index 6dfe4e1b51..4ffeacc8be 100644 --- a/portal-ui/src/screens/LoginPage/LoginPage.tsx +++ b/portal-ui/src/screens/LoginPage/LoginPage.tsx @@ -30,6 +30,7 @@ import { resetForm } from "./loginSlice"; import StrategyForm from "./StrategyForm"; import { redirectRules } from "../../utils/sortFunctions"; import { getLogoVar } from "../../config"; +import Typography from "@mui/material/Typography"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -377,22 +378,24 @@ const Login = () => { } - promoHeader={Multi-Cloud Object Store} + promoHeader={High-Performance Object Store} promoInfo={ - - MinIO's high-performance, Kubernetes-native object store is licensed - under GNU AGPL v3 and is available on every cloud - public, private - and edge. For more information on the terms of the license or to - learn more about commercial licensing options visit the{" "} + + MinIO is a cloud-native object store built to run on any + infrastructure - public, private or edge clouds. Primary + use cases include data lakes, databases, AI/ML, SaaS + applications and fast backup & recovery. MinIO is dual + licensed under GNU AGPL v3 and commercial license. + To learn more, visit{" "} - pricing page + www.min.io . - + } /> From 2699258306464f79ba61db2c43a73dcd89e4e22b Mon Sep 17 00:00:00 2001 From: Daniel Valdivia Date: Tue, 4 Apr 2023 09:20:04 +0200 Subject: [PATCH 2/3] Warnings Signed-off-by: Daniel Valdivia --- portal-ui/src/screens/LoginPage/LoginPage.tsx | 669 +++++++++--------- 1 file changed, 334 insertions(+), 335 deletions(-) diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx index 4ffeacc8be..3c7d0456e5 100644 --- a/portal-ui/src/screens/LoginPage/LoginPage.tsx +++ b/portal-ui/src/screens/LoginPage/LoginPage.tsx @@ -14,392 +14,391 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Fragment, useEffect } from "react"; -import { useNavigate } from "react-router-dom"; -import { Button, Loader, LoginWrapper, RefreshIcon } from "mds"; -import { Theme } from "@mui/material/styles"; +import React, {Fragment, useEffect} from "react"; +import {useNavigate} from "react-router-dom"; +import {Button, Loader, LoginWrapper, RefreshIcon} from "mds"; +import {Theme} from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import makeStyles from "@mui/styles/makeStyles"; -import { loginStrategyType, redirectRule } from "./types"; +import {loginStrategyType, redirectRule} from "./types"; import MainError from "../Console/Common/MainError/MainError"; -import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary"; -import { AppState, useAppDispatch } from "../../store"; -import { useSelector } from "react-redux"; -import { getFetchConfigurationAsync, getVersionAsync } from "./loginThunks"; -import { resetForm } from "./loginSlice"; +import {spacingUtils} from "../Console/Common/FormComponents/common/styleLibrary"; +import {AppState, useAppDispatch} from "../../store"; +import {useSelector} from "react-redux"; +import {getFetchConfigurationAsync, getVersionAsync} from "./loginThunks"; +import {resetForm} from "./loginSlice"; import StrategyForm from "./StrategyForm"; -import { redirectRules } from "../../utils/sortFunctions"; -import { getLogoVar } from "../../config"; -import Typography from "@mui/material/Typography"; +import {redirectRules} from "../../utils/sortFunctions"; +import {getLogoVar} from "../../config"; const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: "100%", - overflow: "auto", - }, - form: { - width: "100%", // Fix IE 11 issue. - }, - submit: { - margin: "30px 0px 8px", - height: 40, - width: "100%", - boxShadow: "none", - padding: "16px 30px", - }, - loginSsoText: { - fontWeight: "700", - marginBottom: "15px", - }, - ssoSelect: { - width: "100%", - fontSize: "13px", - fontWeight: "700", - color: "grey", - }, - ssoMenuItem: { - fontSize: "15px", - fontWeight: "700", - color: theme.palette.primary.light, - "&.MuiMenuItem-divider:last-of-type": { - borderBottom: "none", - }, - "&.Mui-focusVisible": { - backgroundColor: theme.palette.grey["100"], - }, - }, - ssoLoginIcon: { - height: "13px", - marginRight: "25px", - }, - ssoSubmit: { - marginTop: "15px", - "&:first-of-type": { - marginTop: 0, - }, - }, - separator: { - marginLeft: 4, - marginRight: 4, - }, - linkHolder: { - marginTop: 20, - font: "normal normal normal 14px/16px Inter", - }, - miniLinks: { - margin: "auto", - textAlign: "center", - color: "#B2DEF5", - "& a": { - color: "#B2DEF5", - textDecoration: "none", - }, - "& .min-icon": { - width: 10, - color: "#B2DEF5", - }, - }, - miniLogo: { - marginTop: 8, - "& .min-icon": { - height: 12, - paddingTop: 2, - marginRight: 2, - }, - }, - loginPage: { - height: "100%", - margin: "auto", - }, - buttonRetry: { - display: "flex", - justifyContent: "center", - }, - loginContainer: { - flexDirection: "column", - maxWidth: 400, - margin: "auto", - "& .right-items": { - backgroundColor: "white", - padding: 40, - }, - "& .consoleTextBanner": { - fontWeight: 300, - fontSize: "calc(3vw + 3vh + 1.5vmin)", - lineHeight: 1.15, - color: theme.palette.primary.main, - flex: 1, - height: "100%", - display: "flex", - justifyContent: "flex-start", - margin: "auto", - - "& .logoLine": { - display: "flex", - alignItems: "center", - fontSize: 18, + createStyles({ + root: { + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: "100%", + overflow: "auto", + }, + form: { + width: "100%", // Fix IE 11 issue. }, - "& .left-items": { - marginTop: 100, - background: - "transparent linear-gradient(180deg, #FBFAFA 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box", - padding: 40, + submit: { + margin: "30px 0px 8px", + height: 40, + width: "100%", + boxShadow: "none", + padding: "16px 30px", }, - "& .left-logo": { - "& .min-icon": { - color: theme.palette.primary.main, - width: 108, - }, - marginBottom: 10, + loginSsoText: { + fontWeight: "700", + marginBottom: "15px", }, - "& .text-line1": { - font: " 100 44px 'Inter'", + ssoSelect: { + width: "100%", + fontSize: "13px", + fontWeight: "700", + color: "grey", }, - "& .text-line2": { - fontSize: 80, - fontWeight: 100, - textTransform: "uppercase", + ssoMenuItem: { + fontSize: "15px", + fontWeight: "700", + color: theme.palette.primary.light, + "&.MuiMenuItem-divider:last-of-type": { + borderBottom: "none", + }, + "&.Mui-focusVisible": { + backgroundColor: theme.palette.grey["100"], + }, }, - "& .text-line3": { - fontSize: 14, - fontWeight: "bold", + ssoLoginIcon: { + height: "13px", + marginRight: "25px", }, - "& .logo-console": { - display: "flex", - alignItems: "center", - - "@media (max-width: 900px)": { + ssoSubmit: { + marginTop: "15px", + "&:first-of-type": { + marginTop: 0, + }, + }, + separator: { + marginLeft: 4, + marginRight: 4, + }, + linkHolder: { marginTop: 20, - flexFlow: "column", + font: "normal normal normal 14px/16px Inter", + }, + miniLinks: { + margin: "auto", + textAlign: "center", + color: "#B2DEF5", + "& a": { + color: "#B2DEF5", + textDecoration: "none", + }, + "& .min-icon": { + width: 10, + color: "#B2DEF5", + }, + }, + miniLogo: { + marginTop: 8, + "& .min-icon": { + height: 12, + paddingTop: 2, + marginRight: 2, + }, + }, + loginPage: { + height: "100%", + margin: "auto", + }, + buttonRetry: { + display: "flex", + justifyContent: "center", + }, + loginContainer: { + flexDirection: "column", + maxWidth: 400, + margin: "auto", + "& .right-items": { + backgroundColor: "white", + padding: 40, + }, + "& .consoleTextBanner": { + fontWeight: 300, + fontSize: "calc(3vw + 3vh + 1.5vmin)", + lineHeight: 1.15, + color: theme.palette.primary.main, + flex: 1, + height: "100%", + display: "flex", + justifyContent: "flex-start", + margin: "auto", + + "& .logoLine": { + display: "flex", + alignItems: "center", + fontSize: 18, + }, + "& .left-items": { + marginTop: 100, + background: + "transparent linear-gradient(180deg, #FBFAFA 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box", + padding: 40, + }, + "& .left-logo": { + "& .min-icon": { + color: theme.palette.primary.main, + width: 108, + }, + marginBottom: 10, + }, + "& .text-line1": { + font: " 100 44px 'Inter'", + }, + "& .text-line2": { + fontSize: 80, + fontWeight: 100, + textTransform: "uppercase", + }, + "& .text-line3": { + fontSize: 14, + fontWeight: "bold", + }, + "& .logo-console": { + display: "flex", + alignItems: "center", + + "@media (max-width: 900px)": { + marginTop: 20, + flexFlow: "column", - "& svg": { - width: "50%", + "& svg": { + width: "50%", + }, + }, + }, }, - }, }, - }, - }, - "@media (max-width: 900px)": { - loginContainer: { - display: "flex", - flexFlow: "column", + "@media (max-width: 900px)": { + loginContainer: { + display: "flex", + flexFlow: "column", - "& .consoleTextBanner": { - margin: 0, - flex: 2, + "& .consoleTextBanner": { + margin: 0, + flex: 2, - "& .left-items": { - alignItems: "center", - textAlign: "center", - }, + "& .left-items": { + alignItems: "center", + textAlign: "center", + }, - "& .logoLine": { - justifyContent: "center", - }, + "& .logoLine": { + justifyContent: "center", + }, + }, + }, }, - }, - }, - loginStrategyMessage: { - textAlign: "center", - }, - loadingLoginStrategy: { - textAlign: "center", - width: 40, - height: 40, - }, - submitContainer: { - textAlign: "right", - marginTop: 30, - }, - linearPredef: { - height: 10, - }, - retryButton: { - alignSelf: "flex-end", - }, - iconLogo: { - "& .min-icon": { - width: "100%", - }, - }, - ...spacingUtils, - }) + loginStrategyMessage: { + textAlign: "center", + }, + loadingLoginStrategy: { + textAlign: "center", + width: 40, + height: 40, + }, + submitContainer: { + textAlign: "right", + marginTop: 30, + }, + linearPredef: { + height: 10, + }, + retryButton: { + alignSelf: "flex-end", + }, + iconLogo: { + "& .min-icon": { + width: "100%", + }, + }, + ...spacingUtils, + }) ); export interface LoginStrategyPayload { - accessKey: string; - secretKey: string; - sts?: string; + accessKey: string; + secretKey: string; + sts?: string; } export const getTargetPath = () => { - let targetPath = "/"; - if ( - localStorage.getItem("redirect-path") && - localStorage.getItem("redirect-path") !== "" - ) { - targetPath = `${localStorage.getItem("redirect-path")}`; - localStorage.setItem("redirect-path", ""); - } - return targetPath; + let targetPath = "/"; + if ( + localStorage.getItem("redirect-path") && + localStorage.getItem("redirect-path") !== "" + ) { + targetPath = `${localStorage.getItem("redirect-path")}`; + localStorage.setItem("redirect-path", ""); + } + return targetPath; }; const Login = () => { - const dispatch = useAppDispatch(); - const navigate = useNavigate(); - const classes = useStyles(); + const dispatch = useAppDispatch(); + const navigate = useNavigate(); + const classes = useStyles(); - const loginStrategy = useSelector( - (state: AppState) => state.login.loginStrategy - ); - const loadingFetchConfiguration = useSelector( - (state: AppState) => state.login.loadingFetchConfiguration - ); - const loadingVersion = useSelector( - (state: AppState) => state.login.loadingVersion - ); - const navigateTo = useSelector((state: AppState) => state.login.navigateTo); + const loginStrategy = useSelector( + (state: AppState) => state.login.loginStrategy + ); + const loadingFetchConfiguration = useSelector( + (state: AppState) => state.login.loadingFetchConfiguration + ); + const loadingVersion = useSelector( + (state: AppState) => state.login.loadingVersion + ); + const navigateTo = useSelector((state: AppState) => state.login.navigateTo); - const isK8S = useSelector((state: AppState) => state.login.isK8S); + const isK8S = useSelector((state: AppState) => state.login.isK8S); - useEffect(() => { - if (navigateTo !== "") { - dispatch(resetForm()); - navigate(navigateTo); - } - }, [navigateTo, dispatch, navigate]); + useEffect(() => { + if (navigateTo !== "") { + dispatch(resetForm()); + navigate(navigateTo); + } + }, [navigateTo, dispatch, navigate]); - useEffect(() => { - if (loadingFetchConfiguration) { - dispatch(getFetchConfigurationAsync()); - } - }, [loadingFetchConfiguration, dispatch]); + useEffect(() => { + if (loadingFetchConfiguration) { + dispatch(getFetchConfigurationAsync()); + } + }, [loadingFetchConfiguration, dispatch]); - useEffect(() => { - if (loadingVersion) { - dispatch(getVersionAsync()); - } - }, [dispatch, loadingVersion]); + useEffect(() => { + if (loadingVersion) { + dispatch(getVersionAsync()); + } + }, [dispatch, loadingVersion]); - let loginComponent; + let loginComponent; - switch (loginStrategy.loginStrategy) { - case loginStrategyType.redirect: - case loginStrategyType.form: { - let redirectItems: redirectRule[] = []; + switch (loginStrategy.loginStrategy) { + case loginStrategyType.redirect: + case loginStrategyType.form: { + let redirectItems: redirectRule[] = []; - if ( - loginStrategy.redirectRules && - loginStrategy.redirectRules.length > 0 - ) { - redirectItems = [...loginStrategy.redirectRules].sort(redirectRules); - } + if ( + loginStrategy.redirectRules && + loginStrategy.redirectRules.length > 0 + ) { + redirectItems = [...loginStrategy.redirectRules].sort(redirectRules); + } - loginComponent = ; - break; + loginComponent = ; + break; + } + default: + loginComponent = ( +
+ {loadingFetchConfiguration ? ( + + ) : ( + +
+

+ An error has occurred +
+ The backend cannot be reached. +

+
+
+
+ + )} +
+ ); } - default: - loginComponent = ( -
- {loadingFetchConfiguration ? ( - - ) : ( - -
-

- An error has occurred -
- The backend cannot be reached. -

-
-
-
- - )} -
- ); - } - let docsURL = "https://min.io/docs/minio/linux/index.html?ref=con"; - if (isK8S) { - docsURL = - "https://min.io/docs/minio/kubernetes/upstream/index.html?ref=con"; - } + let docsURL = "https://min.io/docs/minio/linux/index.html?ref=con"; + if (isK8S) { + docsURL = + "https://min.io/docs/minio/kubernetes/upstream/index.html?ref=con"; + } - return ( - - - - - Documentation - - | - - Github - - | - - Support - - | - - Download - - - } - promoHeader={High-Performance Object Store} - promoInfo={ - + return ( + + + + + Documentation + + | + + Github + + | + + Support + + | + + Download + + + } + promoHeader={High-Performance Object Store} + promoInfo={ + MinIO is a cloud-native object store built to run on any infrastructure - public, private or edge clouds. Primary use cases include data lakes, databases, AI/ML, SaaS applications and fast backup & recovery. MinIO is dual licensed under GNU AGPL v3 and commercial license. To learn more, visit{" "} - + www.min.io . - } - /> - - ); + } + /> + + ); }; export default Login; From f00d58d754f425eae2500f74fc4c5c35ea8450a8 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia Date: Tue, 4 Apr 2023 09:21:17 +0200 Subject: [PATCH 3/3] Prettier Signed-off-by: Daniel Valdivia --- portal-ui/src/screens/LoginPage/LoginPage.tsx | 675 +++++++++--------- 1 file changed, 336 insertions(+), 339 deletions(-) diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx index 3c7d0456e5..ca9644af22 100644 --- a/portal-ui/src/screens/LoginPage/LoginPage.tsx +++ b/portal-ui/src/screens/LoginPage/LoginPage.tsx @@ -14,391 +14,388 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, {Fragment, useEffect} from "react"; -import {useNavigate} from "react-router-dom"; -import {Button, Loader, LoginWrapper, RefreshIcon} from "mds"; -import {Theme} from "@mui/material/styles"; +import React, { Fragment, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import { Button, Loader, LoginWrapper, RefreshIcon } from "mds"; +import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import makeStyles from "@mui/styles/makeStyles"; -import {loginStrategyType, redirectRule} from "./types"; +import { loginStrategyType, redirectRule } from "./types"; import MainError from "../Console/Common/MainError/MainError"; -import {spacingUtils} from "../Console/Common/FormComponents/common/styleLibrary"; -import {AppState, useAppDispatch} from "../../store"; -import {useSelector} from "react-redux"; -import {getFetchConfigurationAsync, getVersionAsync} from "./loginThunks"; -import {resetForm} from "./loginSlice"; +import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary"; +import { AppState, useAppDispatch } from "../../store"; +import { useSelector } from "react-redux"; +import { getFetchConfigurationAsync, getVersionAsync } from "./loginThunks"; +import { resetForm } from "./loginSlice"; import StrategyForm from "./StrategyForm"; -import {redirectRules} from "../../utils/sortFunctions"; -import {getLogoVar} from "../../config"; +import { redirectRules } from "../../utils/sortFunctions"; +import { getLogoVar } from "../../config"; const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: "100%", - overflow: "auto", - }, - form: { - width: "100%", // Fix IE 11 issue. - }, - submit: { - margin: "30px 0px 8px", - height: 40, - width: "100%", - boxShadow: "none", - padding: "16px 30px", - }, - loginSsoText: { - fontWeight: "700", - marginBottom: "15px", - }, - ssoSelect: { - width: "100%", - fontSize: "13px", - fontWeight: "700", - color: "grey", - }, - ssoMenuItem: { - fontSize: "15px", - fontWeight: "700", - color: theme.palette.primary.light, - "&.MuiMenuItem-divider:last-of-type": { - borderBottom: "none", - }, - "&.Mui-focusVisible": { - backgroundColor: theme.palette.grey["100"], - }, + createStyles({ + root: { + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: "100%", + overflow: "auto", + }, + form: { + width: "100%", // Fix IE 11 issue. + }, + submit: { + margin: "30px 0px 8px", + height: 40, + width: "100%", + boxShadow: "none", + padding: "16px 30px", + }, + loginSsoText: { + fontWeight: "700", + marginBottom: "15px", + }, + ssoSelect: { + width: "100%", + fontSize: "13px", + fontWeight: "700", + color: "grey", + }, + ssoMenuItem: { + fontSize: "15px", + fontWeight: "700", + color: theme.palette.primary.light, + "&.MuiMenuItem-divider:last-of-type": { + borderBottom: "none", + }, + "&.Mui-focusVisible": { + backgroundColor: theme.palette.grey["100"], + }, + }, + ssoLoginIcon: { + height: "13px", + marginRight: "25px", + }, + ssoSubmit: { + marginTop: "15px", + "&:first-of-type": { + marginTop: 0, + }, + }, + separator: { + marginLeft: 4, + marginRight: 4, + }, + linkHolder: { + marginTop: 20, + font: "normal normal normal 14px/16px Inter", + }, + miniLinks: { + margin: "auto", + textAlign: "center", + color: "#B2DEF5", + "& a": { + color: "#B2DEF5", + textDecoration: "none", + }, + "& .min-icon": { + width: 10, + color: "#B2DEF5", + }, + }, + miniLogo: { + marginTop: 8, + "& .min-icon": { + height: 12, + paddingTop: 2, + marginRight: 2, + }, + }, + loginPage: { + height: "100%", + margin: "auto", + }, + buttonRetry: { + display: "flex", + justifyContent: "center", + }, + loginContainer: { + flexDirection: "column", + maxWidth: 400, + margin: "auto", + "& .right-items": { + backgroundColor: "white", + padding: 40, + }, + "& .consoleTextBanner": { + fontWeight: 300, + fontSize: "calc(3vw + 3vh + 1.5vmin)", + lineHeight: 1.15, + color: theme.palette.primary.main, + flex: 1, + height: "100%", + display: "flex", + justifyContent: "flex-start", + margin: "auto", + + "& .logoLine": { + display: "flex", + alignItems: "center", + fontSize: 18, }, - ssoLoginIcon: { - height: "13px", - marginRight: "25px", + "& .left-items": { + marginTop: 100, + background: + "transparent linear-gradient(180deg, #FBFAFA 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box", + padding: 40, }, - ssoSubmit: { - marginTop: "15px", - "&:first-of-type": { - marginTop: 0, - }, + "& .left-logo": { + "& .min-icon": { + color: theme.palette.primary.main, + width: 108, + }, + marginBottom: 10, }, - separator: { - marginLeft: 4, - marginRight: 4, + "& .text-line1": { + font: " 100 44px 'Inter'", }, - linkHolder: { - marginTop: 20, - font: "normal normal normal 14px/16px Inter", + "& .text-line2": { + fontSize: 80, + fontWeight: 100, + textTransform: "uppercase", }, - miniLinks: { - margin: "auto", - textAlign: "center", - color: "#B2DEF5", - "& a": { - color: "#B2DEF5", - textDecoration: "none", - }, - "& .min-icon": { - width: 10, - color: "#B2DEF5", - }, + "& .text-line3": { + fontSize: 14, + fontWeight: "bold", }, - miniLogo: { - marginTop: 8, - "& .min-icon": { - height: 12, - paddingTop: 2, - marginRight: 2, - }, - }, - loginPage: { - height: "100%", - margin: "auto", - }, - buttonRetry: { - display: "flex", - justifyContent: "center", - }, - loginContainer: { - flexDirection: "column", - maxWidth: 400, - margin: "auto", - "& .right-items": { - backgroundColor: "white", - padding: 40, - }, - "& .consoleTextBanner": { - fontWeight: 300, - fontSize: "calc(3vw + 3vh + 1.5vmin)", - lineHeight: 1.15, - color: theme.palette.primary.main, - flex: 1, - height: "100%", - display: "flex", - justifyContent: "flex-start", - margin: "auto", + "& .logo-console": { + display: "flex", + alignItems: "center", - "& .logoLine": { - display: "flex", - alignItems: "center", - fontSize: 18, - }, - "& .left-items": { - marginTop: 100, - background: - "transparent linear-gradient(180deg, #FBFAFA 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box", - padding: 40, - }, - "& .left-logo": { - "& .min-icon": { - color: theme.palette.primary.main, - width: 108, - }, - marginBottom: 10, - }, - "& .text-line1": { - font: " 100 44px 'Inter'", - }, - "& .text-line2": { - fontSize: 80, - fontWeight: 100, - textTransform: "uppercase", - }, - "& .text-line3": { - fontSize: 14, - fontWeight: "bold", - }, - "& .logo-console": { - display: "flex", - alignItems: "center", - - "@media (max-width: 900px)": { - marginTop: 20, - flexFlow: "column", + "@media (max-width: 900px)": { + marginTop: 20, + flexFlow: "column", - "& svg": { - width: "50%", - }, - }, - }, + "& svg": { + width: "50%", }, + }, }, - "@media (max-width: 900px)": { - loginContainer: { - display: "flex", - flexFlow: "column", - - "& .consoleTextBanner": { - margin: 0, - flex: 2, + }, + }, + "@media (max-width: 900px)": { + loginContainer: { + display: "flex", + flexFlow: "column", - "& .left-items": { - alignItems: "center", - textAlign: "center", - }, + "& .consoleTextBanner": { + margin: 0, + flex: 2, - "& .logoLine": { - justifyContent: "center", - }, - }, - }, - }, - loginStrategyMessage: { + "& .left-items": { + alignItems: "center", textAlign: "center", + }, + + "& .logoLine": { + justifyContent: "center", + }, }, - loadingLoginStrategy: { - textAlign: "center", - width: 40, - height: 40, - }, - submitContainer: { - textAlign: "right", - marginTop: 30, - }, - linearPredef: { - height: 10, - }, - retryButton: { - alignSelf: "flex-end", - }, - iconLogo: { - "& .min-icon": { - width: "100%", - }, - }, - ...spacingUtils, - }) + }, + }, + loginStrategyMessage: { + textAlign: "center", + }, + loadingLoginStrategy: { + textAlign: "center", + width: 40, + height: 40, + }, + submitContainer: { + textAlign: "right", + marginTop: 30, + }, + linearPredef: { + height: 10, + }, + retryButton: { + alignSelf: "flex-end", + }, + iconLogo: { + "& .min-icon": { + width: "100%", + }, + }, + ...spacingUtils, + }) ); export interface LoginStrategyPayload { - accessKey: string; - secretKey: string; - sts?: string; + accessKey: string; + secretKey: string; + sts?: string; } export const getTargetPath = () => { - let targetPath = "/"; - if ( - localStorage.getItem("redirect-path") && - localStorage.getItem("redirect-path") !== "" - ) { - targetPath = `${localStorage.getItem("redirect-path")}`; - localStorage.setItem("redirect-path", ""); - } - return targetPath; + let targetPath = "/"; + if ( + localStorage.getItem("redirect-path") && + localStorage.getItem("redirect-path") !== "" + ) { + targetPath = `${localStorage.getItem("redirect-path")}`; + localStorage.setItem("redirect-path", ""); + } + return targetPath; }; const Login = () => { - const dispatch = useAppDispatch(); - const navigate = useNavigate(); - const classes = useStyles(); + const dispatch = useAppDispatch(); + const navigate = useNavigate(); + const classes = useStyles(); - const loginStrategy = useSelector( - (state: AppState) => state.login.loginStrategy - ); - const loadingFetchConfiguration = useSelector( - (state: AppState) => state.login.loadingFetchConfiguration - ); - const loadingVersion = useSelector( - (state: AppState) => state.login.loadingVersion - ); - const navigateTo = useSelector((state: AppState) => state.login.navigateTo); + const loginStrategy = useSelector( + (state: AppState) => state.login.loginStrategy + ); + const loadingFetchConfiguration = useSelector( + (state: AppState) => state.login.loadingFetchConfiguration + ); + const loadingVersion = useSelector( + (state: AppState) => state.login.loadingVersion + ); + const navigateTo = useSelector((state: AppState) => state.login.navigateTo); - const isK8S = useSelector((state: AppState) => state.login.isK8S); + const isK8S = useSelector((state: AppState) => state.login.isK8S); - useEffect(() => { - if (navigateTo !== "") { - dispatch(resetForm()); - navigate(navigateTo); - } - }, [navigateTo, dispatch, navigate]); + useEffect(() => { + if (navigateTo !== "") { + dispatch(resetForm()); + navigate(navigateTo); + } + }, [navigateTo, dispatch, navigate]); - useEffect(() => { - if (loadingFetchConfiguration) { - dispatch(getFetchConfigurationAsync()); - } - }, [loadingFetchConfiguration, dispatch]); + useEffect(() => { + if (loadingFetchConfiguration) { + dispatch(getFetchConfigurationAsync()); + } + }, [loadingFetchConfiguration, dispatch]); - useEffect(() => { - if (loadingVersion) { - dispatch(getVersionAsync()); - } - }, [dispatch, loadingVersion]); + useEffect(() => { + if (loadingVersion) { + dispatch(getVersionAsync()); + } + }, [dispatch, loadingVersion]); - let loginComponent; + let loginComponent; - switch (loginStrategy.loginStrategy) { - case loginStrategyType.redirect: - case loginStrategyType.form: { - let redirectItems: redirectRule[] = []; + switch (loginStrategy.loginStrategy) { + case loginStrategyType.redirect: + case loginStrategyType.form: { + let redirectItems: redirectRule[] = []; - if ( - loginStrategy.redirectRules && - loginStrategy.redirectRules.length > 0 - ) { - redirectItems = [...loginStrategy.redirectRules].sort(redirectRules); - } + if ( + loginStrategy.redirectRules && + loginStrategy.redirectRules.length > 0 + ) { + redirectItems = [...loginStrategy.redirectRules].sort(redirectRules); + } - loginComponent = ; - break; - } - default: - loginComponent = ( -
- {loadingFetchConfiguration ? ( - - ) : ( - -
-

- An error has occurred -
- The backend cannot be reached. -

-
-
-
- - )} -
- ); + loginComponent = ; + break; } + default: + loginComponent = ( +
+ {loadingFetchConfiguration ? ( + + ) : ( + +
+

+ An error has occurred +
+ The backend cannot be reached. +

+
+
+
+ + )} +
+ ); + } - let docsURL = "https://min.io/docs/minio/linux/index.html?ref=con"; - if (isK8S) { - docsURL = - "https://min.io/docs/minio/kubernetes/upstream/index.html?ref=con"; - } + let docsURL = "https://min.io/docs/minio/linux/index.html?ref=con"; + if (isK8S) { + docsURL = + "https://min.io/docs/minio/kubernetes/upstream/index.html?ref=con"; + } - return ( - - - - - Documentation - - | - - Github - - | - - Support - - | - - Download - - - } - promoHeader={High-Performance Object Store} - promoInfo={ - + return ( + + + + + Documentation + + | + + Github + + | + + Support + + | + + Download + + + } + promoHeader={ + High-Performance Object Store + } + promoInfo={ + MinIO is a cloud-native object store built to run on any - infrastructure - public, private or edge clouds. Primary - use cases include data lakes, databases, AI/ML, SaaS - applications and fast backup & recovery. MinIO is dual - licensed under GNU AGPL v3 and commercial license. - To learn more, visit{" "} - + infrastructure - public, private or edge clouds. Primary use cases + include data lakes, databases, AI/ML, SaaS applications and fast + backup & recovery. MinIO is dual licensed under GNU AGPL v3 and + commercial license. To learn more, visit{" "} + www.min.io . - } - /> - - ); + } + /> + + ); }; export default Login;