feat: add English translation for Login screen (#7535)

* feat: add Indonesian translation

* feat: add Indonesian translation

* style: format code using Prettier

* feat: add English translation for Login screen

src/layouts/UserLayout.tsx

@@ -1,6 +1,6 @@
 import { DefaultFooter, MenuDataItem, getMenuData, getPageTitle } from '@ant-design/pro-layout';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Link, SelectLang, useIntl, ConnectProps, connect } from 'umi';
+import { Link, SelectLang, useIntl, ConnectProps, connect, FormattedMessage } from 'umi';
 import React from 'react';
 import { ConnectState } from '@/models/connect';
 import logo from '../assets/logo.svg';
@@ -52,7 +52,12 @@ const UserLayout: React.FC<UserLayoutProps> = (props) => {
                 <span className={styles.title}>Ant Design</span>
               </Link>
             </div>
-            <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+            <div className={styles.desc}>
+              <FormattedMessage
+                id="pages.layouts.userLayout.title"
+                defaultMessage="Ant Design 是西湖区最具影响力的 Web 设计规范"
+              />
+            </div>
           </div>
           {children}
         </div>

src/locales/en-US.ts

@@ -4,6 +4,7 @@ import menu from './en-US/menu';
 import pwa from './en-US/pwa';
 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/settings';
+import pages from './en-US/pages';
 
 export default {
   'navBar.lang': 'Languages',
@@ -19,4 +20,5 @@ export default {
   ...settings,
   ...pwa,
   ...component,
+  ...pages,
 };

src/locales/en-US/pages.ts

@@ -0,0 +1,24 @@
+export default {
+  'pages.layouts.userLayout.title':
+    'Ant Design is the most influential web design specification in Xihu district',
+  'pages.login.accountLogin.tab': 'Account Login',
+  'pages.login.accountLogin.errorMessage': 'Incorrect username/password（admin/ant.design)',
+  'pages.login.username.placeholder': 'Username: admin or user',
+  'pages.login.username.required': 'Please input your username!',
+  'pages.login.password.placeholder': 'Password: ant.design',
+  'pages.login.password.required': 'Please input your password!',
+  'pages.login.phoneLogin.tab': 'Phone Login',
+  'pages.login.phoneLogin.errorMessage': 'Verification Code Error',
+  'pages.login.phoneNumber.placeholder': 'Phone Number',
+  'pages.login.phoneNumber.required': 'Please input your phone number!',
+  'pages.login.phoneNumber.invalid': 'Phone number is invalid!',
+  'pages.login.captcha.placeholder': 'Verification Code',
+  'pages.login.captcha.required': 'Please input verification code!',
+  'pages.login.phoneLogin.getVerificationCode': 'Get Code',
+  'pages.getCaptchaSecondText': 'sec(s)',
+  'pages.login.rememberMe': 'Remember me',
+  'pages.login.forgotPassword': 'Forgot Password ?',
+  'pages.login.submit': 'Submit',
+  'pages.login.loginWith': 'Login with :',
+  'pages.login.registerAccount': 'Register Account',
+};

src/pages/user/login/components/Login/LoginItem.tsx

@@ -3,6 +3,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import omit from 'omit.js';
 import { FormItemProps } from 'antd/es/form/FormItem';
 import { getFakeCaptcha } from '@/services/login';
+import { FormattedMessage } from 'umi';
 
 import ItemMap from './map';
 import LoginContext, { LoginContextProps } from './LoginContext';
@@ -131,7 +132,14 @@ const LoginItem: React.FC<LoginItemProps> = (props) => {
                   onGetCaptcha(value);
                 }}
               >
-                {timing ? `${count} 秒` : '获取验证码'}
+                {timing ? (
+                  `${count} 秒`
+                ) : (
+                  <FormattedMessage
+                    id="pages.login.phoneLogin.getVerificationCode"
+                    defaultMessage="获取验证码"
+                  />
+                )}
               </Button>
             </Col>
           </Row>

src/pages/user/login/index.tsx

@@ -1,7 +1,7 @@
 import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined } from '@ant-design/icons';
 import { Alert, Checkbox } from 'antd';
 import React, { useState } from 'react';
-import { Link, connect, Dispatch } from 'umi';
+import { Link, connect, Dispatch, useIntl, FormattedMessage } from 'umi';
 import { StateType } from '@/models/login';
 import { LoginParamsType } from '@/services/login';
 import { ConnectState } from '@/models/connect';
