From e5de1eeec4e8519dc5462d129472830b0cd8667e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=B1=E4=B9=90=E6=B6=9B?= <1215891603@qq.com>
Date: Sun, 2 Jun 2024 20:34:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 login.html  | 51 ++++++++++++++++++++++++++++++++++++
 reset.html  | 58 +++++++++++++++++++++++++++++++++++++++++
 signup.html | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 183 insertions(+)
 create mode 100644 login.html
 create mode 100644 reset.html
 create mode 100644 signup.html

diff --git a/login.html b/login.html
new file mode 100644
index 0000000..b001cb0
--- /dev/null
+++ b/login.html
@@ -0,0 +1,51 @@
+{% block body %}
+{% if session['logged_in'] %}
+
+你已登录 <a href="/{{ session['username'] }}/userpage">{{ session['username'] }}</a>。 登出点击<a href="/logout">这里</a>。
+
+{% else %}
+<meta charset="utf-8" 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.js"></script>
+<script>
+    function login(){
+        let username = $("#username").val();
+        let password = $("#password").val();
+        let regex = /^[a-zA-Z0-9_]*$/;
+
+        if (username === "" || password === ""){
+            alert('输入不能为空!');
+            return false;
+        }
+        if (!regex.test(username) || !regex.test(password)) {
+            alert('用户名和密码只能包含英文字母和数字！');
+            return false;
+        }
+        $.post(
+            "/login", {'username': username, 'password': password},
+            function (response) {
+                if (response.status === '0') {
+                    alert('无法通过验证。');
+                    window.location.href = "/login";
+                } else if (response.status === '1') {
+                    window.location.href = "/"+username+"/userpage";
+                }
+            }
+        );
+        return false;
+    }
+</script>
+<div class="container">
+
+  <section class="signin-heading">
+    <h1>Sign in</h1>
+  </section>
+
+  <input type="text" placeholder="用户名" class="username" id="username">
+  <input type="password" placeholder="密码" class="password"  id="password">
+  <button type="button" class="btn" onclick="login()">登录</button>
+  <a class="signup" href="/signup">注册</a>
+</div>
+
+{% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/reset.html b/reset.html
new file mode 100644
index 0000000..741a7f9
--- /dev/null
+++ b/reset.html
@@ -0,0 +1,58 @@
+{% block body %}
+    <meta charset="utf-8" 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.js"></script>
+    <script>
+        function reset() {
+            let old_password = $("#old-password").val();
+            let new_password = $("#new-password").val();
+            let re_new_password = $("#re-new-password").val();
+            let regex = /^[a-zA-Z0-9_]*$/;
+
+            if (old_password === "" || new_password === "" || re_new_password === ""){
+                alert('输入不能为空!');
+                return false;
+            }
+            if (new_password !== re_new_password) {
+                alert('新密码不匹配，请重新输入');
+                return false;
+            }
+            if (new_password.length < 4) {
+                alert('密码过于简单。(密码长度至少4位)');
+                return false;
+            }
+            if (!regex.test(new_password)) {
+                alert('新密码只能包含英文字母和数字！');
+                return false;
+            }
+
+            $.post("/reset", {'old-password': old_password, 'new-password': new_password},
+                function (response) {
+                    if (response.status === '1') {
+                        alert('密码修改成功，请重新登录。');
+                        window.location.href = "/login";
+                    } else if (response.status === '2') {
+                        alert('密码修改失败');
+                        window.location.href = "/reset";
+                    }
+                }
+            );
+            return false;
+        }
+    </script>
+
+    <div class="container">
+
+        <section class="reset-heading">
+            <h1>Reset Password</h1>
+        </section>
+
+        <input type="password" placeholder="原密码" class="old-password" name="old-password" id="old-password"/>
+        <input type="password" placeholder="新密码" class="new-password" name="new-password" id="new-password"/>
+        <input type="password" placeholder="确认新密码" class="re-new-password" name="re-new-password" id="re-new-password"/>
+        <button id="submit" class="btn" onclick="reset()">提交</button>
+        <button class="btn" onclick="window.location.href='/{{ username }}/userpage'">放弃修改</button>
+
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/signup.html b/signup.html
new file mode 100644
index 0000000..660e924
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,74 @@
+{% 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.js"></script>
+    <script>
+        function signup() {
+            let username = $("#username").val();
+            let password = $("#password").val();
+            let password2 = $("#password2").val();
+            let regex = /^[a-zA-Z0-9_]*$/;
+
+            if (username === "" || password === "" || password2 === ""){
+                alert('输入不能为空!');
+                return false;
+            }
+            if (password !== password2) {
+                alert('确认密码与输入密码不一致！');
+                return false;
+            }
+            if (password.length < 4) {
+                alert('密码过于简单。(密码长度至少4位)');
+                return false;
+            }
+            if (!regex.test(username) || !regex.test(password)) {
+                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') {
+                        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>
+<p>{{ get_flashed_messages()[0] | safe }}</p>
+
+
+<div class="container">
+
+  <section class="signin-heading">
+    <h1>Sign up</h1>
+  </section>
+
+  <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>
+  <button type="button" class="btn" onclick="signup()">注册</button>
+
+</div>
+
+{% endif %}
+{% endblock %}
\ No newline at end of file