Authored by htoooth

add sms

... ... @@ -24,10 +24,9 @@ router.get('/logout.html', login.local.logout);
// 本地登录
// 短信验证码
// router.post('/passport/login/sms/send', login.local.sms.send); // 发短信验证码
// router.post('/passport/login/sms/auth', login.local.sms.auth); // 验证短信验证码
// router.post('/passport/login/sms/checkuser', login.local.sms.checkUser); // 短信检查用户是否注册
router.post('/passport/login/password/checkuser', back.fakeGetUserInfoAPI);// 假的,密码登录检查用户是否注册
router.post('/passport/login/sms/send', login.local.sms.send); // 发短信验证码
router.post('/passport/login/sms/auth', login.local.sms.auth); // 验证短信验证码
router.post('/passport/login/sms/checkuser', login.local.sms.checkUser); // 短信检查用户是否注册
// 二维码登录
router.post('/passport/login/qrcode/refresh', login.local.qrcode.refresh); // 刷新二维码
... ...
... ... @@ -27,12 +27,10 @@
</span>
</li>
<li class="relative hide">
<li class="relative">
<div class="switch">
<div class="left selected" data-type="PasswordLogin">普通登录</div>
{{#if smsLogin}}
<div class="right" data-type="SMSLogin">手机验证码登录</div>
{{/if}}
</div>
</li>
... ... @@ -57,7 +55,6 @@
</span>
</li>
{{#if smsLogin}}
<li class="relative clearfix sms-login hide">
<input id="account2" class="account input va" name="account2" value="{{bindMobile}}"
type="text"
... ... @@ -68,6 +65,17 @@
</span>
</li>
<li class="clearfix sms-captcha-img-wrap captcha-wrap sms-login hide">
<input id="sms-captcha-input" class="input va captcha" type="text" name="captcha" placeholder="图形验证码"
autocomplete="off" maxlength="4">
<img id="sms-captcha-img" class="captcha-img" alt="">
<a class="link change-captcha">换一张</a>
<span class="err-tip hide">
<i></i>
<em></em>
</span>
</li>
<li class="relative clearfix sms-login hide">
<input id="captcha-sms" class="input va captcha-sms-input" type="text" name="captcha"
placeholder="短信验证码"
... ... @@ -78,7 +86,6 @@
<em></em>
</span>
</li>
{{/if}}
<li class="clearfix captcha-wrap hide">
<input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码"
... ...
... ... @@ -65,7 +65,7 @@ module.exports = {
port: '4444' // influxdb port
},
console: {
level: 'error',
level: 'info',
colorize: 'all',
prettyPrint: true
}
... ...
... ... @@ -69,6 +69,12 @@ var $accountInput1 = $('#account1'),
getCaptchaSmsTokenVal = function() { // 短信登录凭证
return $.trim($captchaSmsTokenHideInput.val());
},
$smsCaptchaImgWrapper = $('.sms-captcha-img-wrap'),
$smsCaptchaImgInput = $smsCaptchaImgWrapper.find('#sms-captcha-input'),
$smsCaptchaImgPic = $smsCaptchaImgWrapper.find('#sms-captcha-img'),
getSmsCaptchaImgVal = function() { // 短信登录图形验证码
return $.trim($smsCaptchaImgInput.val());
},
// 区域选择
$countryCodeInput = $('#country-code-hide'),
... ... @@ -101,6 +107,7 @@ var $accountTip1 = $accountInput1.siblings('.err-tip'),
$passwordTip = $passwordInput.siblings('.err-tip'),
$captchaImgTip = $captchaImgInput.siblings('.err-tip'),
$captchaSmsTip = $captchaSmsInput.siblings('.err-tip'),
$smsCaptchaImgTip = $smsCaptchaImgInput.siblings('.err-tip'),
$capsLock = $('#caps-lock');
var mailPhoneRegx = require('../common/mail-phone-regx'), // 邮箱格式验证
... ... @@ -109,6 +116,9 @@ var mailPhoneRegx = require('../common/mail-phone-regx'), // 邮箱格式验证
// 图像验证码URL
var CAPTCHA_IMG_URL = '/passport/imagesNode?t=';
// 刷新手机短信图形验证码
var refreshSmsImgCallBack = $.Callbacks(); // eslint-disable-line
// 记住我符号
var checkboxSymbol = {
checked: '&#xe612;',
... ... @@ -258,10 +268,13 @@ accountChangeEvent.add(function(type) {
hideCaptchaImgTip(); // eslint-disable-line
hideCaptchaSmsTip(); // eslint-disable-line
hidePasswordTip(); // eslint-disable-line
hideSmsCaptchaImgTip(); // eslint-disable-line
$passwordInput.val('');
$captchaImgInput.val('');
$captchaSmsInput.val('');
$smsCaptchaImgInput.val('');
$captchaSmsTokenHideInput.val('');
if (type === AccountLoginData.QRCodeLogin.name) {
... ... @@ -274,6 +287,7 @@ accountChangeEvent.add(function(type) {
accountChangeEvent.add(function(type) {
if (type === AccountLoginData.SMSLogin.name) {
$accountInput2.val($accountInput1.val());
$smsCaptchaImgPic.attr('src', CAPTCHA_IMG_URL + $.now());
} else {
$accountInput1.val($accountInput2.val());
}
... ... @@ -287,6 +301,10 @@ mobileTipShowOnce.add(function() {
$deviceTips.removeClass('hide');
});
refreshSmsImgCallBack.add(function() {
$smsCaptchaImgPic.attr('src', CAPTCHA_IMG_URL + $.now());
});
/** ************************************************************************/
/* 加载自定义库 */
/** ************************************************************************/
... ... @@ -321,6 +339,7 @@ function hideAccountTip1() {
}
function showAccountTip2(msg) {
refreshSmsImgCallBack.fire();
return errTipShow($accountTip2, $accountInput2, msg);
}
... ... @@ -351,6 +370,7 @@ function hideCaptchaImgTip() {
/** ************************************************************************/
function showCaptchaSmsTip(msg) {
refreshSmsImgCallBack.fire();
return errTipShow($captchaSmsTip, $captchaSmsInput, msg);
}
... ... @@ -360,6 +380,17 @@ function hideCaptchaSmsTip() {
/** ************************************************************************/
function showSmsCaptchaImgTip(msg) {
refreshSmsImgCallBack.fire();
return errTipShow($smsCaptchaImgTip, $smsCaptchaImgInput, msg);
}
function hideSmsCaptchaImgTip() {
return errTipHide($smsCaptchaImgTip, $smsCaptchaImgInput);
}
/** ************************************************************************/
function showQrCodeFailTip(msg) {
hideQrCodeTip(); // eslint-disable-line
$qrCodeOverLayer.addClass('qrcode-overlay-fail');
... ... @@ -654,6 +685,70 @@ function sendCaptchaSmsAsync() {
}
/** ************************************************************************/
/* 短信验证图形验证 */
/** ************************************************************************/
function smsCaptchaImgLocal() {
var captcha = getSmsCaptchaImgVal(),
err;
var defer = $.Deferred(); // eslint-disable-line
if (captcha !== '') {
if (captcha.length !== 4) {
err = '请输入长度为4字符的验证码';
defer.reject();
} else {
defer.resolve();
}
} else {
err = '请输入验证码';
defer.reject();
}
if (defer.state() === 'resolved') {
hideSmsCaptchaImgTip();
} else {
showSmsCaptchaImgTip(err);
}
return defer.promise();
}
function smsCaptchaImgAsync() {
return $.ajax({
url: '/passport/captcha/img',
type: 'POST',
data: {
verifyCode: getSmsCaptchaImgVal()
}
}).then(function(result) {
var defer = $.Deferred(); // eslint-disable-line
if (result.code === 200) {
hideSmsCaptchaImgTip();
defer.resolve();
} else {
showSmsCaptchaImgTip('验证码不正确');
defer.reject();
}
return defer.promise();
});
}
function validateSmsCaptchaImg() {
smsCaptchaImgLocal()
.then(smsCaptchaImgAsync)
.then(hideSmsCaptchaImgTip);
}
/** ************************************************************************/
/* 二维码验证 */
/** ************************************************************************/
... ... @@ -753,8 +848,8 @@ function validateWithPasswordMode() {
// 短信验证过程
function validateWithSmsMode() {
return validateAccount()
.then(validateCaptchaSms)
.then(validateCaptchaImg);
.then(validateSmsCaptchaImg)
.then(validateCaptchaSms);
}
/** ************************************************************************/
... ... @@ -800,7 +895,8 @@ function prePasswordLoginWithValidate() {
function preSmsLoginWithValidate() {
return (function() {
var account = currentLogin.getAccountVal(),
password = getCaptchaSmsVal();
password = getCaptchaSmsVal(),
smsImg = getSmsCaptchaImgVal();
var defer = $.Deferred(); // eslint-disable-line
... ... @@ -810,6 +906,12 @@ function preSmsLoginWithValidate() {
defer.reject();
}
if (smsImg === '') {
showSmsCaptchaImgTip('请输入图形证码');
defer.reject();
}
if (password === '') {
showCaptchaSmsTip('请输入短信验证码');
... ... @@ -844,7 +946,7 @@ function loginAsync() {
areaCode: getAreaCodeVal(),
account: currentLogin.getAccountVal(),
password: currentLogin.creditableToken(),
captcha: getCaptchaImgVal(),
captcha: currentLogin.type() === 'password' ? getCaptchaImgVal() : getSmsCaptchaImgVal(),
isRemember: getRememberMeVal(),
loginType: currentLogin.type()
}
... ... @@ -871,7 +973,6 @@ function loginAsync() {
} else if (currentLogin.type() === 'sms') {
showCaptchaSmsTip('短信验证码错误');
$captchaSmsInput.addClass('error').val('');
} else if (currentLogin.type() === 'qrcode') {
showQrCodeFailTip(QR_CODE_ERR.fail);
}
... ... @@ -891,27 +992,6 @@ function showCaptchaImgPic() {
$captchaImgWrapper.removeClass('hide');
}
// 检查有效用户,超过三次会有验证操作进行
function authUntilThreeTimesAsync() {
return $.ajax({
url: '/passport/login/account',
type: 'GET',
data: {
account: currentLogin.getAccountVal()
}
}).then(function(res) {
var defer = $.Deferred(); // eslint-disable-line
if (res.data && res.data.needCaptcha) {
defer.resolve();
} else {
defer.reject();
}
return defer.promise();
});
}
// 设置 refer 信息
function setRefer() {
var refer = queryString().refer || '', // eslint-disable-line
... ... @@ -973,17 +1053,6 @@ mailAc($accountInput1, function() {
return currentLogin.validateAccountLocal();
});
// 短信下手机输入框失去焦点:
// 1. 本地验证格式;2.服务器检查用户是否注册;3.始终检查验证用户次数
$accountInput2.on('blur', function() {
return currentLogin.validateAccountLocal().then(function() {
return currentLogin.validateAccountAsync()
.always(function() {
return authUntilThreeTimesAsync().then(showCaptchaImgPic);
});
});
});
// 密码输入框事件
$passwordInput.on('blur', function() {
validatePasswordLocal();
... ... @@ -1007,6 +1076,19 @@ $passwordInput.on('blur', function() {
// 图像验证码输入框事件
$captchaImgInput.on('blur', validateCaptchaImg);
/** ************************************************************************/
// 短信下手机输入框失去焦点:本地验证格式
$accountInput2.on('blur', function() {
return currentLogin.validateAccountLocal();
});
// 图形验证码失去焦点验证
$smsCaptchaImgInput.on('blur', function() {
validateSmsCaptchaImg();
});
// sms验证码输入框事件
$captchaSmsInput.on('blur', validateCaptchaSms);
... ... @@ -1049,6 +1131,11 @@ $captchaImgWrapper.on('click', '.change-captcha, .captcha-img', function() {
$captchaImgPic.attr('src', CAPTCHA_IMG_URL + $.now());
});
// 刷新短信图形验证码
$smsCaptchaImgWrapper.on('click', '.change-captcha, .captcha-img', function() {
$smsCaptchaImgPic.attr('src', CAPTCHA_IMG_URL + $.now());
});
// 切换登录模式:密码登录和短信登录
$PhoneLoginSwitcher.on('click', 'div', function() {
var $this = $(this),
... ... @@ -1100,7 +1187,7 @@ $deviceSwitcher.on('click', function() {
}
});
// 鼠标移动到上面
// 鼠标移动到二维码上面
$qrCodeHoverPanel.hover(function() {
$qrCodeContainer.stop(false, true).animate({left: '-=65'}, {
complete: function() {
... ...