Localized pages: Login Page, Register Page and RegisterResult page. (#2428)

* localized pages: Login Page, Register Page and RegisterResult page.

* Revert locale key `navbar.lang`

src/layouts/UserLayout.js

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { formatMessage } from 'umi/locale';
 import Link from 'umi/link';
 import { Icon } from 'antd';
 import GlobalFooter from '@/components/GlobalFooter';
@@ -8,17 +9,17 @@ import logo from '../assets/logo.svg';
 const links = [
   {
     key: 'help',
-    title: '帮助',
+    title: formatMessage({ id: 'layout.user.link.help' }),
     href: '',
   },
   {
     key: 'privacy',
-    title: '隐私',
+    title: formatMessage({ id: 'layout.user.link.privacy' }),
     href: '',
   },
   {
     key: 'terms',
-    title: '条款',
+    title: formatMessage({ id: 'layout.user.link.terms' }),
     href: '',
   },
 ];

src/locales/en-US.js

@@ -1,5 +1,26 @@
 export default {
   'navbar.lang': '中文',
+  'layout.user.link.help': 'help',
+  'layout.user.link.privacy': 'privacy',
+  'layout.user.link.terms': 'terms',
+  'validation.email.required': 'Please enter your email!',
+  'validation.email.wrong-format': 'The email address is in the wrong format!',
+  'validation.password.required': 'Please enter your password!',
+  'validation.password.twice': 'The passwords entered twice do not match!',
+  'validation.password.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'validation.password.strength.strong': 'Strength: strong',
+  'validation.password.strength.medium': 'Strength: medium',
+  'validation.password.strength.short': 'Strength: too short',
+  'validation.confirm-password.required': 'Please confirm your password!',
+  'validation.phone-number.required': 'Please enter your phone number!',
+  'validation.phone-number.wrong-format': 'Malformed phone number!',
+  'validation.verification-code.required': 'Please enter the verification code!',
+  'form.email.placeholder': 'Email',
+  'form.password.placeholder': 'Password',
+  'form.confirm-password.placeholder': 'Confirm password',
+  'form.phone-number.placeholder': 'Phone number',
+  'form.verification-code.placeholder': 'Verification code',
   'component.globalHeader.search': 'Search',
   'component.globalHeader.search.example1': 'Search example 1',
   'component.globalHeader.search.example2': 'Search example 2',
@@ -50,6 +71,21 @@ export default {
   'menu.account.settings': 'Account Settings',
   'menu.account.trigger': 'Trigger Error',
   'menu.account.logout': 'Logout',
+  'app.login.tab-login-credentials': 'Credentials',
+  'app.login.tab-login-mobile': 'Mobile number',
+  'app.login.remember-me': 'Remember me',
+  'app.login.forgot-password': 'Forgot your password?',
+  'app.login.sign-in-with': 'Sign in with',
+  'app.login.signup': 'Sign up',
+  'app.login.login': 'Login',
+  'app.register.register': 'Register',
+  'app.register.get-verification-code': 'Get code',
+  'app.register.sing-in': 'Already have an account?',
+  'app.register-result.msg': 'Account：registered at {email}',
+  'app.register-result.activation-email':
+    'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+  'app.register-result.back-home': 'Back to home',
+  'app.register-result.view-mailbox': 'View mailbox',
   'app.home.introduce': 'introduce',
   'app.analysis.test': 'Gongzhuan No.{no} shop',
   'app.analysis.introduce': 'Introduce',

src/locales/zh-CN.js

@@ -2,6 +2,26 @@
 
 export default {
   'navbar.lang': 'English',
+  'layout.user.link.help': '帮助',
+  'layout.user.link.privacy': '隐私',
+  'layout.user.link.terms': '条款',
+  'validation.email.required': '请输入邮箱地址！',
+  'validation.email.wrong-format': '邮箱地址格式错误！',
+  'validation.password.required': '请输入密码！',
+  'validation.password.twice': '两次输入的密码不匹配!',
+  'validation.password.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'validation.password.strength.strong': '强度：强',
+  'validation.password.strength.medium': '强度：中',
+  'validation.password.strength.short': '强度：太短',
+  'validation.confirm-password.required': '请确认密码！',
+  'validation.phone-number.required': '请输入手机号！',
+  'validation.phone-number.wrong-format': '手机号格式错误！',
+  'validation.verification-code.required': '请输入验证码！',
+  'form.email.placeholder': '邮箱',
+  'form.password.placeholder': '至少6位密码，区分大小写',
+  'form.confirm-password.placeholder': '确认密码',
+  'form.phone-number.placeholder': '位手机号',
+  'form.verification-code.placeholder': '验证码',
   'component.globalHeader.search': '站内搜索',
   'component.globalHeader.search.example1': '搜索提示一',
   'component.globalHeader.search.example2': '搜索提示二',
@@ -52,6 +72,21 @@ export default {
   'menu.account.settings': '个人设置',
   'menu.account.trigger': '触发报错',
   'menu.account.logout': '退出登录',
+  'app.login.tab-login-credentials': '账户密码登录',
+  'app.login.tab-login-mobile': '手机号登录',
+  'app.login.remember-me': '自动登录',
+  'app.login.forgot-password': '忘记密码',
+  'app.login.sign-in-with': '其他登录方式',
+  'app.login.signup': '注册账户',
+  'app.login.login': '登录',
+  'app.register.register': '注册',
+  'app.register.get-verification-code': '获取验证码',
+  'app.register.sing-in': '使用已有账户登录',
+  'app.register-result.msg': '你的账户：{email} 注册成功',
+  'app.register-result.activation-email':
+    '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+  'app.register-result.back-home': '返回首页',
+  'app.register-result.view-mailbox': '查看邮箱',
   'app.home.introduce': '介绍',
   'app.analysis.test': '工专路 {no} 号店',
   'app.analysis.introduce': '指标说明',

src/pages/User/Login.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
+import { formatMessage, FormattedMessage } from 'umi/locale';
 import Link from 'umi/link';
 import { Checkbox, Alert, Icon } from 'antd';
 import Login from '@/components/Login';
@@ -75,7 +76,7 @@ class LoginPage extends Component {
             this.loginForm = form;
           }}
         >
-          <Tab key="account" tab="账户密码登录">
+          <Tab key="account" tab={formatMessage({ id: 'app.login.tab-login-credentials' })}>
             {login.status === 'error' &&
               login.type === 'account' &&
               !submitting &&
@@ -87,7 +88,7 @@ class LoginPage extends Component {
               onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
             />
           </Tab>
-          <Tab key="mobile" tab="手机号登录">
+          <Tab key="mobile" tab={formatMessage({ id: 'app.login.tab-login-mobile' })}>
             {login.status === 'error' &&
               login.type === 'mobile' &&
               !submitting &&
@@ -97,20 +98,22 @@ class LoginPage extends Component {
           </Tab>
           <div>
             <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
-              自动登录
+              <FormattedMessage id="app.login.remember-me" />
             </Checkbox>
             <a style={{ float: 'right' }} href="">
-              忘记密码
+              <FormattedMessage id="app.login.forgot-password" />
             </a>
           </div>
-          <Submit loading={submitting}>登录</Submit>
+          <Submit loading={submitting}>
+            <FormattedMessage id="app.login.login" />
+          </Submit>
           <div className={styles.other}>
-            其他登录方式
+            <FormattedMessage id="app.login.sign-in-with" />
             <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
             <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
             <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
             <Link className={styles.register} to="/User/Register">
-              注册账户
+              <FormattedMessage id="app.login.signup" />
             </Link>
           </div>
         </Login>

src/pages/User/Register.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
+import { formatMessage, FormattedMessage } from 'umi/locale';
 import Link from 'umi/link';
 import router from 'umi/router';
 import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';
@@ -10,9 +11,21 @@ const { Option } = Select;
 const InputGroup = Input.Group;
 
 const passwordStatusMap = {
-  ok: <div className={styles.success}>强度：强</div>,
-  pass: <div className={styles.warning}>强度：中</div>,
-  poor: <div className={styles.error}>强度：太短</div>,
+  ok: (
+    <div className={styles.success}>
+      <FormattedMessage id="validation.password.strength.strong" />
+    </div>
+  ),
+  pass: (
+    <div className={styles.warning}>
+      <FormattedMessage id="validation.password.strength.medium" />
+    </div>
+  ),
+  poor: (
+    <div className={styles.error}>
+      <FormattedMessage id="validation.password.strength.short" />
+    </div>
+  ),
 };
 
 const passwordProgressMap = {
@@ -102,7 +115,7 @@ class Register extends Component {
   checkConfirm = (rule, value, callback) => {
     const { form } = this.props;
     if (value && value !== form.getFieldValue('password')) {
-      callback('两次输入的密码不匹配!');
+      callback(formatMessage({ id: 'validation.password.twice' }));
     } else {
       callback();
     }
@@ -112,7 +125,7 @@ class Register extends Component {
     const { visible, confirmDirty } = this.state;
     if (!value) {
       this.setState({
-        help: '请输入密码！',
+        help: formatMessage({ id: 'validation.password.required' }),
         visible: !!value,
       });
       callback('error');
@@ -166,21 +179,25 @@ class Register extends Component {
     const { count, prefix, help, visible } = this.state;
     return (
       <div className={styles.main}>
-        <h3>注册</h3>
+        <h3>
+          <FormattedMessage id="app.register.register" />
+        </h3>
         <Form onSubmit={this.handleSubmit}>
           <FormItem>
             {getFieldDecorator('mail', {
               rules: [
                 {
                   required: true,
-                  message: '请输入邮箱地址！',
+                  message: formatMessage({ id: 'validation.email.required' }),
                 },
                 {
                   type: 'email',
-                  message: '邮箱地址格式错误！',
+                  message: formatMessage({ id: 'validation.email.wrong-format' }),
                 },
               ],
-            })(<Input size="large" placeholder="邮箱" />)}
+            })(
+              <Input size="large" placeholder={formatMessage({ id: 'form.email.placeholder' })} />
+            )}
           </FormItem>
           <FormItem help={help}>
             <Popover
@@ -189,7 +206,7 @@ class Register extends Component {
                   {passwordStatusMap[this.getPasswordStatus()]}
                   {this.renderPasswordProgress()}
                   <div style={{ marginTop: 10 }}>
-                    请至少输入 6 个字符。请不要使用容易被猜到的密码。
+                    <FormattedMessage id="validation.password.strength.msg" />
                   </div>
                 </div>
               }
@@ -203,7 +220,13 @@ class Register extends Component {
                     validator: this.checkPassword,
                   },
                 ],
-              })(<Input size="large" type="password" placeholder="至少6位密码，区分大小写" />)}
+              })(
+                <Input
+                  size="large"
+                  type="password"
+                  placeholder={formatMessage({ id: 'form.password.placeholder' })}
+                />
+              )}
             </Popover>
           </FormItem>
           <FormItem>
@@ -211,13 +234,19 @@ class Register extends Component {
               rules: [
                 {
                   required: true,
-                  message: '请确认密码！',
+                  message: formatMessage({ id: 'validation.confirm-password.required' }),
                 },
                 {
                   validator: this.checkConfirm,
                 },
               ],
-            })(<Input size="large" type="password" placeholder="确认密码" />)}
+            })(
+              <Input
+                size="large"
+                type="password"
+                placeholder={formatMessage({ id: 'form.confirm-password.placeholder' })}
+              />
+            )}
           </FormItem>
           <FormItem>
             <InputGroup compact>
