translate settings page

src/locale/en-US.js

@@ -72,6 +72,42 @@ export default {
     'app.analysis.table.search-keyword': 'Keyword',
     'app.analysis.table.users': 'Users',
     'app.analysis.table.weekly-range': 'Weekly Range',
+    'app.settings.menuMap.basic': 'Basic Settings',
+    'app.settings.menuMap.security': 'Security Settings',
+    'app.settings.menuMap.binding': 'Account Binding',
+    'app.settings.menuMap.notification': 'New Message Notification',
+    'app.settings.basic.avatar': 'Change avatar',
+    'app.settings.basic.email': 'Email',
+    'app.settings.basic.email-message': 'Please input your email!',
+    'app.settings.basic.nickname': 'Nickname',
+    'app.settings.basic.nickname-message': 'Please input your Nickname!',
+    'app.settings.basic.profile': 'Personal profile',
+    'app.settings.basic.profile-message': 'Please input your personal profile!',
+    'app.settings.basic.profile-placeholder': 'Brief introduction to yourself',
+    'app.settings.basic.country': 'Country/Region',
+    'app.settings.basic.country-message': 'Please input your country!',
+    'app.settings.basic.geographic': 'Province or city',
+    'app.settings.basic.geographic-message': 'Please input your geographic info!',
+    'app.settings.basic.address': 'Street Address',
+    'app.settings.basic.address-message': 'Please input your address!',
+    'app.settings.basic.phone': 'Phone Number',
+    'app.settings.basic.phone-message': 'Please input your phone!',
+    'app.settings.basic.update': 'Update Information',
+    'app.settings.security.strong': 'Strong',
+    'app.settings.security.medium': 'Medium',
+    'app.settings.security.weak': 'Weak',
+    'app.settings.security.password': 'Account Password',
+    'app.settings.security.password-description': 'Current password strength：',
+    'app.settings.security.phone': 'Security Phone',
+    'app.settings.security.phone-description': 'Bound phone：',
+    'app.settings.security.question': 'Security Question',
+    'app.settings.security.question-description':
+      'The security question is not set, and the security policy can effectively protect the account security',
+    'app.settings.security.email': 'Backup Email',
+    'app.settings.security.email-description': 'Bound Email：',
+    'app.settings.security.mfa': 'MFA Device',
+    'app.settings.security.mfa-description':
+      'Unbound MFA device, after binding, can be confirmed twice',
     // ...enMessages,
   },
 };

src/locale/zh-CN.js

@@ -72,6 +72,39 @@ export default {
     'app.analysis.table.search-keyword': '搜索关键词',
     'app.analysis.table.users': '用户数',
     'app.analysis.table.weekly-range': '周涨幅',
+    'app.settings.menuMap.basic': '基本设置',
+    'app.settings.menuMap.security': '安全设置',
+    'app.settings.menuMap.binding': '账号绑定',
+    'app.settings.menuMap.notification': '新消息通知',
+    'app.settings.basic.avatar': '更换头像',
+    'app.settings.basic.email': '邮箱',
+    'app.settings.basic.email-message': '请输入您的邮箱!',
+    'app.settings.basic.nickname': '昵称',
+    'app.settings.basic.nickname-message': '请输入您的昵称!',
+    'app.settings.basic.profile': '个人简介',
+    'app.settings.basic.profile-message': '请输入个人简介!',
+    'app.settings.basic.profile-placeholder': '个人简介',
+    'app.settings.basic.country': '国家/地区',
+    'app.settings.basic.country-message': '请输入您的国家或地区!',
+    'app.settings.basic.geographic': '所在省市',
+    'app.settings.basic.geographic-message': '请输入您的所在省市!',
+    'app.settings.basic.address': '街道地址',
+    'app.settings.basic.address-message': '请输入您的街道地址!',
+    'app.settings.basic.phone': '联系电话',
+    'app.settings.basic.phone-message': '请输入您的联系电话!',
+    'app.settings.security.strong': '强',
+    'app.settings.security.medium': '中',
+    'app.settings.security.weak': '弱',
+    'app.settings.security.password': '账户密码',
+    'app.settings.security.password-description': '当前密码强度：',
+    'app.settings.security.phone': '密保手机',
+    'app.settings.security.phone-description': '已绑定手机：',
+    'app.settings.security.question': '密保问题',
+    'app.settings.security.question-description': '未设置密保问题，密保问题可有效保护账户安全',
+    'app.settings.security.email': '备用邮箱',
+    'app.settings.security.email-description': '已绑定邮箱：',
+    'app.settings.security.mfa': 'MFA 设备',
+    'app.settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
     // ...zhMessages,
   },
 };

