263 lines
7.6 KiB
HTML
263 lines
7.6 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="email"
|
||
type="email"
|
||
label="邮箱"
|
||
autofocus="true"
|
||
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>
|
||
|
||
<mdui-text-field
|
||
id="password2"
|
||
label="确认新密码"
|
||
toggle-password
|
||
type="password"
|
||
></mdui-text-field>
|
||
|
||
<mdui-text-field
|
||
id="authcode"
|
||
label="校验码"
|
||
></mdui-text-field>
|
||
|
||
<div id="turnstile_widgit"></div>
|
||
<mdui-button
|
||
id="btn1"
|
||
variant="tonal"
|
||
style="border-radius: 5%"
|
||
onclick="passwordReset()"
|
||
>修改密码</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 resetBtn = document.getElementById("btn1");
|
||
|
||
const authcodeElement = document.getElementById("authcode");
|
||
|
||
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 = "";
|
||
}
|
||
});
|
||
|
||
const password2Element = document.getElementById("password2");
|
||
password2Element.addEventListener("change", () => {
|
||
const password = passwordElement.value;
|
||
const password2 = password2Element.value;
|
||
const passwordHelper = document.getElementById("password-helper");
|
||
if (password2 === "") {
|
||
passwordHelper.innerText = "";
|
||
return;
|
||
}
|
||
if (password !== password2) {
|
||
passwordHelper.innerText = "两次输入的密码不一致";
|
||
} else {
|
||
passwordHelper.innerText = "";
|
||
}
|
||
});
|
||
|
||
// 密码重置逻辑
|
||
async function passwordReset() {
|
||
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 (passwordElement.value !== password2Element.value) {
|
||
mdui.snackbar({
|
||
message: "两次输入的密码不一致",
|
||
placement: "top",
|
||
});
|
||
return;
|
||
}
|
||
if (authcodeElement.value === "") {
|
||
mdui.snackbar({
|
||
message: "校验码不能为空",
|
||
placement: "top",
|
||
});
|
||
return;
|
||
}
|
||
// if (token === "") tell user to complete the captcha
|
||
if (token === "") {
|
||
mdui.snackbar({
|
||
message: "请完成人机验证",
|
||
placement: "top",
|
||
});
|
||
return;
|
||
}
|
||
resetBtn.setAttribute("loading", "");
|
||
resetBtn.setAttribute("disabled", "");
|
||
|
||
try {
|
||
const response = await fetch("/passwordreset", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
email: emailElement.value,
|
||
password: passwordElement.value,
|
||
authcode: authcodeElement.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: () => {
|
||
resetBtn.removeAttribute("loading");
|
||
resetBtn.removeAttribute("disabled");
|
||
},
|
||
});
|
||
} catch (error) {
|
||
mdui.alert({
|
||
headline: "重置结果",
|
||
description: "出错了，请重试或联系管理员",
|
||
confirmText: "了解",
|
||
onConfirm: () => {
|
||
resetBtn.removeAttribute("loading");
|
||
resetBtn.removeAttribute("disabled");
|
||
},
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|