EnglishPal/app/templates/signup.html

113 lines
4.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{% block body %}
{% if session['logged_in'] %}
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" />
<link rel="stylesheet" href="static/css/login_service.css">
<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/password.js"></script>
<script src="static/js/jquery.js"></script>
<script src="static/js/jquery.slideunlock.js"></script>
<script>
var slider
let username,password,password2
$(document).ready(function() {
slider = new SliderUnlock("#slider", {
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;
}
if (password.includes(' ') || password2.includes(' ')) {
alert('输入不能包含空格!');
return false;
}
if (password !== password2) {
alert('确认密码与输入密码不一致!');
return false;
}
if (password.length < 4) {
alert('密码过于简单。(密码长度至少4位)');
return false;
}
if (!containsDigitsLettersSpecialCharacters(password)) {
alert('密码过于简单。(密码要包括数字,字母,特殊符号)');
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>
{% endif %}
{% endblock %}