order: 0 title: zh-CN: 标准登录
Support login with account and mobile number.
import Login from 'ant-design-pro/lib/Login';
import { Alert, Checkbox } from 'antd';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
class LoginDemo extends React.Component {
state = {
notice: '',
type: 'tab2',
autoLogin: true,
}
onSubmit = (err, values) => {
console.log('value collected ->', { ...values, autoLogin: this.state.autoLogin });
if (this.state.type === 'tab1') {
this.setState({
notice: '',
}, () => {
if (!err && (values.username !== 'admin' || values.password !== '888888')) {
setTimeout(() => {
this.setState({
notice: 'The combination of username and password is incorrect!',
});
}, 500);
}
});
}
}
onTabChange = (key) => {
this.setState({
type: key,
});
}
changeAutoLogin = (e) => {
this.setState({
autoLogin: e.target.checked,
});
}
render() {
return (
<Login
defaultActiveKey={this.state.type}
onTabChange={this.onTabChange}
onSubmit={this.onSubmit}
>
<Tab key="tab1" tab="Account">
{
this.state.notice &&
<Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
}
<UserName name="username" />
<Password name="password" />
</Tab>
<Tab key="tab2" tab="Mobile">
<Mobile name="mobile" />
<Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
</Tab>
<div>
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>Keep me logged in</Checkbox>
<a style={{ float: 'right' }} href="">Forgot password</a>
</div>
<Submit>Login</Submit>
<div>
Other login methods
<span className="icon icon-alipay" />
<span className="icon icon-taobao" />
<span className="icon icon-weibo" />
<a style={{ float: 'right' }} href="">Register</a>
</div>
</Login>
);
}
}
ReactDOM.render(<LoginDemo />, mountNode);