realization of i18n

HLLRESOURSES · Jan 9, 2019 · d09c0e5 · d09c0e5
1 parent f77dbd0
commit d09c0e5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/console/src/main/resources/static/console-fe/src/locales/en-US.js b/console/src/main/resources/static/console-fe/src/locales/en-US.js
@@ -19,6 +19,13 @@ const I18N_CONF = {
     community: 'COMMUNITY',
     languageSwitchButton: '中',
   },
+  Login: {
+    pleaseLogin: 'Plase login',
+    submit: 'Submit',
+    pleaseInputUsername: 'Please input username',
+    pleaseInputPassword: 'Please input password',
+    invalidUsernameOrPassword: 'invalid username or password',
+  },
   MainLayout: {
     nacosName: 'NACOS',
     nacosVersion: '0.7.0',

diff --git a/console/src/main/resources/static/console-fe/src/locales/zh-CN.js b/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
@@ -19,6 +19,13 @@ const I18N_CONF = {
     community: '社区',
     languageSwitchButton: 'En',
   },
+  Login: {
+    pleaseLogin: '请登录',
+    submit: '提交',
+    pleaseInputUsername: '请输入用户名',
+    pleaseInputPassword: '请输入密码',
+    invalidUsernameOrPassword: '用户名或密码错误',
+  },
   MainLayout: {
     nacosName: 'NACOS',
     nacosVersion: '0.7.0',

diff --git a/console/src/main/resources/static/console-fe/src/pages/Login/Login.jsx b/console/src/main/resources/static/console-fe/src/pages/Login/Login.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Form, Input, Message } from '@alifd/next';
+import { Card, Form, Input, Message, ConfigProvider } from '@alifd/next';
 import { withRouter } from 'react-router-dom';
 
 import './index.scss';
@@ -9,8 +9,10 @@ import { request } from '../../globalLib';
 const FormItem = Form.Item;
 
 @withRouter
+@ConfigProvider.config
 class Login extends React.Component {
   handleSubmit = values => {
+    const { locale = {} } = this.props;
     request({
       type: 'get',
       url: 'v1/auth/login',
@@ -23,16 +25,23 @@ class Login extends React.Component {
           // TODO: 使用react router
           this.props.history.push('/');
         }
+        if (res.code === 401) {
+          Message.error({
+            content: locale.invalidUsernameOrPassword,
+          });
+        }
       },
       error: () => {
         Message.error({
-          content: '登录失败',
+          content: locale.invalidUsernameOrPassword,
         });
       },
     });
   };
 
   render() {
+    const { locale = {} } = this.props;
+
     return (
       <div className="home-page">
         <Header />
@@ -56,16 +65,20 @@ class Login extends React.Component {
           <div className="animation animation4" />
           <div className="animation animation5" />
           <Card className="login-panel" contentHeight="auto">
-            <div className="login-header">请登录</div>
+            <div className="login-header">{locale.pleaseLogin}</div>
             <Form className="login-form">
               <FormItem>
-                <Input htmlType="text" name="username" placeholder="请输入账号名" />
+                <Input htmlType="text" name="username" placeholder={locale.pleaseInputUsername} />
               </FormItem>
               <FormItem>
-                <Input htmlType="password" name="password" placeholder="请输入密码" />
+                <Input
+                  htmlType="password"
+                  name="password"
+                  placeholder={locale.pleaseInputPassword}
+                />
               </FormItem>
               <FormItem label=" ">
-                <Form.Submit onClick={this.handleSubmit}>提交</Form.Submit>
+                <Form.Submit onClick={this.handleSubmit}>{locale.submit}</Form.Submit>
               </FormItem>
             </Form>
           </Card>