signIn

src/index.js

@@ -10,6 +10,7 @@ import './utils/index.js';  // 引入各种prototype辅助方法
 // 开始引入各种自定义的组件
 // import App from './components/App';
 import App from './view/index';
+import SignIn from './view/user/signIn';
 import Welcome from './components/Welcome';
 import Error from './components/Error';
 import Hello from './components/Hello';
@@ -19,7 +20,6 @@ const routes = (
   <Router history={hashHistory}>
     <Route path="/" component={App}>
       <IndexRoute component={Welcome}/>
-
       <Route path="index">
         <Route path="option1" tableName="test" component={DBTable}/>
         <Route path="option2" tableName="testSms" component={DBTable}/>

src/view/index.js

@@ -22,19 +22,19 @@ 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()
+            // 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')
             this.setState({loading: false, login: false})
@@ -44,9 +44,9 @@ const App = React.createClass({
     }
   },
   render(){
-    if (this.state.loading) {
-      return <Spin spinning={this.state.loading} size="large"/>;
-    }
+    // if (this.state.loading) {
+    //   return <Spin spinning={this.state.loading} size="large"/>;
+    // }
 
     if (!this.state.login) {
       return <SignIn loginSuccess={this.loginSuccess}/>;

src/view/user/signIn.js

@@ -1,19 +1,64 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {ajax,config,logger} from '../../utils/lib';
-import {message} from 'antd';
-import './signIn.less';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ajax, config, logger } from '../../utils/lib'
+import { Icon, message, Button, Row, Col, Form, Input, Select} from 'antd'
+import './signIn.less'
 
-const SignIn = React.createClass({
+const FormItem = Form.Item;
+const formItemLayout = {
+  labelCol: {span: 8},
+  wrapperCol: {span: 16}
+};
+
+let SignIn = React.createClass({
+  getInitialState(){
+    return {
+      loading: false
+    }
+  },
+  handleSubmit(){
+
+  },
   render(){
+    const { getFieldProps } = this.props.form;
+    const username = getFieldProps('username', {
+      rules: [
+        {required: true, message: '不能为空'}
+      ]
+    });
+    const password = getFieldProps('password', {
+      rules: [
+        {required: true, message: '不能为空'}
+      ]
+    });
     return (
-      <div className="ant-layout-logo">
-        <div className="logo-text">
-          66666
-        </div>
+      <div className="signIn-from">
+      <Form horizontal onSubmit={this.handleSubmit} form={this.props.form}>
+        <FormItem
+          {...formItemLayout}
+          label="账户："
+          hasFeedback>
+          <Input
+            {...username}
+            placeholder="请输入用户名"/>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="密码："
+          hasFeedback>
+          <Input
+            {...password}
+            placeholder="请输入密码"/>
+        </FormItem>
+        <Row className="self-modal-footer">
+         <Button type="primary" onClick={this.handleSubmit} loading={this.state.loading}>登录</Button>
+        </Row>
+      </Form>
       </div>
-    );
+    )
   }
 })
 
-module.exports = SignIn;
+SignIn = Form.create()(SignIn)
+
+module.exports = SignIn

src/view/user/signIn.less

@@ -0,0 +1,13 @@
+body {
+  background: #f5f5f5;
+}
+
+.signIn-from {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -150px 0 0 -150px;
+  width: 300px;
+  height: 300px;
+  background-color: #fff;
+}