yunpeng/answerBi-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

注册功能

Browse Source
This commit is contained in:
brian 2023-07-12 18:06:29 +08:00
parent bef37b4fd3
commit 2cd917bc26
7 changed files with 184 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# Ans 智能 BI
This project is initialized with [Ans 智能 BI](https://pro.ant.design). Follow is the quick guide for how to use.
This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use.
## Environment Prepare

5
config/routes.ts
View File

@ -2,7 +2,10 @@ export default [
{
path: '/user',
layout: false,
routes: [{ name: '登录', path: '/user/login', component: './User/Login' }],
routes: [
{ name: '登录', path: '/user/login', component: './User/Login' },
{ name: '注册', path: '/user/register', component: './User/Register' }
],
},
{ path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome' },
{

8
src/app.tsx
View File

@ -24,7 +24,7 @@ export async function getInitialState(): Promise<{
const res = await getLoginUserUsingGET();
return res.data;
} catch (error) {
history.push(loginPath);
//history.push(loginPath);
}
return undefined;
};
@ -59,8 +59,12 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
const whiteList = ['/user/register',loginPath];
if(whiteList.includes(location.pathname)){
return;
}
// 如果没有登录，重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
if (!initialState?.currentUser) {
history.push(loginPath);
}
},

16
src/components/Footer/index.tsx
View File

@ -13,23 +13,17 @@ const Footer: React.FC = () => {
copyright={`${currentYear} ${defaultMessage}`}
links={[
{
key: 'Ans智能BI',
title: 'Ans智能BI',
href: 'https://pro.ant.design',
key: 'blog',
title: 'pengSpace',
href: 'https://pengspace.top',
blankTarget: true,
},
{
key: 'github',
title: <GithubOutlined />,
href: 'https://github.com/ant-design/ant-design-pro',
href: 'https://gitee.com/anscoder',
blankTarget: true,
},
{
key: 'Ans智能BI',
title: 'Ans智能BI',
href: 'https://ant.design',
blankTarget: true,
},
}
]}
/>
);

4
src/components/RightContent/AvatarDropdown.tsx
View File

@ -1,4 +1,4 @@
import { outLogin } from '@/services/ant-design-pro/api';
import { userLogoutUsingPOST } from '@/services/answerbi/userController';
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import { history, useModel } from '@umijs/max';
@ -25,7 +25,7 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, childre
* 退出登录，并且将当前的 url 保存
*/
const loginOut = async () => {
await outLogin();
await userLogoutUsingPOST();
const { search, pathname } = window.location;
const urlParams = new URL(window.location.href).searchParams;
/** 此方法会跳转到 redirect 参数所在的位置 */

12
src/pages/User/Login/index.tsx
View File

@ -1,12 +1,11 @@
import Footer from '@/components/Footer';
import { listChartByPageUsingPOST } from '@/services/answerbi/chartController';
import { getLoginUserUsingGET, userLoginUsingPOST } from '@/services/answerbi/userController';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import { Helmet, history, Link, useModel } from '@umijs/max';
import { message, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { Helmet, Link, history, useModel } from '@umijs/max';
import { Tabs, message } from 'antd';
import React, { useState } from 'react';
import { flushSync } from 'react-dom';
import Settings from '../../../../config/defaultSettings';
const Login: React.FC = () => {
@ -23,11 +22,6 @@ const Login: React.FC = () => {
backgroundSize: '100% 100%',
};
});
useEffect(() => {
listChartByPageUsingPOST({}).then((res) => {
console.error('res', res);
});
});
/**
* 登录成功后，获取用户登录信息
*/

163
src/pages/User/Register/index.tsx Normal file
View File

@ -0,0 +1,163 @@
import Footer from '@/components/Footer';
import { userRegisterUsingPOST } from '@/services/answerbi/userController';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import { Helmet, Link, history } from '@umijs/max';
import { Tabs, message } from 'antd';
import { stringify } from 'querystring';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';
const Register: React.FC = () => {
const [type, setType] = useState<string>('account');
const containerClassName = useEmotionCss(() => {
return {
display: 'flex',
flexDirection: 'column',
height: '100vh',
overflow: 'auto',
backgroundImage:
"url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
backgroundSize: '100% 100%',
};
});
const handleSubmit = async (values: API.UserRegisterRequest) => {
const { userPassword, checkPassword } = values;
//校验
if (userPassword !== checkPassword){
message.error('两次输入的密码不一致！');
return;
}
try {
// 注册
const res = await userRegisterUsingPOST(values);
if (res.code === 0) {
const defaultLoginSuccessMessage = '注册成功，跳转登录页！';
message.success(defaultLoginSuccessMessage);
const { search, pathname } = window.location;
const urlParams = new URL(window.location.href).searchParams;
/** 此方法会跳转到 redirect 参数所在的位置 */
const redirect = urlParams.get('redirect');
// Note: There may be security issues, please note
if (window.location.pathname !== '/user/login' && !redirect) {
history.replace({
pathname: '/user/login',
search: search ? stringify({
redirect: pathname + search,
}):'',
});
}
} else {
message.error(res.message);
}
} catch (error) {
const defaultLoginFailureMessage = '注册失败，请重试！';
console.log(error);
message.error(defaultLoginFailureMessage);
}
};
return (
<div className={containerClassName}>
<Helmet>
<title>
{'注册'}- {Settings.title}
</title>
</Helmet>
<div
style={{
flex: '1',
padding: '32px 0',
}}
>
<LoginForm
submitter={{
searchConfig:{
submitText:'注册'
}
}}
contentStyle={{
minWidth: 280,
maxWidth: '75vw',
}}
logo={<img alt="logo" src="/logo.svg" />}
title="Ans智能BI"
subTitle={'Ans智能BI - 一键生成图表，智能分析'}
onFinish={async (values) => {
await handleSubmit(values as API.UserRegisterRequest);
}}
>
<Tabs
activeKey={type}
onChange={setType}
centered
items={[
{
key: 'account',
label: '账户密码注册',
},
]}
/>
{type === 'account' && (
<>
<ProFormText
name="userAccount"
fieldProps={{
size: 'large',
prefix: <UserOutlined />,
}}
placeholder={'请输入用户名'}
rules={[
{
required: true,
message: '用户名是必填项！',
},
]}
/>
<ProFormText.Password
name="userPassword"
fieldProps={{
size: 'large',
prefix: <LockOutlined />,
}}
placeholder={'请输入密码'}
rules={[
{
required: true,
message: '密码是必填项！',
},
]}
/>
<ProFormText.Password
name="checkPassword"
fieldProps={{
size: 'large',
prefix: <LockOutlined />,
}}
placeholder={'请再次输入密码'}
rules={[
{
required: true,
message: '确认密码是必填项！',
},
]}
/>
</>
)}
<div
style={{
marginBottom: 24,
}}
>
<Link to="/user/login">已有账号? 去登录</Link>
</div>
</LoginForm>
</div>
<Footer />
</div>
);
};
export default Register;