From d4a2f4590bbfa719cdf29678dac8aabf17e46bd1 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Sat, 6 Jul 2024 00:25:27 +0800
Subject: [PATCH 1/2] misc: redesigned org security settings page

---
 .../components/OrgAuthTab/LDAPModal.tsx       | 329 +++++++------
 .../components/OrgAuthTab/OIDCModal.tsx       | 442 ++++++++++--------
 .../components/OrgAuthTab/OrgAuthTab.tsx      | 171 ++++++-
 .../OrgAuthTab/OrgGeneralAuthSection.tsx      |   1 -
 .../components/OrgAuthTab/OrgLDAPSection.tsx  |   5 +-
 .../components/OrgAuthTab/OrgOIDCSection.tsx  |   5 +-
 .../components/OrgAuthTab/OrgSCIMSection.tsx  |   7 +-
 .../components/OrgAuthTab/OrgSSOSection.tsx   |   1 -
 .../components/OrgAuthTab/SSOModal.tsx        | 264 ++++++-----
 9 files changed, 770 insertions(+), 455 deletions(-)

diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx
index e8afe9822f..865be26e92 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx
@@ -4,8 +4,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
+import {
+  Button,
+  DeleteActionModal,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  TextArea
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
 import {
   useCreateLDAPConfig,
   useGetLDAPConfig,
@@ -32,9 +41,10 @@ type Props = {
   popUp: UsePopUpState<["addLDAP"]>;
   handlePopUpClose: (popUpName: keyof UsePopUpState<["addLDAP"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
+  hideDelete?: boolean;
 };
 
-export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelete }: Props) => {
   const { currentOrg } = useOrganization();
 
   const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
@@ -46,6 +56,39 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     resolver: zodResolver(LDAPFormSchema)
   });
 
+  const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle();
+
+  const handleLdapSoftDelete = async () => {
+    if (!currentOrg) {
+      return;
+    }
+    try {
+      await updateMutateAsync({
+        organizationId: currentOrg.id,
+        isActive: false,
+        url: "",
+        bindDN: "",
+        bindPass: "",
+        searchBase: "",
+        searchFilter: "",
+        uniqueUserAttribute: "",
+        groupSearchBase: "",
+        groupSearchFilter: "",
+        caCert: ""
+      });
+
+      createNotification({
+        text: "Successfully deleted OIDC configuration.",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed deleting OIDC configuration.",
+        type: "error"
+      });
+    }
+  };
+
   const watchUrl = watch("url");
   const watchBindDN = watch("bindDN");
   const watchBindPass = watch("bindPass");
@@ -175,138 +218,154 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   };
 
   return (
-    <Modal
-      isOpen={popUp?.addLDAP?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("addLDAP", isOpen);
-        reset();
-      }}
-    >
-      <ModalContent title="Manage LDAP configuration">
-        <form onSubmit={handleSubmit(onSSOModalSubmit)}>
-          <Controller
-            control={control}
-            name="url"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="URL" errorText={error?.message} isError={Boolean(error)}>
-                <Input {...field} placeholder="ldaps://ldap.myorg.com:636" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="bindDN"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Bind DN" errorText={error?.message} isError={Boolean(error)}>
-                <Input {...field} placeholder="cn=infisical,ou=Users,dc=example,dc=com" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="bindPass"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Bind Pass" errorText={error?.message} isError={Boolean(error)}>
-                <Input {...field} type="password" placeholder="********" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="searchBase"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="User Search Base / User DN"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input {...field} placeholder="ou=people,dc=acme,dc=com" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="uniqueUserAttribute"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Unique User Attribute (Optional)"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input {...field} placeholder="uidNumber" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="searchFilter"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="User Search Filter (Optional)"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input {...field} placeholder="(uid={{username}})" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="groupSearchBase"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Group Search Base / Group DN (Optional)"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input {...field} placeholder="ou=groups,dc=acme,dc=com" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="groupSearchFilter"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Group Filter (Optional)"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input
-                  {...field}
-                  placeholder="(&(objectClass=posixGroup)(memberUid={{.Username}}))"
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="caCert"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="CA Certificate"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center">
-            <Button
-              className="mr-4"
-              size="sm"
-              type="submit"
-              isLoading={createIsLoading || updateIsLoading}
-            >
-              {!data ? "Add" : "Update"}
-            </Button>
-            <Button colorSchema="secondary" onClick={handleTestLDAPConnection}>
-              Test Connection
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
+    <>
+      <Modal
+        isOpen={popUp?.addLDAP?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("addLDAP", isOpen);
+          reset();
+        }}
+      >
+        <ModalContent title="Manage LDAP configuration">
+          <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+            <Controller
+              control={control}
+              name="url"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="URL" errorText={error?.message} isError={Boolean(error)}>
+                  <Input {...field} placeholder="ldaps://ldap.myorg.com:636" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="bindDN"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Bind DN" errorText={error?.message} isError={Boolean(error)}>
+                  <Input {...field} placeholder="cn=infisical,ou=Users,dc=example,dc=com" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="bindPass"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Bind Pass" errorText={error?.message} isError={Boolean(error)}>
+                  <Input {...field} type="password" placeholder="********" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="searchBase"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="User Search Base / User DN"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="ou=people,dc=acme,dc=com" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="uniqueUserAttribute"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Unique User Attribute (Optional)"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="uidNumber" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="searchFilter"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="User Search Filter (Optional)"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="(uid={{username}})" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="groupSearchBase"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Group Search Base / Group DN (Optional)"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="ou=groups,dc=acme,dc=com" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="groupSearchFilter"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Group Filter (Optional)"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input
+                    {...field}
+                    placeholder="(&(objectClass=posixGroup)(memberUid={{.Username}}))"
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="caCert"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="CA Certificate"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex justify-between">
+              <div className="flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={createIsLoading || updateIsLoading}
+                >
+                  {!data ? "Add" : "Update"}
+                </Button>
+                <Button colorSchema="secondary" onClick={handleTestLDAPConnection}>
+                  Test Connection
+                </Button>
+              </div>
+              {!hideDelete && (
+                <Button colorSchema="danger" onClick={() => setIsDeletePopupOpen.on()}>
+                  Delete
+                </Button>
+              )}
+            </div>
+          </form>
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={isDeletePopupOpen}
+        title="Are you sure want to delete LDAP?"
+        onChange={() => setIsDeletePopupOpen.toggle()}
+        deleteKey="confirm"
+        onDeleteApproved={handleLdapSoftDelete}
+      />
+    </>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx
index ba3b0b8af4..53aab635d0 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import {
   Button,
+  DeleteActionModal,
   FormControl,
   Input,
   Modal,
@@ -28,6 +29,7 @@ type Props = {
   popUp: UsePopUpState<["addOIDC"]>;
   handlePopUpClose: (popUpName: keyof UsePopUpState<["addOIDC"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addOIDC"]>, state?: boolean) => void;
+  hideDelete?: boolean;
 };
 
 const schema = z
@@ -94,11 +96,13 @@ const schema = z
 
 export type OIDCFormData = z.infer<typeof schema>;
 
-export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelete }: Props) => {
   const { currentOrg } = useOrganization();
 
   const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateOIDCConfig();
   const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateOIDCConfig();
+  const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle(false);
+
   const { data } = useGetOIDCConfig(currentOrg?.slug ?? "");
 
   const { control, handleSubmit, reset, setValue, watch } = useForm<OIDCFormData>({
@@ -112,6 +116,36 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   const [isClientSecretFocused, setIsClientSecretFocused] = useToggle();
 
   const configurationTypeValue = watch("configurationType");
+  const handleOidcSoftDelete = async () => {
+    if (!currentOrg) {
+      return;
+    }
+    try {
+      await updateMutateAsync({
+        issuer: "",
+        discoveryURL: "",
+        authorizationEndpoint: "",
+        allowedEmailDomains: "",
+        jwksUri: "",
+        tokenEndpoint: "",
+        userinfoEndpoint: "",
+        clientId: "",
+        clientSecret: "",
+        isActive: false,
+        orgSlug: currentOrg.slug
+      });
+
+      createNotification({
+        text: "Successfully deleted OIDC configuration.",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed deleting OIDC configuration.",
+        type: "error"
+      });
+    }
+  };
 
   useEffect(() => {
     if (data) {
@@ -193,212 +227,232 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   };
 
   return (
-    <Modal
-      isOpen={popUp?.addOIDC?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("addOIDC", isOpen);
-        reset();
-      }}
-    >
-      <ModalContent title="Manage OIDC configuration">
-        <form onSubmit={handleSubmit(onOIDCModalSubmit)}>
-          <Controller
-            control={control}
-            name="configurationType"
-            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl
-                label="Configuration Type"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Select
-                  className="w-full"
-                  defaultValue="discoveryURL"
-                  {...field}
-                  onValueChange={(e) => onChange(e)}
-                >
-                  <SelectItem value={ConfigurationType.DISCOVERY_URL}>Discovery URL</SelectItem>
-                  <SelectItem value={ConfigurationType.CUSTOM}>Custom</SelectItem>
-                </Select>
-              </FormControl>
-            )}
-          />
-          {configurationTypeValue === ConfigurationType.DISCOVERY_URL && (
+    <>
+      <Modal
+        isOpen={popUp?.addOIDC?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("addOIDC", isOpen);
+          reset();
+        }}
+      >
+        <ModalContent title="Manage OIDC configuration">
+          <form onSubmit={handleSubmit(onOIDCModalSubmit)}>
             <Controller
               control={control}
-              name="discoveryURL"
+              name="configurationType"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Configuration Type"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    className="w-full"
+                    defaultValue="discoveryURL"
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                  >
+                    <SelectItem value={ConfigurationType.DISCOVERY_URL}>Discovery URL</SelectItem>
+                    <SelectItem value={ConfigurationType.CUSTOM}>Custom</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+            {configurationTypeValue === ConfigurationType.DISCOVERY_URL && (
+              <Controller
+                control={control}
+                name="discoveryURL"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Discovery Document URL"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <Input
+                      {...field}
+                      placeholder="https://accounts.google.com/.well-known/openid-configuration"
+                      autoComplete="off"
+                    />
+                  </FormControl>
+                )}
+              />
+            )}
+            {configurationTypeValue === ConfigurationType.CUSTOM && (
+              <>
+                <Controller
+                  control={control}
+                  name="issuer"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl label="Issuer" errorText={error?.message} isError={Boolean(error)}>
+                      <Input
+                        {...field}
+                        placeholder="https://accounts.google.com"
+                        autoComplete="off"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="authorizationEndpoint"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Authorization Endpoint"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input
+                        {...field}
+                        placeholder="https://accounts.google.com/o/oauth2/v2/auth"
+                        autoComplete="off"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="tokenEndpoint"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Token Endpoint"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input
+                        {...field}
+                        placeholder="https://oauth2.googleapis.com/token"
+                        autoComplete="off"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="userinfoEndpoint"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="User info endpoint"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input
+                        {...field}
+                        placeholder="https://openidconnect.googleapis.com/v1/userinfo"
+                        autoComplete="off"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="jwksUri"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="JWKS URI"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input
+                        {...field}
+                        placeholder="https://www.googleapis.com/oauth2/v3/certs"
+                        autoComplete="off"
+                      />
+                    </FormControl>
+                  )}
+                />
+              </>
+            )}
+            <Controller
+              control={control}
+              name="allowedEmailDomains"
               render={({ field, fieldState: { error } }) => (
                 <FormControl
-                  label="Discovery Document URL"
+                  label="Allowed Email Domains (defaults to any)"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="infisical.com, google.com" autoComplete="off" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="clientId"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Client ID" errorText={error?.message} isError={Boolean(error)}>
+                  <Input
+                    placeholder="Client ID"
+                    type={isClientIdFocused ? "text" : "password"}
+                    onFocus={() => setIsClientIdFocused.on()}
+                    {...field}
+                    onBlur={() => {
+                      field.onBlur();
+                      setIsClientIdFocused.off();
+                    }}
+                    autoComplete="off"
+                    className="bg-mineshaft-800"
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="clientSecret"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Client Secret"
                   errorText={error?.message}
                   isError={Boolean(error)}
                 >
                   <Input
                     {...field}
-                    placeholder="https://accounts.google.com/.well-known/openid-configuration"
+                    placeholder="Client Secret"
+                    type={isClientSecretFocused ? "text" : "password"}
                     autoComplete="off"
+                    onFocus={() => setIsClientSecretFocused.on()}
+                    onBlur={() => {
+                      field.onBlur();
+                      setIsClientSecretFocused.off();
+                    }}
+                    className="bg-mineshaft-800"
                   />
                 </FormControl>
               )}
             />
-          )}
-          {configurationTypeValue === ConfigurationType.CUSTOM && (
-            <>
-              <Controller
-                control={control}
-                name="issuer"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl label="Issuer" errorText={error?.message} isError={Boolean(error)}>
-                    <Input
-                      {...field}
-                      placeholder="https://accounts.google.com"
-                      autoComplete="off"
-                    />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="authorizationEndpoint"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Authorization Endpoint"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <Input
-                      {...field}
-                      placeholder="https://accounts.google.com/o/oauth2/v2/auth"
-                      autoComplete="off"
-                    />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="tokenEndpoint"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Token Endpoint"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <Input
-                      {...field}
-                      placeholder="https://oauth2.googleapis.com/token"
-                      autoComplete="off"
-                    />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="userinfoEndpoint"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="User info endpoint"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <Input
-                      {...field}
-                      placeholder="https://openidconnect.googleapis.com/v1/userinfo"
-                      autoComplete="off"
-                    />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="jwksUri"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl label="JWKS URI" errorText={error?.message} isError={Boolean(error)}>
-                    <Input
-                      {...field}
-                      placeholder="https://www.googleapis.com/oauth2/v3/certs"
-                      autoComplete="off"
-                    />
-                  </FormControl>
-                )}
-              />
-            </>
-          )}
-          <Controller
-            control={control}
-            name="allowedEmailDomains"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Allowed Email Domains (defaults to any)"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input {...field} placeholder="infisical.com, google.com" autoComplete="off" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="clientId"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl label="Client ID" errorText={error?.message} isError={Boolean(error)}>
-                <Input
-                  placeholder="Client ID"
-                  type={isClientIdFocused ? "text" : "password"}
-                  onFocus={() => setIsClientIdFocused.on()}
-                  {...field}
-                  onBlur={() => {
-                    field.onBlur();
-                    setIsClientIdFocused.off();
-                  }}
-                  autoComplete="off"
-                  className="bg-mineshaft-800"
-                />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="clientSecret"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Client Secret"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <Input
-                  {...field}
-                  placeholder="Client Secret"
-                  type={isClientSecretFocused ? "text" : "password"}
-                  autoComplete="off"
-                  onFocus={() => setIsClientSecretFocused.on()}
-                  onBlur={() => {
-                    field.onBlur();
-                    setIsClientSecretFocused.off();
-                  }}
-                  className="bg-mineshaft-800"
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-8 flex items-center">
-            <Button
-              className="mr-4"
-              size="sm"
-              type="submit"
-              isLoading={createIsLoading || updateIsLoading}
-            >
-              {!data ? "Add" : "Update"}
-            </Button>
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpClose("addOIDC")}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
+            <div className="mt-8 flex justify-between">
+              <div className="flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={createIsLoading || updateIsLoading}
+                >
+                  {!data ? "Add" : "Update"}
+                </Button>
+                <Button
+                  colorSchema="secondary"
+                  variant="plain"
+                  onClick={() => handlePopUpClose("addOIDC")}
+                >
+                  Cancel
+                </Button>
+              </div>
+              {!hideDelete && (
+                <Button colorSchema="danger" onClick={() => setIsDeletePopupOpen.on()}>
+                  Delete
+                </Button>
+              )}
+            </div>
+          </form>
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={isDeletePopupOpen}
+        title="Are you sure want to delete OIDC?"
+        onChange={() => setIsDeletePopupOpen.toggle()}
+        deleteKey="confirm"
+        onDeleteApproved={handleOidcSoftDelete}
+      />
+    </>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
index d344b8a28e..d2c61e5550 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
@@ -1,34 +1,189 @@
-import { OrgPermissionActions, OrgPermissionSubjects, useServerConfig } from "@app/context";
+import { twMerge } from "tailwind-merge";
+
+import { Button, ContentLoader, UpgradePlanModal } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useServerConfig,
+  useSubscription
+} from "@app/context";
 import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import { useGetLDAPConfig, useGetOIDCConfig, useGetSSOConfig } from "@app/hooks/api";
 import { LoginMethod } from "@app/hooks/api/admin/types";
 
