EnglishPal/app/templates/signup.html

{% 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">
<script src="../static/js/jquery-3.1.1.js"></script>
    <script>
        function signup() {
            let username = $("#username").val();
            let password = $("#password").val();
            let password2 = $("#password2").val();
            if (username === "" || password === "" || password2 === ""){
                alert('输入不能为空!');
                return false;
            }
            if (password !== password2) {
                alert('确认密码与输入密码不一致！');
                return false;
            }
            if (password.length < 4) {
                alert('密码过于简单。(密码长度至少4位)');
                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') {
                        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;
        }
    </script>
<!--增加两个js函数，Change()用于检测用户刷新验证码的请求并发送给后端以切换验证码图片，Check()用以检查用户输入的验证码是否与图片匹配-->
<script>
        function Change() {
            $.ajax({
                url: '{{ url_for('get_captcha') }}',
                async: true,
                type: "GET",
                success: function (data) {
                    document.getElementById("captcha").src = data;
                }
            })
        }
    </script>
    <script>
        function Check() {
            var img = document.getElementById("captcha").src;
            var img_path = img.replace("\\", "/").split("/");
            var img_name = img_path[img_path.length - 1];
            img_name = img_name.split(".")[0];
            var your_in = document.getElementById("your_in").value;
            if(img_name.toLowerCase() == your_in.toLowerCase()){
                alert("验证成功！");
                return true;
            }
            else {
                alert("验证错误！");
                return false;
            }
        }
        window.onload = Change();
    </script>
<p>{{ get_flashed_messages()[0] | safe }}</p>


<div class="container">

  <section class="signin-heading">
    <h1>Sign Up</h1>
  </section>

  <form action="/signup" method="POST" onsubmit="return Check()">
    <p><input type="username" name="username" placeholder="输入用户名" required="required" class="username"></p>
    <p><input type="password" name="password" placeholder="输入密码" class="password"></p>
    <p><input type="password" name="password2" placeholder="确认密码" class="password"></p>
    <div style="font-size: medium">
        <p align="center"><img src="" id="captcha" class="image"></p>
        <p align="center"><a href="javascript:void(0)" onclick="Change()">看不清楚，换一张</a></p>
        <input id="your_in" placeholder="输入验证码" class="password">
    </div>
    <button type="submit" class="btn" >注册</button>
  </form>

</div>
  
{% endif %}
{% endblock %}