add sms

htoooth
Commit 1e50c56af50f02adc6210bc67e36842b9f28fb68 1 parent ffd33036
Showing 4 changed files with 141 additions and 48 deletions
apps/passport/router.js
apps/passport/views/action/login/index.hbs
config/common.js
public/js/passport/login/index.js
--- a/apps/passport/router.js
View file @1e50c56
+++ b/apps/passport/router.js
View file @1e50c56
@@ -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);           // 刷新二维码
--- a/apps/passport/views/action/login/index.hbs
View file @1e50c56
+++ b/apps/passport/views/action/login/index.hbs
View file @1e50c56
@@ -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="图形验证码"
--- a/config/common.js
View file @1e50c56
+++ b/config/common.js
View file @1e50c56
@@ -65,7 +65,7 @@ module.exports = {
             port: '4444' // influxdb port
         },
         console: {
-            level: 'error',
+            level: 'info',
             colorize: 'all',
             prettyPrint: true
         }
--- a/public/js/passport/login/index.js
View file @1e50c56
+++ b/public/js/passport/login/index.js
View file @1e50c56
@@ -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() {