feat: add GitLab OAuth client (#4692)

space/components/account/auth-forms/auth-root.tsx

@@ -85,7 +85,7 @@ export const AuthRoot: FC = observer(() => {
   const isSMTPConfigured = config?.is_smtp_configured || false;
   const isMagicLoginEnabled = config?.is_magic_login_enabled || false;
   const isEmailPasswordEnabled = config?.is_email_password_enabled || false;
-  const isOAuthEnabled = (config && (config?.is_google_enabled || config?.is_github_enabled)) || false;
+  const isOAuthEnabled = (config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false;
 
   // submit handler- email verification
   const handleEmailVerification = async (data: IEmailCheckData) => {

space/components/account/oauth/gitlab-button.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { useSearchParams } from "next/navigation";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// images
+import GitlabLogo from "/public/logos/gitlab-logo.svg";
+
+export type GitlabOAuthButtonProps = {
+  text: string;
+};
+
+export const GitlabOAuthButton: FC<GitlabOAuthButtonProps> = (props) => {
+  const searchParams = useSearchParams();
+  const nextPath = searchParams.get("next_path") || undefined;
+  const { text } = props;
+  // hooks
+  const { resolvedTheme } = useTheme();
+
+  const handleSignIn = () => {
+    window.location.assign(`${API_BASE_URL}/auth/spaces/gitlab/${nextPath ? `?next_path=${nextPath}` : ``}`);
+  };
+
+  return (
+    <button
+      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
+        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
+      }`}
+      onClick={handleSignIn}
+    >
+      <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />
+      {text}
+    </button>
+  );
+};

space/components/account/oauth/index.ts

@@ -1,3 +1,4 @@
 export * from "./oauth-options";
 export * from "./google-button";
 export * from "./github-button";
+export * from "./gitlab-button";

space/components/account/oauth/oauth-options.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 // components
-import { GithubOAuthButton, GoogleOAuthButton } from "@/components/account";
+import { GithubOAuthButton, GitlabOAuthButton, GoogleOAuthButton } from "@/components/account";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -22,6 +22,7 @@ export const OAuthOptions: React.FC = observer(() => {
           </div>
         )}
         {config?.is_github_enabled && <GithubOAuthButton text="Sign in with Github" />}
+        {config?.is_gitlab_enabled && <GitlabOAuthButton text="Sign in with GitLab" />}
       </div>
     </>
   );