Changed SSO Login screen to hide login form by default (#2807)

Signed-off-by: Benjamin Perez <[email protected]>

Author: bexsoft

models/login_details.go

@@ -64,7 +64,7 @@ const ProtectedRoute = ({ Component }: ProtectedRouteProps) => {
         dispatch(saveSessionResponse(res));
         dispatch(userLogged(true));
         setSessionLoading(false);
-        dispatch(globalSetDistributedSetup(res.distributedMode || false));
+        dispatch(globalSetDistributedSetup(res?.distributedMode || false));
 
         if (res.customStyles && res.customStyles !== "") {
           const overrideColorVariants = getOverrideColorVariants(

portal-ui/src/ProtectedRoutes.tsx

@@ -466,7 +466,6 @@ export interface LoginDetails {
     | "service-account"
     | "redirect-service-account";
   redirectRules?: RedirectRule[];
-  isDirectPV?: boolean;
   isK8S?: boolean;
   animatedLogin?: boolean;
 }

portal-ui/src/api/consoleApi.ts

@@ -16,13 +16,9 @@
 
 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 { Box, Button, Loader, LoginWrapper, RefreshIcon } from "mds";
 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";
@@ -31,205 +27,6 @@ import StrategyForm from "./StrategyForm";
 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,
-        },
-        "& .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%",
-            },
-          },
-        },
-      },
-    },
-    "@media (max-width: 900px)": {
-      loginContainer: {
-        display: "flex",
-        flexFlow: "column",
-
-        "& .consoleTextBanner": {
-          margin: 0,
-          flex: 2,
-
-          "& .left-items": {
-            alignItems: "center",
-            textAlign: "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,
-  })
-);
-
 export interface LoginStrategyPayload {
   accessKey: string;
   secretKey: string;
@@ -251,7 +48,6 @@ export const getTargetPath = () => {
 const Login = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const classes = useStyles();
 
   const loginStrategy = useSelector(
     (state: AppState) => state.login.loginStrategy
@@ -308,19 +104,32 @@ const Login = () => {
     }
     default:
       loginComponent = (
-        <div style={{ textAlign: "center" }}>
+        <Box
+          sx={{
+            textAlign: "center",
+            "& .loadingLoginStrategy": {
+              textAlign: "center",
+              width: 40,
+              height: 40,
+            },
+            "& .buttonRetry": {
+              display: "flex",
+              justifyContent: "center",
+            },
+          }}
+        >
           {loadingFetchConfiguration ? (
-            <Loader className={classes.loadingLoginStrategy} />
+            <Loader className={"loadingLoginStrategy"} />
           ) : (
             <Fragment>
-              <div>
-                <p style={{ color: "#000", textAlign: "center" }}>
+              <Box>
+                <p style={{ textAlign: "center" }}>
                   An error has occurred
                   <br />
                   The backend cannot be reached.
                 </p>
-              </div>
-              <div className={classes.buttonRetry}>
+              </Box>
+              <div className={"buttonRetry"}>
                 <Button
                   onClick={() => {
                     dispatch(getFetchConfigurationAsync());
@@ -334,7 +143,7 @@ const Login = () => {
               </div>
             </Fragment>
           )}
-        </div>
+        </Box>
       );
   }
 
@@ -351,35 +160,42 @@ const Login = () => {
         logoProps={{ applicationName: "console", subVariant: getLogoVar() }}
         form={loginComponent}
         formFooter={
-          <Fragment>
+          <Box
+            sx={{
+              "& .separator": {
+                marginLeft: 4,
+                marginRight: 4,
+              },
+            }}
+          >
             <a href={docsURL} target="_blank" rel="noopener">
               Documentation
             </a>
-            <span className={classes.separator}>|</span>
+            <span className={"separator"}>|</span>
             <a
               href="https://github.com/minio/minio"
               target="_blank"
               rel="noopener"
             >
               GitHub
             </a>
-            <span className={classes.separator}>|</span>
+            <span className={"separator"}>|</span>
             <a
               href="https://subnet.min.io/?ref=con"
               target="_blank"
               rel="noopener"
             >
               Support
             </a>
-            <span className={classes.separator}>|</span>
+            <span className={"separator"}>|</span>
             <a
               href="https://min.io/download/?ref=con"
               target="_blank"
               rel="noopener"
             >
               Download
             </a>
-          </Fragment>
+          </Box>
         }
         promoHeader={
           <span style={{ fontSize: 28 }}>High-Performance Object Store</span>