注册功能

README.md

@@ -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
 

config/routes.ts

@@ -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' },
   {

src/app.tsx

@@ -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);
       }
     },

src/components/Footer/index.tsx

@@ -13,23 +13,17 @@ const Footer: React.FC = () => {
       copyright={`${currentYear} ${defaultMessage}`}
       links={[
         {
-          key: 'Ans智能BI',
+          key: 'blog',
-          title: 'Ans智能BI',
+          title: 'pengSpace',
-          href: 'https://pro.ant.design',
+          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,
-        },
       ]}
     />
   );

src/components/RightContent/AvatarDropdown.tsx

@@ -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 参数所在的位置 */

src/pages/User/Login/index.tsx

@@ -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 { Helmet, Link, history, useModel } from '@umijs/max';
-import { message, Tabs } from 'antd';
+import { Tabs, message } from 'antd';
-import React, { useEffect, useState } from 'react';
+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);
-    });
-  });
   /**
    * 登录成功后，获取用户登录信息
    */

src/pages/User/Register/index.tsx

@@ -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;