Merge remote-tracking branch 'origin/feature/captcha' into release/5.3

@@ -5,11 +5,10 @@
  * @date: 2016/05/09
  */
 'use strict';
-
+const _ = require('lodash');
 const passport = require('passport');
 
 // const md5 = require('md5');
-const _ = require('lodash');
 const uuid = require('uuid');
 const cookie = global.yoho.cookie;
 const helpers = global.yoho.helpers;
@@ -102,6 +101,7 @@ const local = {
             slideUnlock: _.get(req.session, 'login.errorCount') <= 0,
             width750: true,
             loginIndex: true, // 模板中使用JS的标识
+            captchaShow: _.get(req.session, 'login.errorCount') <= 0,
 
             // 返回的URL链接
             backUrl: 'javascript:history.go(-1)', // eslint-disable-line
@@ -144,6 +144,7 @@ const local = {
             // 返回的URL链接
             backUrl: 'javascript:history.go(-1)', // eslint-disable-line
             loginInternational: true, // 模板中使用JS的标识
+            captchaShow: _.get(req.session, 'login.errorCount') <= 0,
             isPassportPage: true, // 模板中模块标识
             headerText: '登录',
             areaCode: '+86', // 默认区号
@@ -156,11 +157,28 @@ const local = {
     login: (req, res, next) => {
         let count = _.get(req.session, 'login.errorCount');
 
-        if (count == null) { //eslint-disable-line
+        if (count == null) { // eslint-disable-line
             _.set(req.session, 'login.errorCount', 3);
+        } else if (count <= 0) {
+            let captchaInput = req.body.captcha;
+            let captchaCode = _.get(req.session, 'captcha');
+
+            delete req.session.captcha; // 用过就丢弃
+
+            if (!captchaInput || !captchaCode || captchaInput !== captchaCode) {
+                res.json({
+                    code: 400,
+                    message: '请将图片旋转到正确方向',
+                    captchaShow: true
+                });
+
+                return;
+            }
         }
 
         passport.authenticate('local', (err, user) => {
+            let loginSession = req.session.login;
+
             if (err) {
                 let obj = {
                     code: 400,
@@ -168,10 +186,10 @@ const local = {
                     data: ''
                 };
 
-                --req.session.login.errorCount;
+                --loginSession.errorCount;
 
-                if (req.session.login.errorCount <= 0) {
-                    obj.slideUnlock = true;
+                if (loginSession.errorCount <= 0) {
+                    obj.captchaShow = true;
                 }
 
                 res.json(obj);

@@ -8,7 +8,7 @@
         <div class="input-container row has-eye">
             <input id="pwd" class="pwd input" type="password" placeholder="密码">
         </div>
-        <div id="js-slideunlock" data-init="{{slideUnlock}}"></div>
+        <div id="js-img-check" {{#captchaShow }}data-init{{/captchaShow}}></div>
         <span id="btn-login" class="btn btn-login disable">登录</span>
         <p class="op-container">
             <a class="sms-login" href={{smsLoginUrl}}>手机号码快捷登录</a>
@@ -44,4 +44,4 @@
             </li>
         </ul>
     </div>
-</div>
\ No newline at end of file
+</div>

@@ -4,7 +4,7 @@
  * @date: 2015/9/30
  */
 var $ = require('yoho-jquery');
-var SlideUnlock = require('plugin/slideunlock');
+var ImgCheck = require('plugin/img-check');
 
 var $account = $('#account'),
     $pwd = $('#pwd'),
@@ -13,7 +13,7 @@ var $account = $('#account'),
     $mask = $('#retrive-pwd-mask'),
     $ways = $('#retrive-pwd-ways'),
 
-    slideUnlock,
+    $captcha = $('#js-img-check'),
 
     accPass = false,
     pwdPass = false;
@@ -24,6 +24,18 @@ var tip = require('../../plugin/tip');
 var trim = $.trim;
 var showErrTip = tip.show;
 
+
+var imgCheck = new ImgCheck($captcha, {
+    useREM: {
+        rootFontSize: 40,
+        picWidth: 150
+    }
+});
+
+if ($captcha.data('init') != null) { //eslint-disable-line
+    imgCheck.init();
+}
+
 // 登录按钮状态切换
 function switchLoginBtnStatus() {
     var bool = true;
@@ -80,23 +92,38 @@ $pwd.bind('input', function() {
 // Login
 $loginBtn.on('touchstart', function() {
     var acc = trim($account.val()),
-        pwd = trim($pwd.val());
+        pwd = trim($pwd.val()),
+        captcha = null;
 
     if ($loginBtn.hasClass('disable')) {
         return;
     }
 
+    if (imgCheck.atWorking) {
+        captcha = imgCheck.getResults();
+
+        if (captcha === '0000') {
+            return tip.show(' 请将图片旋转到正确方向');
+        }
+    }
+
     $loginBtn.text('正在登录...').addClass('disable');
 
     // 验证账号（数字或者邮箱）和密码合理性
     if ((/^[0-9]+$/.test(acc) || api.emailRegx.test(acc)) && api.pwdValidate(pwd)) {
+        let data = {
+            account: acc,
+            password: pwd
+        };
+
+        if (imgCheck.atWorking) {
+            $.extend(data, {captcha});
+        }
+
         $.ajax({
             type: 'POST',
             url: '/passport/login/auth',
-            data: {
-                account: acc,
-                password: pwd
-            },
+            data,
             success: function(data) {
                 var res;
 
@@ -107,21 +134,23 @@ $loginBtn.on('touchstart', function() {
                     location.href = res.href;
                     $loginBtn.text('登录成功').off();
                 } else {
-                    if (!slideUnlock && data.slideUnlock) {
-                        slideUnlock = new SlideUnlock('#js-slideunlock', {}, switchLoginBtnStatus);
-                        slideUnlock.init();
-                    } else {
-                        slideUnlock && slideUnlock.reset();
+                    if (data.captchaShow) {
+                        imgCheck.atWorking ? imgCheck.refresh() : imgCheck.init();
                     }
 
                     showErrTip(data.message);
                     resetForm();
                 }
+
+                return data;
             },
             error: function() {
                 showErrTip('网络断开连接啦~');
-                slideUnlock && slideUnlock.reset();
-                $loginBtn.text('登录');
+
+                imgCheck.atWorking && imgCheck.refresh();
+            },
+            complete: function() {
+                $loginBtn.text('登录').removeClass('disable');
             }
         });
     } else {

@@ -67,11 +67,17 @@ const ImgCheck = function(container, options) {
     this.$imgPics = null;
     this.picWidth = null;
 
+    this.atWorking = false;
+
     return this;
 };
 
 ImgCheck.prototype = {
     init: function() {
+        if (this.atWorking) {
+            return;
+        }
+
         var self = this;
 
         if (this.useREM) {
@@ -81,6 +87,8 @@ ImgCheck.prototype = {
         this.refresh().done(function() {
             self.bindEvents();
         });
+
+        this.atWorking = true;
     },
 
     /**