refactor: social buttons

src/routes/login/SignUpLink.tsx

@@ -1,12 +1,19 @@
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
-
-export default function MagicLinkLogin() {
+type Props = {
+  smtp?: boolean
+}
+export default function MagicLinkLogin({ smtp = false }: Props) {
   const { t } = useTranslation("auth");
   const navigate = useNavigate();
   const handleSignUp = () => {
+    if (smtp) {
+      // 配置了SMTP，走magic link 流程
+      navigate("/send_magic_link");
+    } else {
       navigate("/register");
+    }
   };
 
   return (

src/routes/login/SocialLoginButtons.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import toast from 'react-hot-toast';
+import { useGetLoginConfigQuery } from "../../app/services/server";
+import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
+import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
+import GoogleLoginButton from "../../common/component/GoogleLoginButton";
+import GithubLoginButton from "../../common/component/GithubLoginButton";
+import MetamaskLoginButton from "./MetamaskLoginButton";
+import OidcLoginButton from "./OidcLoginButton";
+import { useLoginMutation } from '../../app/services/auth';
+import { LoginConfig } from '../../types/server';
+
+// type Props = {}
+
+const SocialLoginButtons = () => {
+    const [login, { isSuccess }] = useLoginMutation();
+    const { config: githubAuthConfig } = useGithubAuthConfig();
+    const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
+    const { clientId } = useGoogleAuthConfig();
+
+    useEffect(() => {
+        if (isSuccess) {
+            toast.success("Login Successfully");
+            // navigateTo("/");
+        }
+    }, [isSuccess]);
+    if (!loginConfigSuccess) return null;
+    const {
+        github: enableGithubLogin,
+        google: enableGoogleLogin,
+        metamask: enableMetamaskLogin,
+        oidc = [],
+    } = loginConfig as LoginConfig;
+    const googleLogin = enableGoogleLogin && !!clientId;
+    return (
+        <>
+            {googleLogin && <GoogleLoginButton type="register" clientId={clientId} />}
+            {enableGithubLogin && (
+                <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
+            )}
+            {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
+            {oidc.length > 0 && <OidcLoginButton issuers={oidc} />}
+        </>
+    );
+};
+
+export default SocialLoginButtons;

src/routes/login/index.tsx

@@ -4,8 +4,7 @@ import toast from "react-hot-toast";
 import BASE_URL from "../../app/config";
 // import web3 from "web3";
 import StyledWrapper from "./styled";
-import MetamaskLoginButton from "./MetamaskLoginButton";
-import OidcLoginButton from "./OidcLoginButton";
+
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import MagicLinkLogin from "./MagicLinkLogin";
@@ -13,18 +12,15 @@ import SignUpLink from "./SignUpLink";
 import { useLoginMutation } from "../../app/services/auth";
 import { useGetLoginConfigQuery, useGetSMTPStatusQuery } from "../../app/services/server";
 import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
-import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
-import GoogleLoginButton from "../../common/component/GoogleLoginButton";
-import GithubLoginButton from "../../common/component/GithubLoginButton";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { useTranslation } from "react-i18next";
+import SocialLoginButtons from "./SocialLoginButtons";
 
 export default function LoginPage() {
   const { t } = useTranslation("auth");
   const { data: enableSMTP } = useGetSMTPStatusQuery();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   const { clientId } = useGoogleAuthConfig();
-  const { config: githubAuthConfig } = useGithubAuthConfig();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
   const [input, setInput] = useState({
     email: "",
@@ -162,12 +158,10 @@ export default function LoginPage() {
         <div className="btns">
 
           {enableMagicLink && <MagicLinkLogin />}
-          {googleLogin && <GoogleLoginButton clientId={clientId} />}
-          {enableGithubLogin && <GithubLoginButton client_id={githubAuthConfig?.client_id} />}
-          {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
-          {oidc.length > 0 && <OidcLoginButton issuers={oidc} />}
+
+          <SocialLoginButtons />
         </div>
-        {whoCanSignUp === "EveryOne" && <SignUpLink />}
+        {whoCanSignUp === "EveryOne" && <SignUpLink smtp={enableSMTP} />}
       </div>
     </StyledWrapper>
   );

src/routes/login/styled.tsx

@@ -3,7 +3,7 @@ import Button from "../../common/component/styled/Button";
 
 export const StyledSocialButton = styled(Button)`
   width: 100%;
-  margin-bottom: 16px;
+  /* margin-bottom: 16px; */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -63,6 +63,7 @@ const StyledWrapper = styled.div`
       height: 1px;
       background-color: #e4e7ec;
       margin: 26px 0;
+      overflow: visible;
       &:after {
         padding: 4px;
         background-color: #fff;

src/routes/reg/Register.tsx

@@ -6,12 +6,10 @@ import Button from "../../common/component/styled/Button";
 import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
 import EmailNextTip from "./EmailNextStepTip";
 import SignInLink from "./SignInLink";
-import { useGetLoginConfigQuery } from "../../app/services/server";
-import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
-import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
-import GoogleLoginButton from "../../common/component/GoogleLoginButton";
-import GithubLoginButton from "../../common/component/GithubLoginButton";
+
 import { useTranslation } from "react-i18next";
+import { useGetLoginConfigQuery } from "../../app/services/server";
+import SocialLoginButtons from "../login/SocialLoginButtons";
 
 interface AuthForm {
   email: string;
@@ -24,6 +22,8 @@ export default function Reg() {
   const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
     useSendRegMagicLinkMutation();
   const [checkEmail, { isLoading: checkingEmail }] = useLazyCheckEmailQuery();
+  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
+
   // const navigateTo = useNavigate();
   const [magicToken, setMagicToken] = useState("");
   const [input, setInput] = useState<AuthForm>({
@@ -87,17 +87,10 @@ export default function Reg() {
       return { ...prev };
     });
   };
-
-  const { clientId } = useGoogleAuthConfig();
-  const { config: githubAuthConfig } = useGithubAuthConfig();
-  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
   if (!loginConfigSuccess) return null;
   const {
-    github: enableGithubLogin,
-    google: enableGoogleLogin,
     who_can_sign_up: whoCanSignUp
   } = loginConfig;
-  const googleLogin = enableGoogleLogin && clientId;
   // magic token 没有并且没有开放注册
   if (whoCanSignUp !== "EveryOne" && !magicToken)
     // todo: i18n
@@ -153,11 +146,8 @@ export default function Reg() {
         </Button>
       </form>
       <hr className="or" />
-      <div className="flex flex-col gap-3">
-        {googleLogin && <GoogleLoginButton type="register" clientId={clientId} />}
-        {enableGithubLogin && (
-          <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
-        )}
+      <div className="flex flex-col gap-3 py-3">
+        <SocialLoginButtons />
       </div>
       <SignInLink token={magicToken} />
     </>

src/routes/sendMagicLink/index.tsx

@@ -8,6 +8,7 @@ import Button from "../../common/component/styled/Button";
 import { useSendLoginMagicLinkMutation } from "../../app/services/auth";
 import SentTip from "./SentTip";
 import { useTranslation } from "react-i18next";
+import SocialLoginButtons from "../login/SocialLoginButtons";
 
 export default function SendMagicLinkPage() {
   const { t } = useTranslation("auth");
@@ -91,6 +92,9 @@ export default function SendMagicLinkPage() {
               </Button>
             </form>
             <hr className="or" />
+            <div className="flex flex-col gap-3 py-3">
+              <SocialLoginButtons />
+            </div>
             <Button onClick={handlePwdPath}>{t("login.password")}</Button>
           </>
         )}