chore: improve UX when social login is not enabled (#7242)

This commit is contained in:
Pablo Lara
2025-03-15 12:12:30 +01:00
committed by GitHub
parent 89d4c521ba
commit 1ab2a80eab

View File

@@ -2,7 +2,7 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { Icon } from "@iconify/react";
import { Button, Checkbox, Divider, Link } from "@nextui-org/react";
import { Button, Checkbox, Divider, Link, Tooltip } from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { z } from "zod";
@@ -299,33 +299,78 @@ export const AuthForm = ({
<Divider className="flex-1" />
</div>
<div className="flex flex-col gap-2">
<Button
startContent={
<Icon icon="flat-color-icons:google" width={24} />
<Tooltip
content={
<div className="flex flex-col items-center text-small">
Google Sign-in is not enabled. Configure the social OAuth
environment variables to enable it.
<Link
target="_blank"
rel="noopener noreferrer"
className="text-xs font-medium text-primary"
>
Read the docs
</Link>
</div>
}
variant="bordered"
as="a"
href={getAuthUrl("google")}
isDisabled={!isGoogleOAuthEnabled}
placement="right-start"
shadow="sm"
isDisabled={isGoogleOAuthEnabled}
className="w-96"
>
Continue with Google
</Button>
<Button
startContent={
<Icon
className="text-default-500"
icon="fe:github"
width={24}
/>
<span>
<Button
startContent={
<Icon icon="flat-color-icons:google" width={24} />
}
variant="bordered"
className="w-full"
as="a"
href={getAuthUrl("google")}
isDisabled={!isGoogleOAuthEnabled}
>
Continue with Google
</Button>
</span>
</Tooltip>
<Tooltip
content={
<div className="flex flex-col items-center text-small">
Github Sign-in is not enabled. Configure the social OAuth
environment variables to enable it.
<Link
target="_blank"
rel="noopener noreferrer"
className="text-xs font-medium text-primary"
>
Read the docs
</Link>
</div>
}
variant="bordered"
as="a"
href={getAuthUrl("github")}
isDisabled={!isGithubOAuthEnabled}
placement="right-start"
shadow="sm"
isDisabled={isGithubOAuthEnabled}
className="w-96"
>
Continue with Github
</Button>
<span>
<Button
startContent={
<Icon
className="text-default-500"
icon="fe:github"
width={24}
/>
}
variant="bordered"
className="w-full"
as="a"
href={getAuthUrl("github")}
isDisabled={!isGithubOAuthEnabled}
>
Continue with Github
</Button>
</span>
</Tooltip>
</div>
</>
)}