@@ -34,6 +34,7 @@ const Login: React.FC<LoginProps> = (props) => {
   const { status, type: loginType } = userLogin;
   const [autoLogin, setAutoLogin] = useState(true);
   const [type, setType] = useState<string>('account');
+  const intl = useIntl();
 
   const handleSubmit = (values: LoginParamsType) => {
     const { dispatch } = props;
@@ -45,84 +46,148 @@ const Login: React.FC<LoginProps> = (props) => {
   return (
     <div className={styles.main}>
       <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
-        <Tab key="account" tab="账户密码登录">
+        <Tab
+          key="account"
+          tab={intl.formatMessage({
+            id: 'pages.login.accountLogin.tab',
+            defaultMessage: '账户密码登录',
+          })}
+        >
           {status === 'error' && loginType === 'account' && !submitting && (
-            <LoginMessage content="账户或密码错误（admin/ant.design）" />
+            <LoginMessage
+              content={intl.formatMessage({
+                id: 'pages.login.accountLogin.errorMessage',
+                defaultMessage: '账户或密码错误（admin/ant.design)',
+              })}
+            />
           )}
 
           <UserName
             name="userName"
-            placeholder="用户名: admin or user"
+            placeholder={intl.formatMessage({
+              id: 'pages.login.username.placeholder',
+              defaultMessage: '用户名: admin or user',
+            })}
             rules={[
               {
                 required: true,
-                message: '请输入用户名!',
+                message: (
+                  <FormattedMessage
+                    id="pages.login.username.required"
+                    defaultMessage="请输入用户名!"
+                  />
+                ),
               },
             ]}
           />
           <Password
             name="password"
-            placeholder="密码: ant.design"
+            placeholder={intl.formatMessage({
+              id: 'pages.login.password.placeholder',
+              defaultMessage: '密码: ant.design',
+            })}
             rules={[
               {
                 required: true,
-                message: '请输入密码！',
+                message: (
+                  <FormattedMessage
+                    id="pages.login.password.required"
+                    defaultMessage="请输入密码！"
+                  />
+                ),
               },
             ]}
           />
         </Tab>
-        <Tab key="mobile" tab="手机号登录">
+        <Tab
+          key="mobile"
+          tab={intl.formatMessage({
+            id: 'pages.login.phoneLogin.tab',
+            defaultMessage: '手机号登录',
+          })}
+        >
           {status === 'error' && loginType === 'mobile' && !submitting && (
-            <LoginMessage content="验证码错误" />
+            <LoginMessage
+              content={intl.formatMessage({
+                id: 'pages.login.phoneLogin.errorMessage',
+                defaultMessage: '验证码错误',
+              })}
+            />
           )}
           <Mobile
             name="mobile"
-            placeholder="手机号"
+            placeholder={intl.formatMessage({
+              id: 'pages.login.phoneNumber.placeholder',
+              defaultMessage: '手机号',
+            })}
             rules={[
               {
                 required: true,
-                message: '请输入手机号！',
+                message: (
+                  <FormattedMessage
+                    id="pages.login.phoneNumber.required"
+                    defaultMessage="请输入手机号！"
+                  />
+                ),
               },
               {
                 pattern: /^1\d{10}$/,
-                message: '手机号格式错误！',
+                message: (
+                  <FormattedMessage
+                    id="pages.login.phoneNumber.invalid"
+                    defaultMessage="手机号格式错误！"
+                  />
+                ),
               },
             ]}
           />
           <Captcha
             name="captcha"
-            placeholder="验证码"
+            placeholder={intl.formatMessage({
+              id: 'pages.login.captcha.placeholder',
+              defaultMessage: '验证码',
+            })}
             countDown={120}
             getCaptchaButtonText=""
-            getCaptchaSecondText="秒"
+            getCaptchaSecondText={intl.formatMessage({
+              id: 'pages.getCaptchaSecondText',
+              defaultMessage: '秒',
+            })}
             rules={[
               {
                 required: true,
-                message: '请输入验证码！',
+                message: (
+                  <FormattedMessage
+                    id="pages.login.captcha.required"
+                    defaultMessage="请输入验证码！"
+                  />
+                ),
               },
             ]}
           />
         </Tab>
         <div>
           <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
-            自动登录
+            <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
           </Checkbox>
           <a
             style={{
               float: 'right',
             }}
           >
-            忘记密码
+            <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
           </a>
         </div>
-        <Submit loading={submitting}>登录</Submit>
+        <Submit loading={submitting}>
+          <FormattedMessage id="pages.login.submit" defaultMessage="登录" />
+        </Submit>
         <div className={styles.other}>
-          其他登录方式
+          <FormattedMessage id="pages.login.loginWith" defaultMessage="其他登录方式" />
           <AlipayCircleOutlined className={styles.icon} />
           <TaobaoCircleOutlined className={styles.icon} />
           <WeiboCircleOutlined className={styles.icon} />
           <Link className={styles.register} to="/user/register">
-            注册账户
+            <FormattedMessage id="pages.login.registerAccount" defaultMessage="注册账户" />
           </Link>
         </div>
       </LoginForm>