|
|
@@ -1,286 +1,153 @@
|
|
|
-import Footer from '@/components/Footer';
|
|
|
import { login } from '@/services/ant-design-pro/api';
|
|
|
-// import { getFakeCaptcha } from '@/services/ant-design-pro/login';
|
|
|
-import {
|
|
|
- AlipayCircleOutlined,
|
|
|
- LockOutlined,
|
|
|
- // MobileOutlined,
|
|
|
- TaobaoCircleOutlined,
|
|
|
- UserOutlined,
|
|
|
- WeiboCircleOutlined,
|
|
|
-} from '@ant-design/icons';
|
|
|
-import {
|
|
|
- LoginForm,
|
|
|
- // ProFormCaptcha,
|
|
|
- ProFormCheckbox,
|
|
|
- ProFormText,
|
|
|
-} from '@ant-design/pro-components';
|
|
|
-import { Alert, message } from 'antd';
|
|
|
-import React, { useState } from 'react';
|
|
|
-import { FormattedMessage, history, SelectLang, useIntl, useModel } from 'umi';
|
|
|
+import { getCaptchaId } from '@/services/ant-design-pro/login';
|
|
|
+import { DefaultFooter } from '@ant-design/pro-components';
|
|
|
+import { Button, Form, Input, message } from 'antd';
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
+import { history, useModel } from 'umi';
|
|
|
import styles from './index.less';
|
|
|
+import md5 from 'js-md5';
|
|
|
|
|
|
-const LoginMessage: React.FC<{
|
|
|
- content: string;
|
|
|
-}> = ({ content }) => (
|
|
|
- <Alert
|
|
|
- style={{
|
|
|
- marginBottom: 24,
|
|
|
- }}
|
|
|
- message={content}
|
|
|
- type="error"
|
|
|
- showIcon
|
|
|
- />
|
|
|
-);
|
|
|
+const FormItem = Form.Item;
|
|
|
+
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @returns footer
|
|
|
+ */
|
|
|
+const Footer: React.FC = () => {
|
|
|
+ const currentYear = new Date().getFullYear();
|
|
|
+ const defaultMessage = '永续绿建web管理平台';
|
|
|
+ return <DefaultFooter className={styles.footer} copyright={`${currentYear} ${defaultMessage}`} />;
|
|
|
+};
|
|
|
|
|
|
const Login: React.FC = () => {
|
|
|
- const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
|
|
|
- const [type] = useState<string>('account');
|
|
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
+ const [captcha_id, setCaptcha_id] = useState('');
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取验证码id
|
|
|
+ */
|
|
|
+ const fetchCaptcha = () => {
|
|
|
+ getCaptchaId().then(async (res) => {
|
|
|
+ setCaptcha_id(res.captcha_id);
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
- const intl = useIntl();
|
|
|
+ /**
|
|
|
+ * 初始化
|
|
|
+ */
|
|
|
+ useEffect(() => {
|
|
|
+ fetchCaptcha();
|
|
|
+ }, []);
|
|
|
|
|
|
+ /**
|
|
|
+ * 获取账号用户信息
|
|
|
+ */
|
|
|
const fetchUserInfo = async () => {
|
|
|
const userInfo = await initialState?.fetchUserInfo?.();
|
|
|
if (userInfo) {
|
|
|
- await setInitialState((s) => ({
|
|
|
- ...s,
|
|
|
- currentUser: userInfo,
|
|
|
- }));
|
|
|
+ await setInitialState((s: any) => ({ ...s, currentUser: userInfo }));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ /**
|
|
|
+ * 登录
|
|
|
+ * @param values
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
const handleSubmit = async (values: API.LoginParams) => {
|
|
|
try {
|
|
|
- // 登录
|
|
|
- const msg = await login({ ...values, type });
|
|
|
- if (msg.status === 'ok') {
|
|
|
- const defaultLoginSuccessMessage = intl.formatMessage({
|
|
|
- id: 'pages.login.success',
|
|
|
- defaultMessage: '登录成功！',
|
|
|
- });
|
|
|
- message.success(defaultLoginSuccessMessage);
|
|
|
+ const body = {
|
|
|
+ ...values,
|
|
|
+ password: md5(values.password),
|
|
|
+ captcha_id,
|
|
|
+ };
|
|
|
+ const msg = await login(body);
|
|
|
+ if (!msg?.error) {
|
|
|
+ if (localStorage.getItem('token') == null || localStorage.getItem('token') == undefined) {
|
|
|
+ localStorage.setItem('token', '');
|
|
|
+ }
|
|
|
+ localStorage.setItem('token', `${msg.token_type} ${msg.access_token}`);
|
|
|
+ message.success(`欢迎登录系统`);
|
|
|
await fetchUserInfo();
|
|
|
- /** 此方法会跳转到 redirect 参数所在的位置 */
|
|
|
+ history.push('/');
|
|
|
if (!history) return;
|
|
|
const { query } = history.location;
|
|
|
const { redirect } = query as { redirect: string };
|
|
|
history.push(redirect || '/');
|
|
|
- return;
|
|
|
+ } else {
|
|
|
+ message.error(msg?.error?.message || '登录失败');
|
|
|
}
|
|
|
- console.log(msg);
|
|
|
- // 如果失败去设置用户错误信息
|
|
|
- setUserLoginState(msg);
|
|
|
} catch (error) {
|
|
|
- const defaultLoginFailureMessage = intl.formatMessage({
|
|
|
- id: 'pages.login.failure',
|
|
|
- defaultMessage: '登录失败，请重试！',
|
|
|
- });
|
|
|
- message.error(defaultLoginFailureMessage);
|
|
|
+ // const _ = fetchCaptcha();
|
|
|
+ message.success(`登录失败`);
|
|
|
}
|
|
|
};
|
|
|
- const { status, type: loginType } = userLoginState;
|
|
|
|
|
|
return (
|
|
|
<div className={styles.container}>
|
|
|
- <div className={styles.lang} data-lang>
|
|
|
- {SelectLang && <SelectLang />}
|
|
|
- </div>
|
|
|
- <div className={styles.content}>
|
|
|
- <LoginForm
|
|
|
- logo={<img alt="logo" src="/logo.svg" />}
|
|
|
- title="永续绿建后台管理系统"
|
|
|
- subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
|
|
|
- initialValues={{
|
|
|
- autoLogin: true,
|
|
|
- }}
|
|
|
- actions={[
|
|
|
- <FormattedMessage
|
|
|
- key="loginWith"
|
|
|
- id="pages.login.loginWith"
|
|
|
- defaultMessage="其他登录方式"
|
|
|
- />,
|
|
|
- <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon} />,
|
|
|
- <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon} />,
|
|
|
- <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon} />,
|
|
|
- ]}
|
|
|
- onFinish={async (values) => {
|
|
|
- await handleSubmit(values as API.LoginParams);
|
|
|
- }}
|
|
|
- >
|
|
|
- {/* <Tabs activeKey={type} onChange={setType}>
|
|
|
- <Tabs.TabPane
|
|
|
- key="account"
|
|
|
- tab={intl.formatMessage({
|
|
|
- id: 'pages.login.accountLogin.tab',
|
|
|
- defaultMessage: '账户密码登录',
|
|
|
- })}
|
|
|
- />
|
|
|
- <Tabs.TabPane
|
|
|
- key="mobile"
|
|
|
- tab={intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.tab',
|
|
|
- defaultMessage: '手机号登录',
|
|
|
- })}
|
|
|
- />
|
|
|
- </Tabs> */}
|
|
|
-
|
|
|
- {status === 'error' && loginType === 'account' && (
|
|
|
- <LoginMessage
|
|
|
- content={intl.formatMessage({
|
|
|
- id: 'pages.login.accountLogin.errorMessage',
|
|
|
- defaultMessage: '账户或密码错误(admin/ant.design)',
|
|
|
- })}
|
|
|
- />
|
|
|
- )}
|
|
|
- {/* {type === 'account' && ( */}
|
|
|
- <>
|
|
|
- <ProFormText
|
|
|
- name="username"
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <UserOutlined className={styles.prefixIcon} />,
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.username.placeholder',
|
|
|
- defaultMessage: '手机号: XXX',
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.username.required"
|
|
|
- defaultMessage="请输入手机号!"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
- <ProFormText.Password
|
|
|
- name="password"
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <LockOutlined className={styles.prefixIcon} />,
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.password.placeholder',
|
|
|
- defaultMessage: '密码: ant.design',
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.password.required"
|
|
|
- defaultMessage="请输入密码！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
- </>
|
|
|
- {/* )} */}
|
|
|
-
|
|
|
- {/* {status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
|
|
|
- {type === 'mobile' && (
|
|
|
- <>
|
|
|
- <ProFormText
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <MobileOutlined className={styles.prefixIcon} />,
|
|
|
- }}
|
|
|
- name="mobile"
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.phoneNumber.placeholder',
|
|
|
- defaultMessage: '手机号',
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.required"
|
|
|
- defaultMessage="请输入手机号！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- pattern: /^1\d{10}$/,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.phoneNumber.invalid"
|
|
|
- defaultMessage="手机号格式错误！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
+ <div className={styles.loginBox}>
|
|
|
+ <img alt="请登录" src="/assets/login-left.png" className={styles.login_bg} />
|
|
|
+ <div className={styles.main}>
|
|
|
+ <div className={styles.title}>
|
|
|
+ <img src="/assets/logo.png" alt="logo" className={styles.logoStyle} />
|
|
|
+ </div>
|
|
|
+ <Form layout="vertical" onFinish={handleSubmit}>
|
|
|
+ <FormItem
|
|
|
+ rules={[{ required: true, message: '请输入用户名!' }]}
|
|
|
+ className={styles.formItem}
|
|
|
+ name="user_name"
|
|
|
+ label="用户名"
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ className={styles.formItemInput}
|
|
|
+ size="large"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ allowClear
|
|
|
/>
|
|
|
- <ProFormCaptcha
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <LockOutlined className={styles.prefixIcon} />,
|
|
|
- }}
|
|
|
- captchaProps={{
|
|
|
- size: 'large',
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.captcha.placeholder',
|
|
|
- defaultMessage: '请输入验证码',
|
|
|
- })}
|
|
|
- captchaTextRender={(timing, count) => {
|
|
|
- if (timing) {
|
|
|
- return `${count} ${intl.formatMessage({
|
|
|
- id: 'pages.getCaptchaSecondText',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- })}`;
|
|
|
- }
|
|
|
- return intl.formatMessage({
|
|
|
- id: 'pages.login.phoneLogin.getVerificationCode',
|
|
|
- defaultMessage: '获取验证码',
|
|
|
- });
|
|
|
- }}
|
|
|
- name="captcha"
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.captcha.required"
|
|
|
- defaultMessage="请输入验证码！"
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- onGetCaptcha={async (phone) => {
|
|
|
- const result = await getFakeCaptcha({
|
|
|
- phone,
|
|
|
- });
|
|
|
- if (result === false) {
|
|
|
- return;
|
|
|
- }
|
|
|
- message.success('获取验证码成功！验证码为：1234');
|
|
|
- }}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ className={styles.formItem}
|
|
|
+ name="password"
|
|
|
+ label="密码"
|
|
|
+ rules={[{ required: true, message: '请输入密码!' }]}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ className={styles.formItemInput}
|
|
|
+ size="large"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ allowClear
|
|
|
/>
|
|
|
- </>
|
|
|
- )} */}
|
|
|
- <div
|
|
|
- style={{
|
|
|
- marginBottom: 24,
|
|
|
- }}
|
|
|
- >
|
|
|
- <ProFormCheckbox noStyle name="autoLogin">
|
|
|
- <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
|
|
|
- </ProFormCheckbox>
|
|
|
- <a
|
|
|
- style={{
|
|
|
- float: 'right',
|
|
|
- }}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem
|
|
|
+ className={styles.formItem}
|
|
|
+ name="captcha_code"
|
|
|
+ label="验证码"
|
|
|
+ rules={[{ required: true, message: '请输入验证码!' }]}
|
|
|
>
|
|
|
- <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </LoginForm>
|
|
|
+ <Input
|
|
|
+ className={styles.formItemInput}
|
|
|
+ size="large"
|
|
|
+ suffix={
|
|
|
+ <img
|
|
|
+ className={styles.captcha}
|
|
|
+ onClick={() => {
|
|
|
+ fetchCaptcha();
|
|
|
+ }}
|
|
|
+ src={`/web/v1/login/captcha?id=${captcha_id}`}
|
|
|
+ alt="验证码"
|
|
|
+ />
|
|
|
+ }
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ />
|
|
|
+ </FormItem>
|
|
|
+ <div>
|
|
|
+ <Button className={styles.submit} htmlType="submit">
|
|
|
+ 登录
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<Footer />
|
|
|
</div>
|
