feat: 新建项目功能

client/actions/login.js

@@ -1,6 +1,5 @@
 import {
   LOGIN,
-  REGISTER,
   LOGIN_TYPE
 } from '../constants/action-types.js';
 import axios from 'axios';
@@ -24,9 +23,18 @@ const loginActions = (data) => {
 }
 
 const regActions = (data) => {
-  return {
-    type: REGISTER,
-    data
+  console.log(data);
+  const param = {
+    email: data.email,
+    password: data.password,
+    username: data.userName
+  }
+  return () => {
+    axios.get('/user/login', param).then((res) => {
+      console.log(res);
+    }).catch((err) => {
+      console.log(err);
+    });
   }
 }
 

client/containers/Login/login-wrap.js

@@ -1,4 +1,4 @@
-import './Login.scss'
+import './login.scss'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'

client/containers/Login/login.scss

@@ -0,0 +1,7 @@
+@import '../../styles/common.scss';
+
+/* .login-main.css */
+.login-form {
+  width: 4rem;
+  margin: 1rem auto;
+}

client/containers/Login/reg.js

@@ -18,7 +18,10 @@ const FormItem = Form.Item;
 
 class Reg extends Component {
   constructor(props) {
-    super(props)
+    super(props);
+    this.state = {
+      confirmDirty: false
+    }
   }
 
   static propTypes = {
@@ -29,17 +32,41 @@ class Reg extends Component {
   handleSubmit = (e) => {
     e.preventDefault();
     const form = this.props.form;
-    form.validateFields((err, values) => {
+    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: '请输入用户名!' }]
@@ -47,6 +74,8 @@ class Reg extends Component {
             <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
           )}
         </FormItem>
+
+        {/* Emaiil */}
         <FormItem>
           {getFieldDecorator('email', {
             rules: [{ required: true, message: '请输入email!' }]
@@ -54,13 +83,36 @@ class Reg extends Component {
             <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
           )}
         </FormItem>
+
+        {/* 密码 */}
         <FormItem>
           {getFieldDecorator('password', {
-            rules: [{ required: true, message: '请输入密码!' }]
+            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>

client/containers/ProjectGroups/ProjectList/index.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
-// import PropTypes from 'prop-types'
+import PropTypes from 'prop-types'
 // import { connect } from 'react-redux'
-import { Table } from 'antd'
+import { Table, Button, Modal, Form, Input, Icon, Tooltip } from 'antd';
+const { TextArea } = Input;
+const FormItem = Form.Item;
 
 const columns = [{
   title: 'Name',
@@ -35,12 +37,133 @@ const data = [{
   age: 32
 }];
 
-
-
-export default class GroupList extends Component {
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 14 }
+  }
+};
+class ProjectList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false
+    }
+  }
+  static propTypes = {
+    form: PropTypes.object
+  }
+  addProject = () => {
+    this.setState({
+      visible: true
+    });
+  }
+  handleOk = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+        this.setState({
+          visible: false
+        });
+      }
+    });
+  }
+  handleCancel = () => {
+    this.props.form.resetFields();
+    this.setState({
+      visible: false
+    });
+  }
+  handleSubmit = (e) => {
+    console.log(e);
+  }
   render() {
+    const { getFieldDecorator } = this.props.form;
     return (
-      <Table columns={columns} dataSource={data} />
+      <div>
+        <Modal
+          title="创建项目"
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+        >
+          <Form onSubmit={this.handleSubmit}>
+
+            <FormItem
+              {...formItemLayout}
+              label="项目名称"
+            >
+              {getFieldDecorator('name', {
+                rules: [{
+                  required: true, message: '请输入项目名称!'
+                }]
+              })(
+                <Input />
+              )}
+            </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label={(
+                <span>
+                  线上域名&nbsp;
+                  <Tooltip title="将根据配置的线上域名访问mock数据">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              )}
+            >
+              {getFieldDecorator('prd_host', {
+                rules: [{
+                  required: true, message: '请输入项目线上域名!'
+                }]
+              })(
+                <Input />
+              )}
+            </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label="URL"
+            >
+              {getFieldDecorator('basepath', {
+                rules: [{
+                  required: true, message: '请输入项目基本路径!'
+                }]
+              })(
+                <Input />
+              )}
+            </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label="描述"
+            >
+              {getFieldDecorator('desc', {
+                rules: [{
+                  required: true, message: '请输入描述!'
+                }]
+              })(
+                <TextArea rows={4} />
+              )}
+            </FormItem>
+          </Form>
+        </Modal>
+
+        <Table
+          columns={columns}
+          dataSource={data}
+          title={() => <Button type="primary" onClick={this.addProject}>创建项目</Button>}
+        />
+
+      </div>
     );
   }
 }
+
+export default Form.create()(ProjectList);

client/containers/index.js

@@ -1,5 +1,5 @@
 import Home from './Home/Home.js'
-import Login from './Login/loginWrap.js'
+import Login from './Login/login-wrap.js'
 import ProjectGroups from './ProjectGroups/ProjectGroups.js'
 import Interface from './Interface/Interface.js'