forked from mrlan/EnglishPal
Fix bug 572
parent
75c96a60df
commit
18472acd3d
|
|
@ -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;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||||
|
|
@ -1,72 +1,107 @@
|
||||||
{% block body %}
|
{% block body %}
|
||||||
{% if session['logged_in'] %}
|
{% 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 %}
|
{% 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>
|
<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: "验证成功"
|
||||||
alert('输入不能为空!');
|
}, function() {
|
||||||
return false;
|
|
||||||
}
|
});
|
||||||
if (password.includes(' ') || password2.includes(' ')) {
|
slider.init(); // 初始化滑块解锁功能
|
||||||
alert('输入不能包含空格!');
|
});
|
||||||
return false;
|
|
||||||
}
|
function signup(){
|
||||||
if (password !== password2) {
|
// 发起 AJAX 请求来处理注册
|
||||||
alert('确认密码与输入密码不一致！');
|
username = $("#username").val().trim();
|
||||||
return false;
|
password = $("#password").val().trim();
|
||||||
}
|
password2 = $("#password2").val().trim();
|
||||||
if (password.length < 4) {
|
|
||||||
alert('密码过于简单。(密码长度至少4位)');
|
// 基本表单验证
|
||||||
return false;
|
if (username === "" || password === "" || password2 === "") {
|
||||||
}
|
alert('输入不能为空!');
|
||||||
$.post("/signup", {'username': username, 'password': password},
|
|
||||||
function (response) {
|
|
||||||
if (response.status === '0') {
|
|
||||||
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点击“确认”开始使用，或点击“取消”返回首页');
|
|
||||||
if (f) {
|
|
||||||
window.location.href = '/'+username+'/userpage';
|
|
||||||
} else {
|
|
||||||
window.location.href = '/';
|
|
||||||
}
|
|
||||||
} else if (response.status === '3') {
|
|
||||||
alert(response.warn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
if (password.includes(' ') || password2.includes(' ')) {
|
||||||
|
alert('输入不能包含空格!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (password !== password2) {
|
||||||
|
alert('确认密码与输入密码不一致！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (password.length < 4) {
|
||||||
|
alert('密码过于简单。(密码长度至少4位)');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
is_ok = slider.getIsOk();
|
||||||
|
if(!is_ok){
|
||||||
|
alert('没有滑动验证');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
$.post("/signup", {
|
||||||
|
'username': username,
|
||||||
|
'password': password
|
||||||
|
}, function(response) {
|
||||||
|
if (response.status === '0') {
|
||||||
|
alert('用户名' + username + '已经被注册。');
|
||||||
|
window.location.href = "/signup";
|
||||||
|
} else if (response.status === '1') {
|
||||||
|
alert('用户名密码验证失败。');
|
||||||
|
window.location.href = "/signup";
|
||||||
|
} else if (response.status === '2') {
|
||||||
|
var f = confirm("恭喜，你已成功注册，你的用户名是" + username + '.\n点击“确认”开始使用，或点击“取消”返回首页');
|
||||||
|
if (f) {
|
||||||
|
window.location.href = '/' + username + '/userpage';
|
||||||
|
} else {
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
} else if (response.status === '3') {
|
||||||
|
alert(response.warn);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<p>{{ get_flashed_messages()[0] | safe }}</p>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section class="signin-heading">
|
||||||
|
<h1>Sign up</h1>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
</script>
|
||||||
<p>{{ get_flashed_messages()[0] | safe }}</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<section class="signin-heading">
|
|
||||||
<h1>Sign up</h1>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<p><input type="username" 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>
|
|
||||||
<button type="button" class="btn" onclick="signup()">注册</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue