From c473a70b46237ab3fd0b15c96864c9fbbe1b7c09 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sat, 21 Jan 2023 16:20:26 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E8=B1=A1=E5=B9=B6?= =?UTF-8?q?=E7=BB=9F=E4=B8=80Entry=E7=95=8C=E9=9D=A2=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/routes/Entry/ForgetPasswordView.tsx | 35 +++++++------------ client/web/src/routes/Entry/GuestView.tsx | 21 +++++------ client/web/src/routes/Entry/LoginView.tsx | 28 ++++++--------- client/web/src/routes/Entry/RegisterView.tsx | 30 ++++++++-------- .../web/src/routes/Entry/components/Input.tsx | 18 ++++++++++ .../routes/Entry/components/PrimaryBtn.tsx | 24 +++++++++++++ .../routes/Entry/components/SecondaryBtn.tsx | 18 ++++++++++ 7 files changed, 106 insertions(+), 68 deletions(-) create mode 100644 client/web/src/routes/Entry/components/Input.tsx create mode 100644 client/web/src/routes/Entry/components/PrimaryBtn.tsx create mode 100644 client/web/src/routes/Entry/components/SecondaryBtn.tsx diff --git a/client/web/src/routes/Entry/ForgetPasswordView.tsx b/client/web/src/routes/Entry/ForgetPasswordView.tsx index 41f65c06..108f527d 100644 --- a/client/web/src/routes/Entry/ForgetPasswordView.tsx +++ b/client/web/src/routes/Entry/ForgetPasswordView.tsx @@ -10,6 +10,9 @@ import React, { useState } from 'react'; import { Spinner } from '../../components/Spinner'; import { string } from 'yup'; import { useNavToView } from './utils'; +import { EntryInput } from './components/Input'; +import { SecondaryBtn } from './components/SecondaryBtn'; +import { PrimaryBtn } from './components/PrimaryBtn'; /** * 登录视图 @@ -55,8 +58,7 @@ export const ForgetPasswordView: React.FC = React.memo(() => {
{t('邮箱')}
- {
{!sendedEmail && ( - + )} {sendedEmail && ( <>
{t('OTP')}
- {
{t('新密码')}
- { />
- + )} - +
); diff --git a/client/web/src/routes/Entry/GuestView.tsx b/client/web/src/routes/Entry/GuestView.tsx index c02851e8..88e20844 100644 --- a/client/web/src/routes/Entry/GuestView.tsx +++ b/client/web/src/routes/Entry/GuestView.tsx @@ -13,6 +13,9 @@ import { } from 'tailchat-shared'; import { string } from 'yup'; import { useNavToView } from './utils'; +import { EntryInput } from './components/Input'; +import { PrimaryBtn } from './components/PrimaryBtn'; +import { SecondaryBtn } from './components/SecondaryBtn'; export const GuestView: React.FC = React.memo(() => { const navigate = useNavigate(); @@ -42,8 +45,7 @@ export const GuestView: React.FC = React.memo(() => {
{t('昵称')}
- { />
- + - +
); diff --git a/client/web/src/routes/Entry/LoginView.tsx b/client/web/src/routes/Entry/LoginView.tsx index 65a9cbd2..3426f29a 100644 --- a/client/web/src/routes/Entry/LoginView.tsx +++ b/client/web/src/routes/Entry/LoginView.tsx @@ -13,6 +13,9 @@ import { IconBtn } from '@/components/IconBtn'; import { openModal } from '@/components/Modal'; import { ServiceUrlSettings } from '@/components/modals/ServiceUrlSettings'; import { LanguageSelect } from '@/components/LanguageSelect'; +import { EntryInput } from './components/Input'; +import { SecondaryBtn } from './components/SecondaryBtn'; +import { PrimaryBtn } from './components/PrimaryBtn'; /** * TODO: @@ -82,9 +85,8 @@ export const LoginView: React.FC = React.memo(() => {
{t('邮箱')}
- {
{t('密码')}
- {
)} - + - + - +
diff --git a/client/web/src/routes/Entry/RegisterView.tsx b/client/web/src/routes/Entry/RegisterView.tsx index c724b23f..855dc2eb 100644 --- a/client/web/src/routes/Entry/RegisterView.tsx +++ b/client/web/src/routes/Entry/RegisterView.tsx @@ -8,6 +8,9 @@ import { setUserJWT } from '../../utils/jwt-helper'; import { setGlobalUserLoginInfo } from '../../utils/user-helper'; import { useSearchParam } from '@/hooks/useSearchParam'; import { useNavToView } from './utils'; +import { EntryInput } from './components/Input'; +import { SecondaryBtn } from './components/SecondaryBtn'; +import { PrimaryBtn } from './components/PrimaryBtn'; /** * 注册视图 @@ -15,6 +18,7 @@ import { useNavToView } from './utils'; export const RegisterView: React.FC = React.memo(() => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const [emailOTP, setEmailOTP] = useState(''); const navigate = useNavigate(); const navRedirect = useSearchParam('redirect'); @@ -29,7 +33,7 @@ export const RegisterView: React.FC = React.memo(() => { .required(t('密码不能为空')) .validate(password); - const data = await registerWithEmail(email, password); + const data = await registerWithEmail(email, password, emailOTP); setGlobalUserLoginInfo(data); await setUserJWT(data.token); @@ -39,7 +43,7 @@ export const RegisterView: React.FC = React.memo(() => { } else { navigate('/main'); } - }, [email, password, navRedirect]); + }, [email, password, emailOTP, navRedirect]); const navToView = useNavToView(); @@ -50,20 +54,19 @@ export const RegisterView: React.FC = React.memo(() => {
{t('邮箱')}
- setEmail(e.target.value)} />
+
{t('密码')}
- { {error &&

{error.message}

} - + - +
); diff --git a/client/web/src/routes/Entry/components/Input.tsx b/client/web/src/routes/Entry/components/Input.tsx new file mode 100644 index 00000000..d4fa8372 --- /dev/null +++ b/client/web/src/routes/Entry/components/Input.tsx @@ -0,0 +1,18 @@ +import clsx from 'clsx'; +import React, { InputHTMLAttributes } from 'react'; + +export const EntryInput: React.FC> = + React.memo((props) => { + return ( + + {props.children} + + ); + }); +EntryInput.displayName = 'EntryInput'; diff --git a/client/web/src/routes/Entry/components/PrimaryBtn.tsx b/client/web/src/routes/Entry/components/PrimaryBtn.tsx new file mode 100644 index 00000000..06c75971 --- /dev/null +++ b/client/web/src/routes/Entry/components/PrimaryBtn.tsx @@ -0,0 +1,24 @@ +import { Spinner } from '@/components/Spinner'; +import clsx from 'clsx'; +import React, { ButtonHTMLAttributes } from 'react'; + +export const PrimaryBtn: React.FC< + ButtonHTMLAttributes & { + loading?: boolean; + } +> = React.memo((props) => { + return ( + + ); +}); +PrimaryBtn.displayName = 'PrimaryBtn'; diff --git a/client/web/src/routes/Entry/components/SecondaryBtn.tsx b/client/web/src/routes/Entry/components/SecondaryBtn.tsx new file mode 100644 index 00000000..e6239a4d --- /dev/null +++ b/client/web/src/routes/Entry/components/SecondaryBtn.tsx @@ -0,0 +1,18 @@ +import clsx from 'clsx'; +import React, { ButtonHTMLAttributes } from 'react'; + +export const SecondaryBtn: React.FC> = + React.memo((props) => { + return ( + + ); + }); +SecondaryBtn.displayName = 'SecondaryBtn';