263 lines
7.7 KiB
HTML
263 lines
7.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta
|
||
|
|
name="viewport"
|
||
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
|
||
|
|
/>
|
||
|
|
<meta name="renderer" content="webkit" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<link
|
||
|
|
rel="icon"
|
||
|
|
type="image/png"
|
||
|
|
href="{{ url_for('assets', path='logo-removebg.png') }}"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="{{ url_for('assets', path='/mdui.css') }}" />
|
||
|
|
<script src="{{ url_for('assets', path='/mdui.global.js') }}"></script>
|
||
|
|
<script src="{{ url_for('assets', path='/jquery-3.7.1.min.js') }}"></script>
|
||
|
|
<script
|
||
|
|
src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb"
|
||
|
|
async
|
||
|
|
defer
|
||
|
|
></script>
|
||
|
|
<style>
|
||
|
|
@media screen and (max-width: 480px) {
|
||
|
|
.center {
|
||
|
|
margin: auto;
|
||
|
|
width: auto;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (min-width: 480px) {
|
||
|
|
.center {
|
||
|
|
margin: auto;
|
||
|
|
width: 480px;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<title>网服注册服务</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main class="mdui-prose center">
|
||
|
|
<mdui-avatar src="../assets/logo-removebg.png"></mdui-avatar>
|
||
|
|
<h1 style="margin-bottom: 10px; margin-top: 5px">网服注册服务</h1>
|
||
|
|
<mdui-text-field
|
||
|
|
id="username"
|
||
|
|
label="用户名"
|
||
|
|
autofocus="true"
|
||
|
|
style="margin-bottom: 10px"
|
||
|
|
>
|
||
|
|
<span slot="helper" style="color: red" id="username-helper"></span>
|
||
|
|
</mdui-text-field>
|
||
|
|
<mdui-text-field
|
||
|
|
id="email"
|
||
|
|
type="email"
|
||
|
|
label="邮箱"
|
||
|
|
placeholder="xxxx@csuwf.com"
|
||
|
|
>
|
||
|
|
<span slot="helper" style="color: red" id="email-helper"></span>
|
||
|
|
</mdui-text-field>
|
||
|
|
<mdui-text-field
|
||
|
|
id="password"
|
||
|
|
label="密码"
|
||
|
|
toggle-password
|
||
|
|
type="password"
|
||
|
|
>
|
||
|
|
<span slot="helper" style="color: red" id="password-helper"></span>
|
||
|
|
</mdui-text-field>
|
||
|
|
|
||
|
|
<span
|
||
|
|
><a href="./update-password" style="float: right; margin-top: 10px"
|
||
|
|
>重置密码</a
|
||
|
|
></span
|
||
|
|
>
|
||
|
|
|
||
|
|
<div id="turnstile_widgit"></div>
|
||
|
|
<mdui-button
|
||
|
|
id="btn1"
|
||
|
|
variant="tonal"
|
||
|
|
style="border-radius: 5%"
|
||
|
|
onclick="register()"
|
||
|
|
>注册</mdui-button
|
||
|
|
>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let token = "";
|
||
|
|
function _turnstileCb() {
|
||
|
|
console.log("_turnstileCb called");
|
||
|
|
turnstile.render("#turnstile_widgit", {
|
||
|
|
sitekey: "1x00000000000000000000AA",
|
||
|
|
theme: "light",
|
||
|
|
callback: function (t) {
|
||
|
|
token = t;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajaxSetup({
|
||
|
|
global: false,
|
||
|
|
method: "POST",
|
||
|
|
});
|
||
|
|
|
||
|
|
const registerBtn = document.getElementById("btn1");
|
||
|
|
|
||
|
|
const usernameElement = document.getElementById("username");
|
||
|
|
usernameElement.addEventListener("change", () => {
|
||
|
|
const usernameHelper = document.getElementById("username-helper");
|
||
|
|
const username = usernameElement.value;
|
||
|
|
if (username !== "") {
|
||
|
|
const promise = $.ajax({
|
||
|
|
url: "/checkusernameexist",
|
||
|
|
method: "POST",
|
||
|
|
contentType: "application/json",
|
||
|
|
data: JSON.stringify({
|
||
|
|
username: username,
|
||
|
|
}),
|
||
|
|
success: function (response) {
|
||
|
|
if (response.exist) {
|
||
|
|
usernameHelper.innerText = "用户名已被注册";
|
||
|
|
} else {
|
||
|
|
usernameHelper.innerText = "该用户名可用";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
usernameHelper.innerText = "";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const emailElement = document.getElementById("email");
|
||
|
|
const emailRegex = /@csuwf\.com$/;
|
||
|
|
|
||
|
|
emailElement.addEventListener("change", () => {
|
||
|
|
const emailHelper = document.getElementById("email-helper");
|
||
|
|
const email = emailElement.value;
|
||
|
|
if (email === "") {
|
||
|
|
emailHelper.innerText = "";
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (email !== "" && !emailRegex.test(email)) {
|
||
|
|
emailHelper.innerText = "邮箱必须以@csuwf.com结尾";
|
||
|
|
} else {
|
||
|
|
// emailHelper.innerText = "";
|
||
|
|
const promise = $.ajax({
|
||
|
|
url: "/checkemailexist",
|
||
|
|
method: "POST",
|
||
|
|
contentType: "application/json",
|
||
|
|
data: JSON.stringify({
|
||
|
|
email: email,
|
||
|
|
}),
|
||
|
|
success: function (response) {
|
||
|
|
if (response.exist) {
|
||
|
|
emailHelper.innerText = "邮箱已被注册";
|
||
|
|
} else {
|
||
|
|
emailHelper.innerText = "该邮箱可用";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const passwordElement = document.getElementById("password");
|
||
|
|
const passwordRegex = /[&\\;]/;
|
||
|
|
passwordElement.addEventListener("change", () => {
|
||
|
|
const password = passwordElement.value;
|
||
|
|
const passwordHelper = document.getElementById("password-helper");
|
||
|
|
if (password === "") {
|
||
|
|
passwordHelper.innerText = "";
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (password !== "" && passwordRegex.test(password)) {
|
||
|
|
passwordHelper.innerText = "密码不能包含(&)或分号(;)或反斜杠(\\)";
|
||
|
|
} else {
|
||
|
|
passwordHelper.innerText = "";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 注册逻辑
|
||
|
|
async function register() {
|
||
|
|
if (usernameElement.value === "") {
|
||
|
|
mdui.snackbar({
|
||
|
|
message: "用户名不能为空",
|
||
|
|
placement: "top",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (emailElement.value === "") {
|
||
|
|
mdui.snackbar({
|
||
|
|
message: "邮箱不能为空",
|
||
|
|
placement: "top",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (passwordElement.value === "") {
|
||
|
|
mdui.snackbar({
|
||
|
|
message: "密码不能为空",
|
||
|
|
placement: "top",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (emailElement.value !== "" && !emailRegex.test(emailElement.value)) {
|
||
|
|
mdui.snackbar({
|
||
|
|
message: "邮箱必须以@csuwf.com结尾",
|
||
|
|
placement: "top",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// if (token === "") tell user to complete the captcha
|
||
|
|
if (token === "") {
|
||
|
|
mdui.snackbar({
|
||
|
|
message: "请完成人机验证",
|
||
|
|
placement: "top",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
registerBtn.setAttribute("loading", "");
|
||
|
|
registerBtn.setAttribute("disabled", "");
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch("/register", {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
username: usernameElement.value,
|
||
|
|
email: emailElement.value,
|
||
|
|
password: passwordElement.value,
|
||
|
|
token: token,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error("HTTP error " + response.status);
|
||
|
|
}
|
||
|
|
const result = await response.text();
|
||
|
|
mdui.alert({
|
||
|
|
headline: "注册结果",
|
||
|
|
description: result,
|
||
|
|
confirmText: "了解",
|
||
|
|
onConfirm: () => {
|
||
|
|
registerBtn.removeAttribute("loading");
|
||
|
|
registerBtn.removeAttribute("disabled");
|
||
|
|
},
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
mdui.alert({
|
||
|
|
headline: "注册结果",
|
||
|
|
description: "出错了，请尝试刷新或联系管理员",
|
||
|
|
confirmText: "了解",
|
||
|
|
onConfirm: () => {
|
||
|
|
registerBtn.removeAttribute("loading");
|
||
|
|
registerBtn.removeAttribute("disabled");
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|