add username and password validator

HLLRESOURSES · Jan 14, 2019 · 65f2ab2 · 65f2ab2
1 parent 90c4159
commit 65f2ab2
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 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,8 @@ const I18N_CONF = {
     community: 'COMMUNITY',
     languageSwitchButton: '中',
     logout: 'logout',
+    passwordRequired: 'password should not be empty',
+    usernameRequired: 'username should not be empty',
   },
   Login: {
     login: 'Login',

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
@@ -26,6 +26,8 @@ const I18N_CONF = {
     pleaseInputUsername: '请输入用户名',
     pleaseInputPassword: '请输入密码',
     invalidUsernameOrPassword: '用户名或密码错误',
+    passwordRequired: '密码不能为空',
+    usernameRequired: '用户名不能为空',
   },
   MainLayout: {
     nacosName: 'NACOS',

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, ConfigProvider } from '@alifd/next';
+import { Card, Form, Input, Message, ConfigProvider, Field } from '@alifd/next';
 import { withRouter } from 'react-router-dom';
 
 import './index.scss';
@@ -13,31 +13,41 @@ const FormItem = Form.Item;
 class Login extends React.Component {
   static displayName = 'Login';
 
-  handleSubmit = values => {
+  constructor(props) {
+    super(props);
+    this.field = new Field(this);
+  }
+
+  handleSubmit = () => {
     const { locale = {} } = this.props;
-    request({
-      type: 'post',
-      url: 'v1/auth/login',
-      data: values,
-      success: res => {
-        if (res.code === 200) {
-          const data = res.data;
-          // TODO: 封装一个方法存储、读取token
-          localStorage.setItem('token', data);
-          // TODO: 使用react router
-          this.props.history.push('/');
-        }
-        if (res.code === 401) {
+    this.field.validate((errors, values) => {
+      if (errors) {
+        return;
+      }
+      request({
+        type: 'post',
+        url: 'v1/auth/login',
+        data: values,
+        success: res => {
+          if (res.code === 200) {
+            const data = res.data;
+            // TODO: 封装一个方法存储、读取token
+            localStorage.setItem('token', data);
+            // TODO: 使用react router
+            this.props.history.push('/');
+          }
+          if (res.code === 401) {
+            Message.error({
+              content: locale.invalidUsernameOrPassword,
+            });
+          }
+        },
+        error: () => {
           Message.error({
             content: locale.invalidUsernameOrPassword,
           });
-        }
-      },
-      error: () => {
-        Message.error({
-          content: locale.invalidUsernameOrPassword,
-        });
-      },
+        },
+      });
     });
   };
 
@@ -68,15 +78,32 @@ class Login extends React.Component {
           <div className="animation animation5" />
           <Card className="login-panel" contentHeight="auto">
             <div className="login-header">{locale.login}</div>
-            <Form className="login-form">
+            <Form className="login-form" field={this.field}>
               <FormItem>
-                <Input htmlType="text" name="username" placeholder={locale.pleaseInputUsername} />
+                <Input
+                  {...this.field.init('username', {
+                    rules: [
+                      {
+                        required: true,
+                        message: locale.usernameRequired,
+                      },
+                    ],
+                  })}
+                  placeholder={locale.pleaseInputUsername}
+                />
               </FormItem>
               <FormItem>
                 <Input
                   htmlType="password"
-                  name="password"
                   placeholder={locale.pleaseInputPassword}
+                  {...this.field.init('password', {
+                    rules: [
+                      {
+                        required: true,
+                        message: locale.passwordRequired,
+                      },
+                    ],
+                  })}
                 />
               </FormItem>
               <FormItem label=" ">

diff --git a/console/src/main/resources/static/js/main.js b/console/src/main/resources/static/js/main.js