fix: social auth buttons showed for sign-up (#8673)

ui/CHANGELOG.md

@@ -19,6 +19,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Scan page shows NoProvidersAdded when no providers [(#8626)](https://github.com/prowler-cloud/prowler/pull/8626)
 - XML field in SAML configuration form validation [(#8638)](https://github.com/prowler-cloud/prowler/pull/8638)
+- Social login buttons in sign-up page [(#8673)](https://github.com/prowler-cloud/prowler/pull/8673)
 
 ---
 

ui/actions/integrations/integrations.ts

@@ -3,7 +3,6 @@
 import { revalidatePath } from "next/cache";
 
 import { pollTaskUntilSettled } from "@/actions/task/poll";
-import type { TaskState } from "@/types/tasks";
 import {
   apiBaseUrl,
   getAuthHeaders,
@@ -12,6 +11,7 @@ import {
   parseStringify,
 } from "@/lib";
 import { IntegrationType } from "@/types/integrations";
+import type { TaskState } from "@/types/tasks";
 
 type TaskStartResponse = {
   data: { id: string; type: "tasks" };

ui/actions/integrations/jira-dispatch.ts

@@ -9,7 +9,8 @@ import type {
 } from "@/types/integrations";
 
 export const getJiraIntegrations = async (): Promise<
-  { success: true; data: IntegrationProps[] } | { success: false; error: string }
+  | { success: true; data: IntegrationProps[] }
+  | { success: false; error: string }
 > => {
   const headers = await getAuthHeaders({ contentType: false });
   const url = new URL(`${apiBaseUrl}/integrations`);
@@ -24,7 +25,8 @@ export const getJiraIntegrations = async (): Promise<
       const data: { data: IntegrationProps[] } = await response.json();
       // Filter for enabled integrations on the client side
       const enabledIntegrations = (data.data || []).filter(
-        (integration: IntegrationProps) => integration.attributes.enabled === true,
+        (integration: IntegrationProps) =>
+          integration.attributes.enabled === true,
       );
       return { success: true, data: enabledIntegrations };
     }
@@ -44,7 +46,7 @@ export const sendFindingToJira = async (
   integrationId: string,
   findingId: string,
   projectKey: string,
-  issueType: string,
+  _issueType: string,
 ): Promise<
   | { success: true; taskId: string; message: string }
   | { success: false; error: string }

ui/components/auth/oss/auth-form.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Icon } from "@iconify/react";
-import { Button, Checkbox, Divider, Tooltip } from "@nextui-org/react";
+import { Button, Checkbox, Divider } from "@nextui-org/react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
@@ -11,6 +11,7 @@ import { z } from "zod";
 import { authenticate, createNewUser } from "@/actions/auth";
 import { initiateSamlAuth } from "@/actions/integrations/saml";
 import { PasswordRequirementsMessage } from "@/components/auth/oss/password-validator";
+import { SocialButtons } from "@/components/auth/oss/social-buttons";
 import { NotificationIcon, ProwlerExtended } from "@/components/icons";
 import { ThemeSwitch } from "@/components/ThemeSwitch";
 import { useToast } from "@/components/ui";
@@ -354,70 +355,12 @@ export const AuthForm = ({
               </div>
               <div className="flex flex-col gap-2">
                 {!isSamlMode && (
-                  <>
-                    <Tooltip
-                      content={
-                        <div className="flex-inline text-small">
-                          Social Login with Google is not enabled.{" "}
-                          <CustomLink href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-social-login/#google-oauth-configuration">
-                            Read the docs
-                          </CustomLink>
-                        </div>
-                      }
-                      placement="right-start"
-                      shadow="sm"
-                      isDisabled={isGoogleOAuthEnabled}
-                      className="w-96"
-                    >
-                      <span>
-                        <Button
-                          startContent={
-                            <Icon icon="flat-color-icons:google" width={24} />
-                          }
-                          variant="bordered"
-                          className="w-full"
-                          as="a"
-                          href={googleAuthUrl}
-                          isDisabled={!isGoogleOAuthEnabled}
-                        >
-                          Continue with Google
-                        </Button>
-                      </span>
-                    </Tooltip>
-                    <Tooltip
-                      content={
-                        <div className="flex-inline text-small">
-                          Social Login with Github is not enabled.{" "}
-                          <CustomLink href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-social-login/#github-oauth-configuration">
-                            Read the docs
-                          </CustomLink>
-                        </div>
-                      }
-                      placement="right-start"
-                      shadow="sm"
-                      isDisabled={isGithubOAuthEnabled}
-                      className="w-96"
-                    >
-                      <span>
-                        <Button
-                          startContent={
-                            <Icon
-                              className="text-default-500"
-                              icon="fe:github"
-                              width={24}
-                            />
-                          }
-                          variant="bordered"
-                          className="w-full"
-                          as="a"
-                          href={githubAuthUrl}
-                          isDisabled={!isGithubOAuthEnabled}
-                        >
-                          Continue with Github
-                        </Button>
-                      </span>
-                    </Tooltip>
-                  </>
+                  <SocialButtons
+                    googleAuthUrl={googleAuthUrl}
+                    githubAuthUrl={githubAuthUrl}
+                    isGoogleOAuthEnabled={isGoogleOAuthEnabled}
+                    isGithubOAuthEnabled={isGithubOAuthEnabled}
+                  />
                 )}
                 <Button
                   startContent={
@@ -440,6 +383,23 @@ export const AuthForm = ({
               </div>
             </>
           )}
+          {!invitationToken && type === "sign-up" && (
+            <>
+              <div className="flex items-center gap-4 py-2">
+                <Divider className="flex-1" />
+                <p className="shrink-0 text-tiny text-default-500">OR</p>
+                <Divider className="flex-1" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <SocialButtons
+                  googleAuthUrl={googleAuthUrl}
+                  githubAuthUrl={githubAuthUrl}
+                  isGoogleOAuthEnabled={isGoogleOAuthEnabled}
+                  isGithubOAuthEnabled={isGithubOAuthEnabled}
+                />
+              </div>
+            </>
+          )}
           {type === "sign-in" ? (
             <p className="text-center text-small">
               Need to create an account?&nbsp;

ui/components/auth/oss/index.ts

@@ -1 +1,2 @@
 export * from "./auth-form";
+export * from "./social-buttons";

ui/components/auth/oss/social-buttons.tsx

@@ -0,0 +1,75 @@
+import { Icon } from "@iconify/react";
+import { Button, Tooltip } from "@nextui-org/react";
+
+import { CustomLink } from "@/components/ui/custom/custom-link";
+
+export const SocialButtons = ({
+  googleAuthUrl,
+  githubAuthUrl,
+  isGoogleOAuthEnabled,
+  isGithubOAuthEnabled,
+}: {
+  googleAuthUrl?: string;
+  githubAuthUrl?: string;
+  isGoogleOAuthEnabled?: boolean;
+  isGithubOAuthEnabled?: boolean;
+}) => (
+  <>
+    <Tooltip
+      content={
+        <div className="flex-inline text-small">
+          Social Login with Google is not enabled.{" "}
+          <CustomLink href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-social-login/#google-oauth-configuration">
+            Read the docs
+          </CustomLink>
+        </div>
+      }
+      placement="right-start"
+      shadow="sm"
+      isDisabled={isGoogleOAuthEnabled}
+      className="w-96"
+    >
+      <span>
+        <Button
+          startContent={<Icon icon="flat-color-icons:google" width={24} />}
+          variant="bordered"
+          className="w-full"
+          as="a"
+          href={googleAuthUrl}
+          isDisabled={!isGoogleOAuthEnabled}
+        >
+          Continue with Google
+        </Button>
+      </span>
+    </Tooltip>
+    <Tooltip
+      content={
+        <div className="flex-inline text-small">
+          Social Login with Github is not enabled.{" "}
+          <CustomLink href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-social-login/#github-oauth-configuration">
+            Read the docs
+          </CustomLink>
+        </div>
+      }
+      placement="right-start"
+      shadow="sm"
+      isDisabled={isGithubOAuthEnabled}
+      className="w-96"
+    >
+      <span>
+        <Button
+          startContent={
+            <Icon className="text-default-500" icon="fe:github" width={24} />
+          }
+          variant="bordered"
+          className="w-full"
+          as="a"
+          href={githubAuthUrl}
+          isDisabled={!isGithubOAuthEnabled}
+        >
+          Continue with Github
+        </Button>
+      </span>
+    </Tooltip>
+  </>
+);

ui/package.json

@@ -97,7 +97,7 @@
     "start:standalone": "node .next/standalone/server.js",
     "typecheck": "tsc",
     "healthcheck": "npm run typecheck && npm run lint:check",
-    "lint:check": "./node_modules/.bin/eslint ./app",
+    "lint:check": "eslint . --ext .ts,.tsx -c .eslintrc.cjs",
     "lint:fix": "eslint . --ext .ts,.tsx -c .eslintrc.cjs --fix",
     "format:check": "./node_modules/.bin/prettier --check ./app",
     "format:write": "./node_modules/.bin/prettier --config .prettierrc.json --write ./app",

ui/types/integrations.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+
 import type { TaskState } from "@/types/tasks";
 
 export type IntegrationType = "amazon_s3" | "aws_security_hub" | "jira";