m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

安全设置

Browse Source
dev_forum
caishi 5 years ago
parent b9e16f832b
commit 90735472ff
4 changed files with 154 additions and 47 deletions
Show Stats Download Patch File Download Diff File

16
public/react/public/css/iconfont.css
View File

File diff suppressed because one or more lines are too long

5
public/react/src/modules/user/account/AccountCertification.js
Unescape View File

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

143
public/react/src/modules/user/account/AccountSecure.js
Unescape View File

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

37
public/react/src/modules/user/modal/RealNameCertificationModal.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save