misc: adjusted OrgSettingsPage and PersonalSettingsPage to include to…

…ggle
Infisical · Jun 26, 2024 · e1ed37c · e1ed37c
1 parent 98a15a9
commit e1ed37c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -8,32 +8,33 @@ 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")
 });
 
 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">