refactor: register procession

src/app/config.js

@@ -1,6 +1,6 @@
 // const BASE_URL = `${location.origin}/api`;
 const BASE_URL = `https://dev.rustchat.com/api`;
-export const CACHE_VERSION = `0.2.17`;
+export const CACHE_VERSION = `0.3.0`;
 export const ContentTypes = {
   text: "text/plain",
   markdown: "text/markdown",

src/app/services/auth.js

@@ -132,6 +132,11 @@ export const authApi = createApi({
         url: `/token/metamask/nonce?public_address=${address}`
       })
     }),
+    checkEmail: builder.query({
+      query: (email) => ({
+        url: `/user/check_email?email=${encodeURIComponent(email)}`
+      })
+    }),
     getCredentials: builder.query({
       query: () => ({
         url: `/token/credentials`
@@ -165,6 +170,7 @@ export const authApi = createApi({
 });
 
 export const {
+  useLazyCheckEmailQuery,
   useGetInitializedQuery,
   useSendLoginMagicLinkMutation,
   useSendRegMagicLinkMutation,

src/app/services/base.query.js

@@ -8,6 +8,7 @@ const whiteList = [
   "register",
   "sendLoginMagicLink",
   "sendRegMagicLink",
+  "checkEmail",
   "checkMagicTokenValid",
   "getGoogleAuthConfig",
   "getGithubAuthConfig",

src/routes/reg/RegWithUsername.js

@@ -14,10 +14,14 @@ import { useRegisterMutation } from "../../app/services/auth";
 export default function RegWithUsername() {
   const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
     useCheckMagicTokenValidMutation();
-  const [login, { isLoading: loginLoading, error, isSuccess: loginSuccess, data: loginData }] =
-    useLoginMutation();
-  const [register, { isLoading: regLoading, isSuccess: regSuccess, data: regData }] =
-    useRegisterMutation();
+  const [
+    login,
+    { isLoading: loginLoading, error: loginError, isSuccess: loginSuccess, data: loginData }
+  ] = useLoginMutation();
+  const [
+    register,
+    { isLoading: regLoading, isSuccess: regSuccess, data: regData, error: regError }
+  ] = useRegisterMutation();
   // const navigateTo = useNavigate();
   const { from = "reg" } = useParams();
   const dispatch = useDispatch();
@@ -32,8 +36,7 @@ export default function RegWithUsername() {
   }, [token]);
 
   useEffect(() => {
-    console.log("errr", error);
-    switch (error?.status) {
+    switch (loginError?.status) {
       case 401:
         toast.error("Invalided Token");
         break;
@@ -41,7 +44,17 @@ export default function RegWithUsername() {
       default:
         break;
     }
-  }, [error]);
+  }, [loginError]);
+  useEffect(() => {
+    switch (regError?.status) {
+      case 409:
+        toast.error("Something Conflicted!");
+        break;
+
+      default:
+        break;
+    }
+  }, [regError]);
   useEffect(() => {
     const isSuccess = loginSuccess || regSuccess;
     const data = loginData || regData;
@@ -74,6 +87,7 @@ export default function RegWithUsername() {
     const { value } = evt.target;
     setUsername(value);
   };
+  console.log("ffff", from);
   if (!token) return "No Token";
   if (checkingToken) return "Checking Magic Link...";
   if (!isTokenValid) return <ExpiredTip />;

src/routes/reg/Register.js

@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
-import { useNavigate } from "react-router-dom";
+// import { useNavigate } from "react-router-dom";
 import BASE_URL from "../../app/config";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
-import { useSendRegMagicLinkMutation } from "../../app/services/auth";
+import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
 import EmailNextTip from "./EmailNextStepTip";
 import SignInLink from "./SignInLink";
 import { useGetLoginConfigQuery } from "../../app/services/server";
@@ -14,8 +14,10 @@ import GoogleLoginButton from "../../common/component/GoogleLoginButton";
 import GithubLoginButton from "../../common/component/GithubLoginButton";
 
 export default function Reg() {
-  const [sendRegMagicLink, { isLoading, data, isSuccess }] = useSendRegMagicLinkMutation();
-  const navigateTo = useNavigate();
+  const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
+    useSendRegMagicLinkMutation();
+  const [checkEmail, { isLoading: checkingEmail }] = useLazyCheckEmailQuery();
+  // const navigateTo = useNavigate();
   const [magicToken, setMagicToken] = useState("");
   const [input, setInput] = useState({
     email: "",
@@ -35,19 +37,30 @@ export default function Reg() {
       const { new_magic_token, mail_is_sent } = data;
       if (!mail_is_sent && new_magic_token) {
         // 直接进入set_name流程
-        navigateTo(`?magic_token=${new_magic_token}#/register/set_name`);
+        location.href = `?magic_token=${new_magic_token}#/register/set_name`;
+        // navigateTo(`/register/set_name?magic_token=${new_magic_token}`);
       }
     }
   }, [isSuccess, data]);
 
-  const handleReg = (evt) => {
+  const handleReg = async (evt) => {
     evt.preventDefault();
-    const { email, password } = input;
-    sendRegMagicLink({
-      magic_token: magicToken,
-      email,
-      password
-    });
+    const { email, password, confirmPassword } = input;
+    if (password !== confirmPassword) {
+      toast.error("Not Same Password!");
+      return;
+    }
+    const { data: canReg } = await checkEmail(email);
+    console.log("can reg", canReg);
+    if (canReg) {
+      sendRegMagicLink({
+        magic_token: magicToken,
+        email,
+        password
+      });
+    } else {
+      toast.error("Email already registered!");
+    }
     // sendMagicLink(email);
   };
   const handleCompare = () => {
@@ -79,6 +92,7 @@ export default function Reg() {
   if (whoCanSignUp !== "EveryOne") return `Open Register is Closed!`;
   const { email, password, confirmPassword } = input;
   if (data?.mail_is_sent) return <EmailNextTip />;
+  const isLoading = signingUp || checkingEmail;
   return (
     <>
       <div className="tips">
@@ -87,7 +101,7 @@ export default function Reg() {
         <span className="desc">Please enter your details.</span>
       </div>
 
-      <form onSubmit={handleReg}>
+      <form onSubmit={handleReg} autoSave={false} autoComplete>
         <Input
           className="large"
           name="email"