| | |
|---|
| | | import { Footer } from '@/components'; |
|---|
| | | import { login } from '@/services/ant-design-pro/api'; |
|---|
| | | import { getFakeCaptcha } from '@/services/ant-design-pro/login'; |
|---|
| | | import { |
|---|
| | | LockOutlined, |
|---|
| | | MobileOutlined, |
|---|
| | | UserOutlined, |
|---|
| | | } from '@ant-design/icons'; |
|---|
| | | import { |
|---|
| | | LoginForm, |
|---|
| | | ProFormCaptcha, |
|---|
| | | ProFormCheckbox, |
|---|
| | | ProFormText, |
|---|
| | | } from '@ant-design/pro-components'; |
|---|
| | | import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max'; |
|---|
| | | import { Alert, message, Tabs } from 'antd'; |
|---|
| | | import React, { useState } from 'react'; |
|---|
| | | import { flushSync } from 'react-dom'; |
|---|
| | | import { createStyles } from 'antd-style'; |
|---|
| | | import { request } from '@umijs/max'; |
|---|
| | | import { setToken } from '@/utils/token-util' |
|---|
| | | import { PROJECT_NAME } from '@/config/setting' |
|---|
| | | |
|---|
| | | const useStyles = createStyles(({ token }) => { |
|---|
| | | return { |
|---|
| | | action: { |
|---|
| | | marginLeft: '8px', |
|---|
| | | color: 'rgba(0, 0, 0, 0.2)', |
|---|
| | | fontSize: '24px', |
|---|
| | | verticalAlign: 'middle', |
|---|
| | | cursor: 'pointer', |
|---|
| | | transition: 'color 0.3s', |
|---|
| | | '&:hover': { |
|---|
| | | color: token.colorPrimaryActive, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | lang: { |
|---|
| | | width: 42, |
|---|
| | | height: 42, |
|---|
| | | lineHeight: '42px', |
|---|
| | | position: 'fixed', |
|---|
| | | right: 16, |
|---|
| | | borderRadius: token.borderRadius, |
|---|
| | | ':hover': { |
|---|
| | | backgroundColor: token.colorBgTextHover, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | container: { |
|---|
| | | 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 Lang = () => { |
|---|
| | | const { styles } = useStyles(); |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div className={styles.lang} data-lang> |
|---|
| | | {SelectLang && <SelectLang />} |
|---|
| | | </div> |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const LoginMessage = ({ content }) => { |
|---|
| | | return ( |
|---|
| | | <Alert |
|---|
| | | style={{ |
|---|
| | | marginBottom: 24, |
|---|
| | | }} |
|---|
| | | message={content} |
|---|
| | | type="error" |
|---|
| | | showIcon |
|---|
| | | /> |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const Login = () => { |
|---|
| | | const [userLoginState, setUserLoginState] = useState({}); |
|---|
| | | const [type, setType] = useState('account'); |
|---|
| | | const { initialState, setInitialState } = useModel('@@initialState'); |
|---|
| | | const { styles } = useStyles(); |
|---|
| | | const intl = useIntl(); |
|---|
| | | |
|---|
| | | console.log(initialState.memo); |
|---|
| | | |
|---|
| | | const fetchUserInfo = async () => { |
|---|
| | | const userInfo = await initialState?.fetchUserInfo?.(); |
|---|
| | | if (userInfo) { |
|---|
| | | flushSync(() => { |
|---|
| | | setInitialState((s) => ({ |
|---|
| | | ...s, |
|---|
| | | currentUser: userInfo, |
|---|
| | | })); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleSubmit = async (values) => { |
|---|
| | | try { |
|---|
| | | const r = await request('/api/login', { |
|---|
| | | method: 'POST', |
|---|
| | | headers: { |
|---|
| | | 'Content-Type': 'application/json' |
|---|
| | | }, |
|---|
| | | data: values |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (r.code === 200) { |
|---|
| | | message.success(intl.formatMessage({ |
|---|
| | | id: 'pages.login.success', |
|---|
| | | defaultMessage: '登录成功！', |
|---|
| | | })); |
|---|
| | | setToken(r.data.accessToken, values.autoLogin); |
|---|
| | | await fetchUserInfo(); |
|---|
| | | const urlParams = new URL(window.location.href).searchParams; |
|---|
| | | history.push(urlParams.get('redirect') || '/'); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | setUserLoginState({ |
|---|
| | | status: r.code, |
|---|
| | | type: type, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 登录 |
|---|
| | | // const msg = await login({ ...values, type }); |
|---|
| | | // if (msg.status === 'ok') { |
|---|
| | | // const defaultLoginSuccessMessage = intl.formatMessage({ |
|---|
| | | // id: 'pages.login.success', |
|---|
| | | // defaultMessage: '登录成功！', |
|---|
| | | // }); |
|---|
| | | // message.success(defaultLoginSuccessMessage); |
|---|
| | | // await fetchUserInfo(); |
|---|
| | | // const urlParams = new URL(window.location.href).searchParams; |
|---|
| | | // history.push(urlParams.get('redirect') || '/'); |
|---|
| | | // return; |
|---|
| | | // } |
|---|
| | | // // 如果失败去设置用户错误信息 |
|---|
| | | // setUserLoginState(msg); |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | message.error(intl.formatMessage({ |
|---|
| | | id: 'pages.login.failure', |
|---|
| | | defaultMessage: '登录失败，请重试！', |
|---|
| | | })); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | const { status, type: loginType } = userLoginState; |
|---|
| | | return ( |
|---|
| | | <div className={styles.container}> |
|---|
| | | <Helmet> |
|---|
| | | <title> |
|---|
| | | {intl.formatMessage({ |
|---|
| | | id: 'menu.login', |
|---|
| | | defaultMessage: '登录页', |
|---|
| | | })} |
|---|
| | | - {PROJECT_NAME} |
|---|
| | | </title> |
|---|
| | | </Helmet> |
|---|
| | | <Lang /> |
|---|
| | | <div style={{ flex: '1', padding: '32px 0', }} > |
|---|
| | | <LoginForm |
|---|
| | | contentStyle={{ |
|---|
| | | minWidth: 280, |
|---|
| | | maxWidth: '75vw', |
|---|
| | | }} |
|---|
| | | logo={<img alt="logo" src="/logo.svg" />} |
|---|
| | | title="Ant Design" |
|---|
| | | subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })} |
|---|
| | | initialValues={{ |
|---|
| | | autoLogin: true, |
|---|
| | | }} |
|---|
| | | onFinish={async (values) => { |
|---|
| | | await handleSubmit(values); |
|---|
| | | }} |
|---|
| | | > |
|---|
| | | <Tabs |
|---|
| | | activeKey={type} |
|---|
| | | onChange={setType} |
|---|
| | | centered |
|---|
| | | items={[ |
|---|
| | | { |
|---|
| | | key: 'account', |
|---|
| | | label: intl.formatMessage({ |
|---|
| | | id: 'pages.login.accountLogin.tab', |
|---|
| | | defaultMessage: '账户密码登录', |
|---|
| | | }), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | key: 'mobile', |
|---|
| | | label: intl.formatMessage({ |
|---|
| | | id: 'pages.login.phoneLogin.tab', |
|---|
| | | defaultMessage: '手机号登录', |
|---|
| | | }), |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | |
|---|
| | | {status !== 200 && loginType === 'account' && ( |
|---|
| | | <LoginMessage |
|---|
| | | content={intl.formatMessage({ |
|---|
| | | id: 'pages.login.accountLogin.errorMessage', |
|---|
| | | defaultMessage: '账户或密码错误', |
|---|
| | | })} |
|---|
| | | /> |
|---|
| | | )} |
|---|
| | | {type === 'account' && ( |
|---|
| | | <> |
|---|
| | | <ProFormText |
|---|
| | | name="username" |
|---|
| | | fieldProps={{ |
|---|
| | | size: 'large', |
|---|
| | | prefix: <UserOutlined />, |
|---|
| | | }} |
|---|
| | | placeholder={intl.formatMessage({ |
|---|
| | | id: 'pages.login.username.placeholder', |
|---|
| | | defaultMessage: '用户名:', |
|---|
| | | })} |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: ( |
|---|
| | | <FormattedMessage |
|---|
| | | id="pages.login.username.required" |
|---|
| | | defaultMessage="请输入用户名!" |
|---|
| | | /> |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormText.Password |
|---|
| | | name="password" |
|---|
| | | fieldProps={{ |
|---|
| | | size: 'large', |
|---|
| | | prefix: <LockOutlined />, |
|---|
| | | }} |
|---|
| | | placeholder={intl.formatMessage({ |
|---|
| | | id: 'pages.login.password.placeholder', |
|---|
| | | defaultMessage: '密码:', |
|---|
| | | })} |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: ( |
|---|
| | | <FormattedMessage |
|---|
| | | id="pages.login.password.required" |
|---|
| | | defaultMessage="请输入密码！" |
|---|
| | | /> |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | </> |
|---|
| | | )} |
|---|
| | | |
|---|
| | | {status !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />} |
|---|
| | | {type === 'mobile' && ( |
|---|
| | | <> |
|---|
| | | <ProFormText |
|---|
| | | fieldProps={{ |
|---|
| | | size: 'large', |
|---|
| | | prefix: <MobileOutlined />, |
|---|
| | | }} |
|---|
| | | 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="手机号格式错误！" |
|---|
| | | /> |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormCaptcha |
|---|
| | | fieldProps={{ |
|---|
| | | size: 'large', |
|---|
| | | prefix: <LockOutlined />, |
|---|
| | | }} |
|---|
| | | 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) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | message.success('获取验证码成功！验证码为：1234'); |
|---|
| | | }} |
|---|
| | | /> |
|---|
| | | </> |
|---|
| | | )} |
|---|
| | | <div |
|---|
| | | style={{ |
|---|
| | | marginBottom: 24, |
|---|
| | | }} |
|---|
| | | > |
|---|
| | | <ProFormCheckbox noStyle name="autoLogin"> |
|---|
| | | <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" /> |
|---|
| | | </ProFormCheckbox> |
|---|
| | | </div> |
|---|
| | | </LoginForm> |
|---|
| | | </div> |
|---|
| | | <Footer /> |
|---|
| | | </div> |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default Login; |
|---|
| | | import { Footer } from '@/components';
|
|---|
| | | import { login } from '@/services/ant-design-pro/api';
|
|---|
| | | import { getFakeCaptcha } from '@/services/ant-design-pro/login';
|
|---|
| | | import {
|
|---|
| | | LockOutlined,
|
|---|
| | | MobileOutlined,
|
|---|
| | | UserOutlined,
|
|---|
| | | } from '@ant-design/icons';
|
|---|
| | | import {
|
|---|
| | | LoginForm,
|
|---|
| | | ProFormCaptcha,
|
|---|
| | | ProFormCheckbox,
|
|---|
| | | ProFormText,
|
|---|
| | | } from '@ant-design/pro-components';
|
|---|
| | | import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
|
|---|
| | | import { Alert, message, Tabs } from 'antd';
|
|---|
| | | import React, { useState } from 'react';
|
|---|
| | | import { flushSync } from 'react-dom';
|
|---|
| | | import { createStyles } from 'antd-style';
|
|---|
| | | import { request } from '@umijs/max';
|
|---|
| | | import { setToken } from '@/utils/token-util'
|
|---|
| | | import { PROJECT_NAME } from '@/config/setting'
|
|---|
| | |
|
|---|
| | | const useStyles = createStyles(({ token }) => {
|
|---|
| | | return {
|
|---|
| | | action: {
|
|---|
| | | marginLeft: '8px',
|
|---|
| | | color: 'rgba(0, 0, 0, 0.2)',
|
|---|
| | | fontSize: '24px',
|
|---|
| | | verticalAlign: 'middle',
|
|---|
| | | cursor: 'pointer',
|
|---|
| | | transition: 'color 0.3s',
|
|---|
| | | '&:hover': {
|
|---|
| | | color: token.colorPrimaryActive,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | lang: {
|
|---|
| | | width: 42,
|
|---|
| | | height: 42,
|
|---|
| | | lineHeight: '42px',
|
|---|
| | | position: 'fixed',
|
|---|
| | | right: 16,
|
|---|
| | | borderRadius: token.borderRadius,
|
|---|
| | | ':hover': {
|
|---|
| | | backgroundColor: token.colorBgTextHover,
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | container: {
|
|---|
| | | 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 Lang = () => {
|
|---|
| | | const { styles } = useStyles();
|
|---|
| | |
|
|---|
| | | return (
|
|---|
| | | <div className={styles.lang} data-lang>
|
|---|
| | | {SelectLang && <SelectLang />}
|
|---|
| | | </div>
|
|---|
| | | );
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const LoginMessage = ({ content }) => {
|
|---|
| | | return (
|
|---|
| | | <Alert
|
|---|
| | | style={{
|
|---|
| | | marginBottom: 24,
|
|---|
| | | }}
|
|---|
| | | message={content}
|
|---|
| | | type="error"
|
|---|
| | | showIcon
|
|---|
| | | />
|
|---|
| | | );
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const Login = () => {
|
|---|
| | | const [userLoginState, setUserLoginState] = useState({});
|
|---|
| | | const [type, setType] = useState('account');
|
|---|
| | | const { initialState, setInitialState } = useModel('@@initialState');
|
|---|
| | | const { styles } = useStyles();
|
|---|
| | | const intl = useIntl();
|
|---|
| | |
|
|---|
| | | console.log(initialState.memo);
|
|---|
| | |
|
|---|
| | | const fetchUserInfo = async () => {
|
|---|
| | | const userInfo = await initialState?.fetchUserInfo?.();
|
|---|
| | | if (userInfo) {
|
|---|
| | | flushSync(() => {
|
|---|
| | | setInitialState((s) => ({
|
|---|
| | | ...s,
|
|---|
| | | currentUser: userInfo,
|
|---|
| | | }));
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleSubmit = async (values) => {
|
|---|
| | | try {
|
|---|
| | | const r = await request('/api/login', {
|
|---|
| | | method: 'POST',
|
|---|
| | | headers: {
|
|---|
| | | 'Content-Type': 'application/json'
|
|---|
| | | },
|
|---|
| | | data: values
|
|---|
| | | })
|
|---|
| | |
|
|---|
| | | if (r.code === 200) {
|
|---|
| | | message.success(intl.formatMessage({
|
|---|
| | | id: 'pages.login.success',
|
|---|
| | | defaultMessage: '登录成功！',
|
|---|
| | | }));
|
|---|
| | | setToken(r.data.accessToken, values.autoLogin);
|
|---|
| | | await fetchUserInfo();
|
|---|
| | | const urlParams = new URL(window.location.href).searchParams;
|
|---|
| | | history.push(urlParams.get('redirect') || '/');
|
|---|
| | | return;
|
|---|
| | | }
|
|---|
| | | setUserLoginState({
|
|---|
| | | status: r.code,
|
|---|
| | | type: type,
|
|---|
| | | })
|
|---|
| | |
|
|---|
| | | // 登录
|
|---|
| | | // const msg = await login({ ...values, type });
|
|---|
| | | // if (msg.status === 'ok') {
|
|---|
| | | // const defaultLoginSuccessMessage = intl.formatMessage({
|
|---|
| | | // id: 'pages.login.success',
|
|---|
| | | // defaultMessage: '登录成功！',
|
|---|
| | | // });
|
|---|
| | | // message.success(defaultLoginSuccessMessage);
|
|---|
| | | // await fetchUserInfo();
|
|---|
| | | // const urlParams = new URL(window.location.href).searchParams;
|
|---|
| | | // history.push(urlParams.get('redirect') || '/');
|
|---|
| | | // return;
|
|---|
| | | // }
|
|---|
| | | // // 如果失败去设置用户错误信息
|
|---|
| | | // setUserLoginState(msg);
|
|---|
| | | } catch (error) {
|
|---|
| | | console.log(error);
|
|---|
| | | message.error(intl.formatMessage({
|
|---|
| | | id: 'pages.login.failure',
|
|---|
| | | defaultMessage: '登录失败，请重试！',
|
|---|
| | | }));
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | const { status, type: loginType } = userLoginState;
|
|---|
| | | return (
|
|---|
| | | <div className={styles.container}>
|
|---|
| | | <Helmet>
|
|---|
| | | <title>
|
|---|
| | | {intl.formatMessage({
|
|---|
| | | id: 'menu.login',
|
|---|
| | | defaultMessage: '登录页',
|
|---|
| | | })}
|
|---|
| | | - {PROJECT_NAME}
|
|---|
| | | </title>
|
|---|
| | | </Helmet>
|
|---|
| | | <Lang />
|
|---|
| | | <div style={{ flex: '1', padding: '32px 0', }} >
|
|---|
| | | <LoginForm
|
|---|
| | | contentStyle={{
|
|---|
| | | minWidth: 280,
|
|---|
| | | maxWidth: '75vw',
|
|---|
| | | }}
|
|---|
| | | logo={<img alt="logo" src="/logo.svg" />}
|
|---|
| | | title="Ant Design"
|
|---|
| | | subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
|
|---|
| | | initialValues={{
|
|---|
| | | autoLogin: true,
|
|---|
| | | }}
|
|---|
| | | onFinish={async (values) => {
|
|---|
| | | await handleSubmit(values);
|
|---|
| | | }}
|
|---|
| | | >
|
|---|
| | | <Tabs
|
|---|
| | | activeKey={type}
|
|---|
| | | onChange={setType}
|
|---|
| | | centered
|
|---|
| | | items={[
|
|---|
| | | {
|
|---|
| | | key: 'account',
|
|---|
| | | label: intl.formatMessage({
|
|---|
| | | id: 'pages.login.accountLogin.tab',
|
|---|
| | | defaultMessage: '账户密码登录',
|
|---|
| | | }),
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 'mobile',
|
|---|
| | | label: intl.formatMessage({
|
|---|
| | | id: 'pages.login.phoneLogin.tab',
|
|---|
| | | defaultMessage: '手机号登录',
|
|---|
| | | }),
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | |
|
|---|
| | | {status !== 200 && loginType === 'account' && (
|
|---|
| | | <LoginMessage
|
|---|
| | | content={intl.formatMessage({
|
|---|
| | | id: 'pages.login.accountLogin.errorMessage',
|
|---|
| | | defaultMessage: '账户或密码错误',
|
|---|
| | | })}
|
|---|
| | | />
|
|---|
| | | )}
|
|---|
| | | {type === 'account' && (
|
|---|
| | | <>
|
|---|
| | | <ProFormText
|
|---|
| | | name="username"
|
|---|
| | | fieldProps={{
|
|---|
| | | size: 'large',
|
|---|
| | | prefix: <UserOutlined />,
|
|---|
| | | }}
|
|---|
| | | placeholder={intl.formatMessage({
|
|---|
| | | id: 'pages.login.username.placeholder',
|
|---|
| | | defaultMessage: '用户名:',
|
|---|
| | | })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | message: (
|
|---|
| | | <FormattedMessage
|
|---|
| | | id="pages.login.username.required"
|
|---|
| | | defaultMessage="请输入用户名!"
|
|---|
| | | />
|
|---|
| | | ),
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText.Password
|
|---|
| | | name="password"
|
|---|
| | | fieldProps={{
|
|---|
| | | size: 'large',
|
|---|
| | | prefix: <LockOutlined />,
|
|---|
| | | }}
|
|---|
| | | placeholder={intl.formatMessage({
|
|---|
| | | id: 'pages.login.password.placeholder',
|
|---|
| | | defaultMessage: '密码:',
|
|---|
| | | })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | message: (
|
|---|
| | | <FormattedMessage
|
|---|
| | | id="pages.login.password.required"
|
|---|
| | | defaultMessage="请输入密码！"
|
|---|
| | | />
|
|---|
| | | ),
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | </>
|
|---|
| | | )}
|
|---|
| | |
|
|---|
| | | {status !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
|
|---|
| | | {type === 'mobile' && (
|
|---|
| | | <>
|
|---|
| | | <ProFormText
|
|---|
| | | fieldProps={{
|
|---|
| | | size: 'large',
|
|---|
| | | prefix: <MobileOutlined />,
|
|---|
| | | }}
|
|---|
| | | 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="手机号格式错误！"
|
|---|
| | | />
|
|---|
| | | ),
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormCaptcha
|
|---|
| | | fieldProps={{
|
|---|
| | | size: 'large',
|
|---|
| | | prefix: <LockOutlined />,
|
|---|
| | | }}
|
|---|
| | | 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) {
|
|---|
| | | return;
|
|---|
| | | }
|
|---|
| | | message.success('获取验证码成功！验证码为：1234');
|
|---|
| | | }}
|
|---|
| | | />
|
|---|
| | | </>
|
|---|
| | | )}
|
|---|
| | | <div
|
|---|
| | | style={{
|
|---|
| | | marginBottom: 24,
|
|---|
| | | }}
|
|---|
| | | >
|
|---|
| | | <ProFormCheckbox noStyle name="autoLogin">
|
|---|
| | | <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
|
|---|
| | | </ProFormCheckbox>
|
|---|
| | | </div>
|
|---|
| | | </LoginForm>
|
|---|
| | | </div>
|
|---|
| | | <Footer />
|
|---|
| | | </div>
|
|---|
| | | );
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | export default Login;
|
|---|
