From c99534cbee72dd38a6fe59f9ff5ce6a34f25d35c Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Wed, 14 May 2025 15:41:50 -0700 Subject: [PATCH] Strategy form cleanup Signed-off-by: Benjamin Perez --- web-app/src/MainRouter.tsx | 11 - web-app/src/screens/LoginPage/Login.tsx | 6 - .../src/screens/LoginPage/LoginCallback.tsx | 159 ---------- .../src/screens/LoginPage/StrategyForm.tsx | 285 +++++------------- web-app/src/screens/LoginPage/loginSlice.ts | 29 +- web-app/src/screens/LoginPage/loginThunks.ts | 9 - 6 files changed, 71 insertions(+), 428 deletions(-) delete mode 100644 web-app/src/screens/LoginPage/LoginCallback.tsx diff --git a/web-app/src/MainRouter.tsx b/web-app/src/MainRouter.tsx index df02674e64..2311e13f7f 100644 --- a/web-app/src/MainRouter.tsx +++ b/web-app/src/MainRouter.tsx @@ -23,22 +23,11 @@ import { baseUrl } from "./history"; const Login = React.lazy(() => import("./screens/LoginPage/Login")); const Logout = React.lazy(() => import("./screens/LogoutPage/LogoutPage")); -const LoginCallback = React.lazy( - () => import("./screens/LoginPage/LoginCallback"), -); const MainRouter = () => { return ( - }> - - - } - /> { ); const navigateTo = useSelector((state: AppState) => state.login.navigateTo); - const isK8S = useSelector((state: AppState) => state.login.isK8S); - const backgroundAnimation = useSelector( (state: AppState) => state.login.backgroundAnimation, ); @@ -134,10 +132,6 @@ const Login = () => { } 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"; - } useEffect(() => { dispatch(setHelpName("login")); diff --git a/web-app/src/screens/LoginPage/LoginCallback.tsx b/web-app/src/screens/LoginPage/LoginCallback.tsx deleted file mode 100644 index 07d9223f42..0000000000 --- a/web-app/src/screens/LoginPage/LoginCallback.tsx +++ /dev/null @@ -1,159 +0,0 @@ -// 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 React, { Fragment, useEffect, useState } from "react"; -import styled from "styled-components"; -import { useNavigate } from "react-router-dom"; -import api from "../../common/api"; -import { baseUrl } from "../../history"; -import { Box, Button, LoginWrapper, WarnIcon } from "mds"; -import { getLogoApplicationVariant, getLogoVar } from "../../config"; -import get from "lodash/get"; - -const CallBackContainer = styled.div(({ theme }) => ({ - "& .errorDescription": { - fontStyle: "italic", - transition: "all .2s ease-in-out", - padding: "0 15px", - marginTop: 5, - overflow: "auto", - }, - "& .errorLabel": { - color: get(theme, "fontColor", "#000"), - fontSize: 18, - fontWeight: "bold", - marginLeft: 5, - }, - "& .simpleError": { - marginTop: 5, - padding: "2px 5px", - fontSize: 16, - color: get(theme, "fontColor", "#000"), - }, - "& .messageIcon": { - color: get(theme, "signalColors.danger", "#C72C48"), - display: "flex", - "& svg": { - width: 32, - height: 32, - }, - }, - "& .errorTitle": { - display: "flex", - alignItems: "center", - borderBottom: 15, - }, -})); - -const LoginCallback = () => { - const navigate = useNavigate(); - - const [error, setError] = useState(""); - const [errorDescription, setErrorDescription] = useState(""); - const [loading, setLoading] = useState(true); - - useEffect(() => { - if (loading) { - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - const code = urlParams.get("code"); - const state = urlParams.get("state"); - const error = urlParams.get("error"); - const errorDescription = urlParams.get("errorDescription"); - if (error || errorDescription) { - setError(error || ""); - setErrorDescription(errorDescription || ""); - setLoading(false); - } else { - api - .invoke("POST", "/api/v1/login/oauth2/auth", { code, state }) - .then(() => { - // We push to history the new URL. - let targetPath = "/"; - if ( - localStorage.getItem("redirect-path") && - localStorage.getItem("redirect-path") !== "" - ) { - targetPath = `${localStorage.getItem("redirect-path")}`; - localStorage.setItem("redirect-path", ""); - } - if (state) { - localStorage.setItem("auth-state", state); - } - setLoading(false); - navigate(targetPath); - }) - .catch((error) => { - setError(error.errorMessage); - setErrorDescription(error.detailedError); - setLoading(false); - }); - } - } - }, [loading, navigate]); - return error !== "" || errorDescription !== "" ? ( - - -
- - - - Error from IDP -
-
{error}
- {errorDescription} - - - } - 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 - - . - - } - backgroundAnimation={false} - /> - - ) : null; -}; - -export default LoginCallback; diff --git a/web-app/src/screens/LoginPage/StrategyForm.tsx b/web-app/src/screens/LoginPage/StrategyForm.tsx index c36813cee8..5b4fb2a26f 100644 --- a/web-app/src/screens/LoginPage/StrategyForm.tsx +++ b/web-app/src/screens/LoginPage/StrategyForm.tsx @@ -14,27 +14,16 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Fragment, useState } from "react"; +import React, { Fragment } from "react"; import { - Box, Button, - DropdownSelector, Grid, InputBox, LockFilledIcon, - LogoutIcon, - PasswordKeyIcon, ProgressBar, - Select, UserFilledIcon, } from "mds"; -import { - setAccessKey, - setDisplayEmbeddedIDPForms, - setSecretKey, - setSTS, - setUseSTS, -} from "./loginSlice"; +import { setAccessKey, setSecretKey } from "./loginSlice"; import { AppState, useAppDispatch } from "../../store"; import { useSelector } from "react-redux"; @@ -44,18 +33,8 @@ import { RedirectRule } from "api/consoleApi"; const StrategyForm = ({ redirectRules }: { redirectRules: RedirectRule[] }) => { const dispatch = useAppDispatch(); - const [ssoOptionsOpen, ssoOptionsSetOpen] = useState(false); - const [anchorEl, setAnchorEl] = React.useState< - (EventTarget & HTMLButtonElement) | null - >(null); - const accessKey = useSelector((state: AppState) => state.login.accessKey); const secretKey = useSelector((state: AppState) => state.login.secretKey); - const sts = useSelector((state: AppState) => state.login.sts); - const useSTS = useSelector((state: AppState) => state.login.useSTS); - const displaySSOForm = useSelector( - (state: AppState) => state.login.ssoEmbeddedIDPDisplay, - ); const loginSending = useSelector( (state: AppState) => state.login.loginSending, @@ -66,210 +45,84 @@ const StrategyForm = ({ redirectRules }: { redirectRules: RedirectRule[] }) => { dispatch(doLoginAsync()); }; - let selectOptions = [ - { - label: useSTS ? "Use Credentials" : "Use STS", - value: useSTS ? "use-sts-cred" : "use-sts", - }, - ]; - let ssoOptions: any[] = []; - - if (redirectRules.length > 0) { - ssoOptions = redirectRules.map((r) => ({ - label: `${r.displayName}${r.serviceType ? ` - ${r.serviceType}` : ""}`, - value: r.redirect, - icon: , - })); - - selectOptions = [ - { label: "Use Credentials", value: "use-sts-cred" }, - { label: "Use STS", value: "use-sts" }, - ]; - } - - const extraActionSelector = (value: string) => { - if (value) { - if (redirectRules.length > 0) { - let stsState = true; - - if (value === "use-sts-cred") { - stsState = false; - } - - dispatch(setUseSTS(stsState)); - dispatch(setDisplayEmbeddedIDPForms(true)); - - return; - } - - if (value.includes("use-sts")) { - dispatch(setUseSTS(!useSTS)); - return; - } - } - }; - - const submitSSOInitRequest = (value: string) => { - window.location.href = value; - }; - return ( - {redirectRules.length > 0 && ( +
- -