From cfb250903dac0dfa49c5851d301339ef2a59e3ac Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 10 Apr 2024 12:07:21 -0700
Subject: [PATCH] ui - setup sso on admin ui

---
 .../src/components/admins.tsx                 | 147 ++++++++++++------
 1 file changed, 101 insertions(+), 46 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 90319d232b1..926df9b87cb 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/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"]
 
@@ -392,55 +419,83 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
         </Col>
       </Grid>
       <Grid>
-      <Title level={4}>Add SSO </Title>
-      <Card>
-      <Form
-    form={form}
-    onFinish={handleSSOUpdate}
-    labelCol={{ span: 8 }}
-    wrapperCol={{ span: 16 }}
-    labelAlign="left"
-  >
-    <>
-    <Form.Item
-        label="PROXY_BASE_URL"
-        name="proxy_base_url"
-        rules={[
-          { required: true, message: "Please enter the public key" },
-        ]}
-      >
-      <Input />
-      </Form.Item>
-      
+  <Title level={4}>Add SSO</Title>
+  <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.Item
-        label="GOOGLE_CLIENT_ID"
-        name="google_client_id"
-        rules={[
-          { required: true, message: "Please enter the public key" },
-        ]}
-      >
-      <Input.Password />
-      </Form.Item>
+        <Form
+          form={form}
+          onFinish={handleShowInstructions}
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          labelAlign="left"
+        >
+          <>
+            <Form.Item
+              label="PROXY BASE URL"
+              name="proxy_base_url"
+              rules={[{ required: true, message: "Please enter the public key" }]}
+            >
+              <Input />
+            </Form.Item>
 
-      <Form.Item
-        label="GOOGLE_CLIENT_SECRET"
-        name="google_client_secret"
-        rules={[
-          { required: true, message: "Please enter the private key" },
-        ]}
-      >
-        <Input.Password />
-        </Form.Item>
-    </>
-    <div style={{ textAlign: "right", marginTop: "10px" }}>
-      <Button2 htmlType="submit">Save</Button2>
+            <Form.Item
+              label="GOOGLE CLIENT ID"
+              name="google_client_id"
+              rules={[{ required: true, message: "Please enter the public key" }]}
+            >
+              <Input.Password />
+            </Form.Item>
+
+            <Form.Item
+              label="GOOGLE CLIENT SECRET"
+              name="google_client_secret"
+              rules={[{ required: true, message: "Please enter the private key" }]}
+            >
+              <Input.Password />
+            </Form.Item>
+          </>
+          <div style={{ textAlign: "right", marginTop: "10px" }}>
+            <Button2 htmlType="submit">Save</Button2>
+          </div>
+        </Form>
+
+    </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>
-  </Form>
-
-      </Card>
-
-      </Grid>
+    </Modal>
+  </div>
+</Grid>
     </div>
   );
 };