refactor: reg with magic link process

src/app/services/auth.ts

@@ -218,6 +218,5 @@ export const {
   useCheckMagicTokenValidMutation,
   useUpdatePasswordMutation,
   useRegisterMutation,
-  useLazyDeleteCurrentAccountQuery,
-  useGuestLoginWithNoEffectQuery
+  useLazyDeleteCurrentAccountQuery
 } = authApi;

src/routes/login/MagicLinkLogin.tsx

@@ -3,10 +3,9 @@ import Button from "../../common/component/styled/Button";
 
 export default function MagicLinkLogin() {
   const navigate = useNavigate();
-  const handleGoogleLogin = () => {
+  const handleLogin = () => {
     navigate("/send_magic_link");
-    // signIn();
   };
 
-  return <Button className="w-full" onClick={handleGoogleLogin}>Sign in with Magic Link</Button>;
+  return <Button className="w-full" onClick={handleLogin}>Sign in with Magic Link</Button>;
 }

src/routes/login/SignUpLink.tsx

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

src/routes/login/index.tsx

@@ -19,7 +19,7 @@ import Divider from "../../common/component/Divider";
 export default function LoginPage() {
   const { t } = useTranslation("auth");
   const { t: ct } = useTranslation();
-  const { data: enableSMTP } = useGetSMTPStatusQuery();
+  const { data: enableSMTP, isLoading: loadingSMTPStatus } = useGetSMTPStatusQuery();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   const { clientId } = useGoogleAuthConfig();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
@@ -122,7 +122,7 @@ export default function LoginPage() {
   const hasDivider =
     enableMagicLink || googleLogin || enableMetamaskLogin || oidc.length > 0 || enableGithubLogin;
 
-
+  if (loadingSMTPStatus) return "Loading...";
   return (
     <div className="flex-center h-screen dark:bg-gray-700">
       <div className="py-8 px-10 shadow-md rounded-xl">
@@ -163,7 +163,7 @@ export default function LoginPage() {
 
           <SocialLoginButtons />
         </div>
-        {whoCanSignUp === "EveryOne" && <SignUpLink smtp={enableSMTP} />}
+        {whoCanSignUp === "EveryOne" && <SignUpLink />}
       </div>
     </div>
   );

src/routes/reg/RegWithUsername.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, FC, FormEvent, ChangeEvent } from "react";
 import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import toast from "react-hot-toast";
 import { setAuthData } from "../../app/slices/auth.data";
@@ -8,10 +9,10 @@ import Button from "../../common/component/styled/Button";
 import { useLoginMutation, useCheckMagicTokenValidMutation } from "../../app/services/auth";
 import ExpiredTip from "./ExpiredTip";
 import { useRegisterMutation } from "../../app/services/auth";
-import { useTranslation } from "react-i18next";
 
 const RegWithUsername: FC = () => {
   const { t: ct } = useTranslation();
+  const { t } = useTranslation("auth");
   const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
     useCheckMagicTokenValidMutation();
   const [
@@ -92,20 +93,19 @@ const RegWithUsername: FC = () => {
   };
 
   if (!token) return <>"No Token"</>;
-  if (checkingToken) return <>"Checking Magic Link..."</>;
+  if (checkingToken) return <div className="dark:text-gray-100">"Checking Magic Link..."</div>;
   if (!isTokenValid) return <ExpiredTip />;
   const isLoading = loginLoading || regLoading;
   const isSuccess = loginSuccess || regSuccess;
   return (
     <>
-      <div className="flex-center flex-col pb-6">
-        <h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">What’s your name</h2>
-        <span className="text-gray-400 dark:text-gray-100">
-          Enter a name or handle so people know how you’d like to be called. Your name will only be
-          visible to others in spaces you joined.
+      <div className="flex-center flex-col pb-6 max-w-md">
+        <h2 className="font-semibold text-2xl text-gray-800 dark:text-gray-100 mb-2">{t("reg.input_name")}</h2>
+        <span className="text-gray-400 text-center dark:text-gray-100">
+          {t("reg.input_name_tip")}
         </span>
       </div>
-      <form className="flex flex-col gap-5 w-80 md:min-w-[360px]" onSubmit={handleAuth}>
+      <form className="flex flex-col m-auto gap-5 w-80 md:min-w-[360px]" onSubmit={handleAuth}>
         <Input
           className="large"
           name="username"

src/routes/reg/SignInLink.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { isMobile } from '../../common/utils';
 
 export default function SignInLink({ token }: { token?: string }) {
   const { t } = useTranslation("auth");
@@ -9,10 +10,9 @@ export default function SignInLink({ token }: { token?: string }) {
     navigate("/login");
   };
   useEffect(() => {
-    const isMobile = "ontouchstart" in document.documentElement;
-    // 直接跳转
-    if (isMobile && !!token) {
-      location.href = `https://join.voce.chat/download?link=${encodeURIComponent(`${location.origin}?magic_token=${token}`)}`;
+    // 移动端访问，则跳转
+    if (isMobile() && !!token) {
+      location.href = `https://join.voce.chat/download?link=${encodeURIComponent(`${location.origin}&magic_token=${token}`)}`;
     }
   }, [token]);
 

src/routes/sendMagicLink/SentTip.tsx

@@ -11,7 +11,7 @@ const SentTip: FC<Props> = ({ email, reset }) => {
   const { t } = useTranslation("auth");
   return (
     <div className="flex flex-col items-center">
-      <h2 className="font-semibold text-2xl text-gray-800 mb-2">{t("check_email")}</h2>
+      <h2 className="font-semibold text-2xl text-gray-800 dark:text-gray-200 mb-2">{t("check_email")}</h2>
       <span className="text-center text-gray-500 mb-6">
         {t("check_email_desc", { email })}
       </span>

src/routes/sendMagicLink/index.tsx

@@ -9,6 +9,7 @@ import SentTip from "./SentTip";
 import { useTranslation } from "react-i18next";
 import SocialLoginButtons from "../login/SocialLoginButtons";
 import Divider from "../../common/component/Divider";
+import SignInLink from "../reg/SignInLink";
 
 export default function SendMagicLinkPage() {
   const { t } = useTranslation("auth");
@@ -63,7 +64,7 @@ export default function SendMagicLinkPage() {
     setSent(false);
   };
   return (
-    <div className="flex-center h-screen">
+    <div className="flex-center h-screen dark:bg-gray-700">
       <div className="py-8 px-10 shadow rounded-xl">
         {sent ? (
           <SentTip email={email} reset={handleReset} />
@@ -71,7 +72,7 @@ export default function SendMagicLinkPage() {
           <>
             <div className="flex flex-col items-center">
               <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
-              <h2 className="font-semibold text-2xl text-gray-800 mb-2">{t("login.title")}</h2>
+              <h2 className="font-semibold text-2xl text-gray-800 dark:text-gray-200 mb-2">{t("enter")}VoceChat</h2>
               <span className="text-center text-gray-500 mb-6">{t("placeholder_email")}</span>
             </div>
             <form onSubmit={handleLogin} className="flex flex-col gap-5 w-[360px]">
@@ -90,11 +91,12 @@ export default function SendMagicLinkPage() {
                 {isLoading ? "Sending" : t("continue")}
               </Button>
             </form>
-            <Divider content="or" />
+            <Divider content="OR" />
+            <Button onClick={handlePwdPath} className="flex">{t("login.password")}</Button>
             <div className="flex flex-col gap-3 py-3">
               <SocialLoginButtons />
             </div>
-            <Button onClick={handlePwdPath} className="flex">{t("login.password")}</Button>
+            <SignInLink />
           </>
         )}
       </div>