feat:login

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>(THEME_NAME.DEFAULT);
   const [lang, setLang] = useState<LANG_NAME>(LANG_NAME.ZH);
+  const [userInfo, setUserInfo] = useState<USER_INFO>({
+    userName: '',
+    passWord: '',
+    rememberMe: 1,
+  });
   const [themes, setThemes] = useState(defaultAlgorithm);
   const [myThemes, setMyThemes] = useState<DefaultTheme>(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 (
-    <MyContext.Provider value={{ themeName, lang, setThemeName, setLang }}>
+    <MyContext.Provider value={{ themeName, lang, userInfo, setThemeName, setLang, setUserInfo }}>
       <ConfigProvider locale={lang === LANG_NAME.ZH ? zhCN : enUS} theme={themes}>
         <ThemeProvider theme={myThemes}>{children}</ThemeProvider>
       </ConfigProvider>

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<any>(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 (
+    <div className="login-container">
+      <Form name="loginForm" form={form} onFinish={onFinish} style={{ maxWidth: 600 }}>
+        <div className="title-container">
+          <h3 className="title">你好呀</h3>
+          {/* <h3 className="title">{{ $t('system.login') }}</h3> */}
+        </div>
+        <Form.Item name="username" label="用户名" rules={[{ required: true, message: 'Username is required' }]}>
+          <Input placeholder="用户名" />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
+          rules={[{ validator: validatePassword }, { required: true, message: 'Street is required' }]}
+        >
+          <Input placeholder="密码" />
+        </Form.Item>
+        <Form.Item name="submit">
+          <Button type="primary" htmlType="submit" className="login-button">
+            登录
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
 };
 export default Login;

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: () => <Login /> }];
+
+export default routerList;

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