Skip to content

GitLab

A
ant-design-pro
Commit b3c2037b authored by 张秀玲's avatar 张秀玲 Committed by 陈帅
Browse files
Options

translate settings page

parent dab141ad
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 78 deletions
src/locale/en-US.js
View file @ b3c2037b
......@@ -108,6 +108,27 @@ export default {
'app.settings.security.mfa': 'MFA Device',
'app.settings.security.mfa-description':
'Unbound MFA device, after binding, can be confirmed twice',
'app.settings.security.modify': 'Modify',
'app.settings.security.set': 'Set',
'app.settings.security.bind': 'Bind',
'app.settings.binding.taobao': 'Binding Taobao',
'app.settings.binding.taobao-description': 'Currently unbound Taobao account',
'app.settings.binding.alipay': 'Binding Alipay',
'app.settings.binding.alipay-description': 'Currently unbound Alipay account',
'app.settings.binding.dingding': 'Binding DingTalk',
'app.settings.binding.dingding-description': 'Currently unbound DingTalk account',
'app.settings.binding.bind': 'Bind',
'app.settings.notification.password': 'Account Password',
'app.settings.notification.password-description':
'Messages from other users will be notified in the form of a station letter',
'app.settings.notification.messages': 'System Messages',
'app.settings.notification.messages-description':
'System messages will be notified in the form of a station letter',
'app.settings.notification.todo': 'To-do Notification',
'app.settings.notification.todo-description':
'The to-do list will be notified in the form of a letter from the station',
'app.settings.open': 'Open',
'app.settings.close': 'Close',
// ...enMessages,
},
};
src/locale/zh-CN.js
View file @ b3c2037b
......@@ -105,6 +105,25 @@ export default {
'app.settings.security.email-description': '已绑定邮箱：',
'app.settings.security.mfa': 'MFA 设备',
'app.settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
'app.settings.security.modify': '修改',
'app.settings.security.set': '设置',
'app.settings.security.bind': '绑定',
'app.settings.binding.taobao': '绑定淘宝',
'app.settings.binding.taobao-description': '当前未绑定淘宝账号',
'app.settings.binding.alipay': '绑定支付宝',
'app.settings.binding.alipay-description': '当前未绑定支付宝账号',
'app.settings.binding.dingding': '绑定钉钉',
'app.settings.binding.dingding-description': '当前未绑定钉钉账号',
'app.settings.binding.bind': '绑定',
'app.settings.notification.password': '账户密码',
'app.settings.notification.password-description': '其他用户的消息将以站内信的形式通知',
'app.settings.notification.messages': '系统消息',
'app.settings.notification.messages-description': '系统消息将以站内信的形式通知',
'app.settings.notification.todo': '账户密码',
'app.settings.notification.todo-description': '账户密码',
'app.settings.open': '开',
'app.settings.close': '关',
// ...zhMessages,
},
};
src/pages/Account/Settings/BaseView.js
View file @ b3c2037b
......@@ -54,28 +54,6 @@ const validatorPhone = (rule, value, callback) => {
}))
@Form.create()
class BaseView extends Component {
constructor(props) {
super(props);
const { intl } = props;
this.formLabelData = {
email: intl.formatMessage({ id: 'app.settings.basic.email' }, {}),
emailMessage: intl.formatMessage({ id: 'app.settings.basic.email-message' }, {}),
nickname: intl.formatMessage({ id: 'app.settings.basic.nickname' }, {}),
nicknameMessage: intl.formatMessage({ id: 'app.settings.basic.nickname-message' }, {}),
profile: intl.formatMessage({ id: 'app.settings.basic.profile' }, {}),
profileMessage: intl.formatMessage({ id: 'app.settings.basic.profile-message' }, {}),
profilePlaceholder: intl.formatMessage({ id: 'app.settings.basic.profile-placeholder' }, {}),
country: intl.formatMessage({ id: 'app.settings.basic.country' }, {}),
countryMessage: intl.formatMessage({ id: 'app.settings.basic.country-message' }, {}),
geographic: intl.formatMessage({ id: 'app.settings.basic.geographic' }, {}),
geographicMessage: intl.formatMessage({ id: 'app.settings.basic.geographic-message' }, {}),
address: intl.formatMessage({ id: 'app.settings.basic.address' }, {}),
addressMessage: intl.formatMessage({ id: 'app.settings.basic.address-message' }, {}),
phone: intl.formatMessage({ id: 'app.settings.basic.phone' }, {}),
phoneMessage: intl.formatMessage({ id: 'app.settings.basic.phone-message' }, {}),
};
}
componentDidMount() {
this.setBaseInfo();
}
......@@ -105,41 +83,73 @@ class BaseView extends Component {
render() {
const {
form: { getFieldDecorator },
intl,
} = this.props;
return (
<div className={styles.baseView} ref={this.getViewDom}>
<div className={styles.left}>
<Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
<FormItem label={this.formLabelData.email}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.email' }, {})}>
{getFieldDecorator('email', {
rules: [{ required: true, message: this.formLabelData.emailMessage }],
rules: [
{
required: true,
message: intl.formatMessage({ id: 'app.settings.basic.email-message' }, {}),
},
],
})(<Input />)}
</FormItem>
<FormItem label={this.formLabelData.nickname}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.nickname' }, {})}>
{getFieldDecorator('name', {
rules: [{ required: true, message: this.formLabelData.nicknameMessage }],
rules: [
{
required: true,
message: intl.formatMessage({ id: 'app.settings.basic.nickname-message' }, {}),
},
],
})(<Input />)}
</FormItem>
<FormItem label={this.formLabelData.profile}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.profile' }, {})}>
{getFieldDecorator('profile', {
rules: [{ required: true, message: this.formLabelData.profileMessage }],
})(<Input.TextArea placeholder={this.formLabelData.profilePlaceholder} rows={4} />)}
rules: [
{
required: true,
message: intl.formatMessage({ id: 'app.settings.basic.profile-message' }, {}),
},
],
})(
<Input.TextArea
placeholder={intl.formatMessage(
{ id: 'app.settings.basic.profile-placeholder' },
{}
)}
rows={4}
/>
)}
</FormItem>
<FormItem label={this.formLabelData.country}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.country' }, {})}>
{getFieldDecorator('country', {
rules: [{ required: true, message: this.formLabelData.countryMessage }],
rules: [
{
required: true,
message: intl.formatMessage({ id: 'app.settings.basic.country-message' }, {}),
},
],
})(
<Select style={{ maxWidth: 220 }}>
<Option value="China">中国</Option>
</Select>
)}
</FormItem>
<FormItem label={this.formLabelData.geographic}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.geographic' }, {})}>
{getFieldDecorator('geographic', {
rules: [
{
required: true,
message: this.formLabelData.geographicMessage,
message: intl.formatMessage(
{ id: 'app.settings.basic.geographic-message' },
{}
),
},
{
validator: validatorGeographic,
......@@ -147,15 +157,23 @@ class BaseView extends Component {
],
})(<GeographicView />)}
</FormItem>
<FormItem label={this.formLabelData.address}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.address' }, {})}>
{getFieldDecorator('address', {
rules: [{ required: true, message: this.formLabelData.addressMessage }],
rules: [
{
required: true,
message: intl.formatMessage({ id: 'app.settings.basic.address-message' }, {}),
},
],
})(<Input />)}
</FormItem>
<FormItem label={this.formLabelData.phone}>
<FormItem label={intl.formatMessage({ id: 'app.settings.basic.phone' }, {})}>
{getFieldDecorator('phone', {
rules: [
{ required: true, message: this.formLabelData.phoneMessage },
{
required: true,
message: intl.formatMessage({ id: 'app.settings.basic.phone-message' }, {}),
},
{ validator: validatorPhone },
],
})(<PhoneView />)}
......
src/pages/Account/Settings/BindingView.js
View file @ b3c2037b
import React, { Component, Fragment } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Icon, List } from 'antd';
export default class BindingView extends Component {
class BindingView extends Component {
getData = () => {
const { intl } = this.props;
return [
{
title: '绑定淘宝',
description: '当前未绑定淘宝账号',
actions: [<a>绑定</a>],
title: intl.formatMessage({ id: 'app.settings.binding.taobao' }, {}),
description: intl.formatMessage({ id: 'app.settings.binding.taobao-description' }, {}),
actions: [
<a>
<FormattedMessage id="app.settings.binding.bind" defaultMessage="Bind" />
</a>,
],
avatar: <Icon type="taobao" className="taobao" />,
},
{
title: '绑定支付宝',
description: '当前未绑定支付宝账号',
actions: [<a>绑定</a>],
title: intl.formatMessage({ id: 'app.settings.binding.alipay' }, {}),
description: intl.formatMessage({ id: 'app.settings.binding.alipay-description' }, {}),
actions: [
<a>
<FormattedMessage id="app.settings.binding.bind" defaultMessage="Bind" />
</a>,
],
avatar: <Icon type="alipay" className="alipay" />,
},
{
title: '绑定钉钉',
description: '当前未绑定钉钉账号',
actions: [<a>绑定</a>],
title: intl.formatMessage({ id: 'app.settings.binding.dingding' }, {}),
description: intl.formatMessage({ id: 'app.settings.binding.dingding-description' }, {}),
actions: [
<a>
<FormattedMessage id="app.settings.binding.bind" defaultMessage="Bind" />
</a>,
],
avatar: <Icon type="dingding" className="dingding" />,
},
];
......@@ -45,3 +59,4 @@ export default class BindingView extends Component {
);
}
}
export default injectIntl(BindingView);
src/pages/Account/Settings/Info.js
View file @ b3c2037b
......@@ -15,11 +15,7 @@ export default class Info extends Component {
constructor(props) {
super(props);
const { match, location } = props;
const key = location.pathname.replace(`${match.path}/`, '');
// let key = location.pathname.replace(`${match.path}/`, '');
// key = this.state.menuMap[key] ? key : 'base';
this.state = {
selectKey: key,
mode: 'inline',
menuMap: {
base: <FormattedMessage id="app.settings.menuMap.basic" defaultMessage="Basic Settings" />,
......@@ -37,6 +33,12 @@ export default class Info extends Component {
),
},
};
let key = location.pathname.replace(`${match.path}/`, '');
const { menuMap } = this.state;
key = menuMap[key] ? key : 'base';
this.setState({
selectKey: key,
});
}
componentDidMount() {
......
src/pages/Account/Settings/NotificationView.js
View file @ b3c2037b
import React, { Component, Fragment } from 'react';
import { injectIntl } from 'react-intl';
import { Switch, List } from 'antd';
const Action = <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />;
export default class NotificationView extends Component {
class NotificationView extends Component {
getData = () => {
const { intl } = this.props;
const Action = (
<Switch
checkedChildren={intl.formatMessage({ id: 'app.settings.open' }, {})}
unCheckedChildren={intl.formatMessage({ id: 'app.settings.close' }, {})}
defaultChecked
/>
);
return [
{
title: '账户密码',
description: '其他用户的消息将以站内信的形式通知',
title: intl.formatMessage({ id: 'app.settings.notification.password' }, {}),
description: intl.formatMessage(
{ id: 'app.settings.notification.password-description' },
{}
),
actions: [Action],
},
{
title: '系统消息',
description: '系统消息将以站内信的形式通知',
title: intl.formatMessage({ id: 'app.settings.notification.messages' }, {}),
description: intl.formatMessage(
{ id: 'app.settings.notification.messages-description' },
{}
),
actions: [Action],
},
{
title: '待办通知',
description: '待办事项将以站内信的形式通知',
title: intl.formatMessage({ id: 'app.settings.notification.todo' }, {}),
description: intl.formatMessage({ id: 'app.settings.notification.todo-description' }, {}),
actions: [Action],
},
];
......@@ -40,3 +53,4 @@ export default class NotificationView extends Component {
);
}
}
export default injectIntl(NotificationView);
src/pages/Account/Settings/SecurityView.js
View file @ b3c2037b
import React, { Component, Fragment } from 'react';
import { FormattedMessage } from 'react-intl';
import { injectIntl, FormattedMessage } from 'react-intl';
import { List } from 'antd';
// import { getTimeDistance } from '../../../utils/utils';
const passwordStrength = {
strong: (
......@@ -20,34 +21,67 @@ const passwordStrength = {
),
};
export default class SecurityView extends Component {
class SecurityView extends Component {
getData = () => {
const { intl } = this.props;
return [
{
title: 'account password',
description: <Fragment> Current password strength：{passwordStrength.strong}</Fragment>,
actions: [<a>Modify</a>],
title: intl.formatMessage({ id: 'app.settings.security.password' }, {}),
description: (
<Fragment>
{' '}
{intl.formatMessage({ id: 'app.settings.security.password-description' }, {})}：{
passwordStrength.strong
}
</Fragment>
),
actions: [
<a>
<FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
</a>,
],
},
{
title: 'Security phone',
description: 'Bound phone：138****8293',
actions: [<a>Modify</a>],
title: intl.formatMessage({ id: 'app.settings.security.phone' }, {}),
description: `${intl.formatMessage(
{ id: 'app.settings.security.phone-description' },
{}
)}：138****8293`,
actions: [
<a>
<FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
</a>,
],
},
{
title: 'Security Question',
description:
'The security question is not set, and the security policy can effectively protect the account security',
actions: [<a>Set</a>],
title: intl.formatMessage({ id: 'app.settings.security.question' }, {}),
description: intl.formatMessage({ id: 'app.settings.security.question-description' }, {}),
actions: [
<a>
<FormattedMessage id="app.settings.security.set" defaultMessage="Set" />
</a>,
],
},
{
title: 'Backup Email',
description: 'Bound Email：ant***sign.com',
actions: [<a>Modify</a>],
title: intl.formatMessage({ id: 'app.settings.security.email' }, {}),
description: `${intl.formatMessage(
{ id: 'app.settings.security.email-description' },
{}
)}：ant***sign.com`,
actions: [
<a>
<FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
</a>,
],
},
{
title: 'MFA Device',
description: 'Unbound MFA device, after binding, can be confirmed twice',
actions: [<a>Bind</a>],
title: intl.formatMessage({ id: 'app.settings.security.mfa' }, {}),
description: intl.formatMessage({ id: 'app.settings.security.mfa-description' }, {}),
actions: [
<a>
<FormattedMessage id="app.settings.security.bind" defaultMessage="Bind" />
</a>,
],
},
];
};
......@@ -68,3 +102,4 @@ export default class SecurityView extends Component {
);
}
}
export default injectIntl(SecurityView);
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