From 13c9b71c0543e6ab32726f56cfe9c8ecb4d113bb Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 20 Jun 2023 17:40:35 +0800
Subject: [PATCH] fix: hide while no social buttons

---
 src/assets/index.css               |  4 ++++
 src/components/Divider.tsx         |  2 +-
 src/routes/login/index.tsx         | 18 +++---------------
 src/routes/reg/Register.tsx        |  2 +-
 src/routes/sendMagicLink/index.tsx |  2 +-
 5 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 652e3395..7f855ff1 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -329,3 +329,7 @@ input[type="number"]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
+/* 登录注册页面的底部社会化登录，如果为空，则不显示or分割线 */
+.or:has(+ .socials:empty) {
+  display: none;
+}
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index dbaf94e7..f797fb05 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -10,7 +10,7 @@ const Divider: FC<Props> = ({ content, className = "" }) => {
   return (
     <div
       className={clsx(
-        "relative border-none h-[1px] bg-slate-200 dark:bg-gray-500 my-6 overflow-visible",
+        "or relative border-none h-[1px] bg-slate-200 dark:bg-gray-500 my-6 overflow-visible",
         className
       )}
     >
diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx
index 105265f4..00ece872 100644
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -11,7 +11,6 @@ import { useAppSelector } from "@/app/store";
 import Divider from "@/components/Divider";
 import Button from "@/components/styled/Button";
 import Input from "@/components/styled/Input";
-import useGoogleAuthConfig from "@/hooks/useGoogleAuthConfig";
 import MagicLinkLogin from "./MagicLinkLogin";
 import SignUpLink from "./SignUpLink";
 import SocialLoginButtons from "./SocialLoginButtons";
@@ -22,7 +21,6 @@ export default function LoginPage() {
   const { t: ct } = useTranslation();
   const { data: enableSMTP, isLoading: loadingSMTPStatus } = useGetSMTPStatusQuery();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
-  const { clientId } = useGoogleAuthConfig();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
   const [input, setInput] = useState({
     email: "",
@@ -110,19 +108,9 @@ export default function LoginPage() {
   const { email, password } = input;
   if (!loginConfigSuccess) return null;
 
-  const {
-    magic_link,
-    github: enableGithubLogin,
-    google: enableGoogleLogin,
-    metamask: enableMetamaskLogin,
-    oidc = [],
-    who_can_sign_up: whoCanSignUp
-  } = loginConfig;
+  const { magic_link, who_can_sign_up: whoCanSignUp } = loginConfig;
 
   const enableMagicLink = enableSMTP && magic_link;
-  const googleLogin = enableGoogleLogin && clientId;
-  const hasDivider =
-    enableMagicLink || googleLogin || enableMetamaskLogin || oidc.length > 0 || enableGithubLogin;
 
   if (loadingSMTPStatus) return null;
   return (
@@ -163,8 +151,8 @@ export default function LoginPage() {
             {isLoading ? "Signing" : t("sign_in")}
           </Button>
         </form>
-        {hasDivider && <Divider content="OR" />}
-        <div className="flex flex-col gap-3">
+        <Divider content="OR" />
+        <div className="socials flex flex-col gap-3">
           {enableMagicLink && <MagicLinkLogin />}
           <SocialLoginButtons />
         </div>
diff --git a/src/routes/reg/Register.tsx b/src/routes/reg/Register.tsx
index fdc30808..2ed495af 100644
--- a/src/routes/reg/Register.tsx
+++ b/src/routes/reg/Register.tsx
@@ -209,7 +209,7 @@ export default function Register() {
         </Button>
       </form>
       <Divider content="OR" />
-      <div className="flex flex-col gap-3 py-3">
+      <div className="socials flex flex-col gap-3 py-3 empty:hidden">
         <SocialLoginButtons type="register" />
       </div>
       <SignInLink token={magic_token} />
diff --git a/src/routes/sendMagicLink/index.tsx b/src/routes/sendMagicLink/index.tsx
index 2eacc3ec..c0ebd819 100644
--- a/src/routes/sendMagicLink/index.tsx
+++ b/src/routes/sendMagicLink/index.tsx
@@ -104,7 +104,7 @@ export default function SendMagicLinkPage() {
             <Button onClick={handlePwdPath} className="w-full">
               {t("login.password")}
             </Button>
-            <div className="flex flex-col gap-3 py-3">
+            <div className="flex flex-col gap-3 py-3 empty:hidden">
               <SocialLoginButtons />
             </div>
             <SignInLink />