From e1ed37c7135caf3e916bcbd9d56e182bdb44ab4d Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 27 Jun 2024 01:07:28 +0800
Subject: [PATCH] misc: adjusted OrgSettingsPage and PersonalSettingsPage to
 include toggle

---
 .../components/OrgAuthTab/OrgAuthTab.tsx      | 26 +++++++++++++++----
 .../OrgAuthTab/OrgGeneralAuthSection.tsx      |  2 +-
 .../components/OrgAuthTab/OrgLDAPSection.tsx  |  2 +-
 .../components/OrgAuthTab/OrgOIDCSection.tsx  |  2 +-
 .../components/OrgAuthTab/OrgSSOSection.tsx   |  3 ++-
 .../AuthMethodSection/AuthMethodSection.tsx   | 23 +++++++++++-----
 6 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
index 31d6987bd8..b1a079922f 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
@@ -1,5 +1,8 @@
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useCallback } from "react";
+
+import { OrgPermissionActions, OrgPermissionSubjects, useServerConfig } from "@app/context";
 import { withPermission } from "@app/hoc";
+import { LoginMethod } from "@app/hooks/api/admin/types";
 
 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
 import { OrgLDAPSection } from "./OrgLDAPSection";
@@ -9,12 +12,25 @@ import { OrgSSOSection } from "./OrgSSOSection";
 
 export const OrgAuthTab = withPermission(
   () => {
+    const {
+      config: { enabledLoginMethods }
+    } = useServerConfig();
+
+    const shouldDisplaySection = useCallback(
+      (method: LoginMethod) => !enabledLoginMethods || enabledLoginMethods.includes(method),
+      [enabledLoginMethods]
+    );
+
     return (
       <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
-        <OrgGeneralAuthSection />
-        <OrgSSOSection />
-        <OrgOIDCSection />
-        <OrgLDAPSection />
+        {shouldDisplaySection(LoginMethod.SAML) && (
+          <>
+            <OrgGeneralAuthSection />
+            <OrgSSOSection />
+          </>
+        )}
+        {shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
+        {shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
         <OrgScimSection />
       </div>
     );
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
index 7c3af9493f..6e4eca456b 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
@@ -11,7 +11,6 @@ import { useLogoutUser, useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const OrgGeneralAuthSection = () => {
-  
   const { currentOrg } = useOrganization();
   const { subscription } = useSubscription();
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
@@ -88,6 +87,7 @@ 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 87d0f28aff..0d34fcefc0 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx
@@ -94,7 +94,6 @@ export const OrgLDAPSection = (): JSX.Element => {
 
   return (
     <>
-      <hr className="border-mineshaft-600" />
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">LDAP</h2>
@@ -151,6 +150,7 @@ export const OrgLDAPSection = (): JSX.Element => {
           </p>
         </div>
       )}
+      <hr className="border-mineshaft-600" />
       <LDAPModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
index ee09e3fe96..97c3063f0d 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
@@ -61,7 +61,6 @@ export const OrgOIDCSection = (): JSX.Element => {
 
   return (
     <>
-      <hr className="border-mineshaft-600" />
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">OIDC</h2>
@@ -103,6 +102,7 @@ export const OrgOIDCSection = (): JSX.Element => {
           </p>
         </div>
       )}
+      <hr className="border-mineshaft-600" />
       <OIDCModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
index 67daf0fca0..bcb4f88378 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
@@ -15,7 +15,7 @@ import { SSOModal } from "./SSOModal";
 export const OrgSSOSection = (): JSX.Element => {
   const { currentOrg } = useOrganization();
   const { subscription } = useSubscription();
-  
+
   const { data, isLoading } = useGetSSOConfig(currentOrg?.id ?? "");
   const { mutateAsync } = useUpdateSSOConfig();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -115,6 +115,7 @@ 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/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx
index 423d073429..5ed8e301c5 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx
@@ -8,23 +8,24 @@ import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
 import { Switch } from "@app/components/v2";
-import { useUser } from "@app/context";
+import { useServerConfig, useUser } from "@app/context";
 import { useUpdateUserAuthMethods } from "@app/hooks/api";
+import { LoginMethod } from "@app/hooks/api/admin/types";
 import { AuthMethod } from "@app/hooks/api/users/types";
 
 interface AuthMethodOption {
   label: string;
   value: AuthMethod;
   icon: IconDefinition;
+  loginMethod: LoginMethod;
 }
 
 const authMethodOpts: AuthMethodOption[] = [
-  { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope },
-  { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle },
-  { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub },
-  { label: "GitLab", value: AuthMethod.GITLAB, icon: faGitlab }
+  { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope, loginMethod: LoginMethod.EMAIL },
+  { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle, loginMethod: LoginMethod.GOOGLE },
+  { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub, loginMethod: LoginMethod.GITHUB },
+  { label: "GitLab", value: AuthMethod.GITLAB, icon: faGitlab, loginMethod: LoginMethod.GITLAB }
 ];
-
 const schema = yup.object({
   authMethods: yup.array().required("Auth method is required")
 });
@@ -32,8 +33,8 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;
 
 export const AuthMethodSection = () => {
-  
   const { user } = useUser();
+  const { config } = useServerConfig();
   const { mutateAsync } = useUpdateUserAuthMethods();
 
   const { reset, setValue, watch } = useForm<FormData>({
@@ -102,6 +103,14 @@ export const AuthMethodSection = () => {
       <div className="mb-4">
         {user &&
           authMethodOpts.map((authMethodOpt) => {
+            // only filter when enabledLoginMethods is explicitly configured by admin
+            if (
+              config.enabledLoginMethods &&
+              !config.enabledLoginMethods.includes(authMethodOpt.loginMethod)
+            ) {
+              return null;
+            }
+
             return (
               <div className="flex items-center p-4" key={`auth-method-${authMethodOpt.value}`}>
                 <div className="flex items-center">