signIn

src/config.js

@@ -7,14 +7,14 @@
 // 遵循统一的规范, 好维护, 交给其他人也比较简单
 
 module.exports = {
-  name: 'Antd管理后台',  // 项目的名字
-  footer: 'Antd版权所有 © 2016',  // footer中显示的字
+  name: 'Ant Design管理后台',  // 项目的名字
+  footer: 'Ant Design版权所有 © 2016',  // footer中显示的字
 
   debug: true,  // 是否开启debug模式, 不会请求后端接口, 使用mock的数据
-  logLevel: 'info',  // 日志级别, 目前支持debug/info/warn/error 4种级别
+  logLevel: 'debug',  // 日志级别, 目前支持debug/info/warn/error 4种级别
 
   api: {  // 对后端请求的相关配置
-    host: 'http://remoteHost:8080',  // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS
+    host: 'http://localhost',  // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS
     path: '/api',  // ajax请求的路径
     timeout: 15000,  // 请求的超时时间, 单位毫秒
   },

src/utils/lib.js

@@ -1,6 +1,7 @@
 import config from 'config';
 import ajax from './ajax';
-import logger from './Logger';
+import Logger from './Logger';
 import './lib.less';
 
+const logger = Logger.getLogger('mockAjax');
 module.exports = {ajax,config,logger};

src/view/index.js

@@ -1,19 +1,21 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import Sidebar from '../components/Sidebar';
-import SignIn from './user/SignIn';
-// import SignIn from '../components/Login';
-import Breadcrumb from '../components/Breadcrumb';
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import Sidebar from '../components/Sidebar'
+import SignIn from './user/SignIn'
+// import SignIn from '../components/Login'
+import Breadcrumb from '../components/Breadcrumb'
 import {ajax,config,logger} from '../utils/lib.js'
 import {Spin, message} from 'antd'
 
 const App = React.createClass({
   getInitialState: function () {
     return {
-      loading: true,
-      login: false,
+      // loading: true,
+      // login: false,
+      loading: false,
+      login: true,
       userName: '未登录',
     }
   },
@@ -22,34 +24,38 @@ const App = React.createClass({
   },
   componentDidMount(){
     if (!this.state.login) {
-      // const hide = message.loading('正在获取用户信息...', 0)
+      const hide = message.loading('正在获取用户信息...', 0)
       ajax.get(`${config.getAPIPath()}${config.login.getCurrentUser}`).end((err, res) => {
         if (ajax.isSuccess(res) && !config.debug) {
-          // hide()
+          hide()
           this.loginSuccess(res.body.data)
         } else {
           if (config.isSSO()) {
-            // hide()
-            // logger.debug('not login, redirect to SSO login page')
+            hide()
+            logger.debug('not login, redirect to SSO login page')
             const redirect = encodeURIComponent(window.location.href)
             window.location.href = `${config.login.sso}${redirect}`
           } else {
-            // hide()
+            hide()
             message.error('获取用户信息失败, 请重新登录')
-            // logger.debug('not login, redirect to Login component')
+            logger.debug('not login, redirect to Login component')
             this.setState({loading: false, login: false})
           }
         }
       })
     }
   },
+  loginSuccess (name, showMsg){
+    logger.debug('callback logingSuccess, name = %s', name)
+    if (showMsg)
+      message.success('登录成功')
+      this.setState({loading: false, login: true, userName: name})
+  },
   render(){
-    // if (this.state.loading) {
-    //   return <Spin spinning={this.state.loading} size="large"/>;
-    // }
-
-    if (!this.state.login) {
-      return <SignIn loginSuccess={this.loginSuccess}/>;
+    if (this.state.loading) {
+      return <Spin spinning={this.state.loading} size="large"><SignIn loginSuccess={this.loginSuccess}/></Spin>
+    } else if (!this.state.login) {
+      return <SignIn loginSuccess={this.loginSuccess}/>
     }
 
     return (

src/view/user/signIn.js

@@ -4,7 +4,7 @@ import { ajax, config, logger } from '../../utils/lib'
 import { Icon, message, Button, Row, Col, Form, Input, Select} from 'antd'
 import './signIn.less'
 
-const FormItem = Form.Item;
+const FormItem = Form.Item
 
 let SignIn = React.createClass({
   getInitialState(){
@@ -13,24 +13,36 @@ let SignIn = React.createClass({
     }
   },
   handleSubmit(e){
-    var _this = this;
-    e.preventDefault();
+    var _this = this
+    e.preventDefault()
     this.props.form.validateFieldsAndScroll((errors, values) => {
-      console.log(values);
+      if (!!errors) {
+        return
+      }
+      ajax.post(`${config.getAPIPath()}${config.login.validate}`).type('form').send(values).end((err, res) => {
+        if (ajax.isSuccess(res)) {
+          if (this.props.loginSuccess)
+            this.props.loginSuccess(res.body.data, true)
+          else
+            message.info(`登录成功, 用户名: ${res.body.data}`)
+        } else {
+           message.error(`登录失败: ${res.body.message}, 请联系管理员`)
+        }
+      })
     })
   },
   render(){
-    const { getFieldProps } = this.props.form;
+    const { getFieldProps } = this.props.form
     const username = getFieldProps('username', {
       rules: [
         {required: true, message: '不能为空'}
       ]
-    });
+    })
     const password = getFieldProps('password', {
       rules: [
         {required: true, message: '不能为空'}
       ]
-    });
+    })
     return (
       <div className="signIn-from">
         <div className="logo mb">
@@ -50,6 +62,7 @@ let SignIn = React.createClass({
             <Input
               {...password}
               size="large"
+              type="password"
               placeholder="密码"/>
           </FormItem>
           <Row className="self-modal-footer">

src/view/user/signIn.less

@@ -7,7 +7,8 @@
   height: 320px;
   padding: 36px;
   box-shadow: 0 0 100px rgba(0,0,0,.08);
-  button{
+
+  button {
     width: 100%;
   }
 }
@@ -16,6 +17,7 @@
   text-align: center;
   height: 40px;
   line-height: 40px;
+  cursor: pointer;
 
   img {
     width: 40px;
@@ -29,3 +31,6 @@
     display: inline-block;
   }
 }
+.ant-spin-container,.ant-spin-nested-loading{
+  height: 100%;
+}