misc: made reusable helper for login page

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

@@ -62,6 +62,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
     }
   }, []);
 
+  const shouldDisplayLoginMethod = useCallback(
+    (method: LoginMethod) =>
+      !config.enabledLoginMethods || config.enabledLoginMethods.includes(method),
+    [config]
+  );
+
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
@@ -163,8 +169,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         Login to Infisical
       </h1>
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.GOOGLE) && (
-        (config.enabledLoginMethods.includes(LoginMethod.GOOGLE) && (
         <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -173,9 +178,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
               const callbackPort = queryParams.get("callback_port");
 
               window.open(
-                  `/api/v1/sso/redirect/google${
+                `/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-                    callbackPort ? `?callback_port=${callbackPort}` : ""
-                  }`
               );
               window.close();
             }}
@@ -185,9 +188,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             {t("login.continue-with-google")}
           </Button>
         </div>
-        ))}
+      )}
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.GITHUB) && (
-        (config.enabledLoginMethods.includes(LoginMethod.GITHUB) && (
         <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -196,9 +198,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
               const callbackPort = queryParams.get("callback_port");
 
               window.open(
-                  `/api/v1/sso/redirect/github${
+                `/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-                    callbackPort ? `?callback_port=${callbackPort}` : ""
-                  }`
               );
 
               window.close();
@@ -209,9 +209,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             Continue with GitHub
           </Button>
         </div>
-        ))}
+      )}
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.GITLAB) && (
-        (config.enabledLoginMethods.includes(LoginMethod.GITLAB) && (
         <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -220,9 +219,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
               const callbackPort = queryParams.get("callback_port");
 
               window.open(
-                  `/api/v1/sso/redirect/gitlab${
+                `/api/v1/sso/redirect/gitlab${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-                    callbackPort ? `?callback_port=${callbackPort}` : ""
-                  }`
               );
 
               window.close();
@@ -233,9 +230,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             Continue with GitLab
           </Button>
         </div>
-        ))}
+      )}
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.SAML) && (
-        (config.enabledLoginMethods.includes(LoginMethod.SAML) && (
         <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -249,9 +245,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             Continue with SAML
           </Button>
         </div>
-        ))}
+      )}
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.OIDC) && (
-        (config.enabledLoginMethods.includes(LoginMethod.OIDC) && (
         <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -265,9 +260,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             Continue with OIDC
           </Button>
         </div>
-        ))}
+      )}
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.LDAP) && (
-        (config.enabledLoginMethods.includes(LoginMethod.LDAP) && (
         <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -281,19 +275,16 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             Continue with LDAP
           </Button>
         </div>
-        ))}
+      )}
 
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.EMAIL) && config.enabledLoginMethods.length > 1 && (
-        (config.enabledLoginMethods.length > 1 &&
-          config.enabledLoginMethods.includes(LoginMethod.EMAIL) && (
         <div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
           <div className="w-full border-t border-mineshaft-400/60" />
           <span className="mx-2 text-xs text-mineshaft-200">or</span>
           <div className="w-full border-t border-mineshaft-400/60" />
         </div>
-          ))}
+      )}
-      {!config.enabledLoginMethods ||
+      {shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
-        (config.enabledLoginMethods.includes(LoginMethod.EMAIL) && (
         <>
           <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
             <Input
@@ -344,7 +335,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             </Button>
           </div>
         </>
-        ))}
+      )}
       {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
       {config.allowSignUp ? (
         <div className="mt-6 flex flex-row text-sm text-bunker-400">