misc: added signup option filtering

frontend/src/components/signup/InitialSignupStep.tsx

@@ -1,9 +1,13 @@
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { useServerConfig } from "@app/context";
+import { LoginMethod } from "@app/hooks/api/admin/types";
+
 import { Button } from "../v2";
 
 export default function InitialSignupStep({
@@ -12,12 +16,20 @@ export default function InitialSignupStep({
   setIsSignupWithEmail: (value: boolean) => void;
 }) {
   const { t } = useTranslation();
+  const { config } = useServerConfig();
+
+  const shouldDisplaySignupMethod = useCallback(
+    (method: LoginMethod) =>
+      !config.enabledLoginMethods || config.enabledLoginMethods.includes(method),
+    [config]
+  );
 
   return (
     <div className="mx-auto flex w-full flex-col items-center justify-center">
       <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         {t("signup.initial-title")}
       </h1>
+      {shouldDisplaySignupMethod(LoginMethod.GOOGLE) && (
         <div className="w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -32,6 +44,8 @@ export default function InitialSignupStep({
             {t("signup.continue-with-google")}
           </Button>
         </div>
+      )}
+      {shouldDisplaySignupMethod(LoginMethod.GITHUB) && (
         <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -46,6 +60,8 @@ export default function InitialSignupStep({
             Continue with GitHub
           </Button>
         </div>
+      )}
+      {shouldDisplaySignupMethod(LoginMethod.GITLAB) && (
         <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -60,6 +76,8 @@ export default function InitialSignupStep({
             Continue with GitLab
           </Button>
         </div>
+      )}
+      {shouldDisplaySignupMethod(LoginMethod.EMAIL) && (
         <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
           <Button
             colorSchema="primary"
@@ -73,6 +91,7 @@ export default function InitialSignupStep({
             Continue with Email
           </Button>
         </div>
+      )}
       <div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
         {t("signup.create-policy")}
       </div>