ui - setup sso on admin ui

This commit is contained in:
Ishaan Jaff 2024-04-10 12:07:21 -07:00
parent 09ef6f827c
commit cfb250903d

View file

@ -57,6 +57,33 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false); const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
const [isAddAdminModalVisible, setIsAddAdminModalVisible] = useState(false); const [isAddAdminModalVisible, setIsAddAdminModalVisible] = useState(false);
const [isUpdateMemberModalVisible, setIsUpdateModalModalVisible] = 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"] const roles = ["proxy_admin", "proxy_admin_viewer"]
@ -392,55 +419,83 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
</Col> </Col>
</Grid> </Grid>
<Grid> <Grid>
<Title level={4}>Add SSO </Title> <Title level={4}>Add SSO</Title>
<Card> <div className="flex justify-start mb-4">
<Form <Button onClick={() => setIsAddSSOModalVisible(true)}>Add SSO</Button>
form={form} <Modal
onFinish={handleSSOUpdate} title="Add SSO"
labelCol={{ span: 8 }} visible={isAddSSOModalVisible}
wrapperCol={{ span: 16 }} width={800}
labelAlign="left" footer={null}
> onOk={handleAddSSOOk}
<> onCancel={handleAddSSOCancel}
<Form.Item >
label="PROXY_BASE_URL"
name="proxy_base_url"
rules={[
{ required: true, message: "Please enter the public key" },
]}
>
<Input />
</Form.Item>
<Form.Item <Form
label="GOOGLE_CLIENT_ID" form={form}
name="google_client_id" onFinish={handleShowInstructions}
rules={[ labelCol={{ span: 8 }}
{ required: true, message: "Please enter the public key" }, wrapperCol={{ span: 16 }}
]} labelAlign="left"
> >
<Input.Password /> <>
</Form.Item> <Form.Item
label="PROXY BASE URL"
name="proxy_base_url"
rules={[{ required: true, message: "Please enter the public key" }]}
>
<Input />
</Form.Item>
<Form.Item <Form.Item
label="GOOGLE_CLIENT_SECRET" label="GOOGLE CLIENT ID"
name="google_client_secret" name="google_client_id"
rules={[ rules={[{ required: true, message: "Please enter the public key" }]}
{ required: true, message: "Please enter the private key" }, >
]} <Input.Password />
> </Form.Item>
<Input.Password />
</Form.Item> <Form.Item
</> label="GOOGLE CLIENT SECRET"
<div style={{ textAlign: "right", marginTop: "10px" }}> name="google_client_secret"
<Button2 htmlType="submit">Save</Button2> 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> </div>
</Form> </Modal>
</div>
</Card> </Grid>
</Grid>
</div> </div>
); );
}; };