src/pages/Account/Settings/BaseView.js

 import React, { Component, Fragment } from 'react';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { Form, Input, Upload, Select, Button } from 'antd';
 import { connect } from 'dva';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
+// import { getTimeDistance } from '../../../utils/utils';
 
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -11,13 +13,15 @@ const { Option } = Select;
 // 头像组件 方便以后独立，增加裁剪之类的功能
 const AvatarView = ({ avatar }) => (
   <Fragment>
-    <div className={styles.avatar_title}>头像</div>
+    <div className={styles.avatar_title}>Avatar</div>
     <div className={styles.avatar}>
       <img src={avatar} alt="avatar" />
     </div>
     <Upload fileList={[]}>
       <div className={styles.button_view}>
-        <Button icon="upload">更换头像</Button>
+        <Button icon="upload">
+          <FormattedMessage id="app.settings.basic.avatar" defaultMessage="Change avatar" />
+        </Button>
       </div>
     </Upload>
   </Fragment>
@@ -49,7 +53,29 @@ const validatorPhone = (rule, value, callback) => {
   currentUser: user.currentUser,
 }))
 @Form.create()
-export default class BaseView extends Component {
+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();
   }
@@ -84,36 +110,36 @@ export default class BaseView extends Component {
       <div className={styles.baseView} ref={this.getViewDom}>
         <div className={styles.left}>
           <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
-            <FormItem label="邮箱">
+            <FormItem label={this.formLabelData.email}>
               {getFieldDecorator('email', {
-                rules: [{ required: true, message: 'Please input your email!' }],
+                rules: [{ required: true, message: this.formLabelData.emailMessage }],
               })(<Input />)}
             </FormItem>
-            <FormItem label="昵称">
+            <FormItem label={this.formLabelData.nickname}>
               {getFieldDecorator('name', {
-                rules: [{ required: true, message: 'Please input your nick name!' }],
+                rules: [{ required: true, message: this.formLabelData.nicknameMessage }],
               })(<Input />)}
             </FormItem>
-            <FormItem label="个人简介">
+            <FormItem label={this.formLabelData.profile}>
               {getFieldDecorator('profile', {
-                rules: [{ required: true, message: 'Please input personal profile!' }],
-              })(<Input.TextArea placeholder="简单的介绍下自己" rows={4} />)}
+                rules: [{ required: true, message: this.formLabelData.profileMessage }],
+              })(<Input.TextArea placeholder={this.formLabelData.profilePlaceholder} rows={4} />)}
             </FormItem>
-            <FormItem label="国家/地区">
+            <FormItem label={this.formLabelData.country}>
               {getFieldDecorator('country', {
-                rules: [{ required: true, message: 'Please input your country!' }],
+                rules: [{ required: true, message: this.formLabelData.countryMessage }],
               })(
                 <Select style={{ maxWidth: 220 }}>
                   <Option value="China">中国</Option>
                 </Select>
               )}
             </FormItem>
-            <FormItem label="所在省市">
+            <FormItem label={this.formLabelData.geographic}>
               {getFieldDecorator('geographic', {
                 rules: [
                   {
                     required: true,
-                    message: 'Please input your geographic info!',
+                    message: this.formLabelData.geographicMessage,
                   },
                   {
                     validator: validatorGeographic,
@@ -121,20 +147,25 @@ export default class BaseView extends Component {
                 ],
               })(<GeographicView />)}
             </FormItem>
-            <FormItem label="街道地址">
+            <FormItem label={this.formLabelData.address}>
               {getFieldDecorator('address', {
-                rules: [{ required: true, message: 'Please input your address!' }],
+                rules: [{ required: true, message: this.formLabelData.addressMessage }],
               })(<Input />)}
             </FormItem>
-            <FormItem label="联系电话">
+            <FormItem label={this.formLabelData.phone}>
               {getFieldDecorator('phone', {
                 rules: [
-                  { required: true, message: 'Please input your phone!' },
+                  { required: true, message: this.formLabelData.phoneMessage },
                   { validator: validatorPhone },
                 ],
               })(<PhoneView />)}
             </FormItem>
-            <Button type="primary">更新信息</Button>
+            <Button type="primary">
+              <FormattedMessage
+                id="app.settings.basic.update"
+                defaultMessage="Update Information"
+              />
+            </Button>
           </Form>
         </div>
         <div className={styles.right}>
@@ -144,3 +175,4 @@ export default class BaseView extends Component {
     );
   }
 }