+import { LDAPModal } from "./LDAPModal";
+import { OIDCModal } from "./OIDCModal";
 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
 import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgOIDCSection } from "./OrgOIDCSection";
 import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";
+import { SSOModal } from "./SSOModal";
 
 export const OrgAuthTab = withPermission(
   () => {
     const {
       config: { enabledLoginMethods }
     } = useServerConfig();
+    const { currentOrg } = useOrganization();
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "addLDAP",
+      "addSSO",
+      "addOIDC",
+      "upgradePlan"
+    ] as const);
+
+    const { subscription } = useSubscription();
+
+    const { data: oidcConfig, isLoading: isLoadingOidcConfig } = useGetOIDCConfig(
+      currentOrg?.slug ?? ""
+    );
+    const { data: samlConfig, isLoading: isLoadingSamlConfig } = useGetSSOConfig(
+      currentOrg?.id ?? ""
+    );
+    const { data: ldapConfig, isLoading: isLdapConfig } = useGetLDAPConfig(currentOrg?.id ?? "");
+    const areConfigsLoading = isLoadingOidcConfig || isLoadingSamlConfig || isLdapConfig;
 
     const shouldDisplaySection = (method: LoginMethod) =>
       !enabledLoginMethods || enabledLoginMethods.includes(method);
 
