Commit 928e2364 authored by SimpleFrontend's avatar SimpleFrontend Committed by ddcat1115

Translated the document of the Login component. (#953)

* Translated the md files of Login component and the validation messages.

* Rename index.md to index.en-US.md

* Restored the Chinese version and renamed it

* Updated according to review

* Fixed all the typos
parent 7dbdbaee
---
order: 0
title: Standard Login
title:
zh-CN: 标准登录
en-US: Standard Login
---
支持账号密码及手机号登录两种模式。
Support login with account and mobile number.
````jsx
import Login from 'ant-design-pro/lib/Login';
......@@ -26,7 +28,7 @@ class LoginDemo extends React.Component {
if (!err && (values.username !== 'admin' || values.password !== '888888')) {
setTimeout(() => {
this.setState({
notice: '账号或密码错误!',
notice: 'The combination of username and password is incorrect!',
});
}, 500);
}
......@@ -50,7 +52,7 @@ class LoginDemo extends React.Component {
onTabChange={this.onTabChange}
onSubmit={this.onSubmit}
>
<Tab key="tab1" tab="账号密码登录">
<Tab key="tab1" tab="Account">
{
this.state.notice &&
<Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
......@@ -58,21 +60,21 @@ class LoginDemo extends React.Component {
<UserName name="username" />
<Password name="password" />
</Tab>
<Tab key="tab2" 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}>自动登录</Checkbox>
<a style={{ float: 'right' }} href="">忘记密码</a>
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>Keep me logged in</Checkbox>
<a style={{ float: 'right' }} href="">Forgot password</a>
</div>
<Submit>登录</Submit>
<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="">注册账户</a>
<a style={{ float: 'right' }} href="">Register</a>
</div>
</Login>
);
......
---
title: Login
cols: 1
order: 15
---
Support multiple common ways of login with built-in controls. You can choose your own combinations and use with your custom controls.
## API
### Login
Property | Description | Type | Default
----|------|-----|------
defaultActiveKey | default key to activate the tab panel | String | -
onTabChange | callback on changing tabs | (key) => void | -
onSubmit | callback on submit | (err, values) => void | -
### Login.Tab
Property | Description | Type | Default
----|------|-----|------
key | key of the tab | String | -
tab | displayed text of the tab | ReactNode | -
### Login.UserName
Property | Description | Type | Default
----|------|-----|------
name | name of the control, also the key of the submitted data | String | -
rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | -
Apart from the above properties, Login.Username also support all properties of antd.Input, together with the default values of basic settings, such as _placeholder_, _size_ and _prefix_. All of these default values can be over-written.
### Login.Password, Login.Mobile are the same as Login.UserName
### Login.Captcha
Property | Description | Type | Default
----|------|-----|------
onGetCaptcha | callback on getting a new Captcha | () => void | -
Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
### Login.Submit
Support all properties of _antd.Button_.
\ No newline at end of file
---
title:
en-US: Login
zh-CN: Login
title: Login
subtitle: 登录
cols: 1
order: 15
......@@ -48,4 +46,3 @@ onGetCaptcha | 点击获取校验码的回调 | () => void | -
### Login.Submit
支持 antd.Button 的所有属性。
......@@ -11,7 +11,7 @@ const map = {
placeholder: 'admin',
},
rules: [{
required: true, message: '请输入账户名!',
required: true, message: 'Please enter username!',
}],
},
Password: {
......@@ -23,7 +23,7 @@ const map = {
placeholder: '888888',
},
rules: [{
required: true, message: '请输入密码!',
required: true, message: 'Please enter password!',
}],
},
Mobile: {
......@@ -31,12 +31,12 @@ const map = {
props: {
size: 'large',
prefix: <Icon type="mobile" className={styles.prefixIcon} />,
placeholder: '手机号',
placeholder: 'mobile number',
},
rules: [{
required: true, message: '请输入手机号!',
required: true, message: 'Please enter mobile number!',
}, {
pattern: /^1\d{10}$/, message: '手机号格式错误!',
pattern: /^1\d{10}$/, message: 'Wrong mobile number format!',
}],
},
Captcha: {
......@@ -44,10 +44,10 @@ const map = {
props: {
size: 'large',
prefix: <Icon type="mail" className={styles.prefixIcon} />,
placeholder: '验证码',
placeholder: 'captcha',
},
rules: [{
required: true, message: '请输入验证码!',
required: true, message: 'Please enter Captcha!',
}],
},
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment