@copoko/space
Version:
CoPoKo Space
129 lines (125 loc) • 4.9 kB
HTML
<!--
* ==========================================================================
* "CoPoKo Space" License
* GNU General Public License version 3.0 (GPLv3)
* ==========================================================================
* This file is part of "CoPoKo Space"
*
* "CoPoKo Space" is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* "CoPoKo Space" is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with "CoPoKo Space". If not, see <http://www.gnu.org/licenses/>.
* ==========================================================================
-->
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta robots="noindex, nofollow" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Auth | CoPoKo Space</title>
<link rel="icon" type="image/png" sizes="16x16" href="::CDN_SPACE::/favicon/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="::CDN_SPACE::/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="::CDN_SPACE::/favicon/favicon-96x96.png" />
<link rel="stylesheet" href="::CDN_SPACE::/css/auth.css" />
<style>
.grecaptcha-badge {
display: none;
}
body {
background: black;
}
</style>
</head>
<body>
<main class="auth-main wrapper">
<div id="auth-block" class="auth-block">
<h1>Welcome</h1>
<div id="form" class="form-horizontal" method="POST" action="/space/auth">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="inputName" placeholder="Name" required="required"
autocomplete="off" />
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="inputPassword" placeholder="Password"
required="required" autocomplete="off" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-8">
<button type="submit" id="signin" class="btn btn-default btn-auth">
Sign in
</button>
</div>
</div>
</div>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</main>
<script src="https://recaptcha.net/recaptcha/api.js?render=::reCAPTCHA_CLIENT::"></script>
<script>
document.getElementById("signin").addEventListener("click", async () => {
const name = document.getElementById("inputName").value;
const password = document.getElementById("inputPassword").value;
document.getElementById("auth-block").innerHTML =
"<h1>我们正在进行人机验证...</h1>";
grecaptcha.ready(() => {
grecaptcha
.execute("::reCAPTCHA_CLIENT::", { action: "space" })
.then(async (t) => {
document.getElementById("auth-block").innerHTML =
"<h1>我们正在验证您的登录凭据...</h1>";
const res = await (
await fetch(
new Request("/space/auth::AUTH_PAGE::", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: `name=${name}&password=${password}&token=${t}`,
})
)
).json();
if (res.success) {
document.getElementById("auth-block").innerHTML =
"<h1>登录成功，即将跳转！</h1>";
document.location.href = `${document.location.origin}/space/dash`;
} else {
document.getElementById("auth-block").innerHTML =
"<h1>无效的登录凭据 :(</h1>";
}
});
});
});
</script>
</body>
</html>