aiden
/
tailchat
mirror of https://github.com/msgbyte/tailchat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: login 登录重定向与部分翻译

Browse Source
pull/13/head
moonrailgun 4 years ago
parent 024a14d20e
commit eae14458f1
2 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File

35
web/src/routes/Entry/LoginView.tsx
Unescape Escape View File

@ -1,12 +1,13 @@
import { Icon } from '@iconify/react';
import { Divider } from 'antd';
import { loginWithEmail, t, useAsyncFn } from 'tailchat-shared';
import { isValidStr, loginWithEmail, t, useAsyncFn } from 'tailchat-shared';
import React, { useCallback, useState } from 'react';
import { Spinner } from '../../components/Spinner';
import { string } from 'yup';
import { useHistory } from 'react-router';
import { setUserJWT } from '../../utils/jwt-helper';
import { setGlobalUserLoginInfo } from '../../utils/user-helper';
import { useSearchParam } from '@/hooks/useSearchParam';
/**
* TODO:
@ -15,7 +16,7 @@ import { setGlobalUserLoginInfo } from '../../utils/user-helper';
const OAuthLoginView: React.FC = React.memo(() => {
return (
<>
<Divider>或</Divider>
<Divider>{t('或')}</Divider>
<div className="bg-gray-400 w-1/3 px-4 py-1 text-3xl text-center rounded-md cursor-pointer shadow-md">
<Icon className="mx-auto" icon="mdi:github" />
@ -32,32 +33,42 @@ export const LoginView: React.FC = React.memo(() => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const history = useHistory();
const navRedirect = useSearchParam('redirect');
const [{ loading, error }, handleLogin] = useAsyncFn(async () => {
await string()
.email('邮箱格式不正确')
.required('邮箱不能为空')
.email(t('邮箱格式不正确'))
.required(t('邮箱不能为空'))
.validate(email);
await string()
.min(6, '密码不能低于6位')
.required('密码不能为空')
.min(6, t('密码不能低于6位'))
.required(t('密码不能为空'))
.validate(password);
const data = await loginWithEmail(email, password);
setGlobalUserLoginInfo(data);
await setUserJWT(data.token);
if (isValidStr(navRedirect)) {
history.push(decodeURIComponent(navRedirect));
} else {
history.push('/main');
}, [email, password, history]);
}
}, [email, password, history, navRedirect]);
const toRegisterView = useCallback(() => {
history.push('/entry/register');
// 携带上下文切换路由
history.push({
...history.location,
pathname: '/entry/register',
});
}, [history]);
return (
<div className="w-96 text-white">
<div className="mb-4 text-2xl">登录 Tail Chat</div>
<div className="mb-4 text-2xl">{t('登录 Tail Chat')}</div>
<div>
<div className="mb-4">
@ -72,7 +83,7 @@ export const LoginView: React.FC = React.memo(() => {
/>
</div>
<div className="mb-4">
<div className="mb-2">密码</div>
<div className="mb-2">{t('密码')}</div>
<input
name="login-password"
className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
@ -91,7 +102,7 @@ export const LoginView: React.FC = React.memo(() => {
onClick={handleLogin}
>
{loading && <Spinner />}
登录
{t('登录')}
</button>
<button
@ -99,7 +110,7 @@ export const LoginView: React.FC = React.memo(() => {
disabled={loading}
onClick={toRegisterView}
>
注册账号
{t('注册账号')}
<Icon icon="mdi:arrow-right" className="ml-1 inline" />
</button>
</div>

27
web/src/routes/Entry/RegisterView.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import { registerWithEmail, useAsyncFn } from 'tailchat-shared';
import { isValidStr, registerWithEmail, t, useAsyncFn } from 'tailchat-shared';
import React, { useCallback, useState } from 'react';
import { Spinner } from '../../components/Spinner';
import { string } from 'yup';
@ -7,7 +7,6 @@ import { useHistory } from 'react-router';
import { setUserJWT } from '../../utils/jwt-helper';
import { setGlobalUserLoginInfo } from '../../utils/user-helper';
import { useSearchParam } from '@/hooks/useSearchParam';
import { isValidStr } from '../../../../shared/utils/string-helper';
/**
* 注册视图
@ -20,13 +19,13 @@ export const RegisterView: React.FC = React.memo(() => {
const [{ loading, error }, handleRegister] = useAsyncFn(async () => {
await string()
.email('邮箱格式不正确')
.required('邮箱不能为空')
.email(t('邮箱格式不正确'))
.required(t('邮箱不能为空'))
.validate(email);
await string()
.min(6, '密码不能低于6位')
.required('密码不能为空')
.min(6, t('密码不能低于6位'))
.required(t('密码不能为空'))
.validate(password);
const data = await registerWithEmail(email, password);
@ -42,16 +41,20 @@ export const RegisterView: React.FC = React.memo(() => {
}, [email, password, navRedirect]);
const toLoginView = useCallback(() => {
history.push('/entry/login');
// 携带上下文切换路由
history.push({
...history.location,
pathname: '/entry/login',
});
}, [history]);
return (
<div className="w-96 text-white">
<div className="mb-4 text-2xl">注册账号</div>
<div className="mb-4 text-2xl">{t('注册账号')}</div>
<div>
<div className="mb-4">
<div className="mb-2">邮箱</div>
<div className="mb-2">{t('邮箱')}</div>
<input
name="reg-email"
className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
@ -62,7 +65,7 @@ export const RegisterView: React.FC = React.memo(() => {
/>
</div>
<div className="mb-4">
<div className="mb-2">密码</div>
<div className="mb-2">{t('密码')}</div>
<input
name="reg-password"
className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
@ -81,7 +84,7 @@ export const RegisterView: React.FC = React.memo(() => {
onClick={handleRegister}
>
{loading && <Spinner />}
注册账号
{t('注册账号')}
</button>
<button
@ -90,7 +93,7 @@ export const RegisterView: React.FC = React.memo(() => {
onClick={toLoginView}
>
<Icon icon="mdi:arrow-left" className="mr-1 inline" />
返回登录
{t('返回登录')}
</button>
</div>
</div>

Write Preview
Loading…
Cancel
Save