+export default injectIntl(BaseView);

src/pages/Account/Settings/Info.js

 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
+import { FormattedMessage } from 'react-intl';
 import { Menu } from 'antd';
 import styles from './Info.less';
 import GridContent from '../../layouts/GridContent';
 
 const { Item } = Menu;
 
-const menuMap = {
-  base: '基本设置',
-  security: '安全设置',
-  binding: '账号绑定',
-  notification: '新消息通知',
-};
-
 @connect(({ user }) => ({
   currentUser: user.currentUser,
 }))
@@ -21,11 +15,27 @@ export default class Info extends Component {
   constructor(props) {
     super(props);
     const { match, location } = props;
-    let key = location.pathname.replace(`${match.path}/`, '');
-    key = menuMap[key] ? key : 'base';
+    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" />,
+        security: (
+          <FormattedMessage id="app.settings.menuMap.security" defaultMessage="Security Settings" />
+        ),
+        binding: (
+          <FormattedMessage id="app.settings.menuMap.binding" defaultMessage="Account Binding" />
+        ),
+        notification: (
+          <FormattedMessage
+            id="app.settings.menuMap.notification"
+            defaultMessage="New Message Notification"
+          />
+        ),
+      },
     };
   }
 
@@ -41,7 +51,7 @@ export default class Info extends Component {
   static getDerivedStateFromProps(props, state) {
     const { match, location } = props;
     let selectKey = location.pathname.replace(`${match.path}/`, '');
-    selectKey = menuMap[selectKey] ? selectKey : 'base';
+    selectKey = state.menuMap[selectKey] ? selectKey : 'base';
     if (selectKey !== state.selectKey) {
       return { selectKey };
     }
@@ -49,11 +59,12 @@ export default class Info extends Component {
   }
 
   getmenu = () => {
+    const { menuMap } = this.state;
     return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
   };
 
   getRightTitle = () => {
-    const { selectKey } = this.state;
+    const { selectKey, menuMap } = this.state;
     return menuMap[selectKey];
   };
 

src/pages/Account/Settings/SecurityView.js

 import React, { Component, Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { List } from 'antd';
 
 const passwordStrength = {
-  strong: <font className="strong">强</font>,
-  medium: <font className="medium">中文</font>,
-  weak: <font className="weak">弱</font>,
+  strong: (
+    <font className="strong">
+      <FormattedMessage id="app.settings.security.strong" defaultMessage="Strong" />
+    </font>
+  ),
+  medium: (
+    <font className="medium">
+      <FormattedMessage id="app.settings.security.medium" defaultMessage="Medium" />
+    </font>
+  ),
+  weak: (
+    <font className="weak">
+      <FormattedMessage id="app.settings.security.weak" defaultMessage="Weak" />Weak
+    </font>
+  ),
 };
 
 export default class SecurityView extends Component {
   getData = () => {
     return [
       {
-        title: '账户密码',
-        description: <Fragment> 当前密码强度：{passwordStrength.strong}</Fragment>,
-        actions: [<a>修改</a>],
+        title: 'account password',
+        description: <Fragment> Current password strength：{passwordStrength.strong}</Fragment>,
+        actions: [<a>Modify</a>],
       },
       {
-        title: '密保手机',
-        description: '已绑定手机：138****8293',
-        actions: [<a>修改</a>],
+        title: 'Security phone',
+        description: 'Bound phone：138****8293',
+        actions: [<a>Modify</a>],
       },
       {
-        title: '密保问题',
-        description: '未设置密保问题，密保问题可有效保护账户安全',
-        actions: [<a>设置</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: '备用邮箱',
-        description: '已绑定邮箱：ant***sign.com',
-        actions: [<a>修改</a>],
+        title: 'Backup Email',
+        description: 'Bound Email：ant***sign.com',
+        actions: [<a>Modify</a>],
       },
       {
-        title: 'MFA 设备',
-        description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
-        actions: [<a>绑定</a>],
+        title: 'MFA Device',
+        description: 'Unbound MFA device, after binding, can be confirmed twice',
+        actions: [<a>Bind</a>],
       },
     ];
   };