phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

ui - setup sso on admin ui

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-10 12:07:21 -07:00
parent 09ef6f827c
commit cfb250903d
1 changed files with 101 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

147
ui/litellm-dashboard/src/components/admins.tsx
View file

@ -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>
);
};