From 14edd3c3906702adb0e58aaf43bd4cb6f8723c4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B9=E6=B3=A1=E6=B3=A1=E7=9A=84=E5=9B=A2=E5=AD=90?= Date: Tue, 19 Sep 2023 20:13:29 +0800 Subject: [PATCH] feat:login --- threadpool/console-new/src/context/index.tsx | 23 ++++- .../console-new/src/page/login/index.tsx | 84 ++++++++++++++++++- .../console-new/src/page/login/router.tsx | 8 ++ .../console-new/src/page/login/service.ts | 23 +++++ 4 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 threadpool/console-new/src/page/login/router.tsx create mode 100644 threadpool/console-new/src/page/login/service.ts diff --git a/threadpool/console-new/src/context/index.tsx b/threadpool/console-new/src/context/index.tsx index a301aa29..c04f03d6 100644 --- a/threadpool/console-new/src/context/index.tsx +++ b/threadpool/console-new/src/context/index.tsx @@ -18,11 +18,19 @@ export enum LANG_NAME { EN = 'en', } +export type USER_INFO = { + userName?: string; + passWord?: string | number; + rememberMe?: number; +}; + export const MyContext = createContext<{ themeName: string; lang: LANG_NAME; + userInfo: object; setThemeName: (name: THEME_NAME) => void; setLang: (lang: LANG_NAME) => void; + setUserInfo: (userInfo: USER_INFO) => void; } | null>(null); export const MyStore: React.FC<{ @@ -30,6 +38,11 @@ export const MyStore: React.FC<{ }> = ({ children }) => { const [themeName, setThemeName] = useState(THEME_NAME.DEFAULT); const [lang, setLang] = useState(LANG_NAME.ZH); + const [userInfo, setUserInfo] = useState({ + userName: '', + passWord: '', + rememberMe: 1, + }); const [themes, setThemes] = useState(defaultAlgorithm); const [myThemes, setMyThemes] = useState(lightDefaultTheme); const { i18n } = useTranslation(); @@ -48,6 +61,10 @@ export const MyStore: React.FC<{ } }; + const changeUserInfo = (userInfo: USER_INFO) => { + setUserInfo(userInfo); + }; + useEffect(() => { changeMode(themeName); }, [themeName]); @@ -57,8 +74,12 @@ export const MyStore: React.FC<{ i18n.changeLanguage(lang); }, [lang, i18n]); + useEffect(() => { + changeUserInfo(userInfo); + }, [userInfo]); + return ( - + {children} diff --git a/threadpool/console-new/src/page/login/index.tsx b/threadpool/console-new/src/page/login/index.tsx index 99427fb0..cd4f37ba 100644 --- a/threadpool/console-new/src/page/login/index.tsx +++ b/threadpool/console-new/src/page/login/index.tsx @@ -1,6 +1,84 @@ -import React from 'react'; +import { Form, Input, Button } from 'antd'; +import React, { useState, useContext } from 'react'; +import { getLogin } from './service'; +import { MyContext } from '@/context'; -const Login = () => { - return <>; +const Login = (props: any) => { + const { userInfo, setUserInfo } = useContext(MyContext); + + const data = { + passwordType: 'password', + capsTooltip: false, + loading: false, + showDialog: false, + redirect: undefined, + otherQuery: {}, + loginForm: { + username: '', + password: '', + rememberMe: 1, + }, + // loginRules: { + // // username: [{ required: true, trigger: 'blur', validator: validateUsername }], + // // password: [{ required: true, trigger: 'blur', validator: this.validatePassword }], + // }, + }; + + const validatePassword = (_: any, value: any) => { + if (value.length < 6) { + return Promise.reject(new Error('The password can not be less than 6 digits')); + } else if (value.length > 72) { + return Promise.reject(new Error('The password can not be greater than 72 digits')); + } + return Promise.resolve(); + }; + + const [form] = Form.useForm(); + const onFinish = () => { + data.loginForm.username = form.getFieldValue('username'); + data.loginForm.password = form.getFieldValue('password'); + data.loginForm.rememberMe = 1; + + data.loading = true; + getLogin(data.loginForm) + .then((resolve: any) => { + console.log(resolve); + setUserInfo(data.loginForm); + //登录成功后将当前登录用户写入cookie + // this.$cookie.set('userName', this.loginForm.username); + // console.log('success submit.'); + // this.$router.push({ path: this.redirect || '/', query: this.otherQuery }); + data.loading = false; + }) + .catch((e: any) => { + console.log('login error.', e); + data.loading = false; + }); + }; + return ( +
+
+
+

你好呀

+ {/*

{{ $t('system.login') }}

*/} +
+ + + + + + + + + +
+
+ ); }; export default Login; diff --git a/threadpool/console-new/src/page/login/router.tsx b/threadpool/console-new/src/page/login/router.tsx new file mode 100644 index 00000000..022b472c --- /dev/null +++ b/threadpool/console-new/src/page/login/router.tsx @@ -0,0 +1,8 @@ +import { lazy } from 'react'; +import { IRouterList } from '@/typings'; + +const Login = lazy(() => import('./index')); + +const routerList: IRouterList[] = [{ path: '/login', component: () => }]; + +export default routerList; diff --git a/threadpool/console-new/src/page/login/service.ts b/threadpool/console-new/src/page/login/service.ts new file mode 100644 index 00000000..2f7e4dc8 --- /dev/null +++ b/threadpool/console-new/src/page/login/service.ts @@ -0,0 +1,23 @@ +import request from '@/utils'; + +const getLogin = async (formData: { username: string; password: string | number; rememberMe: number }) => { + return await request('/auth/login', { + method: 'GET', + params: { + ...formData, + }, + }).catch(err => { + console.log('登陆出错：', err); + }); +}; + +// export function getInfo() { +// return request('get', '/hippo4j/v1/cs/user/info'); +// } + +// export function logout() { +// return request('post', '/hippo4j/v1/cs/user/logout'); +// } +// eslint-disable-next-line import/no-anonymous-default-export + +export { getLogin };