import { Alert , Checkbox , Icon } from 'antd' ; import { FormattedMessage , formatMessage } from 'umi-plugin-react/locale' ; import React , { Component } from 'react' ; import { CheckboxChangeEvent } from 'antd/es/checkbox' ; import { Dispatch , AnyAction } from 'redux' ; import { FormComponentProps } from 'antd/es/form' ; import Link from 'umi/link' ; import { connect } from 'dva' ; import { StateType } from '@/models/login' ; import LoginComponents from './components/Login' ; import styles from './style.less' ; import { LoginParamsType } from '@/services/login' ; import { ConnectState } from '@/models/connect' ; const { Tab , UserName , Password , Mobile , Captcha , Submit } = LoginComponents ; interface LoginProps { dispatch : Dispatch < AnyAction > ; userLogin : StateType ; submitting : boolean ; } interface LoginState { type : string ; autoLogin : boolean ; } @ connect ( ( { login , loading } ) => ( { userLogin : login , submitting : loading . effects [ 'login/login' ] , } ) ) class Login extends Component < LoginProps , LoginState > { loginForm : FormComponentProps [ 'form' ] | undefined | null = undefined ; state : LoginState = { type : 'account' , autoLogin : true , } ; changeAutoLogin = ( e ) => { this . setState ( { autoLogin : e . target . checked , } ) ; } ; handleSubmit = ( err , values ) => { const { type } = this . state ; if ( ! err ) { const { dispatch } = this . props ; dispatch ( { type : 'login/login' , payload : { grant_type : "password" , client_id : "client" , client_secret : "secret" , ... values , type , } , } ) ; } } ; onTabChange = ( type ) => { this . setState ( { type } ) ; } ; onGetCaptcha = ( ) => new Promise < boolean > ( ( resolve , reject ) => { if ( ! this . loginForm ) { return ; } this . loginForm . validateFields ( [ 'mobile' ] , { } , async ( err , values ) => { if ( err ) { reject ( err ) ; } else { const { dispatch } = this . props ; try { const success = await ( ( dispatch ( { type : 'login/getCaptcha' , payload : values . mobile , } ) as unknown ) as Promise < unknown > ) ; resolve ( ! ! success ) ; } catch ( error ) { reject ( error ) ; } } } ) ; } ) ; renderMessage = ( content ) => ( < Alert style = { { marginBottom : 24 } } message = { content } type = "error" showIcon / > ) ; render ( ) { const { userLogin , submitting } = this . props ; const { status , type : loginType } = userLogin ; const { type , autoLogin } = this . state ; return ( < div className = { styles . main } > < LoginComponents defaultActiveKey = { type } onTabChange = { this . onTabChange } onSubmit = { this . handleSubmit } onCreate = { ( form ? ) => { this . loginForm = form ; } } > < Tab key = "account" tab = { formatMessage ( { id : 'user-login.login.tab-login-credentials' } ) } > { status === 'error' && loginType === 'account' && ! submitting && this . renderMessage ( formatMessage ( { id : 'user-login.login.message-invalid-credentials' } ) ) } < UserName name = "userName" placeholder = { `${ formatMessage ( { id : 'user-login.login.userName' } ) }: admin or user` } rules = { [ { required : true , message : formatMessage ( { id : 'user-login.userName.required' } ) , } , ] } / > < Password name = "password" placeholder = { `${ formatMessage ( { id : 'user-login.login.password' } ) }: ant.design` } rules = { [ { required : true , message : formatMessage ( { id : 'user-login.password.required' } ) , } , ] } onPressEnter = { e => { e . preventDefault ( ) ; if ( this . loginForm ) { this . loginForm . validateFields ( this . handleSubmit ) ; } } } /> < /Tab> < Tab key = "mobile" tab = { formatMessage ( { id : 'user-login.login.tab-login-mobile' } ) } > { status === 'error' && loginType === 'mobile' && ! submitting && this . renderMessage ( formatMessage ( { id : 'user-login.login.message-invalid-verification-code' } ) ) } < Mobile name = "mobile" placeholder = { formatMessage ( { id : 'user-login.phone-number.placeholder' } ) } rules = { [ { required : true , message : formatMessage ( { id : 'user-login.phone-number.required' } ) , } , { pattern : /^1\d{10}$/ , message : formatMessage ( { id : 'user-login.phone-number.wrong-format' } ) , } , ] } / > < Captcha name = "captcha" placeholder = { formatMessage ( { id : 'user-login.verification-code.placeholder' } ) } countDown = { 120 } onGetCaptcha = { this . onGetCaptcha } getCaptchaButtonText = { formatMessage ( { id : 'user-login.form.get-captcha' } ) } getCaptchaSecondText = { formatMessage ( { id : 'user-login.captcha.second' } ) } rules = { [ { required : true , message : formatMessage ( { id : 'user-login.verification-code.required' } ) , } , ] } / > < /Tab> < div > < Checkbox checked = { autoLogin } onChange = { this . changeAutoLogin } > < FormattedMessage id = "user-login.login.remember-me" / > < /Checkbox> < a style = { { float : 'right' } } href = "" > < FormattedMessage id = "user-login.login.forgot-password" / > < /a> < /div> < Submit loading = { submitting } > < FormattedMessage id = "user-login.login.login" / > < /Submit> < div className = { styles . other } > < FormattedMessage id = "user-login.login.sign-in-with" / > < Icon type = "alipay-circle" className = { styles . icon } theme = "outlined" / > < Icon type = "taobao-circle" className = { styles . icon } theme = "outlined" / > < Icon type = "weibo-circle" className = { styles . icon } theme = "outlined" / > < Link className = { styles . register } to = "/user/register" > < FormattedMessage id = "user-login.login.signup" / > < /Link> < /div> < /LoginComponents> < /div>); } } export default Login ;