From 1ab2a80eabd3d2e6d2446fbb923faf8644c407bc Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Sat, 15 Mar 2025 12:12:30 +0100
Subject: [PATCH] chore: improve UX when social login is not enabled (#7242)

---
 ui/components/auth/oss/auth-form.tsx | 93 +++++++++++++++++++++-------
 1 file changed, 69 insertions(+), 24 deletions(-)

diff --git a/ui/components/auth/oss/auth-form.tsx b/ui/components/auth/oss/auth-form.tsx
index 90c86fe94a..2ab7cefbd2 100644
--- a/ui/components/auth/oss/auth-form.tsx
+++ b/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, 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>
             </>
           )}