From aca0afee90bcde84bf28ad4a51a97d3b5c7c5dfd Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Mon, 20 Jun 2022 22:25:28 +0800 Subject: [PATCH 1/2] refactor: reg page --- .vscode/settings.json | 3 +- src/common/component/Manifest/index.js | 4 +- src/common/component/Manifest/usePrompt.js | 2 +- src/routes/reg/Register.js | 101 +++++++++++++++------ src/routes/reg/index.js | 44 +-------- 5 files changed, 82 insertions(+), 72 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 8ec9748c..0365c8ba 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -25,5 +25,6 @@ "emmet.triggerExpansionOnTab": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - } + }, + "cSpell.words": ["btns"] } diff --git a/src/common/component/Manifest/index.js b/src/common/component/Manifest/index.js index e4b188b0..c38577d9 100644 --- a/src/common/component/Manifest/index.js +++ b/src/common/component/Manifest/index.js @@ -5,7 +5,7 @@ import Prompt from "./Prompt"; import usePrompt from "./usePrompt"; export default function Manifest() { - const { setCanneled, prompted } = usePrompt(); + const { setCanceled: setCanceled, prompted } = usePrompt(); const deferredPromptRef = useRef(null); const [popup, setPopup] = useState(false); // const { data, isSuccess } = useGetServerQuery(); @@ -59,7 +59,7 @@ export default function Manifest() { deferredPromptRef.current = null; }; const handleClose = async () => { - setCanneled(); + setCanceled(); setPopup(false); }; if (!popup || prompted) return null; diff --git a/src/common/component/Manifest/usePrompt.js b/src/common/component/Manifest/usePrompt.js index 90ec78e1..a2a6fbd0 100644 --- a/src/common/component/Manifest/usePrompt.js +++ b/src/common/component/Manifest/usePrompt.js @@ -9,7 +9,7 @@ export default function usePrompt() { }; return { - setCanneled: setPrompt, + setCanceled: setPrompt, prompted: !!localStorage.getItem(KEY_PWA_INSTALLED), resetPrompt }; diff --git a/src/routes/reg/Register.js b/src/routes/reg/Register.js index e8285d9b..eccc297f 100644 --- a/src/routes/reg/Register.js +++ b/src/routes/reg/Register.js @@ -1,12 +1,17 @@ import { useState, useEffect } from "react"; -// import { useDispatch } from "react-redux"; +import toast from "react-hot-toast"; import { useNavigate } from "react-router-dom"; -// import toast from "react-hot-toast"; +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 EmailNextTip from "./EmailNextStepTip"; -// import { useSendLoginMagicLinkMutation } from "../../app/services/auth"; +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"; export default function Reg() { const [sendRegMagicLink, { isLoading, data, isSuccess }] = useSendRegMagicLinkMutation(); @@ -45,7 +50,12 @@ export default function Reg() { }); // sendMagicLink(email); }; - + const handleCompare = () => { + const { password, confirmPassword } = input; + if (password !== confirmPassword) { + toast.error("Not Same Password!"); + } + }; const handleInput = (evt) => { const { type } = evt.target.dataset; const { value } = evt.target; @@ -55,32 +65,65 @@ export default function Reg() { return { ...prev }; }); }; - const { email, password } = input; + 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; + // 没有开放注册 + if (whoCanSignUp !== "EveryOne") return `Open Register is Closed!`; + const { email, password, confirmPassword } = input; if (data?.mail_is_sent) return ; return ( -
- - - -
+ <> +
+ logo +

Sign Up to Rustchat

+ Please enter your details. +
+ +
+ + + + +
+
+ {googleLogin && } + {enableGithubLogin && } + + ); } diff --git a/src/routes/reg/index.js b/src/routes/reg/index.js index 2e80dcfe..e7f7bf37 100644 --- a/src/routes/reg/index.js +++ b/src/routes/reg/index.js @@ -1,49 +1,15 @@ import { Outlet } from "react-router-dom"; -import { useMatch } from "react-router-dom"; -import BASE_URL from "../../app/config"; -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 { useMatch } from "react-router-dom"; + import StyledWrapper from "./styled"; -export default function Reg() { - const isRegHome = useMatch(`/register`); - 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; - // 没有开放注册 - if (whoCanSignUp !== "EveryOne") return `Open Register is Closed!`; +export default function RegContainer() { + // const isRegHome = useMatch(`/register`); + return (
- {isRegHome && ( - <> -
- logo -

Sign Up to Rustchat

- Please enter your details. -
- - )} - {isRegHome && ( - <> -
- {googleLogin && } - {enableGithubLogin && } - - - )}
); From 066f797b26d5bed13aca7adc95271222524e8f47 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Tue, 21 Jun 2022 16:10:13 +0800 Subject: [PATCH 2/2] refactor: register procession --- .vscode/settings.json | 2 +- package.json | 2 +- src/app/config.js | 2 +- src/app/services/auth.js | 6 +++++ src/app/services/base.query.js | 1 + src/routes/reg/RegWithUsername.js | 28 ++++++++++++++++------ src/routes/reg/Register.js | 40 +++++++++++++++++++++---------- 7 files changed, 58 insertions(+), 23 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0365c8ba..7701e083 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -26,5 +26,5 @@ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "cSpell.words": ["btns"] + "cSpell.words": ["btns", "rustchat"] } diff --git a/package.json b/package.json index 6b0e539a..360f58f5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rustchat-web", - "version": "0.2.14", + "version": "0.3.0", "private": true, "homepage": "https://privoce.rustchat.com", "dependencies": { diff --git a/src/app/config.js b/src/app/config.js index 449fc5b2..e8bbef97 100644 --- a/src/app/config.js +++ b/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", diff --git a/src/app/services/auth.js b/src/app/services/auth.js index f372f5d7..5fd283f0 100644 --- a/src/app/services/auth.js +++ b/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, diff --git a/src/app/services/base.query.js b/src/app/services/base.query.js index aeadb4a8..004b5f83 100644 --- a/src/app/services/base.query.js +++ b/src/app/services/base.query.js @@ -8,6 +8,7 @@ const whiteList = [ "register", "sendLoginMagicLink", "sendRegMagicLink", + "checkEmail", "checkMagicTokenValid", "getGoogleAuthConfig", "getGithubAuthConfig", diff --git a/src/routes/reg/RegWithUsername.js b/src/routes/reg/RegWithUsername.js index 126bcfa4..7221778c 100644 --- a/src/routes/reg/RegWithUsername.js +++ b/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 ; diff --git a/src/routes/reg/Register.js b/src/routes/reg/Register.js index eccc297f..648cba0e 100644 --- a/src/routes/reg/Register.js +++ b/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 ; + const isLoading = signingUp || checkingEmail; return ( <>
@@ -87,7 +101,7 @@ export default function Reg() { Please enter your details.
-
+