@@ -234,14 +263,20 @@ class Register extends Component {
                 rules: [
                   {
                     required: true,
-                    message: '请输入手机号！',
+                    message: formatMessage({ id: 'validation.phone-number.required' }),
                   },
                   {
-                    pattern: /^1\d{10}$/,
-                    message: '手机号格式错误！',
+                    pattern: /^\d{10}$/,
+                    message: formatMessage({ id: 'validation.phone-number.wrong-format' }),
                   },
                 ],
-              })(<Input size="large" style={{ width: '80%' }} placeholder="11位手机号" />)}
+              })(
+                <Input
+                  size="large"
+                  style={{ width: '80%' }}
+                  placeholder={formatMessage({ id: 'form.phone-number.placeholder' })}
+                />
+              )}
             </InputGroup>
           </FormItem>
           <FormItem>
@@ -251,10 +286,15 @@ class Register extends Component {
                   rules: [
                     {
                       required: true,
-                      message: '请输入验证码！',
+                      message: formatMessage({ id: 'validation.verification-code.required' }),
                     },
                   ],
-                })(<Input size="large" placeholder="验证码" />)}
+                })(
+                  <Input
+                    size="large"
+                    placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
+                  />
+                )}
               </Col>
               <Col span={8}>
                 <Button
@@ -263,7 +303,9 @@ class Register extends Component {
                   className={styles.getCaptcha}
                   onClick={this.onGetCaptcha}
                 >
-                  {count ? `${count} s` : '获取验证码'}
+                  {count
+                    ? `${count} s`
+                    : formatMessage({ id: 'app.register.get-verification-code' })}
                 </Button>
               </Col>
             </Row>
@@ -276,10 +318,10 @@ class Register extends Component {
               type="primary"
               htmlType="submit"
             >
-              注册
+              <FormattedMessage id="app.register.register" />
             </Button>
             <Link className={styles.login} to="/User/Login">
-              使用已有账户登录
+              <FormattedMessage id="app.register.sing-in" />
             </Link>
           </FormItem>
         </Form>

src/pages/User/RegisterResult.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { formatMessage, FormattedMessage } from 'umi/locale';
 import { Button } from 'antd';
 import Link from 'umi/link';
 import Result from '@/components/Result';
@@ -8,11 +9,13 @@ const actions = (
   <div className={styles.actions}>
     <a href="">
       <Button size="large" type="primary">
-        查看邮箱
+        <FormattedMessage id="app.register-result.view-mailbox" />
       </Button>
     </a>
     <Link to="/">
-      <Button size="large">返回首页</Button>
+      <Button size="large">
+        <FormattedMessage id="app.register-result.back-home" />
+      </Button>
     </Link>
   </div>
 );
@@ -23,12 +26,13 @@ const RegisterResult = ({ location }) => (
     type="success"
     title={
       <div className={styles.title}>
-        你的账户：
-        {location.state ? location.state.account : 'AntDesign@example.com'}
-        注册成功
+        <FormattedMessage
+          id="app.register-result.msg"
+          values={{ email: location.state ? location.state.account : 'AntDesign@example.com' }}
+        />
       </div>
     }
-    description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
+    description={formatMessage({ id: 'app.register-result.activation-email' })}
     actions={actions}
     style={{ marginTop: 56 }}
   />