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

This commit is contained in:
Alejandro Bailo
2025-09-09 09:23:56 +02:00
committed by GitHub
parent 82cf216a74
commit bb02004e7c
8 changed files with 110 additions and 70 deletions

View File

@@ -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;

View File

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

View File

@@ -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>
</>
);