diff --git a/src/routes/login/index.js b/src/routes/login/index.js
index 776a63ad..459aa63a 100644
--- a/src/routes/login/index.js
+++ b/src/routes/login/index.js
@@ -8,14 +8,14 @@ import MetamaskLoginButton from "./MetamaskLoginButton";
import OidcLoginButton from "./OidcLoginButton";
import Input from "../../common/component/styled/Input";
import Button from "../../common/component/styled/Button";
-import GoogleLoginButton from "./GoogleLoginButton";
import MagicLinkLogin from "./MagicLinkLogin";
import SignUpLink from "./SignUpLink";
import { useLoginMutation } from "../../app/services/auth";
import { useGetLoginConfigQuery, useGetSMTPStatusQuery } from "../../app/services/server";
import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
-import GithubLoginButton from "./GithubLoginButton";
import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
+import GoogleLoginButton from "../../common/component/GoogleLoginButton";
+import GithubLoginButton from "../../common/component/GithubLoginButton";
export default function LoginPage() {
const { data: enableSMTP } = useGetSMTPStatusQuery();
const [login, { isSuccess, isLoading, error }] = useLoginMutation();
@@ -32,7 +32,7 @@ export default function LoginPage() {
const oauth = query.get("oauth");
const code = query.get("code");
const state = query.get("state");
- const token = query.get("token");
+ const magic_token = query.get("magic_token");
const exists = query.get("exists");
if (oauth) {
switch (oauth) {
@@ -58,18 +58,18 @@ export default function LoginPage() {
}
}
// magic link
- if (token && typeof exists !== "undefined") {
- console.log("tokken", token, exists);
+ if (magic_token && typeof exists !== "undefined") {
+ // console.log("tokken", token, exists);
const isLogin = exists == "true";
if (isLogin) {
// login
login({
- token,
+ magic_token,
type: "magiclink"
});
} else {
- // reg
- location.href = `/#/reg/magiclink/${token}`;
+ // reg with magic link and set name only
+ location.href = `?magic_token=${magic_token}#/register/set_name/login`;
}
}
}, []);
@@ -167,7 +167,7 @@ export default function LoginPage() {
{hasDivider &&
}
{enableMagicLink && }
- {googleLogin && }
+ {googleLogin && }
{enableGithubLogin && }
{enableMetamaskLogin && }
{oidc.length > 0 && }
diff --git a/src/routes/reg/EmailNextStepTip.js b/src/routes/reg/EmailNextStepTip.js
new file mode 100644
index 00000000..02143d6a
--- /dev/null
+++ b/src/routes/reg/EmailNextStepTip.js
@@ -0,0 +1,33 @@
+// import React from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .title {
+ font-weight: 600;
+ font-size: 30px;
+ line-height: 38px;
+ color: #101828;
+ margin-bottom: 12px;
+ }
+ .desc {
+ text-align: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ color: #667085;
+ &:not(:last-child) {
+ margin-bottom: 24px;
+ }
+ }
+`;
+export default function EmailNextTip() {
+ return (
+
+ Magic link Sent
+ Login to your email client, and continue next step
+ You can close this window now.
+
+ );
+}
diff --git a/src/routes/reg/RegWithUsername.js b/src/routes/reg/RegWithUsername.js
index 14ad4fa7..126bcfa4 100644
--- a/src/routes/reg/RegWithUsername.js
+++ b/src/routes/reg/RegWithUsername.js
@@ -1,25 +1,30 @@
/* eslint-disable no-undef */
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
-// import { useNavigate } from "react-router-dom";
-// import toast from "react-hot-toast";
import { useParams } from "react-router-dom";
import { setAuthData } from "../../app/slices/auth.data";
import Input from "../../common/component/styled/Input";
import Button from "../../common/component/styled/Button";
-import { useLoginMutation, useCheckInviteTokenValidMutation } from "../../app/services/auth";
+import { useLoginMutation, useCheckMagicTokenValidMutation } from "../../app/services/auth";
import toast from "react-hot-toast";
import ExpiredTip from "./ExpiredTip";
+import { useRegisterMutation } from "../../app/services/auth";
export default function RegWithUsername() {
- const { token } = useParams();
const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
- useCheckInviteTokenValidMutation();
- const [login, { isLoading, error, isSuccess, data }] = useLoginMutation();
+ useCheckMagicTokenValidMutation();
+ const [login, { isLoading: loginLoading, error, isSuccess: loginSuccess, data: loginData }] =
+ useLoginMutation();
+ const [register, { isLoading: regLoading, isSuccess: regSuccess, data: regData }] =
+ useRegisterMutation();
// const navigateTo = useNavigate();
+ const { from = "reg" } = useParams();
const dispatch = useDispatch();
const [username, setUsername] = useState("");
+ const query = new URLSearchParams(location.search);
+ // const githubCode = query.get("gcode");
+ const token = query.get("magic_token");
useEffect(() => {
if (token) {
checkTokenInvalid(token);
@@ -38,32 +43,42 @@ export default function RegWithUsername() {
}
}, [error]);
useEffect(() => {
+ const isSuccess = loginSuccess || regSuccess;
+ const data = loginData || regData;
if (isSuccess && data) {
// 更新本地认证信息
- console.log("login data", data);
toast.success("Login Successfully");
dispatch(setAuthData(data));
+ // tricky
location.href = `/#/`;
}
- }, [isSuccess, data]);
+ }, [loginSuccess, regSuccess, loginData, regData]);
- const handleLogin = (evt) => {
+ const handleAuth = (evt) => {
evt.preventDefault();
- login({
- token,
- username,
- type: "magiclink"
- });
- // sendMagicLink(email);
+ if (from == "reg") {
+ register({
+ magic_token: token,
+ name: username
+ });
+ } else {
+ login({
+ magic_token: token,
+ extra_name: username,
+ type: "magiclink"
+ });
+ }
};
const handleInput = (evt) => {
const { value } = evt.target;
setUsername(value);
};
- if (!token) return "no token";
- if (checkingToken) return "checking Magic Link...";
+ if (!token) return "No Token";
+ if (checkingToken) return "Checking Magic Link...";
if (!isTokenValid) return ;
+ const isLoading = loginLoading || regLoading;
+ const isSuccess = loginSuccess || regSuccess;
return (
<>
@@ -73,7 +88,7 @@ export default function RegWithUsername() {
visible to others in spaces you joined.
-
);
}
diff --git a/src/routes/reg/SignInLink.js b/src/routes/reg/SignInLink.js
new file mode 100644
index 00000000..c4bd9903
--- /dev/null
+++ b/src/routes/reg/SignInLink.js
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+
+const StyledSignInLink = styled.p`
+ text-align: center;
+ margin: 24px 0 8px;
+ > span {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: #667085;
+ margin-right: 4px;
+ }
+
+ > a {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ color: #22d3ee;
+ cursor: pointer;
+ }
+`;
+export default function SignInLink() {
+ const navigate = useNavigate();
+ const handleSignIn = () => {
+ navigate("/login");
+ };
+ return (
+
+ Have an account?
+ Sign In
+
+ );
+}
diff --git a/src/routes/reg/index.js b/src/routes/reg/index.js
index 96d1656a..2e80dcfe 100644
--- a/src/routes/reg/index.js
+++ b/src/routes/reg/index.js
@@ -1,12 +1,49 @@
-/* eslint-disable no-undef */
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 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!`;
return (
+ {isRegHome && (
+ <>
+
+
+
Sign Up to Rustchat
+
Please enter your details.
+
+
+ )}
+ {isRegHome && (
+ <>
+
+ {googleLogin &&
}
+ {enableGithubLogin &&
}
+
+
+ )}