安全设置

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

@@ -3,6 +3,9 @@ import React, { Component } from 'react';
 import { WordsBtn, getImageUrl } from 'educoder';
 import RealNameCertificationModal from '../modal/RealNameCertificationModal'
 import '../../courses/css/Courses.css'
+import {CNotificationHOC} from '../../courses/common/CNotificationHOC'
+
+
 class AccountCertification extends Component {
   constructor(props){
     super(props);
@@ -22,7 +25,7 @@ class AccountCertification extends Component {
       let {basicInfo} = this.props;
       return (
         <div className="basicFormWrap">
-          <RealNameCertificationModal ref="realNameCertificationModal" 
+          <RealNameCertificationModal ref="realNameCertificationModal" {...this.props}
               wrappedComponentRef={(form) => this.realNameCertificationModal = form} certification={certification}
           ></RealNameCertificationModal>
           <div className="basicForm">

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

@@ -5,9 +5,24 @@ import { Form, Button, Input   } from 'antd'
 
 import '../../courses/css/Courses.css'
 import './common.css'
+
+import axios from 'axios'
+
 const PHONE = 'PHONE'
 const EMAIL = 'EMAIL'
 const PASSWORD = 'PASSWORD'
+
+function regPhoneAndEmail(value){
+  if(value.indexOf("@")>-1){
+    // 加密邮箱
+    let beforeStr=value.split("@")[0];
+    let afterStr=value.split("@")[1];
+    return beforeStr.substr(0,3)+"**"+beforeStr.substr(beforeStr.length-1,1)+"@"+afterStr;
+  }else{
+    // 加密手机号码
+    return value.substr(0,3)+"****"+value.substr(7,4);
+  }
+}
 class AccountSecure extends Component {
   constructor (props) {
     super(props)
@@ -15,10 +30,41 @@ class AccountSecure extends Component {
       updating: ''
     }
   }
+
+  // 获取验证码
+  getCode=(index)=>{
+    let url=`/account/get_verification_code.json`
+    if(index == 3){
+      //绑定手机号码
+      let values=this.props.form.getFieldsValue();
+      console.log(values);
+    }
+  }
+
   onPhoneSubmit = () => {
     this.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-
+        let {login}=this.props.current_user;
+        let reg=/^1\d{10}$/;
+        if(reg.test(values.phone)){
+          let url=`/users/accounts/${login}/phone_bind.json`
+          axios.post((url),{
+            phone:values.phone,
+            code:values.phoneValidateCode
+          }).then((result)=>{
+            if(result){
+              this.props.showNotification("手机号码绑定成功!");
+              this.setState({
+                updating:''
+              })
+              this.props.getBasicInfo();
+            }
+          }).catch((error)=>{
+            console.log(error);
+          })
+        }else{
+          this.props.showNotification("请输入有效的11位手机号码");
+        }
       }
     })
   }
@@ -36,7 +82,16 @@ class AccountSecure extends Component {
       }
     })
   }