+    const isOidcConfigured = oidcConfig && (oidcConfig.discoveryURL || oidcConfig.issuer);
+    const isSamlConfigured = samlConfig && samlConfig.entryPoint;
+    const isLdapConfigured = ldapConfig && ldapConfig.url;
+
+    const shouldShowCreateIdentityProviderView =
+      !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
+
+    const createIdentityProviderView = (shouldDisplaySection(LoginMethod.SAML) ||
+      shouldDisplaySection(LoginMethod.OIDC) ||
+      shouldDisplaySection(LoginMethod.LDAP)) && (
+      <>
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+          <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
+          <p className="mb-2 mt-1 text-gray-400">
+            Connect your identity provider to simplify user management
+          </p>
+          {shouldDisplaySection(LoginMethod.SAML) && (
+            <div
+              className={twMerge(
+                "mt-4 flex items-center justify-between",
+                (shouldDisplaySection(LoginMethod.OIDC) ||
+                  shouldDisplaySection(LoginMethod.LDAP)) &&
+                  "border-b border-mineshaft-500 pb-4"
+              )}
+            >
+              <p className="text-lg text-gray-200">SAML</p>
+              <Button
+                colorSchema="secondary"
+                onClick={() => {
+                  if (!subscription?.samlSSO) {
+                    handlePopUpOpen("upgradePlan", { feature: "SAML SSO", plan: "Pro" });
+                    return;
+                  }
+
+                  handlePopUpOpen("addSSO");
+                }}
+              >
+                Connect
+              </Button>
+            </div>
+          )}
+          {shouldDisplaySection(LoginMethod.OIDC) && (
+            <div
+              className={twMerge(
+                "mt-4 flex items-center justify-between",
+                shouldDisplaySection(LoginMethod.LDAP) && "border-b border-mineshaft-500 pb-4"
+              )}
+            >
+              <p className="text-lg text-gray-200">OIDC</p>
+              <Button
+                colorSchema="secondary"
+                onClick={() => {
+                  if (!subscription?.oidcSSO) {
+                    handlePopUpOpen("upgradePlan", { feature: "OIDC SSO", plan: "Pro" });
+                    return;
+                  }
+
+                  handlePopUpOpen("addOIDC");
+                }}
+              >
+                Connect
+              </Button>
+            </div>
+          )}
+          {shouldDisplaySection(LoginMethod.LDAP) && (
+            <div className="mt-4 flex items-center justify-between">
+              <p className="text-lg text-gray-200">LDAP</p>
+              <Button
+                colorSchema="secondary"
+                onClick={() => {
+                  if (!subscription?.ldap) {
+                    handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
+                    return;
+                  }
+
+                  handlePopUpOpen("addLDAP");
+                }}
+              >
+                Connect
+              </Button>
+            </div>
+          )}
+        </div>
+        <SSOModal
+          hideDelete
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <OIDCModal
+          hideDelete
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <LDAPModal
+          hideDelete
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      </>
+    );
+
+    if (areConfigsLoading) {
+      return <ContentLoader />;
+    }
+
     return (
-      <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-        {shouldDisplaySection(LoginMethod.SAML) && (
+      <>
+        {shouldShowCreateIdentityProviderView ? (
+          createIdentityProviderView
+        ) : (
           <>
-            <OrgGeneralAuthSection />
-            <OrgSSOSection />
+            {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && (
+              <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+                <OrgGeneralAuthSection />
+                <OrgSSOSection />
+              </div>
+            )}
+            {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
+            {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
           </>
         )}
-        {shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
-        {shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
         <OrgScimSection />
-      </div>
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={`You can use ${
+            (popUp.upgradePlan.data as { feature: string })?.feature
+          } if you switch to Infisical's ${
+            (popUp.upgradePlan.data as { plan: string })?.plan
+          } plan.`}
+        />
+      </>
     );
   },
   { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Sso }
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
index 6e4eca456b..778215f07b 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
@@ -87,7 +87,6 @@ export const OrgGeneralAuthSection = () => {
           Enforce members to authenticate via SAML to access this organization
         </p>
       </div>
-      <hr className="border-mineshaft-600" />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
index 74d35d199c..49e07f8617 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
@@ -94,7 +94,7 @@ export const OrgLDAPSection = (): JSX.Element => {
   };
 
   return (
-    <>
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">LDAP</h2>
@@ -151,7 +151,6 @@ export const OrgLDAPSection = (): JSX.Element => {
           </p>
         </div>
       )}
-      <hr className="border-mineshaft-600" />
       <LDAPModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
@@ -167,6 +166,6 @@ export const OrgLDAPSection = (): JSX.Element => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
       />
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
index 97c3063f0d..6ec56f7b31 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
@@ -60,7 +60,7 @@ export const OrgOIDCSection = (): JSX.Element => {
   };
 
   return (
-    <>
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">OIDC</h2>
@@ -102,7 +102,6 @@ export const OrgOIDCSection = (): JSX.Element => {
           </p>
         </div>
       )}
-      <hr className="border-mineshaft-600" />
       <OIDCModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
@@ -113,6 +112,6 @@ export const OrgOIDCSection = (): JSX.Element => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use OIDC SSO if you switch to Infisical's Pro plan."
       />
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
index ffec3f3558..ba216ff3ad 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx
@@ -57,7 +57,8 @@ export const OrgScimSection = () => {
   };
 
   return (
-    <>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <p className="text-xl font-semibold text-gray-200">Provision users via SCIM</p>
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">SCIM</h2>
@@ -68,7 +69,7 @@ export const OrgScimSection = () => {
                 colorSchema="secondary"
                 isDisabled={!isAllowed}
               >
-                Manage
+                Configure
               </Button>
             )}
           </OrgPermissionCan>
@@ -109,6 +110,6 @@ export const OrgScimSection = () => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
       />
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
index bcb4f88378..3e5d778422 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
@@ -115,7 +115,6 @@ export const OrgSSOSection = (): JSX.Element => {
           Allow members to authenticate into Infisical with SAML
         </p>
       </div>
-      <hr className="border-mineshaft-600" />
       <SSOModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx
index 23f5fab88d..5822052145 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import {
   Button,
+  DeleteActionModal,
   FormControl,
   Input,
   Modal,
@@ -15,6 +16,7 @@ import {
   TextArea
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -49,13 +51,15 @@ type Props = {
   popUp: UsePopUpState<["addSSO"]>;
   handlePopUpClose: (popUpName: keyof UsePopUpState<["addSSO"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addSSO"]>, state?: boolean) => void;
+  hideDelete?: boolean;
 };
 
-export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelete }: Props) => {
   const { currentOrg } = useOrganization();
-  
+
   const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateSSOConfig();
   const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateSSOConfig();
+  const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle();
   const { data } = useGetSSOConfig(currentOrg?.id ?? "");
 
   const { control, handleSubmit, reset, watch } = useForm<AddSSOFormData>({
@@ -76,6 +80,31 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     }
   }, [data]);
 
+  const handleSamlSoftDelete = async () => {
+    if (!currentOrg) {
+      return;
+    }
+    try {
+      await updateMutateAsync({
+        organizationId: currentOrg.id,
+        isActive: false,
+        entryPoint: "",
+        issuer: "",
+        cert: ""
+      });
+
+      createNotification({
+        text: "Successfully deleted SAML SSO configuration.",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed deleting SAML SSO configuration.",
+        type: "error"
+      });
+    }
+  };
+
   const onSSOModalSubmit = async ({ authProvider, entryPoint, issuer, cert }: AddSSOFormData) => {
     try {
       if (!currentOrg) return;
@@ -177,112 +206,133 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   const authProvider = watch("authProvider");
 
   return (
-    <Modal
-      isOpen={popUp?.addSSO?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("addSSO", isOpen);
-        reset();
-      }}
-    >
-      <ModalContent title="Manage SAML configuration">
-        <form onSubmit={handleSubmit(onSSOModalSubmit)}>
-          <Controller
-            control={control}
-            name="authProvider"
-            defaultValue="okta-saml"
-            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-              <FormControl label="Type" errorText={error?.message} isError={Boolean(error)}>
-                <Select
-                  defaultValue={field.value}
-                  {...field}
-                  onValueChange={(e) => onChange(e)}
-                  className="w-full"
-                >
-                  {ssoAuthProviders.map(({ label, value }) => (
-                    <SelectItem value={String(value || "")} key={label}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
+    <>
+      <Modal
+        isOpen={popUp?.addSSO?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("addSSO", isOpen);
+          reset();
+        }}
+      >
+        <ModalContent title="Manage SAML configuration">
+          <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+            <Controller
+              control={control}
+              name="authProvider"
+              defaultValue="okta-saml"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Type" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {ssoAuthProviders.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={label}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            {authProvider && data && (
+              <>
+                <div className="mb-4">
+                  <h3 className="text-sm text-mineshaft-400">
+                    {renderLabels(authProvider).acsUrl}
+                  </h3>
+                  <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data.id}`}</p>
+                </div>
+                <div className="mb-4">
+                  <h3 className="text-sm text-mineshaft-400">
+                    {renderLabels(authProvider).entityId}
+                  </h3>
+                  <p className="text-md text-gray-400">{window.origin}</p>
+                </div>
+                <Controller
+                  control={control}
+                  name="entryPoint"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={renderLabels(authProvider).entryPoint}
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input
+                        {...field}
+                        placeholder={renderLabels(authProvider).entryPointPlaceholder}
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="issuer"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={renderLabels(authProvider).issuer}
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input
+                        {...field}
+                        placeholder={renderLabels(authProvider).issuerPlaceholder}
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="cert"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Certificate"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+                    </FormControl>
+                  )}
+                />
+              </>
             )}
-          />
-          {authProvider && data && (
-            <>
-              <div className="mb-4">
-                <h3 className="text-sm text-mineshaft-400">{renderLabels(authProvider).acsUrl}</h3>
-                <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data.id}`}</p>
-              </div>
-              <div className="mb-4">
-                <h3 className="text-sm text-mineshaft-400">
-                  {renderLabels(authProvider).entityId}
-                </h3>
-                <p className="text-md text-gray-400">{window.origin}</p>
-              </div>
-              <Controller
-                control={control}
-                name="entryPoint"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label={renderLabels(authProvider).entryPoint}
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <Input
-                      {...field}
-                      placeholder={renderLabels(authProvider).entryPointPlaceholder}
-                    />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="issuer"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label={renderLabels(authProvider).issuer}
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <Input {...field} placeholder={renderLabels(authProvider).issuerPlaceholder} />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="cert"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    label="Certificate"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-                  </FormControl>
-                )}
-              />
-            </>
-          )}
 
-          <div className="mt-8 flex items-center">
-            <Button
-              className="mr-4"
-              size="sm"
-              type="submit"
-              isLoading={createIsLoading || updateIsLoading}
-            >
-              {!data ? "Add" : "Update"}
-            </Button>
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpClose("addSSO")}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
+            <div className="mt-8 flex justify-between">
+              <div className="flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={createIsLoading || updateIsLoading}
+                >
+                  {!data ? "Add" : "Update"}
+                </Button>
+                <Button
+                  colorSchema="secondary"
+                  variant="plain"
+                  onClick={() => handlePopUpClose("addSSO")}
+                >
+                  Cancel
+                </Button>
+              </div>
+              {!hideDelete && (
+                <Button colorSchema="danger" onClick={() => setIsDeletePopupOpen.on()}>
+                  Delete
+                </Button>
+              )}
+            </div>
+          </form>
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={isDeletePopupOpen}
+        title="Are you sure want to delete SAML SSO?"
+        onChange={() => setIsDeletePopupOpen.toggle()}
+        deleteKey="confirm"
+        onDeleteApproved={handleSamlSoftDelete}
+      />
+    </>
   );
 };

From a37987b508b521024ed743a5a9619f47e8f4ca18 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Mon, 8 Jul 2024 21:31:11 +0800
Subject: [PATCH 2/2] misc: added proper error handling

---
 frontend/src/hooks/api/ldapConfig/queries.tsx        | 10 ++++++++--
 frontend/src/hooks/api/oidcConfig/queries.tsx        | 12 ++++++++----
 frontend/src/hooks/api/ssoConfig/queries.tsx         | 10 ++++++++--
 .../components/OrgAuthTab/OrgAuthTab.tsx             |  6 ++++--
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/hooks/api/ldapConfig/queries.tsx b/frontend/src/hooks/api/ldapConfig/queries.tsx
index c84f90aacf..e92a7a1c76 100644
--- a/frontend/src/hooks/api/ldapConfig/queries.tsx
+++ b/frontend/src/hooks/api/ldapConfig/queries.tsx
@@ -13,9 +13,15 @@ export const useGetLDAPConfig = (organizationId: string) => {
   return useQuery({
     queryKey: ldapConfigKeys.getLDAPConfig(organizationId),
     queryFn: async () => {
-      const { data } = await apiRequest.get(`/api/v1/ldap/config?organizationId=${organizationId}`);
+      try {
+        const { data } = await apiRequest.get(
+          `/api/v1/ldap/config?organizationId=${organizationId}`
+        );
 
-      return data;
+        return data;
+      } catch (err) {
+        return null;
+      }
     },
     enabled: true
   });
diff --git a/frontend/src/hooks/api/oidcConfig/queries.tsx b/frontend/src/hooks/api/oidcConfig/queries.tsx
index 08b38cbb88..49db7c5d46 100644
--- a/frontend/src/hooks/api/oidcConfig/queries.tsx
+++ b/frontend/src/hooks/api/oidcConfig/queries.tsx
@@ -12,11 +12,15 @@ export const useGetOIDCConfig = (orgSlug: string) => {
   return useQuery({
     queryKey: oidcConfigKeys.getOIDCConfig(orgSlug),
     queryFn: async () => {
-      const { data } = await apiRequest.get<OIDCConfigData>(
-        `/api/v1/sso/oidc/config?orgSlug=${orgSlug}`
-      );
+      try {
+        const { data } = await apiRequest.get<OIDCConfigData>(
+          `/api/v1/sso/oidc/config?orgSlug=${orgSlug}`
+        );
 
-      return data;
+        return data;
+      } catch (err) {
+        return null;
+      }
     },
     enabled: true
   });
diff --git a/frontend/src/hooks/api/ssoConfig/queries.tsx b/frontend/src/hooks/api/ssoConfig/queries.tsx
index 3074c5edaa..cbb8e0abe1 100644
--- a/frontend/src/hooks/api/ssoConfig/queries.tsx
+++ b/frontend/src/hooks/api/ssoConfig/queries.tsx
@@ -11,9 +11,15 @@ export const useGetSSOConfig = (organizationId: string) => {
   return useQuery({
     queryKey: ssoConfigKeys.getSSOConfig(organizationId),
     queryFn: async () => {
-      const { data } = await apiRequest.get(`/api/v1/sso/config?organizationId=${organizationId}`);
+      try {
+        const { data } = await apiRequest.get(
+          `/api/v1/sso/config?organizationId=${organizationId}`
+        );
 
-      return data;
+        return data;
+      } catch (err) {
+        return null;
+      }
     },
     enabled: true
   });
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
index d2c61e5550..f4c4c0c5d8 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
@@ -43,8 +43,10 @@ export const OrgAuthTab = withPermission(
     const { data: samlConfig, isLoading: isLoadingSamlConfig } = useGetSSOConfig(
       currentOrg?.id ?? ""
     );
-    const { data: ldapConfig, isLoading: isLdapConfig } = useGetLDAPConfig(currentOrg?.id ?? "");
-    const areConfigsLoading = isLoadingOidcConfig || isLoadingSamlConfig || isLdapConfig;
+    const { data: ldapConfig, isLoading: isLoadingLdapConfig } = useGetLDAPConfig(
+      currentOrg?.id ?? ""
+    );
+    const areConfigsLoading = isLoadingOidcConfig || isLoadingSamlConfig || isLoadingLdapConfig;
 
     const shouldDisplaySection = (method: LoginMethod) =>
       !enabledLoginMethods || enabledLoginMethods.includes(method);