translate settings page

src/locale/en-US.js

@@ -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

@@ -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

@@ -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

 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

@@ -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

 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

 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);