From bcd30d0d116073cfaeedc1eb834574786aefe829 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Mon, 26 Jun 2023 23:02:16 +0800 Subject: [PATCH] refactor: login with magic link --- public/locales/en/auth.json | 8 +-- public/locales/jp/auth.json | 2 +- public/locales/tr/auth.json | 2 +- public/locales/zh/auth.json | 4 +- src/routes/index.tsx | 2 +- src/routes/login/MagicLinkLogin.tsx | 11 ++-- src/routes/login/index.tsx | 76 +++++++++++++++--------- src/routes/sendMagicLink/SentTip.tsx | 26 ++++++--- src/routes/sendMagicLink/index.tsx | 87 +++++----------------------- 9 files changed, 98 insertions(+), 120 deletions(-) diff --git a/public/locales/en/auth.json b/public/locales/en/auth.json index ac8acef2..1c8c2be7 100644 --- a/public/locales/en/auth.json +++ b/public/locales/en/auth.json @@ -30,12 +30,12 @@ "placeholder_email": "Enter your Email", "placeholder_pwd": "Enter Password", "placeholder_confirm_pwd": "Confirm Password", - "check_email": "Check your email", - "check_email_desc": " We’ve sent you a magic link to {{email}}. Click on the link to continue.", - "use_different": "Use a different email", + "check_email": "Check your inbox", + "check_email_desc": "We’ve just emailed a magic link to <0>{{email}}. Once it arrives, it will be valid for 15 minutes.", + "back_sign_in": "Back to Sign in", "welcome": "Welcome to {{name}} server", "guest_login_tip": "Please scan QR code or sign in to send a message", - "enter": "Enter ", + "enter": "Sign in to ", "sign_in": "Sign In", "sign_up": "Sign Up", "signing_up": "Signing Up", diff --git a/public/locales/jp/auth.json b/public/locales/jp/auth.json index d4c25414..286fcaff 100644 --- a/public/locales/jp/auth.json +++ b/public/locales/jp/auth.json @@ -26,7 +26,7 @@ "continue": "引き続き", "check_email": "メールボックスを確認してください", "check_email_desc": "メールボックスにリンクを送信します：{{email}}にチェックし確認してください", - "use_different": "別のメールアドレスを使用する", + "back_sign_in": "別のメールアドレスを使用する", "placeholder_email": "メールアドレスを入力してください", "placeholder_pwd": "パスワードを入力してください", "placeholder_confirm_pwd": "パスワードを再入力してください", diff --git a/public/locales/tr/auth.json b/public/locales/tr/auth.json index c9eb6b74..c217f5a6 100644 --- a/public/locales/tr/auth.json +++ b/public/locales/tr/auth.json @@ -35,7 +35,7 @@ "placeholder_confirm_pwd": "Parola Onayı", "check_email": "E-Posta'nızı kontrol edin", "check_email_desc": " {{email}} adresine sihirli bağlantı gönderildi. Devam etmek için lütfen bağlantıya tıklayın.", - "use_different": "Başka bir e-posta kullan", + "back_sign_in": "Başka bir e-posta kullan", "welcome": "{{name}} sunucusu'na hoşgeldiniz!", "guest_login_tip": "Mesaj gönderebilmek için lütfen QR kodu okutun veya oturum açın.", "enter": "Giriş ", diff --git a/public/locales/zh/auth.json b/public/locales/zh/auth.json index 0208e469..9d920596 100644 --- a/public/locales/zh/auth.json +++ b/public/locales/zh/auth.json @@ -27,8 +27,8 @@ }, "continue": "继续", "check_email": "检查你的邮箱", - "check_email_desc": "我们将链接已发送到你的邮箱：{{email}}，请前往查收", - "use_different": "使用其它邮箱", + "check_email_desc": "我们已将链接发送至邮箱：<0>{{email}}，有效期15分钟，请尽快通过该链接登录。", + "back_sign_in": "返回登录", "placeholder_name": "输入用户名", "placeholder_email": "输入邮箱地址", "placeholder_pwd": "输入密码", diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 490ce892..f5f03dfb 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -114,7 +114,7 @@ const PageRoutes = () => { } /> diff --git a/src/routes/login/MagicLinkLogin.tsx b/src/routes/login/MagicLinkLogin.tsx index 87cd71ca..de11bdd8 100644 --- a/src/routes/login/MagicLinkLogin.tsx +++ b/src/routes/login/MagicLinkLogin.tsx @@ -2,15 +2,18 @@ import { useNavigate } from "react-router-dom"; import Button from "@/components/styled/Button"; -export default function MagicLinkLogin() { +type Props = { + email: string; +}; +export default function MagicLinkLogin({ email }: Props) { const navigate = useNavigate(); const handleLogin = () => { - navigate("/send_magic_link"); + navigate(`/send_magic_link/${email}`); }; return ( - ); } diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index 00ece872..89dd06f3 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -11,6 +11,7 @@ import { useAppSelector } from "@/app/store"; import Divider from "@/components/Divider"; import Button from "@/components/styled/Button"; import Input from "@/components/styled/Input"; +import StyledLabel from "@/components/styled/Label"; import MagicLinkLogin from "./MagicLinkLogin"; import SignUpLink from "./SignUpLink"; import SocialLoginButtons from "./SocialLoginButtons"; @@ -22,6 +23,7 @@ export default function LoginPage() { const { data: enableSMTP, isLoading: loadingSMTPStatus } = useGetSMTPStatusQuery(); const [login, { isSuccess, isLoading, error }] = useLoginMutation(); const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery(); + const [emailInputted, setEmailInputted] = useState(false); const [input, setInput] = useState({ email: "", password: "" @@ -90,6 +92,11 @@ export default function LoginPage() { const handleLogin = (evt: FormEvent) => { evt.preventDefault(); + const enableMagicLink = enableSMTP && loginConfig?.magic_link; + if (enableMagicLink && !emailInputted) { + setEmailInputted(true); + return; + } login({ ...input, type: "password" @@ -111,7 +118,8 @@ export default function LoginPage() { const { magic_link, who_can_sign_up: whoCanSignUp } = loginConfig; const enableMagicLink = enableSMTP && magic_link; - + const hideSocials = enableMagicLink && emailInputted; + const showSignIn = !enableMagicLink || emailInputted; if (loadingSMTPStatus) return null; return (
@@ -127,36 +135,50 @@ export default function LoginPage() {
- - - + {!emailInputted && ( +
+ Email + +
+ )} + {(!enableMagicLink || emailInputted) && ( +
+ Password + +
+ )} + {showSignIn ? ( + + ) : ( + + )}
- {enableMagicLink && } - + {emailInputted && } + {!hideSocials && }
- {whoCanSignUp === "EveryOne" && } + {whoCanSignUp === "EveryOne" && !hideSocials && } ); diff --git a/src/routes/sendMagicLink/SentTip.tsx b/src/routes/sendMagicLink/SentTip.tsx index b4bc1be6..62a9e6ee 100644 --- a/src/routes/sendMagicLink/SentTip.tsx +++ b/src/routes/sendMagicLink/SentTip.tsx @@ -1,23 +1,33 @@ import { FC, MouseEvent } from "react"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; +import BASE_URL from "@/app/config"; import Button from "@/components/styled/Button"; interface Props { email: string; - reset?: (e: MouseEvent) => void; + handleBack: () => void; } -const SentTip: FC = ({ email, reset }) => { +const SentTip: FC = ({ email, handleBack }) => { const { t } = useTranslation("auth"); return ( -
-

+
+ logo +

{t("check_email")}

- {t("check_email_desc", { email })} -
); diff --git a/src/routes/sendMagicLink/index.tsx b/src/routes/sendMagicLink/index.tsx index c0ebd819..45a1388e 100644 --- a/src/routes/sendMagicLink/index.tsx +++ b/src/routes/sendMagicLink/index.tsx @@ -1,30 +1,23 @@ -import { ChangeEvent, FormEvent, useEffect, useState } from "react"; +import { useEffect } from "react"; import toast from "react-hot-toast"; -import { useTranslation } from "react-i18next"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; -import BASE_URL from "@/app/config"; import { useSendLoginMagicLinkMutation } from "@/app/services/auth"; -import { useAppSelector } from "@/app/store"; -import Divider from "@/components/Divider"; -import Button from "@/components/styled/Button"; -import Input from "@/components/styled/Input"; -import SocialLoginButtons from "../login/SocialLoginButtons"; -import SignInLink from "../reg/SignInLink"; import SentTip from "./SentTip"; export default function SendMagicLinkPage() { - const { t } = useTranslation("auth"); - const serverName = useAppSelector((store) => store.server.name); - const [sent, setSent] = useState(false); + const { email = "" } = useParams(); const [sendMagicLink, { isSuccess, isLoading, error }] = useSendLoginMagicLinkMutation(); const navigateTo = useNavigate(); - const [email, setEmail] = useState(""); + useEffect(() => { + if (email) { + sendMagicLink(email); + } + }, [email]); useEffect(() => { if (isSuccess) { toast.success("Send Email Successfully!"); - setSent(true); } }, [isSuccess]); @@ -52,64 +45,14 @@ export default function SendMagicLinkPage() { navigateTo("/login"); }; - const handleLogin = (evt: FormEvent) => { - evt.preventDefault(); - sendMagicLink(email); - }; - - const handleInput = (evt: ChangeEvent) => { - const { value } = evt.target; - setEmail(value); - }; - - const handleReset = () => { - setEmail(""); - setSent(false); - }; return ( -
-
- {sent ? ( - - ) : ( - <> -
- logo -

- {t("enter")} {serverName}{" "} -

- {t("placeholder_email")} -
-
- - -
- - -
- -
- - - )} +
+
+ {isSuccess ? ( + + ) : isLoading ? ( +
Sending...
+ ) : null}
);