安全设置-信息绑定

public/react/src/modules/user/account/AccountSecure.js

@@ -27,20 +27,72 @@ class AccountSecure extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      updating: ''
+      updating: '',
+      secondsFlag:false,
+      seconds:60
+    }
+  }
+
+  // 获取验证码倒计时
+  remainTime=()=>{
+    this.timer = setInterval(() => {
+      let { seconds } =this.state;
+      let s = parseInt(seconds)-1;
+      if(s > -1){
+        this.setState({
+          seconds:s
+        })
+      }else{
+        this.setState({
+          secondsFlag:false
+        })
+        clearInterval(this.timer);
       }
+    },1000)
   }
 
   // 获取验证码
   getCode=(index)=>{
     let url=`/account/get_verification_code.json`
+    let login = '';
+    let values=this.props.form.getFieldsValue();
     if(index == 3){
       //绑定手机号码
-      let values=this.props.form.getFieldsValue();
+      login=values.phone;
-      console.log(values);
+      let reg=/^1\d{10}$/;
+      if(reg.test(login)==false){
+        this.props.showNotification(`请先输入正确的手机号码`);
+        return;
+      }
+    }else if(index == 4){
+      // 绑定邮箱
+      login=values.email;
+      let reg=/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
+      if(reg.test(login)==false){
+        this.props.showNotification(`请先输入正确的邮箱地址`);
+        return;
+      }
+    }
+    let type = index;
+    if(!login){ 
+      this.props.showNotification(`请先输入${index==3?"手机号码":"邮箱地址"}`);
+      return;
+    }
+    axios.get((url),{params:{
+      login,type
+    }}).then((result)=>{
+      if(result){
+        // 倒计时
+        this.setState({
+          secondsFlag:true
+        })
+        this.remainTime();
       }
+    }).catch((error)=>{
+      console.log(error);
+    })
   }
-
+// 绑定手机
   onPhoneSubmit = () => {
     this.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
@@ -68,10 +120,32 @@ class AccountSecure extends Component {
       }
     })
   }
+
+  // 绑定邮箱
   onEmailSubmit = () => {
     this.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-
+        let {login}=this.props.current_user;
+        let reg=/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
+        if(reg.test(values.email)){
+          let url=`/users/accounts/${login}/email_bind.json`
+          axios.post((url),{
+            email:values.email,
+            code:values.emailValidateCode
+          }).then((result)=>{
+            if(result){
+              this.props.showNotification("邮箱地址绑定成功!");
+              this.setState({
+                updating:''
+              })
+              this.props.getBasicInfo();
+            }
+          }).catch((error)=>{
+            console.log(error);
+          })
+        }else{
+          this.props.showNotification("请输入正确的邮箱地址");
+        }
       }
     })
   }
@@ -93,10 +167,9 @@ class AccountSecure extends Component {
   render() {
     let {basicInfo}=this.props;
     const { getFieldDecorator } = this.props.form;
-    const { updating } = this.state
+    const { updating,seconds,secondsFlag } = this.state
     return (
       <div className="basicFormWrap">
-
         <div className="basicForm settingForm">
           <style>{`
 
@@ -210,7 +283,9 @@ class AccountSecure extends Component {
                 })(
                   <Input placeholder="请输入手机获取的验证码" className="validateInput"></Input>
                 )}
-                <Button type="primary" onClick={()=>this.getCode(3)}>获取验证码</Button>
+                <Button type="primary" disabled={ secondsFlag } onClick={()=>this.getCode(3)}>
+                { !secondsFlag ? "获取验证码":`重新发送${seconds}s`}
+                </Button>
               </Form.Item>
 
               <div className="mb20" style={{ marginLeft: '118px' }}>
@@ -248,14 +323,14 @@ class AccountSecure extends Component {
                 label="邮箱地址"
                 className="formItemInline hideRequireTag mb20"
               >
-                {getFieldDecorator('phone', {
+                {getFieldDecorator('email', {
                   rules: [{
                     // initialValue: this.state.cityDefaultValue,
                     required: true, 
-                    message: '请输入要更换的新邮箱地址',
+                    message: basicInfo && basicInfo.mail ?'请输入要更换的新邮箱地址':'请输入邮箱地址',
                   }],
                 })(
-                  <Input placeholder="请输入要更换的新邮箱地址"></Input>
+                  <Input placeholder={`${basicInfo && basicInfo.mail ?'请输入要更换的新邮箱地址':'请输入邮箱地址'}`}></Input>
                 )}
               </Form.Item>
 
@@ -263,7 +338,7 @@ class AccountSecure extends Component {
                 label="邮箱验证码"
                 className="mb20 formItemInline hideRequireTag"
               >
-                {getFieldDecorator('phoneValidateCode', {
+                {getFieldDecorator('emailValidateCode', {
                   rules: [{
                     // initialValue: this.state.cityDefaultValue,
                     required: true, 
@@ -272,7 +347,8 @@ class AccountSecure extends Component {
                 })(
                   <Input placeholder="请输入邮箱收到的验证码" className="validateInput"></Input>
                 )}
-                <Button type="primary">获取验证码</Button>
+                <Button type="primary" disabled={ secondsFlag } onClick={()=>this.getCode(4)}>
+                { !secondsFlag ? "获取验证码":`重新发送${seconds}s`}</Button>
               </Form.Item>
 
               <div className="mb20" style={{ marginLeft: '118px' }}>
@@ -314,7 +390,7 @@ class AccountSecure extends Component {
                     message: '请设置8～16位密码，区分大小写',
                   }],
                 })(
-                  <Input type="password" placeholder="请设置8～16位密码，区分大小写"></Input>
+                  <Input type="password" placeholder="请设置8～16位密码，区分大小写" autoComplete="new-password"></Input>
                 )}
               </Form.Item>
 
@@ -329,7 +405,7 @@ class AccountSecure extends Component {
                     message: '请设置8～16位密码，区分大小写',
                   }],
                 })(
-                  <Input type="password" placeholder="请设置8～16位密码，区分大小写" className="validateInput"></Input>
+                  <Input type="password" placeholder="请设置8～16位密码，区分大小写" autoComplete="new-password"></Input>
                 )}
               </Form.Item>
 
@@ -344,7 +420,7 @@ class AccountSecure extends Component {
                     message: '请再次输入新密码',
                   }],
                 })(
-                  <Input type="password" placeholder="请再次输入新密码" className="validateInput"></Input>
+                  <Input type="password" placeholder="请再次输入新密码" autoComplete="new-password"></Input>
                 )}
               </Form.Item>