Fix bug 572

app/static/css/slide-unlock.css

@@ -0,0 +1,52 @@
+
+#slider {
+  margin: 20px auto;
+  width: 200px;
+  height: 40px;
+  position: relative;
+  border-radius: 5px;
+  background-color: #dae2d0;
+  overflow: hidden;
+  text-align: center;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+#slider_bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: #7AC23C;
+  z-index: 1;
+}
+
+#label {
+  width: 46px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 38px;
+  line-height: 38px;
+  border: 1px solid #cccccc;
+  background: #fff;
+  z-index: 3;
+  cursor: move;
+  color: #ff9e77;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+#labelTip {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+  font-family: 'Microsoft Yahei', serif;
+  color: #787878;
+  line-height: 38px;
+  text-align: center;
+  z-index: 2;
+}

app/static/js/jquery.slideunlock.js

@@ -0,0 +1,200 @@
+/**
+ * jquery plugin -- jquery.slideunlock.js
+ * Description: a slideunlock plugin based on jQuery
+ * Version: 1.1
+ * Author: Dong Yuhao
+ * created: March 27, 2016
+ */
+
+;(function ($,window,document,undefined) {
+    function SliderUnlock(elm, options, success){
+        var me = this;
+        var $elm = me.checkElm(elm) ? $(elm) : $;
+        success = me.checkFn(success) ? success : function(){};
+
+        var opts = {
+            successLabelTip:  "Successfully Verified",
+            duration:  200,
+            swipestart:  false,
+            min:  0,
+            max:  $elm.width(),
+            index:  0,
+            isOk:  false,
+            lableIndex:  0
+        };
+
+        opts = $.extend(opts, options||{});
+
+        //$elm
+        me.elm = $elm;
+        //opts
+        me.opts = opts;
+        //是否开始滑动
+        me.swipestart = opts.swipestart;
+        //最小值
+        me.min = opts.min;
+        //最大值
+        me.max = opts.max;
+        //当前滑动条所处的位置
+        me.index = opts.index;
+        //是否滑动成功
+        me.isOk = opts.isOk;
+        //滑块宽度
+        me.labelWidth = me.elm.find('#label').width();
+        //滑块背景
+        me.sliderBg = me.elm.find('#slider_bg');
+        //鼠标在滑动按钮的位置
+        me.lableIndex = opts.lableIndex;
+        //success
+        me.success = success;
+    }
+
+    SliderUnlock.prototype.init = function () {
+        var me = this;
+
+        me.updateView();
+        me.elm.find("#label").on("mousedown", function (event) {
+            var e = event || window.event;
+            me.lableIndex = e.clientX - this.offsetLeft;
+            me.handerIn();
+        }).on("mousemove", function (event) {
+            me.handerMove(event);
+        }).on("mouseup", function (event) {
+            me.handerOut();
+        }).on("mouseout", function (event) {
+            me.handerOut();
+        }).on("touchstart", function (event) {
+            var e = event || window.event;
+            me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
+            me.handerIn();
+        }).on("touchmove", function (event) {
+            me.handerMove(event, "mobile");
+        }).on("touchend", function (event) {
+            me.handerOut();
+        });
+    };
+    SliderUnlock.prototype.getIsOk = function() {
+        return this.isOk;
+    };
+
+    /**
+     * 鼠标/手指接触滑动按钮
+     */
+    SliderUnlock.prototype.handerIn = function () {
+        var me = this;
+        me.swipestart = true;
+        me.min = 0;
+        me.max = me.elm.width();
+    };
+
+    /**
+     * 鼠标/手指移出
+     */
+    SliderUnlock.prototype.handerOut = function () {
+        var me = this;
+        //停止
+        me.swipestart = false;
+        //me.move();
+        if (me.index < me.max) {
+            me.reset();
+        }
+    };
+
+    /**
+     * 鼠标/手指移动
+     * @param event
+     * @param type
+     */
+    SliderUnlock.prototype.handerMove = function (event, type) {
+        var me = this;
+        if (me.swipestart) {
+            event.preventDefault();
+            event = event || window.event;
+            if (type == "mobile") {
+                me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
+            } else {
+                me.index = event.clientX - me.lableIndex;
+            }
+            me.move();
+        }
+    };
+
+    /**
+     * 鼠标/手指移动过程
+     */
+    SliderUnlock.prototype.move = function () {
+        var me = this;
+        if ((me.index + me.labelWidth) >= me.max) {
+            me.index = me.max - me.labelWidth -2;
+            //停止
+            me.swipestart = false;
+            //解锁
+            me.isOk = true;
+        }
+        if (me.index < 0) {
+            me.index = me.min;
+            //未解锁
+            me.isOk = false;
+        }
+        if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {
+            //解锁默认操作
+            $('#label').unbind().next('#labelTip').
+            text(me.opts.successLabelTip).css({'color': '#fff'});
+
+            me.success();
+        }
+        me.updateView();
+    };
+
+
+    /**
+     * 更新视图
+     */
+    SliderUnlock.prototype.updateView = function () {
+        var me = this;
+
+        me.sliderBg.css('width', me.index);
+        me.elm.find("#label").css("left", me.index + "px")
+    };
+
+    /**
+     * 重置slide的起点
+     */
+    SliderUnlock.prototype.reset = function () {
+        var me = this;
+
+        me.index = 0;
+        me.sliderBg .animate({'width':0},me.opts.duration);
+        me.elm.find("#label").animate({left: me.index}, me.opts.duration)
+            .next("#lableTip").animate({opacity: 1}, me.opts.duration);
+        me.updateView();
+    };
+
+    /**
+     * 检测元素是否存在
+     * @param elm
+     * @returns {boolean}
+     */
+    SliderUnlock.prototype.checkElm = function (elm) {
+        if($(elm).length > 0){
+            return true;
+        }else{
+            throw "this element does not exist.";
+        }
+    };
+
+    /**
+     * 检测传入参数是否是function
+     * @param fn
+     * @returns {boolean}
+     */
+    SliderUnlock.prototype.checkFn = function (fn) {
+        if(typeof fn === "function"){
+            return true;
+        }else{
+            throw "the param is not a function.";
+        }
+    };
+
+    window['SliderUnlock'] = SliderUnlock;
+})(jQuery, window, document);

