Merge pull request #1762 from Infisical/groups-phase-2c

Groups Phase 2B (Trust external SAML/LDAP email option, email verification, SCIM user ID ref update)

frontend/src/const.ts

@@ -6,6 +6,7 @@ export const publicPaths = [
   "/signup",
   "/signup/sso",
   "/login",
+  "/login/ldap",
   "/blog",
   "/docs",
   "/changelog",

frontend/src/hooks/api/admin/types.ts

@@ -3,6 +3,8 @@ export type TServerConfig = {
   allowSignUp: boolean;
   allowedSignUpDomain?: string | null;
   isMigrationModeOn?: boolean;
+  trustSamlEmails: boolean;
+  trustLdapEmails: boolean;
 };
 
 export type TCreateAdminUserDTO = {

frontend/src/hooks/api/auth/index.tsx

@@ -5,7 +5,6 @@ export {
   useSendMfaToken,
   useSendPasswordResetEmail,
   useSendVerificationEmail,
-  useVerifyEmailVerificationCode,
   useVerifyMfaToken,
-  useVerifyPasswordResetCode
-} from "./queries";
+  useVerifyPasswordResetCode,
+  useVerifySignupEmailVerificationCode} from "./queries";

frontend/src/hooks/api/auth/queries.tsx

@@ -164,7 +164,7 @@ export const useSendVerificationEmail = () => {
   });
 };
 
