From 22454601683247c0ee8f62879cf266ebfc3a9be6 Mon Sep 17 00:00:00 2001 From: Rayron Victor Date: Fri, 28 Sep 2018 03:16:56 -0300 Subject: [PATCH] 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 | 7 +-- src/locales/en-US.js | 36 +++++++++++++ src/locales/zh-CN.js | 35 +++++++++++++ src/pages/User/Login.js | 17 ++++--- src/pages/User/Register.js | 86 ++++++++++++++++++++++++-------- src/pages/User/RegisterResult.js | 16 +++--- 6 files changed, 159 insertions(+), 38 deletions(-) diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js index 41e032dd..55b0ab1c 100644 --- a/src/layouts/UserLayout.js +++ b/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: '', }, ]; diff --git a/src/locales/en-US.js b/src/locales/en-US.js index 7d237728..a05cdc27 100644 --- a/src/locales/en-US.js +++ b/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', diff --git a/src/locales/zh-CN.js b/src/locales/zh-CN.js index dbb90517..7207de2a 100644 --- a/src/locales/zh-CN.js +++ b/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': '指标说明', diff --git a/src/pages/User/Login.js b/src/pages/User/Login.js index 6a70f378..6fa13b35 100644 --- a/src/pages/User/Login.js +++ b/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; }} > - + {login.status === 'error' && login.type === 'account' && !submitting && @@ -87,7 +88,7 @@ class LoginPage extends Component { onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)} /> - + {login.status === 'error' && login.type === 'mobile' && !submitting && @@ -97,20 +98,22 @@ class LoginPage extends Component {
- 自动登录 + - 忘记密码 +
- 登录 + + +
- 其他登录方式 + - 注册账户 +
diff --git a/src/pages/User/Register.js b/src/pages/User/Register.js index 1d27ccf7..a2edf27c 100644 --- a/src/pages/User/Register.js +++ b/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:
强度：强
, - pass:
强度：中
, - poor:
强度：太短
, + ok: ( +
+ +
+ ), + pass: ( +
+ +
+ ), + poor: ( +
+ +
+ ), }; 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 (
-

注册

+

+ +

{getFieldDecorator('mail', { rules: [ { required: true, - message: '请输入邮箱地址！', + message: formatMessage({ id: 'validation.email.required' }), }, { type: 'email', - message: '邮箱地址格式错误！', + message: formatMessage({ id: 'validation.email.wrong-format' }), }, ], - })()} + })( + + )} - 请至少输入 6 个字符。请不要使用容易被猜到的密码。 +
} @@ -203,7 +220,13 @@ class Register extends Component { validator: this.checkPassword, }, ], - })()} + })( + + )} @@ -211,13 +234,19 @@ class Register extends Component { rules: [ { required: true, - message: '请确认密码！', + message: formatMessage({ id: 'validation.confirm-password.required' }), }, { validator: this.checkConfirm, }, ], - })()} + })( + + )} @@ -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' }), }, ], - })()} + })( + + )} @@ -251,10 +286,15 @@ class Register extends Component { rules: [ { required: true, - message: '请输入验证码！', + message: formatMessage({ id: 'validation.verification-code.required' }), }, ], - })()} + })( + + )} @@ -276,10 +318,10 @@ class Register extends Component { type="primary" htmlType="submit" > - 注册 + - 使用已有账户登录 + diff --git a/src/pages/User/RegisterResult.js b/src/pages/User/RegisterResult.js index 5f541d28..6e338b27 100644 --- a/src/pages/User/RegisterResult.js +++ b/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 = (
- +
); @@ -23,12 +26,13 @@ const RegisterResult = ({ location }) => ( type="success" title={
- 你的账户： - {location.state ? location.state.account : 'AntDesign@example.com'} - 注册成功 +
} - description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。" + description={formatMessage({ id: 'app.register-result.activation-email' })} actions={actions} style={{ marginTop: 56 }} /> -- GitLab