app/templates/signup.html

@@ -1,18 +1,34 @@
 {% block body %}
 {% if session['logged_in'] %}
-
+    You're logged in already! <a href="/logout">Logout</a>.
-You're logged in already! <a href="/logout">Logout</a>.
-
 {% else %}
-<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
-<link rel="stylesheet" href="static/css/login_service.css">
+    <link rel="stylesheet" href="static/css/login_service.css">
-<script src="static/js/jquery.js"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
+    <link href="static/css/slide-unlock.css" rel="stylesheet">
+    <script src="static/js/jquery.js"></script>
+    <script src="static/js/jquery.slideunlock.js"></script>
     <script>
-        function signup() {
+    var slider
-            let username = $("#username").val();
+    let username,password,password2
-            let password = $("#password").val();
+    $(document).ready(function() {
-            let password2 = $("#password2").val();
+        slider = new SliderUnlock("#slider", {
-            if (username === "" || password === "" || password2 === ""){
+                successLabelTip: "验证成功"
+            }, function() {
+
+        });
+        slider.init(); // 初始化滑块解锁功能
+    });
+
+    function signup(){
+        // 发起 AJAX 请求来处理注册
+        username = $("#username").val().trim();
+        password = $("#password").val().trim();
+        password2 = $("#password2").val().trim();
+
+        // 基本表单验证
+        if (username === "" || password === "" || password2 === "") {
             alert('输入不能为空!');
             return false;
         }
@@ -28,45 +44,64 @@ You're logged in already! <a href="/logout">Logout</a>.
             alert('密码过于简单。(密码长度至少4位)');
             return false;
         }
-            $.post("/signup", {'username': username, 'password': password},
+        is_ok = slider.getIsOk();
-                function (response) {
+        if(!is_ok){
+            alert('没有滑动验证');
+            return false;
+        }
+        $.post("/signup", {
+            'username': username,
+            'password': password
+        }, function(response) {
             if (response.status === '0') {
-                        alert('用户名'+username+'已经被注册。');
+                alert('用户名' + username + '已经被注册。');
                 window.location.href = "/signup";
             } else if (response.status === '1') {
                 alert('用户名密码验证失败。');
                 window.location.href = "/signup";
             } else if (response.status === '2') {
-                        let f = confirm("恭喜，你已成功注册，你的用户名是"+username+'.\n点击“确认”开始使用，或点击“取消”返回首页');
+                var f = confirm("恭喜，你已成功注册，你的用户名是" + username + '.\n点击“确认”开始使用，或点击“取消”返回首页');
                 if (f) {
-                            window.location.href = '/'+username+'/userpage';
+                    window.location.href = '/' + username + '/userpage';
                 } else {
                     window.location.href = '/';
                 }
             } else if (response.status === '3') {
                 alert(response.warn);
             }
-                }
+        });
-            )
         return false;
     }
-    </script>
+</script>
-<p>{{ get_flashed_messages()[0] | safe }}</p>
+    <p>{{ get_flashed_messages()[0] | safe }}</p>
-
-
-<div class="container">
 
+    <div class="container">
         <section class="signin-heading">
             <h1>Sign up</h1>
         </section>
 
-  <p><input type="username" id="username" placeholder="输入用户名" class="username"></p>
+        <form>
+            <p><input type="text" id="username" placeholder="输入用户名" class="username"></p>
             <p><input type="password" id="password" placeholder="输入密码" class="password"></p>
-  <p><input type="password" id="password2" placeholder="确认密码" class="password" ></p>
+            <p><input type="password" id="password2" placeholder="确认密码" class="password"></p>
-  <button type="button" class="btn" onclick="signup()">注册</button>
 
-</div>
+            <div id="slider">
+                <div id="slider_bg"></div>
+                <span id="label">>></span> <span id="labelTip">-----滑动验证你是不是人类</span>
+            </div>
+
+            <button type="button" class="btn" onclick="signup()">注册</button>
+        </form>
+    </div>
+
+    <script>
+        // Bind click event to the signup button
+        $(".btn").click(function() {
+            // Trigger slider unlock
+            var slider = new SliderUnlock("#slider");
+            slider.isOk();
+        });
+    </script>
 
 {% endif %}
 {% endblock %}
-