import { AlipayCircleOutlined, LockTwoTone, MailTwoTone, MobileTwoTone, TaobaoCircleOutlined, UserOutlined, WeiboCircleOutlined, } from '@ant-design/icons'; import { Alert, Space, message, Tabs } from 'antd'; import React, { useState } from 'react'; import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form'; import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi'; import Footer from '@/components/Footer'; import { fakeAccountLogin, getFakeCaptcha, LoginParamsType } from '@/services/login'; import styles from './index.less'; import { selectNavList } from '@/services/user'; const LoginMessage: React.FC<{ content: string; }> = ({ content }) => ( ); /** * 此方法会跳转到 redirect 参数所在的位置 */ const goto = () => { if (!history) return; setTimeout(() => { const { query } = history.location; const { redirect } = query as { redirect: string; }; history.push(redirect || '/'); }, 10); }; const Login: React.FC<{}> = () => { const [submitting, setSubmitting] = useState(false); const [userLoginState, setUserLoginState] = useState({}); const [type, setType] = useState('account'); const { initialState, setInitialState } = useModel('@@initialState'); const intl = useIntl(); const fetchUserInfo = async () => { const userInfo = await initialState?.fetchUserInfo?.(); if (userInfo) { setInitialState({ ...initialState, settings: { menu: { loading: true, }, }, currentUser: userInfo, }); const menuData = await selectNavList(); setInitialState({ ...initialState, currentUser: userInfo, settings: { menu: { loading: false, }, }, menuData: menuData.data, }); } }; const handleSubmit = async (values: LoginParamsType) => { setSubmitting(true); try { // 登录 await fakeAccountLogin({ ...values, type }); await fetchUserInfo(); message.success('登录成功!'); goto(); } catch (error) { console.log(error, 'error'); // 如果失败去设置用户错误信息 setUserLoginState({ status: 'error', type: 'account', }); } setSubmitting(false); }; const { status, type: loginType } = userLoginState; return (
{SelectLang && }
logo Ant Design
Ant Design 是西湖区最具影响力的 Web 设计规范
dom.pop(), submitButtonProps: { loading: submitting, size: 'large', style: { width: '100%', }, }, }} onFinish={async (values) => { handleSubmit(values); }} > {status === 'error' && loginType === 'account' && ( )} {type === 'account' && ( <> , }} placeholder={intl.formatMessage({ id: 'pages.login.username.placeholder', defaultMessage: '用户名: admin or user', })} rules={[ { required: true, message: '用户名是必填项!', }, ]} /> , }} placeholder={intl.formatMessage({ id: 'pages.login.password.placeholder', defaultMessage: '密码: ant.design', })} rules={[ { required: true, message: '密码是必填项!', }, ]} /> )} {status === 'error' && loginType === 'mobile' && } {type === 'mobile' && ( <> , }} name="mobile" placeholder={intl.formatMessage({ id: 'pages.login.phoneNumber.placeholder', defaultMessage: '手机号', })} rules={[ { required: true, message: '手机号是必填项!', }, { pattern: /^1\d{10}$/, message: '不合法的手机号!', }, ]} /> , }} captchaProps={{ size: 'large', }} placeholder={intl.formatMessage({ id: 'pages.login.captcha.placeholder', defaultMessage: '请输入验证码', })} captchaTextRender={(timing, count) => timing ? `${count} ${intl.formatMessage({ id: 'pages.getCaptchaSecondText', defaultMessage: '获取验证码', })}` : intl.formatMessage({ id: 'pages.login.phoneLogin.getVerificationCode', defaultMessage: '获取验证码', }) } name="captcha" rules={[ { required: true, message: '验证码是必填项!', }, ]} onGetCaptcha={async (mobile) => { const result = await getFakeCaptcha(mobile); if (result === false) { return; } message.success('获取验证码成功!验证码为:1234'); }} /> )}
自动登录 忘记密码 ?
其他登录方式 :
); }; export default Login;