diff --git a/public/react/src/common/components/DragValidatortwo.js b/public/react/src/common/components/DragValidatortwo.js
new file mode 100644
index 000000000..2b789063e
--- /dev/null
+++ b/public/react/src/common/components/DragValidatortwo.js
@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+
+const $ = window.jQuery
+const jQuery = $;
+if (!$.drag) {
+ (function($){
+ $.fn.dragValidator = function(options){
+ var x, drag = this, isMove = false, defaults = {
+ };
+ var options = $.extend(defaults, options);
+ //添加背景,文字,滑块
+ var html = '
'+
+ '拖动滑块验证
'+
+ '';
+ this.append(html);
+
+ var handler = drag.find('.handler');
+ var drag_bg = drag.find('.drag_bg');
+ var text = drag.find('.drag_text');
+ var maxWidth = text.width() - handler.width(); //能滑动的最大间距
+ //鼠标按下时候的x轴的位置
+ handler.mousedown(function(e){
+ isMove = true;
+ x = e.pageX - parseInt(handler.css('left'), 10);
+ });
+
+ //鼠标指针在上下文移动时,移动距离大于0小于最大间距,滑块x轴位置等于鼠标移动距离
+ $(document).mousemove(function(e){
+ var _x = e.pageX - x;
+ var handler_offset = handler.offset();
+ var lastX = e.clientX -x;
+ lastX = Math.max(0,Math.min(maxWidth,lastX));
+ if(isMove){
+ if(_x > 0 && _x <= maxWidth){
+ handler.css({'left': lastX});
+ drag_bg.css({'width': lastX});
+ }
+ else if(lastX > maxWidth - 5 && lastX < maxWidth + 5 ){ //鼠标指针移动距离达到最大时清空事件
+ dragOk();
+ }
+ }
+ });
+ handler.mouseup(function(e){
+ isMove = false;
+ var _x = e.pageX - x;
+ if(text.text() != '验证通过' && _x < maxWidth){ //鼠标松开时,如果没有达到最大距离位置,滑块就返回初始位置
+ handler.animate({'left': 0});
+ drag_bg.animate({'width': 0});
+ }
+ });
+
+ //清空事件
+ function dragOk(){
+ options.dragOkCallback && options.dragOkCallback()
+ var kuaiwidth=drag.width() - handler.width() - 2;
+ handler.removeClass('handler_bg').addClass('handler_ok_bg');
+ handler.css({'left':kuaiwidth+'px'})
+ text.css({'width':kuaiwidth+'px'});
+ text.text('验证通过');
+ drag.css({'color': '#fff'});
+ drag_bg.css({'width':kuaiwidth+'px'})
+ handler.unbind('mousedown');
+ $(document).unbind('mousemove');
+ $(document).unbind('mouseup');
+ $("#user_verification_notice").html("");
+ $('#user_verification_notice').parent().hide();
+ }
+ };
+ })(jQuery);
+}
+
+class DragValidator extends Component {
+ componentDidMount () {
+ // if($("#reg-drag").length>0 && IsPC()){
+ $("#reg-drag").dragValidator({
+ height: this.props.height,
+ dragOkCallback: () => {
+ this.props.dragOkCallback && this.props.dragOkCallback()
+ }
+ });
+ // }else{
+ // $("#reg-drag").empty();
+ // }
+ }
+ empty() {
+ $("#reg-drag").empty();
+ }
+ render() {
+ const height = this.props.height || 45;
+ const className = this.props.className
+ const successGreenColor = this.props.successGreenColor || '#29bd8b'
+ // newMain clearfix
+ return (
+
+
+
+
+ );
+ }
+}
+
+export default ( DragValidator );
\ No newline at end of file
diff --git a/public/react/src/modules/user/FindPasswordComponent.js b/public/react/src/modules/user/FindPasswordComponent.js
index 2fed8f3a8..9609801b8 100644
--- a/public/react/src/modules/user/FindPasswordComponent.js
+++ b/public/react/src/modules/user/FindPasswordComponent.js
@@ -3,6 +3,8 @@ import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import {getImageUrl, DragValidator} from 'educoder';
+import DragValidatortwo from '../../../src/common/components/DragValidatortwo'
+
import {Tabs, Input, Checkbox, Button, notification} from 'antd';
import axios from 'axios';
import './common.css'
@@ -21,7 +23,7 @@ class LoginRegisterComponent extends Component {
login: "",
password: "",
passwords: "",
- seconds: 60,
+ seconds: 35,
codes: "",
getverificationcodes: true,
Phonenumberisnotco: undefined,
@@ -29,6 +31,8 @@ class LoginRegisterComponent extends Component {
s: 'text',
classpass: "text",
readonlyInput: true,
+ dragOk: false,
+ Whethertoverify:false,
}
}
@@ -57,15 +61,27 @@ class LoginRegisterComponent extends Component {
}
//倒计时
getverificationcode = () => {
- if (this.state.Phonenumberisnotcobool === false || this.state.Phonenumberisnotcobool === undefined) {
- if (this.state.login && this.state.login.length === 0) {
- this.openNotification("请输入手机号或邮箱");
- return
- } else {
- this.openNotification("请输入正确的手机号或邮箱");
- }
+
+ if(this.state.login === undefined || this.state.login.length===0){
+ this.openNotification("请输入手机号或邮箱");
+ return;
+ }
+
+ //这是判断是否手机正确
+ if(this.state.Phonenumberisnotcobool === true){
+ this.openNotification(this.state.Phonenumberisnotcos);
+ this.setState({
+ Whethertoverify:this.state.Whethertoverify===true?false:true,
+ })
+ return;
+ }
+ //拖动滑动验证
+ if(this.state.dragOk===undefined||this.state.dragOk === false){
+ this.openNotification("拖动滑块验证");
return;
}
+
+
if (this.state.getverificationcodes === true) {
this.setState({
getverificationcodes: undefined,
@@ -78,7 +94,7 @@ class LoginRegisterComponent extends Component {
clearInterval(timer);
this.setState({
getverificationcodes: false,
- seconds: 60,
+ seconds: 35,
})
}
});
@@ -96,7 +112,7 @@ class LoginRegisterComponent extends Component {
clearInterval(timer);
this.setState({
getverificationcodes: false,
- seconds: 60,
+ seconds: 35,
})
}
@@ -115,8 +131,7 @@ class LoginRegisterComponent extends Component {
}
}).then((result) => {
//验证有问题{"status":1,"message":"success"}
- console.log(result);
-
+ this.openNotification("验证码已发送,请注意查收!",2);
}).catch((error) => {
console.log(error);
@@ -133,26 +148,28 @@ class LoginRegisterComponent extends Component {
Retrievepassword = () => {
if (this.state.Phonenumberisnotcobool === false) {
if (this.state.login.length === 0) {
- this.openNotification("请输入手机号或邮箱");
+ this.openNotification("请输入正确的手机号或邮箱");
return
}
- this.openNotification("请输入正确的手机号或邮箱");
- return;
}
- if (this.state.login === undefined || this.state.login == "") {
+ if (this.state.login === undefined || this.state.login === "") {
this.openNotification(`请输入登录手机号码或邮箱`);
return
- } else if (this.state.password === undefined || this.state.password == "") {
+ }
+ if (this.state.password === undefined || this.state.password === "") {
this.openNotification(`请输入密码`);
return
- } else if (this.state.passwords === undefined || this.state.passwords == "") {
+ }
+ if (this.state.passwords === undefined || this.state.passwords === "") {
this.openNotification(`请输入密码`);
return
- } else if (this.state.password !== this.state.passwords) {
+ }
+ if (this.state.password !== this.state.passwords) {
this.openNotification(`两次密码不相同`);
return
- } else if (this.state.codes === undefined || this.state.codes == "") {
+ }
+ if (this.state.codes === undefined || this.state.codes === "") {
this.openNotification(`请输入验证码`);
return
}
@@ -286,6 +303,12 @@ class LoginRegisterComponent extends Component {
return
}
}
+ //是否验证通过
+ dragOkCallback = () => {
+ console.log(this.state.login);
+ this.Emailphonenumberverification(this.state.login)
+
+ }
//邮箱手机号验证
Emailphonenumberverification = (value) => {
var url = `/accounts/valid_email_and_phone.json`;
@@ -295,17 +318,31 @@ class LoginRegisterComponent extends Component {
type: 2,
}
}).then((result) => {
- //验证有问题{"status":1,"message":"success"}
- // console.log(result);
- this.openNotification("验证码已发送,请注意查收!", 2);
+ console.log(result);
+ if(result){
+ if(result.data.status===-2){
+ console.log(value.length);
+ this.setState({
+ Phonenumberisnotco: result.data.message,
+ Phonenumberisnotcobool: true,
+ dragOk:false,
+ Whethertoverify:this.state.Whethertoverify===true?false:true,
+ })
+ return;
+ }else {
+ this.setState({
+ Phonenumberisnotco: undefined,
+ Phonenumberisnotcobool: false,
+ dragOk:true,
+ })
+ return;
+ }
+ }
}).catch((error) => {
console.log(error);
- // this.setState({
- // login:"",
- // logins:"",
- // })
+
})
}
@@ -325,6 +362,7 @@ class LoginRegisterComponent extends Component {
Phonenumberisnotco,
readonlyInput,
codes,
+ Whethertoverify,
} = this.state
// height: 346px;
return (
@@ -390,9 +428,10 @@ class LoginRegisterComponent extends Component {
`
}
+ {/*onBlur={(e) => this.inputOnBlur(e)}*/}
this.inputOnBlur(e)}
+ placeholder="输入注册手机号或邮箱" value={this.state.login}
onChange={this.loginInputonChange} style={{marginTop: '10px', height: "38px"}}>
{
Phonenumberisnotco && Phonenumberisnotco != "" ?
@@ -401,11 +440,29 @@ class LoginRegisterComponent extends Component {
:
}
-
+
+ {
+ Whethertoverify===false?
+ this.dragOkCallback()}
+ >
+ :
+ ""
+
+ }
+ {
+ Whethertoverify===true?
+ this.dragOkCallback()}
+ >
+ :
+ ""
+ }
+
{
@@ -245,7 +177,9 @@ class LoginRegisterComponent extends Component {
}
//是否验证通过
dragOkCallback = () => {
- this.setState({dragOk: true})
+ console.log(this.state.logins);
+ this.Emailphonenumberverification(this.state.logins, 2)
+
}
// -------------------- REGISTER END
@@ -294,7 +228,7 @@ class LoginRegisterComponent extends Component {
}
//注册接口
postregistered = () => {
- if (this.state.logins === undefined || this.state.logins == "") {
+ if (this.state.logins === undefined || this.state.logins === "") {
this.openNotification(`请输入登录手机号码或邮箱`,2);
return
@@ -348,14 +282,58 @@ class LoginRegisterComponent extends Component {
}).then((result) => {
//验证有问题{"status":1,"message":"success"}
// console.log(result);
-
+ // this.setState({dragOk: true})
+
+ if(result){
+ if(result.data.status===-2){
+ if (id === 1) {
+ console.log(value.length);
+ if(result.data.message==="该手机号码或邮箱已被注册"){
+ this.setState({
+ Phonenumberisnotco: undefined,
+ Phonenumberisnotcobool: false,
+ dragOk:true,
+ })
+ }else {
+ this.setState({
+ Phonenumberisnotco: result.data.message,
+ Phonenumberisnotcobool: true,
+ dragOk:false,
+ Whethertoverify:this.state.Whethertoverify===true?false:true,
+ })
+ }
+ return;
+ } else if (id === 2) {
+ this.setState({
+ Phonenumberisnotcos: result.data.message,
+ Phonenumberisnotcobool: true,
+ dragOk:false,
+ Whethertoverify:this.state.Whethertoverify===true?false:true,
+ })
+ return;
+ }
+ }else {
+ if (id === 1) {
+ console.log(value.length);
+ this.setState({
+ Phonenumberisnotco: undefined,
+ Phonenumberisnotcobool: false,
+ dragOk:true,
+ })
+ return;
+ } else if (id === 2) {
+ this.setState({
+ Phonenumberisnotcos: undefined,
+ Phonenumberisnotcobool: false,
+ dragOk:true,
+ })
+ return;
+ }
+ }
+ }
}).catch((error) => {
- // console.log(error);
- // this.setState({
- // login:"",
- // logins:"",
- // })
+
})
}
//短信验证
@@ -398,13 +376,22 @@ class LoginRegisterComponent extends Component {
//倒计时
getverificationcode = () => {
- if (this.state.Phonenumberisnotcobool === false ||this.state.Phonenumberisnotcobool === undefined) {
- if (this.state.logins&&this.state.logins.length === 0) {
- this.openNotification("请输入手机号或邮箱",2);
- return
- }else {
- this.openNotification("请输入正确的手机号或邮箱",2);
- }
+ console.log(this.state.Phonenumberisnotcobool);
+ console.log(this.state.dragOk);
+ if(this.state.logins === undefined || this.state.logins.length===0){
+ this.openNotification("请输入手机号或邮箱");
+ return;
+ }
+ //这是判断是否手机正确
+ if(this.state.Phonenumberisnotcobool === true){
+ this.openNotification(this.state.Phonenumberisnotcos);
+ this.setState({
+ Whethertoverify:this.state.Whethertoverify===true?false:true,
+ })
+ return;
+ }
+ if(this.state.dragOk===undefined||this.state.dragOk === false){
+ this.openNotification("拖动滑块验证");
return;
}
@@ -420,7 +407,7 @@ class LoginRegisterComponent extends Component {
clearInterval(timer);
this.setState({
getverificationcodes: false,
- seconds: 60,
+ seconds: 35,
})
}
});
@@ -438,7 +425,7 @@ class LoginRegisterComponent extends Component {
clearInterval(timer);
this.setState({
getverificationcodes: false,
- seconds: 60,
+ seconds: 35,
})
}
@@ -459,9 +446,18 @@ class LoginRegisterComponent extends Component {
}else{
stirngt= e.target.value;
}
- this.setState({
- login: stirngt,
- })
+
+ if (e.target.value.length === 0) {
+ this.setState({
+ Phonenumberisnotco: undefined,
+ Phonenumberisnotcobool: false,
+ login: stirngt,
+ })
+ }else{
+ this.setState({
+ login: stirngt,
+ })
+ }
}
//失去焦点判断
@@ -488,8 +484,7 @@ class LoginRegisterComponent extends Component {
}
//获取注册登入
loginInputonChanges = (e) => {
- // console.log(e.target.value);
-
+ console.log(e.target.value);
var stirngt;
if(e.target.value.length>0){
var str= e.target.value.replace(/\s*/g,"")
@@ -497,9 +492,17 @@ class LoginRegisterComponent extends Component {
}else{
stirngt= e.target.value;
}
- this.setState({
- logins: stirngt,
- })
+ if (e.target.value.length === 0) {
+ this.setState({
+ Phonenumberisnotcos: undefined,
+ Phonenumberisnotcobool: false,
+ logins: stirngt,
+ })
+ }else{
+ this.setState({
+ logins: stirngt,
+ })
+ }
}
//获取注册密码
@@ -562,8 +565,10 @@ class LoginRegisterComponent extends Component {
Phonenumberisnotcos,
codes,
tab,
+ dragOk,
+ Whethertoverify,
// 注册
- readAgreement, dragOk,
+ readAgreement,
} = this.state
// height: 346px;
if (this.state.seconds === 0) {
@@ -685,7 +690,6 @@ class LoginRegisterComponent extends Component {
value={this.state.logins}
type="text" autoComplete="off"
onChange={this.loginInputonChanges}
- onBlur={(e) => this.inputOnBlur(e, 2)}
style={{marginTop: '30px' , height: '38px',color:'#999999',fontSize:"14px"}}>
{
Phonenumberisnotcos && Phonenumberisnotcos != "" ?
@@ -695,12 +699,29 @@ class LoginRegisterComponent extends Component {
:
}
+ {
+ Whethertoverify===false?
+
+ :
+ ""
+
+ }
+ {
+ Whethertoverify===true?
+
+ :
+ ""
+ }
+
-
- {/**/}
- {/**/}
+