You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
610 lines
21 KiB
610 lines
21 KiB
import React, { Component } from 'react';
|
|
import { Redirect } from 'react-router';
|
|
|
|
import Dialog, {
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
} from 'material-ui/Dialog';
|
|
import {notification } from 'antd';
|
|
|
|
import axios from 'axios';
|
|
|
|
import './LoginDialog.css';
|
|
import { broadcastChannelPostMessage } from 'educoder'
|
|
|
|
const $ = window.$;
|
|
var wait = 60;
|
|
function time(btn){
|
|
if (wait==0) {
|
|
$(btn).addClass("btn_orange_bg");
|
|
btn.removeAttribute("disabled");
|
|
btn.innerHTML = "获取验证码";
|
|
wait = 60;
|
|
return;
|
|
}else{
|
|
$(btn).removeClass("btn_orange_bg");
|
|
btn.setAttribute("disabled", "disabled");
|
|
btn.innerHTML = wait + "s后重试";
|
|
wait--;
|
|
}
|
|
setTimeout(function(){
|
|
time(btn);
|
|
},1000);
|
|
}
|
|
function get_login_verification_code(btn) {
|
|
if($(btn).attr("disabled")) {
|
|
return false;
|
|
} else {
|
|
if (/^1\d{10}$/.test($("#pass_name_input").val()) || /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test($("#pass_name_input").val())){
|
|
if(!window.IsPC() || $('#quick-drag .drag_text').html() == "验证通过") {
|
|
$("#passlogin_error_notice").hide();
|
|
btn.setAttribute("disabled", "disabled");
|
|
var val = '';
|
|
var type = 6;
|
|
if(/^1\d{10}$/.test($("#pass_name_input").val())){
|
|
type = 6;
|
|
} else if(/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test($("#pass_name_input").val())){
|
|
type = 7;
|
|
}
|
|
$.get(
|
|
'/account/get_verification_code',
|
|
{ value: $('#pass_name_input').val().trim(),
|
|
type: type},
|
|
function (data) {
|
|
if (data.status == "2") {
|
|
if(type == 6){
|
|
$("#pass_name_input").next().find("p").html("该手机号尚未注册，你可以<a href=\"/user_join?name=" + $("#pass_name_input").val() + "\" class=\"color-blue decoration\">去注册</a>").show();
|
|
} else{
|
|
$("#pass_name_input").next().find("p").html("该邮箱尚未绑定，你可以登录后去绑定").show();
|
|
}
|
|
} else {
|
|
$("#pass_name_input").next().find("p").hide();
|
|
if(type == 6){
|
|
$("#send_code_notice").html(data.msg).show();
|
|
} else{
|
|
var uurl = window.gotoEmail(data.link);
|
|
$("#send_code_notice").html("<font>验证码已经发送到您的邮箱，去<a href='http://" + uurl + "' id='validate_mail' style='color: #459be5; text-decoration: underline;' target='_blank'>查收</a></font>").show();
|
|
}
|
|
time(btn);
|
|
}
|
|
});
|
|
} else{
|
|
$("#passlogin_error_notice").show();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
class LoginDialog extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
open: true,
|
|
login:0,
|
|
speedy:1,
|
|
regular:0,
|
|
loginValue:'',
|
|
passValue:'',
|
|
isGoing:true,
|
|
isGoingValue:1,
|
|
disabled:true,
|
|
bottonclass:'log-botton mt5',
|
|
dialogBox:'dialogBox',
|
|
shortcutValue:'',
|
|
shortcutnum:1,
|
|
disabledType:true,
|
|
gaincode:'gain-code',
|
|
authCodeType:true,
|
|
authCodeclass:'log-botton mt5',
|
|
isRender: false,
|
|
|
|
};
|
|
}
|
|
enter=(num) =>{
|
|
this.setState({login:num,speedy:1,dialogBox:'dialogBox'});
|
|
}
|
|
|
|
register=(num) =>{
|
|
this.setState({login:1,speedy:num,dialogBox:'dialogBox2'});
|
|
}
|
|
|
|
loginChange = () =>{
|
|
let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
|
|
let reg1 = /^1\d{10}$/;
|
|
let reg2=/^[a-zA-z]\w{3,14}$/;
|
|
// let reg3=/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
|
|
let value=this.refs.loginPassText.value;
|
|
let valuenum= value.length;
|
|
if(valuenum>0){
|
|
if(!reg.test(value)&&!reg1.test(value)&&!reg2.test(value)){
|
|
this.setState({regular:1})
|
|
return
|
|
}else{
|
|
this.setState({loginValue:value})
|
|
this.setState({regular:0})
|
|
}
|
|
}else{
|
|
this.setState({loginValue:value})
|
|
}
|
|
}
|
|
|
|
passwordChange = () =>{
|
|
let value =this.refs.passwordText.value;
|
|
|
|
let valuenum= value.length;
|
|
this.setState({disabled:false})
|
|
this.setState({bottonclass:'log-botton mt5 edu-back-blue'})
|
|
if(valuenum==0){
|
|
this.setState({bottonclass:'log-botton mt5'})
|
|
this.setState({disabled:true})
|
|
}
|
|
this.setState({passValue:value})
|
|
}
|
|
|
|
handleInputChange =(event)=> {
|
|
const target = event.target;
|
|
const value = target.type === 'checkbox' ? target.checked : target.value;
|
|
const name = target.name;
|
|
|
|
this.setState({[name]:value})
|
|
|
|
if(value===true){
|
|
this.setState({isGoingValue:1})
|
|
}else{
|
|
this.setState({isGoingValue:0})
|
|
}
|
|
|
|
}
|
|
|
|
// 快捷注册
|
|
shortcutIdChange=()=>{
|
|
let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
|
|
let reg1 = /^1\d{10}$/;
|
|
let reg2=/^[a-zA-z]\w{3,14}$/;
|
|
let value=this.refs.shortcutText.value;
|
|
let valuenum= value.length;
|
|
if(valuenum>0){
|
|
if(!reg.test(value)&&!reg1.test(value)&&!reg2.test(value)){
|
|
this.setState({shortcutnum:0})
|
|
this.setState({disabledType:true})
|
|
this.setState({gaincode : 'gain-code'})
|
|
return
|
|
}else{
|
|
this.setState({gaincode : 'gain-code edu-back-blue'})
|
|
this.setState({shortcutValue:value})
|
|
this.setState({shortcutnum:1})
|
|
this.setState({disabledType:false})
|
|
}
|
|
|
|
|
|
}else{
|
|
this.setState({shortcutValue:value})
|
|
|
|
}
|
|
|
|
}
|
|
authCodeChange=()=>{
|
|
|
|
let value=this.refs.authCodeText.value;
|
|
let valuenum= value.length;
|
|
if(valuenum>3){
|
|
this.setState({authCodeType:false})
|
|
this.setState({authCodeclass:'log-botton mt5 edu-back-blue'})
|
|
}else if(valuenum==0){
|
|
this.setState({authCodeType:true})
|
|
this.setState({authCodeclass:'log-botton mt5'})
|
|
}
|
|
}
|
|
get_login_verification_code=()=>{
|
|
get_login_verification_code($('#get_verification_code')[0])
|
|
}
|
|
dragWrapper=() =>{
|
|
const $ = window.$
|
|
$.fn.drag = function(options) {
|
|
|
|
var x, drag = this, isMove = false, defaults = {
|
|
};
|
|
var options = $.extend(defaults, options);
|
|
var handler = drag.find('.handler');
|
|
var drag_bg = drag.find('.drag_bg');
|
|
var text = drag.find('.drag_text');
|
|
var maxWidth = 100
|
|
//鼠标按下时候的x轴的位置
|
|
handler.mousedown(function(e) {
|
|
isMove = true;
|
|
x = e.pageX - parseInt(handler.css('left'), 10);
|
|
maxWidth = drag.width() - handler.width() - 2; //能滑动的最大间距
|
|
});
|
|
$(document).mousemove(function(e) {
|
|
var _x = e.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x
|
|
if (isMove) {
|
|
|
|
if (_x > 0 && _x <= maxWidth) {
|
|
handler.css({'left': _x});
|
|
drag_bg.css({'width': _x});
|
|
} else if (_x > maxWidth) { //鼠标指针移动距离达到最大时清空事件
|
|
dragOk();
|
|
}
|
|
}
|
|
}).mouseup(function(e) {
|
|
isMove = false;
|
|
var _x = e.pageX - x;
|
|
if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
|
|
handler.css({'left': 0});
|
|
drag_bg.css({'width': 0});
|
|
}
|
|
});
|
|
|
|
//清空事件
|
|
function dragOk() {
|
|
handler.removeClass('handler_bg').addClass('handler_ok_bg');
|
|
text.removeClass('slidetounlock').text('验证通过').css({'color':'#fff'}); //modify
|
|
// drag.css({'color': '#fff !important'});
|
|
|
|
handler.css({'left': maxWidth}); // add
|
|
drag_bg.css({'width': maxWidth}); // add
|
|
|
|
handler.unbind('mousedown');
|
|
$(document).unbind('mousemove');
|
|
$(document).unbind('mouseup');
|
|
|
|
}
|
|
}
|
|
|
|
setTimeout(()=>{
|
|
$('#quick-drag').drag();
|
|
}, 4000)
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
this.setState({
|
|
isRender:nextProps.isRender
|
|
})
|
|
// console.log(nextProps.isRender);
|
|
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
if(this.props.isRender!=undefined){
|
|
this.setState({
|
|
isRender:this.props.isRender
|
|
})
|
|
}
|
|
|
|
// $(document).on("showLoginDialog", (e, args)=>{
|
|
// this.setState({
|
|
// isRender: true
|
|
// })
|
|
// })
|
|
|
|
this.dragWrapper();
|
|
|
|
axios.interceptors.response.use((response) => {
|
|
if(response!=undefined)
|
|
if (response&&response.data.status === 401) {
|
|
this.setState({
|
|
isRender: true
|
|
})
|
|
}
|
|
return response;
|
|
}, (error) => {
|
|
// // if (error.response && error.response.data.error === '401 Unauthorized') {
|
|
// // this.back_url = window.location.href;
|
|
// // this.setState({
|
|
// // isRender: true
|
|
// // })
|
|
// // // TODO 这里如果样式变了会出现css不加载的情况
|
|
// // const $ = window.$;
|
|
// // const isCssLoaded = window.getComputedStyle($('.log_nav li.active')[0], null)
|
|
// // .getPropertyValue('border-bottom')
|
|
// // == "2px solid rgb(69, 155, 229)"
|
|
// // if (!isCssLoaded) {
|
|
// // const isPort3007 = window.location.port == 3007;
|
|
// // let _url_origin = isPort3007 ? 'http://localhost:3000' : ''
|
|
// //
|
|
// // $('head').append( $('<link rel="stylesheet" type="text/css" />')
|
|
// // .attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css`) );
|
|
// // $('head').append( $('<link rel="stylesheet" type="text/css" />')
|
|
// // .attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css`) );
|
|
// // }
|
|
// // }
|
|
// // return Promise.reject(error);
|
|
});
|
|
}
|
|
handleDialogClose = () => {
|
|
// if(this.props.match===undefined){
|
|
// window.location.href="/";
|
|
// }else if(this.props.match.path==="/"){
|
|
// this.setState({
|
|
// isRender: false
|
|
// })
|
|
// }else{
|
|
// window.location.href="/";
|
|
// }
|
|
this.setState({
|
|
isRender: false
|
|
})
|
|
}
|
|
|
|
loginEDU=()=>{
|
|
let {loginValue,passValue,regular,isGoingValue}=this.state;
|
|
if(regular===1){
|
|
return
|
|
}
|
|
let newloginValue=loginValue.replace(/(^\s*)|(\s*$)/g, "");
|
|
let newpassValue=passValue.replace(/(^\s*)|(\s*$)/g, "");
|
|
|
|
let url='/accounts/login.json'
|
|
axios.post(url, {
|
|
login:newloginValue,
|
|
password:newpassValue,
|
|
autologin:isGoingValue
|
|
}
|
|
).then((response) => {
|
|
if(response===undefined){
|
|
return
|
|
}
|
|
|
|
if(response.status===200){
|
|
if (response.data.status === 402) {
|
|
window.location.href = response.data.url;
|
|
}else if (response.data.status === -2) {
|
|
notification.open({
|
|
message: '提示',
|
|
description:response.data.message,
|
|
});
|
|
}else{
|
|
if(response.data.identity === null || response.data.identity === undefined){
|
|
this.props.history.push("/interesse");
|
|
return;
|
|
}
|
|
broadcastChannelPostMessage('refreshPage')
|
|
this.setState({
|
|
isRender:false
|
|
})
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
}).catch((error) => {
|
|
console.log("356");
|
|
console.log(error)
|
|
})
|
|
}
|
|
onKeydowns=(e)=>{
|
|
let {disabled}=this.state;
|
|
if( disabled===false&& e.keyCode === 13){
|
|
this.loginEDU()
|
|
console.log(1)
|
|
}
|
|
}
|
|
render() {
|
|
let{open,login,speedy,loginValue,regular,isGoing,isGoingValue,disabled,bottonclass,
|
|
dialogBox,shortcutnum,disabledType,gaincode,authCodeType,authCodeclass, isRender}=this.state;
|
|
|
|
if (isRender === undefined) {
|
|
isRender = false
|
|
}
|
|
|
|
return (
|
|
<Dialog open={true} id="DialogID"
|
|
style={{ display: isRender==false? 'none' : ''}}
|
|
disableEscapeKeyDown={true}
|
|
onClose={() => this.handleDialogClose()}
|
|
>
|
|
{isRender===true?
|
|
<div className={dialogBox}>
|
|
<div id="closeIcon" onClick={()=>{this.handleDialogClose()}}>
|
|
<i className="iconfont icon-shanchudiao"></i>
|
|
</div>
|
|
|
|
<div id="log_reg_content">
|
|
<ul className="log_nav clearfix">
|
|
<li className={login==0?'active':''} onClick={()=>{this.enter(0)}}>登录</li>
|
|
{/*<li className={speedy==0?'active':''} onClick={()=>{this.register(0)}}>快捷登录</li>*/}
|
|
</ul>
|
|
|
|
|
|
<div className="login-panel" id="login-panel-1" style={{display: login==0?'block':'none'}}>
|
|
<form acceptCharset="UTF-8" action="/login" id="main_login_form" method="post">
|
|
|
|
<div style={{"display":"inline","padding":"0","margin":"0"}}>
|
|
<input name="utf8" type="hidden" value="✓"></input>
|
|
<input name="authenticity_token" type="hidden" value="NVLiIlHZfhVBQtO9djnWncJqqdikNQIIxEmOvzK9vNM="></input>
|
|
</div>
|
|
|
|
<input name="back_url" type="hidden" value={this.back_url}></input>
|
|
<input
|
|
type="text"
|
|
className="input-100-45 mt20"
|
|
id="name_loggin_input"
|
|
ref="loginPassText"
|
|
onInput={this.loginChange}
|
|
name="username"
|
|
placeholder="请输入有效的手机号/邮箱号" ></input>
|
|
|
|
<div style={{height: '25px'}}><p className="color-orange edu-txt-left none" id="username_error_notice"
|
|
style={{display: regular==0?'none':'block'}}>请输入有效的手机号/邮箱号</p></div>
|
|
|
|
<div>
|
|
<input type="password" id="password_loggin_input"
|
|
name="password"
|
|
ref="passwordText"
|
|
onInput={this.passwordChange}
|
|
onKeyDown={this.onKeydowns}
|
|
className="input-100-45 mt5"
|
|
placeholder="密码" >
|
|
</input>
|
|
<div style={{height: '25px'}}>
|
|
<p className="color-orange edu-txt-left none" id="password_error_notice">
|
|
请输入密码
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/*<button className={bottonclass} id="psd_login_btn" onClick={this.loginEDU} disabled={disabled}>*/}
|
|
|
|
{/*</button>*/}
|
|
|
|
<div className={disabled===false?"bluebutton edu-back-blue":"bluebutton"}
|
|
onClick={disabled===false?
|
|
this.loginEDU: () => {}
|
|
// console.log(1)
|
|
}
|
|
>
|
|
登录
|
|
</div>
|
|
|
|
<p className="clearfix mt10">
|
|
|
|
<span className="fl">
|
|
<input type="checkbox"
|
|
className="mr5 magic-checkbox"
|
|
checked={isGoing}
|
|
onChange={this.handleInputChange}
|
|
value={isGoingValue}
|
|
name="isGoing"
|
|
id="p_autolog"></input>
|
|
<label htmlFor="p_autolog" style={{top:'0px'}}>下次自动登录</label>
|
|
</span>
|
|
|
|
<span className="fr">
|
|
<a href={"/changepassword"} className="mr3 color-grey-9">忘记密码</a><em className="vertical-line"></em>
|
|
<a href={"/register"} className="color-grey-9">注册</a>
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
{/*快捷登录*/}
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
:""}
|
|
</Dialog>
|
|
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default LoginDialog ;
|
|
|
|
|
|
// onkeypress="user_login_keypress(event);"
|
|
|
|
// onkeypress="user_login_keypress(event);"
|
|
|
|
|
|
{/* <div className="pr drag_certi_block width100 mt5">
|
|
<div id="quick-drag" className="drag_slider" style={{color: 'rgb(255, 255, 255)'}}></div>
|
|
<div className="new-login-error" style={{height: '25px'}}>
|
|
<p id="passlogin_error_notice" className="color-orange edu-txt-left none" style={{display: 'block'}}></p>
|
|
</div>
|
|
</div>}
|
|
|
|
|
|
|
|
{/*第三方账号登录*/}
|
|
|
|
{/* <div className="mt10 edu-txt-center">
|
|
<p className="color-grey-9">第三方账号登录</p>
|
|
<div className="mt15">
|
|
<a href="javascript:void(0)" className="margin15"><img src="/images/educoder/weixin.png" className="radius"/></a>
|
|
<a href="javascript:void(0)" className="margin15"><img src="/images/educoder/QQ.png" className="radius"/></a>
|
|
<a href="javascript:void(0)" className="margin15"><img src="/images/educoder/weibo.png" className="radius"/></a>
|
|
</div>
|
|
</div>}
|
|
|
|
//
|
|
// {/*<div className="login-panel none" id="login-panel-2" style={{display:speedy==0?'block':'none'}}>*/}
|
|
// {/*<form acceptCharset="UTF-8" action="/login" id="code_login_form" method="post">*/}
|
|
// {/*<div style={{"display":"inline","padding":"0","margin":"0"}}>*/}
|
|
// {/*<input name="utf8" type="hidden" value="✓"></input>*/}
|
|
// {/*<input name="authenticity_token" type="hidden" value="NVLiIlHZfhVBQtO9djnWncJqqdikNQIIxEmOvzK9vNM="></input>*/}
|
|
// {/*</div>*/}
|
|
// {/*<input name="back_url" type="hidden" value={this.back_url}></input>*/}
|
|
// {/*<input*/}
|
|
// {/*type="text"*/}
|
|
// {/*id="pass_name_input"*/}
|
|
// {/*name="username"*/}
|
|
// {/*ref="shortcutText"*/}
|
|
// {/*onInput={this.shortcutIdChange}*/}
|
|
// {/*className="input-100-45 mt20"*/}
|
|
// {/*placeholder="手机号/邮箱号">*/}
|
|
// {/*</input>*/}
|
|
// {/*<div style={{height: '25px'}}>*/}
|
|
// {/*<p className="color-orange edu-txt-left none" id="pass_name_error_notice"*/}
|
|
// {/*style={{display: shortcutnum==0?'block':'none'}}>请输入有效的手机号/邮箱号*/}
|
|
// {/*</p>*/}
|
|
// {/*</div>*/}
|
|
//
|
|
// {/*<div id="wrapper">*/}
|
|
// {/*/!*drag*/ }*/}
|
|
// {/*<div id="quick-drag" className="drag_slider">*/}
|
|
// {/*<div className="drag_bg"></div>*/}
|
|
// {/*<div className="drag_text slidetounlock">*/}
|
|
// {/*请按住滑块，拖动到最右边*/}
|
|
// {/*</div>*/}
|
|
// {/*<div className="handler handler_bg"></div>*/}
|
|
// {/*</div>*/}
|
|
// {/*<div className="new-login-error" style={{height: '25px'}}>*/}
|
|
// {/*<p id="passlogin_error_notice" className="color-orange edu-txt-left none">请先拖动滑块完成验证</p>*/}
|
|
// {/*</div>*/}
|
|
// {/*</div>*/}
|
|
//
|
|
// {/*<p className="clearfix mt5">*/}
|
|
// {/*<input*/}
|
|
// {/*type="text"*/}
|
|
// {/*name="code"*/}
|
|
// {/*id="login_verification_code"*/}
|
|
// {/*className="input-48-45 edu-txt-center fl"*/}
|
|
// {/*ref="authCodeText"*/}
|
|
// {/*onInput={this.authCodeChange}*/}
|
|
// {/*placeholder="请输入验证码">*/}
|
|
// {/*</input>*/}
|
|
// {/*<button className={gaincode} disabled={disabledType}*/}
|
|
// {/*onClick={()=>{this.get_login_verification_code()}} id="get_verification_code">获取验证码</button>*/}
|
|
// {/*</p>*/}
|
|
//
|
|
// {/*<div style={{height: '25px'}}>*/}
|
|
// {/*<p className="color-orange edu-txt-left none" id="send_code_notice">*/}
|
|
// {/*请输入验证码*/}
|
|
// {/*</p>*/}
|
|
// {/*</div>*/}
|
|
//
|
|
// {/*<button className={authCodeclass} disabled={authCodeType} id="code_login_btn">登录</button>*/}
|
|
//
|
|
// {/*<p className="clearfix mt10">*/}
|
|
//
|
|
// {/*<span className="fl">*/}
|
|
// {/*<input type="checkbox"*/}
|
|
// {/*className="mr5 magic-checkbox"*/}
|
|
// {/*id="autolog"*/}
|
|
// {/*checked={isGoing}*/}
|
|
// {/*onChange={this.handleInputChange}*/}
|
|
// {/*value={isGoingValue}*/}
|
|
// {/*name="isGoing"*/}
|
|
// {/*></input>*/}
|
|
// {/*<label htmlFor="autolog" style={{"top":"0px"}}>下次自动登录</label>*/}
|
|
// {/*</span>*/}
|
|
//
|
|
// {/*<span className="fr">*/}
|
|
// {/*<a href="https://www.educoder.net/account/lost_password" className="mr3 color-grey-9">忘记密码</a><em className="vertical-line"></em>*/}
|
|
// {/*<a href="https://www.educoder.net/user_join" target="_blank" className="color-grey-9">注册</a>*/}
|
|
// {/*</span>*/}
|
|
//
|
|
// {/*</p>*/}
|
|
// {/*</form>*/}
|
|
// {/*</div>*/}
|