ui - setup sso on admin ui

ui/litellm-dashboard/src/components/admins.tsx

@@ -57,6 +57,33 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
   const [isAddAdminModalVisible, setIsAddAdminModalVisible] = useState(false);
   const [isUpdateMemberModalVisible, setIsUpdateModalModalVisible] = useState(false);
+  const [isAddSSOModalVisible, setIsAddSSOModalVisible] = useState(false);
+  const [isInstructionsModalVisible, setIsInstructionsModalVisible] = useState(false);
+
+const handleAddSSOOk = () => {
+  setIsAddSSOModalVisible(false);
+  form.resetFields();
+};
+
+const handleAddSSOCancel = () => {
+  setIsAddSSOModalVisible(false);
+  form.resetFields();
+};
+
+const handleShowInstructions = (formValues: Record<string, any>) => {
+  setIsAddSSOModalVisible(false);
+  setIsInstructionsModalVisible(true);
+  // Optionally, you can call handleSSOUpdate here with the formValues
+  // handleSSOUpdate(formValues);
+};
+
+const handleInstructionsOk = () => {
+  setIsInstructionsModalVisible(false);
+};
+
+const handleInstructionsCancel = () => {
+  setIsInstructionsModalVisible(false);
+};
 
   const roles = ["proxy_admin", "proxy_admin_viewer"]
 
@@ -393,42 +420,45 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
       </Grid>
       <Grid>
   <Title level={4}>Add SSO</Title>
-      <Card>
+  <div className="flex justify-start mb-4">
+    <Button onClick={() => setIsAddSSOModalVisible(true)}>Add SSO</Button>
+    <Modal
+      title="Add SSO"
+      visible={isAddSSOModalVisible}
+      width={800}
+      footer={null}
+      onOk={handleAddSSOOk}
+      onCancel={handleAddSSOCancel}
+    >
+
         <Form
           form={form}
-    onFinish={handleSSOUpdate}
+          onFinish={handleShowInstructions}
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           labelAlign="left"
         >
           <>
             <Form.Item
-        label="PROXY_BASE_URL"
+              label="PROXY BASE URL"
               name="proxy_base_url"
-        rules={[
+              rules={[{ required: true, message: "Please enter the public key" }]}
-          { required: true, message: "Please enter the public key" },
-        ]}
             >
               <Input />
             </Form.Item>
 
-
             <Form.Item
-        label="GOOGLE_CLIENT_ID"
+              label="GOOGLE CLIENT ID"
               name="google_client_id"
-        rules={[
+              rules={[{ required: true, message: "Please enter the public key" }]}
-          { required: true, message: "Please enter the public key" },
-        ]}
             >
               <Input.Password />
             </Form.Item>
 
             <Form.Item
-        label="GOOGLE_CLIENT_SECRET"
+              label="GOOGLE CLIENT SECRET"
               name="google_client_secret"
-        rules={[
+              rules={[{ required: true, message: "Please enter the private key" }]}
-          { required: true, message: "Please enter the private key" },
-        ]}
             >
               <Input.Password />
             </Form.Item>
@@ -438,8 +468,33 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
           </div>
         </Form>
 
-      </Card>
+    </Modal>
-
+    <Modal
+      title="SSO Setup Instructions"
+      visible={isInstructionsModalVisible}
+      width={800}
+      footer={null}
+      onOk={handleInstructionsOk}
+      onCancel={handleInstructionsCancel}
+    >
+      <p>Follow these steps to complete the SSO setup:</p>
+      <Text className="mt-2">
+        1. DO NOT Exit this TAB
+      </Text>
+      <Text className="mt-2">
+        2. Open a new tab, visit your proxy base url
+      </Text>
+      <Text className="mt-2">
+        3. Confirm your SSO is configured correctly and you can login on the new Tab
+      </Text>
+      <Text className="mt-2">
+        4. If Step 3 is successful, you can close this tab
+      </Text>
+      <div style={{ textAlign: "right", marginTop: "10px" }}>
+        <Button2 onClick={handleInstructionsOk}>Done</Button2>
+    </div>
+    </Modal>
+  </div>
 </Grid>
     </div>
   );