+
+  //取消编辑
+  hideUpdating=()=>{
+    this.setState({
+      updating:""
+    })
+  }
+
   render() {
+    let {basicInfo}=this.props;
     const { getFieldDecorator } = this.props.form;
     const { updating } = this.state
     return (
@@ -93,6 +148,12 @@ class AccountSecure extends Component {
             .settingForm .ant-form-item-label {
               width: 204px;
             }
+            .formItemInline .ant-form-explain{
+              position:absolute;
+              bottom:-17px;
+              left:0px;
+              width:100%;
+            }
           `}</style>
           <div className="title">安全设置</div>
           <Form>
@@ -100,25 +161,30 @@ class AccountSecure extends Component {
             <div className="flexTable">
               <div className="flexRow">
                 <div className="name">手机</div>
-                {/* #EA320E 
-                  仅自己可见，可用于手机号码登录EduCoder
-                */}
                 <div className="description">
-                  <span style={{color: '#EA320E'}}>未绑定</span>
+                  {
+                    basicInfo && basicInfo.phone ?
+                    <span>{ regPhoneAndEmail(basicInfo.phone) }</span>
+                    :
+                    <span style={{color: '#EA320E'}}>未绑定</span>
+                  }
                   绑定手机号码，将获得500金币的奖励哟～，手机号码仅自己可见~ 
                 </div>
-                <div className="status">
-                  <WordsBtn style="blue" className="borderBottom" 
-                      onClick={() => this.setState({updating: PHONE})}
-                  >立即绑定</WordsBtn>
-                </div>
+                {
+                  updating != PHONE &&
+                  <div className="status">
+                    <WordsBtn style="blue" className="borderBottom" 
+                        onClick={() => this.setState({updating: PHONE})}
+                    >{basicInfo && basicInfo.phone ? "更换" : "立即绑定" }</WordsBtn>
+                  </div>
+                }
               </div>
               
               { updating == PHONE && 
               <React.Fragment>
               <Form.Item
                 label="你的手机号"
-                className="formItemInline hideRequireTag mb15"
+                className="formItemInline hideRequireTag mb20"
               >
                 {getFieldDecorator('phone', {
                   rules: [{
@@ -133,7 +199,7 @@ class AccountSecure extends Component {
 
               <Form.Item
                 label="手机验证码"
-                className="mb15 formItemInline hideRequireTag"
+                className="mb20 formItemInline hideRequireTag"
               >
                 {getFieldDecorator('phoneValidateCode', {
                   rules: [{
@@ -144,12 +210,12 @@ class AccountSecure extends Component {
                 })(
                   <Input placeholder="请输入手机获取的验证码" className="validateInput"></Input>
                 )}
-                <Button type="primary">获取验证码</Button>
+                <Button type="primary" onClick={()=>this.getCode(3)}>获取验证码</Button>
               </Form.Item>
 
               <div className="mb20" style={{ marginLeft: '118px' }}>
                 <Button type="primary" onClick={this.onPhoneSubmit}>确定</Button>
-                <Button type="primary grayBtn" style={{ marginLeft: '20px'}}>取消</Button>
+                <Button type="primary grayBtn" style={{ marginLeft: '20px'}} onClick={this.hideUpdating}>取消</Button>
               </div>
               </React.Fragment> }
             </div>
@@ -158,21 +224,29 @@ class AccountSecure extends Component {
               <div className="flexRow">
                 <div className="name">邮箱</div>
                 <div className="description">
-                  <span>kuc***w@126.com</span>
+                  {
+                    basicInfo && basicInfo.mail ?
+                    <span>{ regPhoneAndEmail(basicInfo.mail) }</span>
+                    :
+                    <span style={{color: '#EA320E'}}>未绑定</span>
+                  }
                   邮箱账号仅自己可见，可用于邮箱账号登录EduCoder 
                 </div>
-                <div className="status">
-                  <WordsBtn style="blue" className="borderBottom"
-                    onClick={() => this.setState({updating: EMAIL})}
-                  >更换</WordsBtn>
-                </div>
+                {
+                  updating != EMAIL &&
+                  <div className="status">
+                    <WordsBtn style="blue" className="borderBottom"
+                      onClick={() => this.setState({updating: EMAIL})}
+                    >{basicInfo && basicInfo.mail ?"更换":"立即绑定"}</WordsBtn>
+                  </div>
+                }
               </div>  
               
               { updating == EMAIL && 
               <React.Fragment>
               <Form.Item
                 label="邮箱地址"
-                className="formItemInline hideRequireTag mb15"
+                className="formItemInline hideRequireTag mb20"
               >
                 {getFieldDecorator('phone', {
                   rules: [{
@@ -187,7 +261,7 @@ class AccountSecure extends Component {
 
               <Form.Item
                 label="邮箱验证码"
-                className="mb15 formItemInline hideRequireTag"
+                className="mb20 formItemInline hideRequireTag"
               >
                 {getFieldDecorator('phoneValidateCode', {
                   rules: [{
@@ -202,8 +276,8 @@ class AccountSecure extends Component {
               </Form.Item>
 
               <div className="mb20" style={{ marginLeft: '118px' }}>
-                <Button type="primary">确定</Button>
-                <Button type="primary grayBtn" style={{ marginLeft: '20px'}}>取消</Button>
+                <Button type="primary" onClick={this.onEmailSubmit}>确定</Button>
+                <Button type="primary grayBtn" style={{ marginLeft: '20px'}} onClick={this.hideUpdating}>取消</Button>
               </div>
               </React.Fragment>  }
 
@@ -217,18 +291,21 @@ class AccountSecure extends Component {
                   <span>**********</span>
                   用于保护账户信息和登录安全 
                 </div>
-                <div className="status">
-                  <WordsBtn style="blue" className="borderBottom"
-                      onClick={() => this.setState({updating: PASSWORD})}
-                  >修改</WordsBtn>
-                </div>
+                { 
+                  updating != PASSWORD &&
+                  <div className="status">
+                    <WordsBtn style="blue" className="borderBottom"
+                        onClick={() => this.setState({updating: PASSWORD})}
+                    >修改</WordsBtn>
+                  </div>
+                }
               </div> 
               
               { updating == PASSWORD && 
               <React.Fragment>
               <Form.Item
                 label="旧密码"
-                className="mb15 formItemInline hideRequireTag"
+                className="mb20 formItemInline hideRequireTag"
               >
                 {getFieldDecorator('p_old', {
                   rules: [{
@@ -243,7 +320,7 @@ class AccountSecure extends Component {
 
               <Form.Item
                 label="新密码"
-                className="mb15 formItemInline hideRequireTag"
+                className="mb20 formItemInline hideRequireTag"
               >
                 {getFieldDecorator('p_new', {
                   rules: [{
@@ -258,7 +335,7 @@ class AccountSecure extends Component {
 
               <Form.Item
                 label="再次输入"
-                className="mb15 formItemInline hideRequireTag"
+                className="mb20 formItemInline hideRequireTag"
               >
                 {getFieldDecorator('p_again', {
                   rules: [{
@@ -273,7 +350,7 @@ class AccountSecure extends Component {
 
               <div className="mb20" style={{ marginLeft: '118px' }}>
                 <Button type="primary" onClick={this.onPasswordSubmit}>确定</Button>
-                <Button type="primary grayBtn" style={{ marginLeft: '20px'}}>取消</Button>
+                <Button type="primary grayBtn" style={{ marginLeft: '20px'}} onClick={this.hideUpdating}>取消</Button>
               </div>
               </React.Fragment> }
             </div>

public/react/src/modules/user/modal/RealNameCertificationModal.js

@@ -42,8 +42,17 @@ class RealNameCertificationModal extends Component{
   }
 
   onSendOk = () => {
-   
-
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      console.log(values);
+      if(!err){
+        let{imageUrl2}=this.state;
+        if(imageUrl2){
+          
+        }else{
+          this.props.showNotification("请先上传照片！");
+        }
+      }
+    })
   }
 
   onOk = () => {
@@ -149,6 +158,9 @@ class RealNameCertificationModal extends Component{
           }
         >
         <style>{`
+          .applyForModal .ant-form-item{
+            margin-bottom:15px;
+          }
           .applyForModal .ant-form-item-label {
             width: 100px;
             padding-right: 10px;
@@ -173,8 +185,14 @@ class RealNameCertificationModal extends Component{
           .idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
             margin-bottom: 0px;
           }
-          .idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-text {
+          .idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-drag-icon i{
+            font-size:42px!important;
+            color:#4B667F
+          }
+          .idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-text a{
             font-size: 12px;
+            color:#4B667F;
+            border-bottom:1px solid #4B667F
           }
           .idPic-uploader .ant-upload.ant-upload-drag {
             padding: 0px;
@@ -206,14 +224,19 @@ class RealNameCertificationModal extends Component{
             align-items: center;
             display: -webkit-flex;
           }
+          .formItemInline .ant-form-explain{
+            position:absolute;
+            bottom:-20px;
+            left:0px;
+            width:100%;
+          }
         `}</style>
-        <Form>
+        <Form onSubmit={this.handleSubmit}>
           {
             certification && certification ==1 &&
             <Form.Item
               label="证件号："
               className="formItemInline"
-              style={{marginBottom:"15px"}}
             >
               {getFieldDecorator('credentials', {
                 rules: [{
@@ -243,9 +266,9 @@ class RealNameCertificationModal extends Component{
                   </a> : 
                   <React.Fragment>
                     <p className="ant-upload-drag-icon">
-                      <Icon type="inbox" />
+                      <i className="iconfont icon-cuban2shangchuanyunduan" style={{color:"#4B667F",font:"42px"}}></i>
                     </p>
-                    <p className="ant-upload-text">点击或拖拽上传图片</p>
+                    <p className="ant-upload-text mt20"><a>点击或拖拽上传图片</a></p>
                     {/* <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> */}
                   </React.Fragment>
                 }