From d6881e2e6831429ded24526e21ff210812e71af9 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 27 Jun 2024 13:53:12 +0800
Subject: [PATCH] misc: added signup option filtering

---
 .../components/signup/InitialSignupStep.tsx   | 129 ++++++++++--------
 1 file changed, 74 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/signup/InitialSignupStep.tsx b/frontend/src/components/signup/InitialSignupStep.tsx
index e5c23f3334..8df6759132 100644
--- a/frontend/src/components/signup/InitialSignupStep.tsx
+++ b/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">
-        <Button
-          colorSchema="primary"
-          variant="solid"
-          onClick={() => {
-            window.open("/api/v1/sso/redirect/google");
-            window.close();
-          }}
-          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-          className="mx-0 h-12 w-full"
-        >
-          {t("signup.continue-with-google")}
-        </Button>
-      </div>
-      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-        <Button
-          colorSchema="primary"
-          variant="outline_bg"
-          onClick={() => {
-            window.open("/api/v1/sso/redirect/github");
-            window.close();
-          }}
-          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-          className="mx-0 h-12 w-full"
-        >
-          Continue with GitHub
-        </Button>
-      </div>
-      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-        <Button
-          colorSchema="primary"
-          variant="outline_bg"
-          onClick={() => {
-            window.open("/api/v1/sso/redirect/gitlab");
-            window.close();
-          }}
-          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-          className="mx-0 h-12 w-full"
-        >
-          Continue with GitLab
-        </Button>
-      </div>
-      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
-        <Button
-          colorSchema="primary"
-          variant="outline_bg"
-          onClick={() => {
-            setIsSignupWithEmail(true);
-          }}
-          leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
-          className="mx-0 h-12 w-full"
-        >
-          Continue with Email
-        </Button>
-      </div>
+      {shouldDisplaySignupMethod(LoginMethod.GOOGLE) && (
+        <div className="w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+          <Button
+            colorSchema="primary"
+            variant="solid"
+            onClick={() => {
+              window.open("/api/v1/sso/redirect/google");
+              window.close();
+            }}
+            leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+            className="mx-0 h-12 w-full"
+          >
+            {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"
+            variant="outline_bg"
+            onClick={() => {
+              window.open("/api/v1/sso/redirect/github");
+              window.close();
+            }}
+            leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
+            className="mx-0 h-12 w-full"
+          >
+            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"
+            variant="outline_bg"
+            onClick={() => {
+              window.open("/api/v1/sso/redirect/gitlab");
+              window.close();
+            }}
+            leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
+            className="mx-0 h-12 w-full"
+          >
+            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"
+            variant="outline_bg"
+            onClick={() => {
+              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>