fix: hide while no social buttons

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;
+}

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
       )}
     >

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>

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} />

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 />