Internationalize login component (#3014)

* Enable hash suffix for the built files by default

* Fix https://github.com/ant-design/ant-design-pro/issues/2921 internationalize login component.

* Revert umi hash

* Remove umi dependency for Login component

src/locales/en-US/form.js

@@ -1,5 +1,5 @@
 export default {
-  'form.captcha': 'Get Captcha',
+  'form.get-captcha': 'Get Captcha',
   'form.captcha.second': 'sec',
   'form.optional': ' (optional) ',
   'form.submit': 'Submit',

src/locales/en-US/login.js

@@ -1,4 +1,6 @@
 export default {
+  'app.login.userName': 'userName',
+  'app.login.password': 'password',
   'app.login.message-invalid-credentials': 'Invalid username or password（admin/ant.design）',
   'app.login.message-invalid-verification-code': 'Invalid verification code',
   'app.login.tab-login-credentials': 'Credentials',
@@ -18,6 +20,7 @@ export default {
   'app.register-result.view-mailbox': 'View mailbox',
   'validation.email.required': 'Please enter your email!',
   'validation.email.wrong-format': 'The email address is in the wrong format!',
+  'validation.userName.required': 'Please enter your userName!',
   'validation.password.required': 'Please enter your password!',
   'validation.password.twice': 'The passwords entered twice do not match!',
   'validation.password.strength.msg':

src/locales/pt-BR/form.js

@@ -1,5 +1,5 @@
 export default {
-  'form.captcha': 'Get Captcha',
+  'form.get-captcha': 'Get Captcha',
   'form.captcha.second': 'sec',
   'form.email.placeholder': 'Email',
   'form.password.placeholder': 'Senha',

src/locales/pt-BR/login.js

@@ -1,4 +1,6 @@
 export default {
+  'app.login.userName': 'Nome de usuário',
+  'app.login.password': 'Sua senha',
   'app.login.message-invalid-credentials':
     'Nome de usuário ou senha inválidosd（admin/ant.design）',
   'app.login.message-invalid-verification-code': 'Código de verificação inválido',
@@ -19,6 +21,7 @@ export default {
   'app.register-result.view-mailbox': 'Visualizar a caixa de email',
   'validation.email.required': 'Por favor insira seu email!',
   'validation.email.wrong-format': 'O email está errado!',
+  'validation.userName.required': 'Por favor insira nome de usuário!',
   'validation.password.required': 'Por favor insira sua senha!',
   'validation.password.twice': 'As senhas não estão iguais!',
   'validation.password.strength.msg':

src/locales/zh-CN/form.js

@@ -1,5 +1,5 @@
 export default {
-  'form.captcha': '获取验证码',
+  'form.get-captcha': '获取验证码',
   'form.captcha.second': '秒',
   'form.optional': '（选填）',
   'form.submit': '提交',
@@ -7,7 +7,7 @@ export default {
   'form.email.placeholder': '邮箱',
   'form.password.placeholder': '至少6位密码，区分大小写',
   'form.confirm-password.placeholder': '确认密码',
-  'form.phone-number.placeholder': '位手机号',
+  'form.phone-number.placeholder': '手机号',
   'form.verification-code.placeholder': '验证码',
   'form.title.label': '标题',
   'form.title.placeholder': '给目标起个名字',

src/locales/zh-CN/login.js

@@ -1,4 +1,6 @@
 export default {
+  'app.login.userName': '用户名',
+  'app.login.password': '密码',
   'app.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
   'app.login.message-invalid-verification-code': '验证码错误',
   'app.login.tab-login-credentials': '账户密码登录',
@@ -18,6 +20,7 @@ export default {
   'app.register-result.view-mailbox': '查看邮箱',
   'validation.email.required': '请输入邮箱地址！',
   'validation.email.wrong-format': '邮箱地址格式错误！',
+  'validation.userName.required': '请输入用户名!',
   'validation.password.required': '请输入密码！',
   'validation.password.twice': '两次输入的密码不匹配!',
   'validation.password.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',

src/locales/zh-TW/form.js

@@ -1,5 +1,5 @@
 export default {
-  'form.captcha': '獲取驗證碼',
+  'form.get-captcha': '獲取驗證碼',
   'form.captcha.second': '秒',
   'form.optional': '（選填）',
   'form.submit': '提交',
@@ -7,7 +7,7 @@ export default {
   'form.email.placeholder': '郵箱',
   'form.password.placeholder': '至少6位密碼，區分大小寫',
   'form.confirm-password.placeholder': '確認密碼',
-  'form.phone-number.placeholder': '位手機號',
+  'form.phone-number.placeholder': '手機號',
   'form.verification-code.placeholder': '驗證碼',
   'form.title.label': '標題',
   'form.title.placeholder': '給目標起個名字',

src/locales/zh-TW/login.js

@@ -1,4 +1,6 @@
 export default {
+  'app.login.userName': '賬戶',
+  'app.login.password': '密碼',
   'app.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
   'app.login.message-invalid-verification-code': '驗證碼錯誤',
   'app.login.tab-login-credentials': '賬戶密碼登錄',
@@ -18,6 +20,7 @@ export default {
   'app.register-result.view-mailbox': '查看郵箱',
   'validation.email.required': '請輸入郵箱地址！',
   'validation.email.wrong-format': '郵箱地址格式錯誤！',
+  'validation.userName.required': '請輸入賬戶!',
   'validation.password.required': '請輸入密碼！',
   'validation.password.twice': '兩次輸入的密碼不匹配!',
   'validation.password.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',

src/pages/User/Login.js

@@ -81,10 +81,25 @@ class LoginPage extends Component {
               login.type === 'account' &&
               !submitting &&
               this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
-            <UserName name="userName" placeholder="username: admin or user" />
+            <UserName
+              name="userName"
+              placeholder={`${formatMessage({ id: 'app.login.userName' })}: admin or user`}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'validation.userName.required' }),
+                },
+              ]}
+            />
             <Password
               name="password"
-              placeholder="password: ant.design"
+              placeholder={`${formatMessage({ id: 'app.login.password' })}: ant.design`}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'validation.password.required' }),
+                },
+              ]}
               onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
             />
           </Tab>
@@ -95,13 +110,33 @@ class LoginPage extends Component {
               this.renderMessage(
                 formatMessage({ id: 'app.login.message-invalid-verification-code' })
               )}
-            <Mobile name="mobile" />
+            <Mobile
+              name="mobile"
+              placeholder={formatMessage({ id: 'form.phone-number.placeholder' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'validation.phone-number.required' }),
+                },
+                {
+                  pattern: /^1\d{10}$/,
+                  message: formatMessage({ id: 'validation.phone-number.wrong-format' }),
+                },
+              ]}
+            />
             <Captcha
               name="captcha"
+              placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
               countDown={120}
               onGetCaptcha={this.onGetCaptcha}
-              getCaptchaButtonText={formatMessage({ id: 'form.captcha' })}
+              getCaptchaButtonText={formatMessage({ id: 'form.get-captcha' })}
               getCaptchaSecondText={formatMessage({ id: 'form.captcha.second' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'validation.verification-code.required' }),
+                },
+              ]}
             />
           </Tab>
           <div>