add register #4

UserUI/src/models/login.js

@@ -10,12 +10,26 @@ export default {
 
   state: {
     loginLoading: false,
+    visible: false,
   },
 
   effects: {
 
   },
 
   reducers: {
+    showModal (state) {
+      return {
+        ...state,
+        visible: true
+      }
+    },
+
+    hideModal (state) {
+      return {
+        ...state,
+        visible: false
+      }
+    }
   }
 }

UserUI/src/routes/login/canvas.js

@@ -12,16 +12,9 @@ class Canvas extends React.Component {
 
   componentDidMount () {
     var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext( '2d' ),
-      minDist = 10,
-      maxDist = 30,
-      initialWidth = 10,
-      maxLines = 100,
-      initialLines = 4,
-      speed = 3,
+      minDist = 10, maxDist = 30, initialWidth = 10, maxLines = 100, initialLines = 4, speed = 3,
 
-      lines = [],
-      frame = 0,
-      timeSinceLast = 0,
+      lines = [], frame = 0, timeSinceLast = 0,
 
       dirs = [
         // straight x, y velocity
@@ -35,8 +28,8 @@ class Canvas extends React.Component {
         [ -.7, .7 ],
         [ -.7, -.7]
       ],
-      starter = { // starting parent line, just a pseudo line
 
+      starter = {
         x: w / 2,
         y: h / 2,
         vx: 0,
@@ -45,50 +38,38 @@ class Canvas extends React.Component {
       };
 
     function init() {
-
       lines.length = 0;
 
       for( var i = 0; i < initialLines; ++i )
         lines.push( new Line( starter ) );
 
-      ctx.fillStyle = '#222';
+      ctx.fillStyle = '#eee';
       ctx.fillRect( 0, 0, w, h );
-
-      // if you want a cookie ;)
-      // ctx.lineCap = 'round';
     }
     function getColor( x ) {
-
       return 'hsl( hue, 80%, 50% )'.replace(
         'hue', x / w * 360 + frame
       );
     }
     function anim() {
-
       window.requestAnimationFrame( anim );
 
       ++frame;
 
       ctx.shadowBlur = 0;
-      ctx.fillStyle = 'rgba(0,0,0,.02)';
+      ctx.fillStyle = 'rgba(220,220,220,.02)';
       ctx.fillRect( 0, 0, w, h );
       ctx.shadowBlur = .5;
 
       for( var i = 0; i < lines.length; ++i )
-
-        if( lines[ i ].step() ) { // if true it's dead
-
+        if( lines[ i ].step() ) {
           lines.splice( i, 1 );
           --i;
-
         }
 
-      // spawn new
-
       ++timeSinceLast
 
       if( lines.length < maxLines && timeSinceLast > 10 && Math.random() < .5 ) {
-
         timeSinceLast = 0;
 
         lines.push( new Line( starter ) );
@@ -102,32 +83,24 @@ class Canvas extends React.Component {
     }
 
     function Line( parent ) {
-
       this.x = parent.x | 0;
       this.y = parent.y | 0;
       this.width = parent.width / 1.25;
 
       do {
-
         var dir = dirs[ ( Math.random() * dirs.length ) |0 ];
         this.vx = dir[ 0 ];
         this.vy = dir[ 1 ];
-
       } while (
         ( this.vx === -parent.vx && this.vy === -parent.vy ) || ( this.vx === parent.vx && this.vy === parent.vy) );
-
       this.vx *= speed;
       this.vy *= speed;
-
       this.dist = ( Math.random() * ( maxDist - minDist ) + minDist );
-
     }
-    Line.prototype.step = function() {
 
+    Line.prototype.step = function() {
       var dead = false;
-
-      var prevX = this.x,
-        prevY = this.y;
+      var prevX = this.x, prevY = this.y;
 
       this.x += this.vx;
       this.y += this.vy;
@@ -177,7 +150,7 @@ class Canvas extends React.Component {
 
   render () {
     return (
-      <canvas id='c' style={{zIndex: 0, position: 'fixed', top: 0, left: 0, backgroundColor: 'transparent'}}></canvas>
+      <canvas id='c' style={{zIndex: 0, position: 'fixed', top: 0, left: 0, backgroundColor: 'white'}}></canvas>
     )
   }
 }

UserUI/src/routes/login/index.js

@@ -8,17 +8,20 @@ import PropTypes   from 'prop-types';
 import { connect } from 'dva';
 import Styles      from './index.less';
 import Canvas      from './canvas';
+import Register    from './register';
 import {
   Button,
   Form,
   Input,
+  Row,
+  Col,
   Spin
 }                  from 'antd';
 
 const FormItem = Form.Item;
 
 const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndScroll } }) => {
-  const { loginLoading } = login;
+  const { loginLoading, visible } = login;
 
   function handleOk () {
     validateFieldsAndScroll((errors, values) => {
@@ -31,10 +34,19 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc
     })
   }
 
+  const RegisterProps = {
+    visible,
+    onCancel () {
+      dispatch({
+        type: 'login/hideModal'
+      })
+    }
+  }
+
   return (
     <div className={Styles.form}>
       <Canvas />
-      <span style={{color: 'white', position: 'relative', fontSize: '25px'}}>TechTree</span>
+      <span style={{color: '#383838', position: 'relative', fontSize: '25px'}}>TechTree</span>
       <Spin spinning={loginLoading} size='large'>
         <form>
           <FormItem hasFeedback>
@@ -74,15 +86,29 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc
               )
             }
           </FormItem>
-          <Button
-            type='primary'
-            size='large'
-            onClick={handleOk}
-            loading={loginLoading}>
-            登录
-          </Button>
+          <Row type="flex" justify="space-between">
+            <Col span={11}>
+              <Button
+                type='primary'
+                size='large'
+                onClick={() => dispatch({ type: 'login/showModal' })}
+                loading={loginLoading}>
+                注册
+              </Button>
+            </Col>
+            <Col span={11}>
+              <Button
+                type='primary'
+                size='large'
+                onClick={handleOk}
+                loading={loginLoading}>
+                登录
+              </Button>
+            </Col>
+          </Row>
         </form>
       </Spin>
+      <Register {...RegisterProps} />
     </div>
   )
 }

UserUI/src/routes/login/register.js

@@ -0,0 +1,98 @@
+/*
+ * Revision History:
+ *     Initial: 2017/10/21        Wang RiYu
+ */
+
+import React       from 'react'
+import {
+  Modal,
+  Form,
+  Input,
+}                  from 'antd'
+
+const FormItem = Form.Item
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 }
+}
+
+const register = (
+  {
+    visible,
+    onCancel,
+    form: {
+      getFieldDecorator,
+      validateFieldsAndScroll,
+    },
+  }
+) => {
+  const register = () => {
+    validateFieldsAndScroll((errors, values) => {
+      if (errors) { return }
+      console.log(values)
+      onCancel()
+    })
+  }
+
+  const modalProps = {
+    title: '注册',
+    visible,
+    onOk: register,
+    onCancel,
+    okText: '注册',
+    wrapClassName: 'vertical-center-modal',
+  }
+
+  return (
+    <Modal {...modalProps}>
+      <Form layout="horizontal">
+        <FormItem label='账户名' hasFeedback {...formItemLayout}>
+          {
+            getFieldDecorator('account', {
+              initialValue: '',
+              rules: [
+                {
+                  required: true,
+                  message: '不超过15位，最少一位',
+                  min: 1,
+                  max: 15,
+                },
+              ],
+            })(<Input />)
+          }
+        </FormItem>
+        <FormItem label='联系电话' hasFeedback {...formItemLayout}>
+          {
+            getFieldDecorator('phone', {
+              initialValue: '',
+              rules: [
+                {
+                  required: true,
+                  message: '请输入手机号',
+                  len: 11
+                },
+              ],
+            })(<Input />)
+          }
+        </FormItem>
+        <FormItem label='密码' hasFeedback {...formItemLayout}>
+          {
+            getFieldDecorator('pass', {
+              initialValue: '',
+              rules: [
+                {
+                  required: true,
+                  message: '最短6位，最长15位',
+                  min: 6,
+                  max: 15,
+                },
+              ],
+            })(<Input type={'password'} />)
+          }
+        </FormItem>
+      </Form>
+    </Modal>
+  )
+}
+
+export default Form.create()(register)