-export const useVerifyEmailVerificationCode = () => {
+export const useVerifySignupEmailVerificationCode = () => {
   return useMutation({
     mutationFn: async ({ email, code }: { email: string; code: string }) => {
       const { data } = await apiRequest.post("/api/v3/signup/email/verify", {

frontend/src/hooks/api/users/index.tsx

@@ -1,4 +1,9 @@
-export { useAddUserToWsE2EE, useAddUserToWsNonE2EE } from "./mutation";
+export {
+  useAddUserToWsE2EE,
+  useAddUserToWsNonE2EE,
+  useSendEmailVerificationCode,
+  useVerifyEmailVerificationCode
+} from "./mutation";
 export {
   fetchOrgUsers,
   useAddUserToOrg,

frontend/src/hooks/api/users/mutation.tsx

@@ -61,3 +61,30 @@ export const useAddUserToWsNonE2EE = () => {
     }
   });
 };
+
+export const sendEmailVerificationCode = async (username: string) => {
+  return apiRequest.post("/api/v2/users/me/emails/code", {
+    username
+  });
+};
+
+export const useSendEmailVerificationCode = () => {
+  return useMutation({
+    mutationFn: async (username: string) => {
+      await sendEmailVerificationCode(username);
+      return {};
+    }
+  });
+};
+
+export const useVerifyEmailVerificationCode = () => {
+  return useMutation({
+    mutationFn: async ({ username, code }: { username: string; code: string }) => {
+      await apiRequest.post("/api/v2/users/me/emails/verify", {
+        username,
+        code
+      });
+      return {};
+    }
+  });
+};

frontend/src/hooks/api/users/types.ts

@@ -27,6 +27,11 @@ export type User = {
   id: string;
 };
 
+export enum UserAliasType {
+  LDAP = "ldap",
+  SAML = "saml"
+}
+
 export type UserEnc = {
   encryptionVersion?: number;
   protectedKey?: string;

frontend/src/pages/login/index.tsx

@@ -7,7 +7,6 @@ import { Login } from "@app/views/Login";
 
 export default function LoginPage() {
   const { t } = useTranslation();
-
   return (
     <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
       <Head>

frontend/src/pages/login/ldap/index.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+
+import { LoginLDAP } from "@app/views/Login";
+
+export default function LoginLDAPPage() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+      <Head>
+        <title>{t("common.head-title", { title: t("login.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={t("login.og-title") ?? ""} />
+        <meta name="og:description" content={t("login.og-description") ?? ""} />
+      </Head>
+      <Link href="/">
+        <div className="mb-4 mt-20 flex justify-center">
+          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+        </div>
+      </Link>
+      <LoginLDAP />
+    </div>
+  );
+}

frontend/src/pages/signup/index.tsx

@@ -13,7 +13,7 @@ import TeamInviteStep from "@app/components/signup/TeamInviteStep";
 import UserInfoStep from "@app/components/signup/UserInfoStep";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useServerConfig } from "@app/context";
-import { useVerifyEmailVerificationCode } from "@app/hooks/api";
+import { useVerifySignupEmailVerificationCode } from "@app/hooks/api";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 
@@ -34,7 +34,7 @@ export default function SignUp() {
   const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
   const [isCodeInputCheckLoading, setIsCodeInputCheckLoading] = useState(false);
   const { t } = useTranslation();
-  const { mutateAsync } = useVerifyEmailVerificationCode();
+  const { mutateAsync } = useVerifySignupEmailVerificationCode();
   const { config } = useServerConfig();
 
   useEffect(() => {

frontend/src/views/Login/Login.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 import { isLoggedIn } from "@app/reactQuery";
 
-import { InitialStep, LDAPStep, MFAStep, SAMLSSOStep } from "./components";
+import { InitialStep, MFAStep, SAMLSSOStep } from "./components";
 import { navigateUserToSelectOrg } from "./Login.utils";
 
 export const Login = () => {
@@ -58,8 +58,6 @@ export const Login = () => {
         );
       case 2:
         return <SAMLSSOStep setStep={setStep} />;
-      case 3:
-        return <LDAPStep setStep={setStep} />;
       default:
         return <div />;
     }

frontend/src/views/Login/LoginLDAP.tsx

@@ -1,24 +1,23 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, Input } from "@app/components/v2";
 import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
 
-type Props = {
-  setStep: (step: number) => void;
-};
+export const LoginLDAP = () => {
+  const router = useRouter();
+  const queryParams = new URLSearchParams(window.location.search);
+  const passedOrgSlug = queryParams.get("organizationSlug");
+  const passedUsername = queryParams.get("username");
 
-export const LDAPStep = ({ setStep }: Props) => {
-  
-  const [organizationSlug, setOrganizationSlug] = useState("");
-  const [username, setUsername] = useState("");
+  const [organizationSlug, setOrganizationSlug] = useState(passedOrgSlug || "");
+  const [username, setUsername] = useState(passedUsername || "");
   const [password, setPassword] = useState("");
 
   const { t } = useTranslation();
 
-  // const queryParams = new URLSearchParams(window.location.search);
-
   const handleSubmission = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
@@ -42,7 +41,6 @@ export const LDAPStep = ({ setStep }: Props) => {
         type: "success"
       });
 
-      // redirects either to /login/sso or /signup/sso
       window.open(nextUrl);
       window.close();
     } catch (err) {
@@ -76,6 +74,7 @@ export const LDAPStep = ({ setStep }: Props) => {
               autoComplete="email"
               id="email"
               className="h-12"
+              isDisabled={passedOrgSlug !== null}
             />
           </div>
         </div>
@@ -90,6 +89,7 @@ export const LDAPStep = ({ setStep }: Props) => {
               autoComplete="email"
               id="email"
               className="h-12"
+              isDisabled={passedUsername !== null}
             />
           </div>
         </div>
@@ -122,7 +122,7 @@ export const LDAPStep = ({ setStep }: Props) => {
       <div className="mt-4 flex flex-row items-center justify-center">
         <button
           onClick={() => {
-            setStep(0);
+            router.push("/login");
           }}
           type="button"
           className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -25,7 +25,7 @@ type Props = {
 
 export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
   const router = useRouter();
-  
+
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
   const [loginError, setLoginError] = useState(false);
@@ -33,7 +33,10 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   const queryParams = new URLSearchParams(window.location.search);
 
   useEffect(() => {
-    if (process.env.NEXT_PUBLIC_SAML_ORG_SLUG && process.env.NEXT_PUBLIC_SAML_ORG_SLUG !== "saml-org-slug-default") {
+    if (
+      process.env.NEXT_PUBLIC_SAML_ORG_SLUG &&
+      process.env.NEXT_PUBLIC_SAML_ORG_SLUG !== "saml-org-slug-default"
+    ) {
       const callbackPort = queryParams.get("callback_port");
       window.open(
         `/api/v1/sso/redirect/saml2/organizations/${process.env.NEXT_PUBLIC_SAML_ORG_SLUG}${
@@ -42,7 +45,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       );
       window.close();
     }
-  }, [])
+  }, []);
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -196,7 +199,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           colorSchema="primary"
           variant="outline_bg"
           onClick={() => {
-            setStep(3);
+            router.push("/login/ldap");
           }}
           leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
           className="mx-0 h-10 w-full"

frontend/src/views/Login/components/LDAPStep/index.tsx

@@ -1 +0,0 @@
-export { LDAPStep } from "./LDAPStep";

frontend/src/views/Login/components/index.tsx

@@ -1,5 +1,4 @@
 export { InitialStep } from "./InitialStep";
-export { LDAPStep } from "./LDAPStep";
 export { MFAStep } from "./MFAStep";
 export { SAMLSSOStep } from "./SAMLSSOStep";
 

frontend/src/views/Login/index.tsx

@@ -1,2 +1,3 @@
 export { Login } from "./Login";
+export { LoginLDAP } from "./LoginLDAP";
 export { LoginSSO } from "./LoginSSO";

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -49,7 +49,6 @@ type Props = {
 };
 
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Props) => {
-  
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const { user } = useUser();
@@ -218,7 +217,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     variant="outline_bg"
                                     onClick={() => onResendInvite(email)}
                                   >
-                                    Resend Invite
+                                    Resend invite
                                   </Button>
                                 )}
                             </>

frontend/src/views/Signup/SignupSSO.tsx

@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import jwt_decode from "jwt-decode";
 
-import { BackupPDFStep, UserInfoSSOStep } from "./components";
+import { BackupPDFStep, EmailConfirmationStep, UserInfoSSOStep } from "./components";
 
 type Props = {
   providerAuthToken: string;
@@ -11,11 +11,38 @@ export const SignupSSO = ({ providerAuthToken }: Props) => {
   const [step, setStep] = useState(0);
   const [password, setPassword] = useState("");
 
-  const { username, organizationName, firstName, lastName } = jwt_decode(providerAuthToken) as any;
+  const {
+    username,
+    email,
+    organizationName,
+    organizationSlug,
+    firstName,
+    lastName,
+    authType,
+    isEmailVerified
+  } = jwt_decode(providerAuthToken) as any;
+
+  useEffect(() => {
+    if (!isEmailVerified) {
+      setStep(0);
+    } else {
+      setStep(1);
+    }
+  }, []);
 
   const renderView = () => {
     switch (step) {
       case 0:
+        return (
+          <EmailConfirmationStep
+            authType={authType}
+            username={username}
+            email={email}
+            organizationSlug={organizationSlug}
+            setStep={setStep}
+          />
+        );
+      case 1:
         return (
           <UserInfoSSOStep
             username={username}
@@ -27,7 +54,7 @@ export const SignupSSO = ({ providerAuthToken }: Props) => {
             providerAuthToken={providerAuthToken}
           />
         );
-      case 1:
+      case 2:
         return (
           <BackupPDFStep email={username} password={password} name={`${firstName} ${lastName}`} />
         );

frontend/src/views/Signup/components/EmailConfirmationStep/EmailConfirmationStep.tsx

@@ -0,0 +1,185 @@
+// confirm email
+// if same email exists, then trigger fn to merge automatically
+import { useState } from "react";
+import ReactCodeInput from "react-code-input";
+import { useRouter } from "next/router";
+
+import Error from "@app/components/basic/Error";
+import { createNotification } from "@app/components/notifications";
+import { Button } from "@app/components/v2";
+import { useSendEmailVerificationCode, useVerifyEmailVerificationCode } from "@app/hooks/api";
+import { UserAliasType } from "@app/hooks/api/users/types";
+
+type Props = {
+  authType?: UserAliasType;
+  username: string;
+  email: string;
+  organizationSlug: string;
+  setStep: (step: number) => void;
+};
+
+// The style for the verification code input
+const props = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "55px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "55px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+const propsPhone = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "40px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "40px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+
+export const EmailConfirmationStep = ({
+  authType,
+  username,
+  email,
+  organizationSlug,
+  setStep
+}: Props) => {
+  const router = useRouter();
+  const [code, setCode] = useState("");
+  const [codeError, setCodeError] = useState(false);
+  const [isResendingVerificationEmail] = useState(false);
+  const [isLoading] = useState(false);
+
+  const { mutateAsync: sendEmailVerificationCode } = useSendEmailVerificationCode();
+  const { mutateAsync: verifyEmailVerificationCode } = useVerifyEmailVerificationCode();
+
+  const checkCode = async () => {
+    try {
+      await verifyEmailVerificationCode({ username, code });
+      setCodeError(false);
+
+      createNotification({
+        text: "Successfully verified code",
+        type: "success"
+      });
+
+      switch (authType) {
+        case UserAliasType.SAML: {
+          window.open(`/api/v1/sso/redirect/saml2/organizations/${organizationSlug}`);
+          window.close();
+          break;
+        }
+        case UserAliasType.LDAP: {
+          router.push(`/login/ldap?organizationSlug=${organizationSlug}`);
+          break;
+        }
+        default: {
+          setStep(1);
+          break;
+        }
+      }
+    } catch (err) {
+      createNotification({
+        text: "Failed to verify code",
+        type: "error"
+      });
+    }
+
+    setCode("");
+  };
+
+  const resendCode = async () => {
+    try {
+      await sendEmailVerificationCode(username);
+      createNotification({
+        text: "Successfully resent code",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed to resend code",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mx-auto h-full w-full pb-4 md:px-8">
+      <p className="text-md flex justify-center text-bunker-200">
+        We&apos;ve sent a verification code to {email}
+      </p>
+      <div className="mx-auto hidden w-max min-w-[20rem] md:block">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...props}
+          className="mt-6 mb-2"
+        />
+      </div>
+      <div className="mx-auto mt-4 block w-max md:hidden">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...propsPhone}
+          className="mt-2 mb-2"
+        />
+      </div>
+      {codeError && <Error text="Oops. Your code is wrong. Please try again." />}
+      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+        <div className="text-l w-full py-1 text-lg">
+          <Button
+            type="submit"
+            onClick={checkCode}
+            size="sm"
+            isFullWidth
+            className="h-14"
+            colorSchema="primary"
+            variant="outline_bg"
+            isLoading={isLoading}
+          >
+            {" "}
+            Verify
+          </Button>
+        </div>
+      </div>
+      <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-bunker-400">Don&apos;t see the code?</span>
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
+            <button disabled={isLoading} onClick={resendCode} type="button">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+                {isResendingVerificationEmail ? "Resending..." : "Resend"}
+              </span>
+            </button>
+          </div>
+        </div>
+        <p className="pb-2 text-sm text-bunker-400">Make sure to check your spam inbox.</p>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Signup/components/EmailConfirmationStep/index.tsx

@@ -0,0 +1 @@
+export { EmailConfirmationStep } from "./EmailConfirmationStep";

frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -201,7 +201,7 @@ export const UserInfoSSOStep = ({
               localStorage.setItem("orgData.id", orgId);
               localStorage.setItem("projectData.id", project.id);
 
-              setStep(1);
+              setStep(2);
             } catch (error) {
               setIsLoading(false);
               console.error(error);

frontend/src/views/Signup/components/index.tsx

@@ -1,2 +1,3 @@
 export { BackupPDFStep } from "./BackupPDFStep";
+export { EmailConfirmationStep } from "./EmailConfirmationStep";
 export { UserInfoSSOStep } from "./UserInfoSSOStep";

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -14,11 +14,11 @@ import {
   Input,
   Select,
   SelectItem,
+  Switch,
   Tab,
   TabList,
   TabPanel,
-  Tabs
-} from "@app/components/v2";
+  Tabs} from "@app/components/v2";
 import { useOrganization, useServerConfig, useUser } from "@app/context";
 import { useUpdateServerConfig } from "@app/hooks/api";
 
@@ -33,7 +33,9 @@ enum SignUpModes {
 
 const formSchema = z.object({
   signUpMode: z.nativeEnum(SignUpModes),
-  allowedSignUpDomain: z.string().optional().nullable()
+  allowedSignUpDomain: z.string().optional().nullable(),
+  trustSamlEmails: z.boolean(),
+  trustLdapEmails: z.boolean()
 });
 
 type TDashboardForm = z.infer<typeof formSchema>;
@@ -52,7 +54,9 @@ export const AdminDashboardPage = () => {
     values: {
       // eslint-disable-next-line
       signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
-      allowedSignUpDomain: config.allowedSignUpDomain
+      allowedSignUpDomain: config.allowedSignUpDomain,
+      trustSamlEmails: config.trustSamlEmails,
+      trustLdapEmails: config.trustLdapEmails
     }
   });
 
@@ -62,8 +66,6 @@ export const AdminDashboardPage = () => {
   const { orgs } = useOrganization();
   const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
 
-  
-
   const isNotAllowed = !user?.superAdmin;
 
   // TODO(akhilmhdh): on nextjs 14 roadmap this will be properly addressed with context split
@@ -78,10 +80,13 @@ export const AdminDashboardPage = () => {
 
   const onFormSubmit = async (formData: TDashboardForm) => {
     try {
-      const { signUpMode, allowedSignUpDomain } = formData;
+      const { signUpMode, allowedSignUpDomain, trustSamlEmails, trustLdapEmails } = formData;
+
       await updateServerConfig({
         allowSignUp: signUpMode !== SignUpModes.Disabled,
-        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null
+        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null,
+        trustSamlEmails,
+        trustLdapEmails
       });
       createNotification({
         text: "Successfully changed sign up setting.",
@@ -123,8 +128,9 @@ export const AdminDashboardPage = () => {
                   <div className="mb-2 text-xl font-semibold text-mineshaft-100">
                     Allow user signups
                   </div>
-                  <div className="mb-4 text-sm max-w-sm text-mineshaft-400">
-                    Select if you want users to be able to signup freely into your Infisical instance.
+                  <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+                    Select if you want users to be able to signup freely into your Infisical
+                    instance.
                   </div>
                   <Controller
                     control={control}
@@ -176,6 +182,48 @@ export const AdminDashboardPage = () => {
                     />
                   </div>
                 )}
+                <div className="mt-8 mb-8 flex flex-col justify-start">
+                  <div className="mb-2 text-xl font-semibold text-mineshaft-100">Trust emails</div>
+                  <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+                    Select if you want Infisical to trust external emails from SAML/LDAP identity
+                    providers. If set to false, then Infisical will prompt SAML/LDAP provisioned
+                    users to verify their email upon their first login.
+                  </div>
+                  <Controller
+                    control={control}
+                    name="trustSamlEmails"
+                    render={({ field, fieldState: { error } }) => {
+                      return (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                          <Switch
+                            id="trust-saml-emails"
+                            onCheckedChange={(value) => field.onChange(value)}
+                            isChecked={field.value}
+                          >
+                            <p className="w-full">Trust SAML emails</p>
+                          </Switch>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                  <Controller
+                    control={control}
+                    name="trustLdapEmails"
+                    render={({ field, fieldState: { error } }) => {
+                      return (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                          <Switch
+                            id="trust-ldap-emails"
+                            onCheckedChange={(value) => field.onChange(value)}
+                            isChecked={field.value}
+                          >
+                            <p className="w-full">Trust LDAP emails</p>
+                          </Switch>
+                        </FormControl>
+                      );
+                    }}
+                  />
+                </div>
                 <Button
                   type="submit"
                   isLoading={isSubmitting}