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,67 +16,82 @@ 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>
-      <div className="w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+      {shouldDisplaySignupMethod(LoginMethod.GOOGLE) && (
-        <Button
+        <div className="w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-          colorSchema="primary"
+          <Button
-          variant="solid"
+            colorSchema="primary"
-          onClick={() => {
+            variant="solid"
-            window.open("/api/v1/sso/redirect/google");
+            onClick={() => {
-            window.close();
+              window.open("/api/v1/sso/redirect/google");
-          }}
+              window.close();
-          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+            }}
-          className="mx-0 h-12 w-full"
+            leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-        >
+            className="mx-0 h-12 w-full"
-          {t("signup.continue-with-google")}
+          >
-        </Button>
+            {t("signup.continue-with-google")}
-      </div>
+          </Button>
-      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+        </div>
-        <Button
+      )}
-          colorSchema="primary"
+      {shouldDisplaySignupMethod(LoginMethod.GITHUB) && (
-          variant="outline_bg"
+        <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-          onClick={() => {
+          <Button
-            window.open("/api/v1/sso/redirect/github");
+            colorSchema="primary"
-            window.close();
+            variant="outline_bg"
-          }}
+            onClick={() => {
-          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
+              window.open("/api/v1/sso/redirect/github");
-          className="mx-0 h-12 w-full"
+              window.close();
-        >
+            }}
-          Continue with GitHub
+            leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-        </Button>
+            className="mx-0 h-12 w-full"
-      </div>
+          >
-      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+            Continue with GitHub
-        <Button
+          </Button>
-          colorSchema="primary"
+        </div>
-          variant="outline_bg"
+      )}
-          onClick={() => {
+      {shouldDisplaySignupMethod(LoginMethod.GITLAB) && (
-            window.open("/api/v1/sso/redirect/gitlab");
+        <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-            window.close();
+          <Button
-          }}
+            colorSchema="primary"
-          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
+            variant="outline_bg"
-          className="mx-0 h-12 w-full"
+            onClick={() => {
-        >
+              window.open("/api/v1/sso/redirect/gitlab");
-          Continue with GitLab
+              window.close();
-        </Button>
+            }}
-      </div>
+            leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
+            className="mx-0 h-12 w-full"
-        <Button
+          >
-          colorSchema="primary"
+            Continue with GitLab
-          variant="outline_bg"
+          </Button>
-          onClick={() => {
+        </div>
-            setIsSignupWithEmail(true);
+      )}
-          }}
+      {shouldDisplaySignupMethod(LoginMethod.EMAIL) && (
-          leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
+        <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
-          className="mx-0 h-12 w-full"
+          <Button
-        >
+            colorSchema="primary"
-          Continue with Email
+            variant="outline_bg"
-        </Button>
+            onClick={() => {
-      </div>
+              setIsSignupWithEmail(true);
+            }}
+            leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
+            className="mx-0 h-12 w-full"
+          >
+            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>