diff --git a/ui/litellm-dashboard/src/components/SSOModals.tsx b/ui/litellm-dashboard/src/components/SSOModals.tsx index 9de42f8c01..0779edb89d 100644 --- a/ui/litellm-dashboard/src/components/SSOModals.tsx +++ b/ui/litellm-dashboard/src/components/SSOModals.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { Modal, Form, Input, Button as Button2, Select, message } from "antd"; import { Text, TextInput } from "@tremor/react"; import { getSSOSettings, updateSSOSettings } from "./networking"; @@ -103,6 +103,8 @@ const SSOModals: React.FC = ({ accessToken, ssoConfigured = false, // Default to false if not provided }) => { + const [isClearConfirmModalVisible, setIsClearConfirmModalVisible] = useState(false); + // Load existing SSO settings when modal opens useEffect(() => { const loadSSOSettings = async () => { @@ -175,6 +177,49 @@ const SSOModals: React.FC = ({ } }; + // Handle clearing SSO settings + const handleClearSSO = async () => { + if (!accessToken) { + message.error("No access token available"); + return; + } + + try { + // Clear all SSO settings by sending empty values + const clearSettings = { + google_client_id: '', + google_client_secret: '', + microsoft_client_id: '', + microsoft_client_secret: '', + microsoft_tenant: '', + generic_client_id: '', + generic_client_secret: '', + generic_authorization_endpoint: '', + generic_token_endpoint: '', + generic_userinfo_endpoint: '', + proxy_base_url: '', + user_email: '', + sso_provider: '', + }; + + await updateSSOSettings(accessToken, clearSettings); + + // Clear the form + form.resetFields(); + + // Close the confirmation modal + setIsClearConfirmModalVisible(false); + + // Close the main SSO modal and trigger refresh + handleAddSSOOk(); + + message.success("SSO settings cleared successfully"); + } catch (error) { + console.error("Failed to clear SSO settings:", error); + message.error("Failed to clear SSO settings"); + } + }; + // Helper function to render provider fields const renderProviderFields = (provider: string) => { const config = ssoProviderConfigs[provider]; @@ -256,12 +301,52 @@ const SSOModals: React.FC = ({ -
+
+ {ssoConfigured && ( + setIsClearConfirmModalVisible(true)} + style={{ + backgroundColor: '#6366f1', + borderColor: '#6366f1', + color: 'white' + }} + onMouseEnter={(e) => { + e.currentTarget.style.backgroundColor = '#5558eb'; + e.currentTarget.style.borderColor = '#5558eb'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = '#6366f1'; + e.currentTarget.style.borderColor = '#6366f1'; + }} + > + Clear + + )} Save
+ {/* Clear Confirmation Modal */} + setIsClearConfirmModalVisible(false)} + okText="Yes, Clear" + cancelText="Cancel" + okButtonProps={{ + danger: true, + style: { + backgroundColor: '#dc2626', + borderColor: '#dc2626' + } + }} + > +

Are you sure you want to clear all SSO settings? This action cannot be undone.

+

Users will no longer be able to login using SSO after this change.

+
+