From d21eacc5eac24e2b33d937ec56d21c9f3b70bace Mon Sep 17 00:00:00 2001
From: "wenbo.dong" <wenbo.dong@qunar.com>
Date: Wed, 19 Jul 2017 22:36:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/containers/Home/Home.js        |   2 +-
 client/containers/Login/Login-wrap.js |  40 +++++++++
 client/containers/Login/Login.scss    |   4 +
 client/containers/Login/Reg.js        | 124 ++++++++++++++++++++++++++
 client/containers/Login/login-wrap.js |   6 +-
 client/containers/index.js            |   2 +-
 6 files changed, 173 insertions(+), 5 deletions(-)
 create mode 100644 client/containers/Login/Login-wrap.js
 create mode 100644 client/containers/Login/Login.scss
 create mode 100644 client/containers/Login/Reg.js

diff --git a/client/containers/Home/Home.js b/client/containers/Home/Home.js
index 841038f8..5a0cd79f 100644
--- a/client/containers/Home/Home.js
+++ b/client/containers/Home/Home.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { Row, Col, Button } from 'antd'
 import PropTypes from "prop-types"
-import Login from '../Login/login-wrap'
+import Login from '../Login/Login-wrap'
 import Intro from '../../components/Intro/Intro'
 import Footer from "../../components/Footer/Footer";
 
diff --git a/client/containers/Login/Login-wrap.js b/client/containers/Login/Login-wrap.js
new file mode 100644
index 00000000..eabaa709
--- /dev/null
+++ b/client/containers/Login/Login-wrap.js
@@ -0,0 +1,40 @@
+import './Login.scss'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Tabs } from 'antd';
+import LoginForm from './Login';
+import RegForm from './Reg';
+const TabPane = Tabs.TabPane;
+
+
+class LoginWrap extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    loginWrapActiveKey:PropTypes.string
+  }
+
+  render() {
+    const { loginWrapActiveKey } = this.props;
+    return (
+      <Tabs defaultActiveKey={loginWrapActiveKey} className="login-form">
+        <TabPane tab="登录" key="1">
+          <LoginForm/>
+        </TabPane>
+        <TabPane tab="注册" key="2">
+          <RegForm/>
+        </TabPane>
+      </Tabs>
+    );
+  }
+}
+
+export default connect(
+  state =>({
+    loginWrapActiveKey: state.login.loginWrapActiveKey
+  })
+)(LoginWrap)
diff --git a/client/containers/Login/Login.scss b/client/containers/Login/Login.scss
new file mode 100644
index 00000000..8768f1e5
--- /dev/null
+++ b/client/containers/Login/Login.scss
@@ -0,0 +1,4 @@
+@import '../../styles/common.scss';
+
+/* .login-main.css */
+
diff --git a/client/containers/Login/Reg.js b/client/containers/Login/Reg.js
new file mode 100644
index 00000000..d95f6287
--- /dev/null
+++ b/client/containers/Login/Reg.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, Input, Icon } from 'antd';
+import { regActions } from  '../../actions/login';
+
+const FormItem = Form.Item;
+@connect(
+  state => {
+    return {
+      loginData: state.login
+    }
+  },
+  {
+    regActions
+  }
+)
+
+class Reg extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      confirmDirty: false
+    }
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    regActions: PropTypes.func
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const form = this.props.form;
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        this.props.regActions(values);
+      }
+    });
+  }
+
+  handleConfirmBlur = (e) => {
+    const value = e.target.value;
+    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+  }
+
+  checkPassword = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('password')) {
+      callback('Two passwords that you enter is inconsistent!');
+    } else {
+      callback();
+    }
+  }
+
+  checkConfirm = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && this.state.confirmDirty) {
+      form.validateFields(['confirm'], { force: true });
+    }
+    callback();
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit}>
+
+        {/* 用户名 */}
+        <FormItem>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: '请输入用户名!' }]
+          })(
+            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
+          )}
+        </FormItem>
+
+        {/* Emaiil */}
+        <FormItem>
+          {getFieldDecorator('email', {
+            rules: [{ required: true, message: '请输入email!' }]
+          })(
+            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
+          )}
+        </FormItem>
+
+        {/* 密码 */}
+        <FormItem>
+          {getFieldDecorator('password', {
+            rules: [{
+              required: true,
+              message: '请输入密码!'
+            }, {
+              validator: this.checkConfirm
+            }]
+          })(
+            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+          )}
+        </FormItem>
+
+        {/* 密码二次确认 */}
+        <FormItem>
+          {getFieldDecorator('confirm', {
+            rules: [{
+              required: true,
+              message: '请再次输入密码密码!'
+            }, {
+              validator: this.checkPassword
+            }]
+          })(
+            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Confirm Password" />
+          )}
+        </FormItem>
+
+        {/* 注册按钮 */}
+        <FormItem>
+          <Button type="primary" htmlType="submit" className="login-form-button">注册</Button>
+        </FormItem>
+      </Form>
+    )
+  }
+}
+const RegForm = Form.create()(Reg);
+export default RegForm;
diff --git a/client/containers/Login/login-wrap.js b/client/containers/Login/login-wrap.js
index 6fab88b0..eabaa709 100644
--- a/client/containers/Login/login-wrap.js
+++ b/client/containers/Login/login-wrap.js
@@ -1,10 +1,10 @@
-import './login.scss'
+import './Login.scss'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Tabs } from 'antd';
-import LoginForm from './login';
-import RegForm from './reg';
+import LoginForm from './Login';
+import RegForm from './Reg';
 const TabPane = Tabs.TabPane;
 
 
diff --git a/client/containers/index.js b/client/containers/index.js
index d92b4ae3..75740941 100644
--- a/client/containers/index.js
+++ b/client/containers/index.js
@@ -1,5 +1,5 @@
 import Home from './Home/Home.js'
-import Login from './Login/login-wrap.js'
+import Login from './Login/Login-wrap.js'
 import ProjectGroups from './ProjectGroups/ProjectGroups.js'
 import Interface from './Interface/Interface.js'
 import News from './News/News.js'