forked from Gitlink/forgeplus-react
596 lines
19 KiB
JavaScript
596 lines
19 KiB
JavaScript
import React, { Component } from 'react';
|
||
|
||
import Dialog from 'material-ui/Dialog';
|
||
import { notification } from 'antd';
|
||
|
||
import axios from 'axios';
|
||
import educoderLogo from './educoder.png';
|
||
|
||
import './LoginDialog.css';
|
||
import { broadcastChannelPostMessage } from 'educoder'
|
||
import Notcompletedysl from "../user/Notcompletedysl";
|
||
|
||
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,
|
||
MyEduCoderModals: false,
|
||
Phonenumberisnotco: undefined,
|
||
Phonenumberisnotcobool: false,
|
||
weixinlogin: false,
|
||
qqlogin: false
|
||
};
|
||
}
|
||
enter = (num) => {
|
||
this.setState({ login: num, speedy: 1, dialogBox: 'dialogBox' });
|
||
}
|
||
|
||
register = (num) => {
|
||
this.setState({ login: 1, speedy: num, dialogBox: 'dialogBox2' });
|
||
}
|
||
inputOnBlur = (e, id) => {
|
||
this.Emailphonenumberverification(e.target.value, 1);
|
||
};
|
||
// 输入页面
|
||
loginChange = (e) => {
|
||
var stirngt = "";
|
||
if (e.target.value.length > 0) {
|
||
var str = e.target.value.replace(/\s*/g, "")
|
||
stirngt = str;
|
||
} else {
|
||
stirngt = e.target.value;
|
||
}
|
||
|
||
if (e.target.value.length === 0) {
|
||
this.setState({
|
||
loginValue: stirngt,
|
||
Phonenumberisnotco: undefined,
|
||
})
|
||
} else {
|
||
this.setState({
|
||
loginValue: stirngt,
|
||
Phonenumberisnotco: undefined,
|
||
})
|
||
}
|
||
};
|
||
//邮箱手机号验证
|
||
Emailphonenumberverification = (value, id) => {
|
||
var url = `/accounts/valid_email_and_phone.json`;
|
||
axios.get((url), {
|
||
params: {
|
||
login: value,
|
||
type: 1,
|
||
}
|
||
}).then((result) => {
|
||
if (result) {
|
||
if (result.data.status === -2) {
|
||
if (result.data.message === "该手机号码或邮箱已被注册") {
|
||
this.setState({
|
||
Phonenumberisnotco: undefined,
|
||
Phonenumberisnotcobool: false,
|
||
})
|
||
} else {
|
||
this.setState({
|
||
Phonenumberisnotco: result.data.message,
|
||
Phonenumberisnotcobool: true,
|
||
})
|
||
}
|
||
return;
|
||
} else {
|
||
this.setState({
|
||
Phonenumberisnotco: undefined,
|
||
Phonenumberisnotcobool: false,
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
|
||
})
|
||
};
|
||
|
||
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
|
||
})
|
||
}
|
||
IsPC = () => {
|
||
var userAgentInfo = navigator.userAgent;
|
||
var Agents = ["Android", "iPhone",
|
||
"SymbianOS", "Windows Phone",
|
||
"iPad", "iPod"];
|
||
var flag = true;
|
||
for (var v = 0; v < Agents.length; v++) {
|
||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||
flag = false;
|
||
break;
|
||
}
|
||
}
|
||
return flag;
|
||
}
|
||
componentDidMount() {
|
||
//true为PC端，false为手机端
|
||
let flag = this.IsPC();
|
||
this.setState({
|
||
isphone: flag
|
||
})
|
||
|
||
if (this.props.isRender != undefined) {
|
||
this.setState({
|
||
isRender: this.props.isRender
|
||
})
|
||
}
|
||
this.dragWrapper();
|
||
|
||
axios.interceptors.response.use((response) => {
|
||
if (response != undefined)
|
||
if (response && response.data.status === 401) {
|
||
document.title = "提示";
|
||
this.setState({
|
||
isRender: true
|
||
})
|
||
}
|
||
return response;
|
||
}, (error) => {
|
||
});
|
||
}
|
||
handleDialogClose = () => {
|
||
this.setState({
|
||
isRender: false
|
||
})
|
||
this.props.Modifyloginvalue();
|
||
}
|
||
|
||
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.data.status === -2) {
|
||
if (response.data.message === "登录密码出错已达上限，账号已被锁定, 请10分钟后重新登录或找回密码") {
|
||
const messge = (
|
||
<div>
|
||
<p>登录密码出错已达上限，账号已被锁定；</p>
|
||
<p className="mt10">请10分钟后重新登录或<a href="/resetPassword" style={{textDecoration: "underline",color: "#4CACFF"}}>找回密码</a></p>
|
||
</div>
|
||
)
|
||
this.openNotifications(messge);
|
||
} else {
|
||
notification.open({
|
||
message: '提示',
|
||
description: response.data.message,
|
||
duration: 5,
|
||
});
|
||
}
|
||
} else {
|
||
broadcastChannelPostMessage('refreshPage')
|
||
this.setState({
|
||
isRender: false
|
||
})
|
||
this.props.Modifyloginvalue(response.data);
|
||
window.location.reload();
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
};
|
||
setNotcompleteds = () => {
|
||
this.setState({
|
||
Notcompleteds: true,
|
||
MyEduCoderModals: false
|
||
})
|
||
};
|
||
setMyEduCoderModals = () => {
|
||
this.setState({
|
||
MyEduCoderModals: true
|
||
})
|
||
};
|
||
onKeydowns = (e) => {
|
||
let { disabled } = this.state;
|
||
if (disabled === false && e.keyCode === 13) {
|
||
this.loginEDU()
|
||
}
|
||
};
|
||
getloginurl = (url) => {
|
||
window.location.href = url;
|
||
};
|
||
openNotifications = (btn) => {
|
||
// type 1 成功提示绿色 2提醒颜色黄色 3错误提示红色
|
||
notification.open({
|
||
message: "提示",
|
||
description: btn,
|
||
duration: 5,
|
||
onClick: () => {
|
||
|
||
},
|
||
});
|
||
}
|
||
openqqlogin = () => {
|
||
this.setState({
|
||
qqlogin: true
|
||
})
|
||
window.location.href = `https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
|
||
}
|
||
|
||
openphoneqqlogin = () => {
|
||
window.open(
|
||
`https://xui.ptlogin2.qq.com/cgi-bin/xlogin?appid=716027609&pt_3rd_aid=101508858&daid=383&pt_skey_valid=0&style=35&s_url=http%3A%2F%2Fconnect.qq.com&refer_cgi=authorize&which=&client_id=101508858&response_type=code&scope=get_user_info&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
|
||
)
|
||
}
|
||
|
||
getTContainer = () => {
|
||
return document.body;
|
||
}
|
||
hideweixinlogin = () => {
|
||
this.setState({
|
||
weixinlogin: false,
|
||
qqlogin: false
|
||
})
|
||
}
|
||
|
||
render() {
|
||
let { login, isGoing, isGoingValue, disabled , Phonenumberisnotco , dialogBox, isRender, weixinlogin } = this.state;
|
||
let { settings } = this.props;
|
||
|
||
if (isRender === undefined) {
|
||
isRender = false
|
||
}
|
||
return (
|
||
<Dialog open={true} id="DialogID"
|
||
className="zindextest"
|
||
style={{ display: isRender === false ? 'none' : '' }}
|
||
disableEscapeKeyDown={true}
|
||
disableBackdropClick={true}
|
||
onClose={() => this.handleDialogClose()}
|
||
>
|
||
<Notcompletedysl
|
||
modalsType={this.state.MyEduCoderModals}
|
||
setNotcompleteds={() => { this.setNotcompleteds() }}
|
||
/>
|
||
<style>
|
||
{
|
||
`
|
||
#DialogID .dialogBox {
|
||
width: 405px !important;
|
||
}
|
||
.dialogBox {
|
||
height: 290px !important;
|
||
}
|
||
`
|
||
}
|
||
</style>
|
||
{isRender === true ?
|
||
<div className={dialogBox}>
|
||
<div id="closeIcon" className={"logincloseIcon"} onClick={() => { this.handleDialogClose() }}>
|
||
<i className="iconfont icon-shanchudiao"></i>
|
||
</div>
|
||
<div id="log_reg_content" >
|
||
{weixinlogin === true ? "" : <ul className="log_nav clearfix">
|
||
<li onClick={() => { this.enter(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}
|
||
onBlur={(e) => this.inputOnBlur(e, 1)}
|
||
onPressEnter={disabled === false ?
|
||
this.loginEDU : () => {
|
||
}
|
||
}
|
||
value={this.state.loginValue}
|
||
name="username"
|
||
placeholder="请输入邮箱地址/用户名" ></input>
|
||
|
||
<div style={{ height: '25px' }}><p className="color-orange edu-txt-left none" id="username_error_notice"
|
||
style={{ display: Phonenumberisnotco === undefined ? 'none' : 'block' }}>{Phonenumberisnotco}</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"
|
||
onPressEnter={disabled === false ?
|
||
this.loginEDU : () => {
|
||
}
|
||
}
|
||
placeholder="请输入登录密码"
|
||
/>
|
||
<div style={{ height: '25px' }}>
|
||
<p className="color-orange edu-txt-left none" id="password_error_notice">
|
||
请输入密码
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className={disabled === false ? "bluebutton edu-back-blue" : "bluebutton"}
|
||
onClick={disabled === false ?
|
||
this.loginEDU : () => { }
|
||
}
|
||
>
|
||
登录
|
||
</div>
|
||
<p className="clearfix mt20">
|
||
<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="/resetPassword" className="mr3 color-grey-9">找回密码</a>
|
||
<em className="vertical-line"></em>
|
||
<a href="/register" className="color-grey-9">注册</a>
|
||
</span>
|
||
</p>
|
||
{
|
||
settings && settings.third_party && settings.third_party.length > 0 ?
|
||
<p className="clearfix mt20">
|
||
<span className={"startlogin"}>———————— 快速登录 ————————</span>
|
||
<div className={"mt10"}>
|
||
{settings.third_party.map((item,key)=>{
|
||
return(
|
||
<a href={`${item.url}`}>
|
||
<img src={item.name === "educoder" ? educoderLogo : ""} width="46px" alt={`${item.name}登录`} />
|
||
</a>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</p>
|
||
:""
|
||
}
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
: ""}
|
||
</Dialog>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default LoginDialog;
|
||
|