add register

Author: lisong

src/components/AccessKeys/PopShowKey/PopShowKey.css

@@ -1,13 +1,13 @@
 .root {
   width: 500px;
   padding: 20px 0;
-  color: #fff;
+  color: #000;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -165px 0 0 -238px;
-  background: #008080;
+  background: #E6E6FA;
 }
 
 .close {
@@ -30,3 +30,25 @@ p input {
   padding-left: 8px;
   background-color: #D3D3D3;
 }
+
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}

src/components/AccessKeys/PopShowKey/PopShowKey.js

@@ -47,7 +47,7 @@ class PopShowKey extends Component {
             readOnly
             />
           </p>
-          <p><button onClick={this.close} >关闭</button></p>
+          <p><button className={s.btn} onClick={this.close} >关闭</button></p>
         </div>
       </Modal>
     )

src/components/Register/StepThree/StepThree.css

@@ -45,3 +45,14 @@
   border-color: #0074c2;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
 }
+
+.errorTip {
+  color: red;
+  margin-bottom: 20px;
+  margin-left: 22%;
+}
+
+.errorTip {
+  color: red;
+  margin-bottom: 20px;
+}

src/components/Register/StepThree/StepThree.js

@@ -27,20 +27,36 @@ class StepThree extends Component {
 
   constructor() {
     super();
+    this.state = {field1: false, field2: false}
     this.setInputPassword = this.setInputPassword.bind(this);
     this.setInputPasswordConfirm = this.setInputPasswordConfirm.bind(this);
   }
 
   setInputPassword(event) {
+    this.setState({field1: true});
     this.props.passwordInputChange(event.target.value);
   }
 
   setInputPasswordConfirm(event) {
+    this.setState({field2: true});
     this.props.passwordConfirmInputChange(event.target.value);
   }
 
   render() {
     let self = this;
+    let passwordTips = '';
+    let passwordConfirmTips = '';
+    if (this.state.field1 && this.props.password.length < 6) {
+      passwordTips = '密码长度至少为6位'
+    }
+    if (this.state.field2 && !_.eq(this.props.passwordConfirm, this.props.password) ) {
+      passwordConfirmTips = '确认密码和密码不一致'
+    }
+    let isValidate = false;
+    if (this.props.password.length>=6
+      && _.eq(this.props.passwordConfirm, this.props.password)) {
+      isValidate = true;
+    }
     return (
       <div className={s.root}>
         <div className={s.container}>
@@ -51,33 +67,38 @@ class StepThree extends Component {
             <input
               className={s.input}
               onChange={this.setInputPassword}
+              onBlur={()=>this.setState({field1: true})}
               id="password"
               type="password"
               value={this.props.password}
               placeholder="请输入密码"
               autoFocus
             />
           </div>
+          <div className={s.errorTip}>{passwordTips}</div>
           <div className={s.formGroup}>
             <label className={s.label} htmlFor="passwordConfirm">
               确认密码:
             </label>
             <input
               className={s.input}
               onChange={this.setInputPasswordConfirm}
+              onBlur={()=>this.setState({field2: true})}
               id="passwordConfirm"
               type="password"
               value={this.props.passwordConfirm}
               placeholder="请再次输入密码"
             />
           </div>
+          <div className={s.errorTip}>{passwordConfirmTips}</div>
           <br/>
+          <div className={s.errorTip2}>{_.get(this.props, 'error.message')}</div>
           <div className={s.formGroup}>
             <Button
-              style={this.props.isChecking ? { backgroundColor:'grey' } : null }
+              style={this.props.isFetching || !isValidate ? { backgroundColor:'grey' } : null }
               value="注册"
               onClick={()=>{
-                if (self.props.isChecking) {
+                if (self.props.isFetching || !isValidate) {
                   return;
                 }
                 self.props.submit();

src/components/Register/StepTwo/StepTwo.css

@@ -76,3 +76,8 @@
   margin-left: 8px;
   text-align: center;
 }
+
+.errorTip {
+  color: red;
+  margin-bottom: 20px;
+}

src/components/Register/StepTwo/StepTwo.js

@@ -30,7 +30,7 @@ class StepTwo extends Component {
   }
 
   componentDidMount() {
-    if (60 - (parseInt(moment().format('X')) - this.props.lastSendTime) <= 0){
+    if (120 - (parseInt(moment().format('X')) - this.props.lastSendTime) <= 0){
       this.props.sendValidateCode();
     }
   }
@@ -46,7 +46,7 @@ class StepTwo extends Component {
 
   render() {
     let self = this;
-    let leftTime = 60 - (parseInt(moment().format('X')) - this.props.lastSendTime);
+    let leftTime = 120 - (parseInt(moment().format('X')) - this.props.lastSendTime);
     let isValidate = this.props.validateCode ? true : false;
     let countDownView = (
       <Countdown
@@ -99,6 +99,8 @@ class StepTwo extends Component {
             />
             {countDownView}
           </div>
+          <br/>
+          <div className={s.errorTip}>{_.get(this.props, 'error.message')}</div>
           <div className={s.formGroup}>
             <Button
               style={this.props.isChecking || !isValidate ? { backgroundColor:'grey' } : null }