shanshuilala
bee5517f18
- Removed captcha checks from login, registration, and forum post routes. - Implemented email verification using 8-digit codes for registration and password changes. - Updated frontend to handle email verification code input during registration and password change. - Simplified captcha logic by integrating CAPTCHA verification directly in the frontend. - Enhanced email templates for verification codes and improved error handling. - Cleaned up unused code related to captcha and improved overall code structure.
86 lines
4.0 KiB
HTML
86 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录 - RainWeb</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<style>
|
|
.password-wrapper { position: relative; }
|
|
.password-wrapper input { width: 100%; padding-right: 44px; }
|
|
.password-wrapper .toggle-pw { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--md-ref-on-surface-variant); cursor: pointer; padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
|
.password-wrapper .toggle-pw:hover { background: var(--md-ref-surface-variant); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-page">
|
|
<div class="card login-card">
|
|
<h1>登录</h1>
|
|
<p class="subtitle">欢迎回到 RainWeb</p>
|
|
<div class="form-group"><label>用户名</label><input type="text" id="username" placeholder="输入用户名" autocomplete="username" autofocus></div>
|
|
<div class="form-group"><label>密码</label>
|
|
<div class="password-wrapper"><input type="password" id="password" placeholder="输入密码" autocomplete="current-password">
|
|
<button class="toggle-pw" type="button" onclick="togglePw(this)" tabindex="-1"><span class="material-icons" style="font-size:20px">visibility_off</span></button></div>
|
|
</div>
|
|
<div id="loginError" style="color:var(--md-ref-error);font-size:14px;margin-bottom:12px;display:none"></div>
|
|
<button class="btn btn-filled w-full" onclick="handleLogin()" id="loginBtn">登录</button>
|
|
<div style="text-align:center;margin-top:16px">
|
|
<span class="text-muted">没有账户？</span>
|
|
<a href="/register.html" class="btn-text btn" style="font-size:14px">注册</a>
|
|
</div>
|
|
<div style="text-align:center;margin-top:8px">
|
|
<a href="/" class="btn-text btn" style="font-size:14px">← 返回主页</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="snackbar" class="snackbar"></div>
|
|
<script src="/js/theme.js"></script>
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/captcha.js"></script>
|
|
<script>
|
|
const token = localStorage.getItem('token');
|
|
if (token) window.location.href = '/';
|
|
|
|
function togglePw(btn) {
|
|
const input = btn.parentElement.querySelector('input');
|
|
const icon = btn.querySelector('.material-icons');
|
|
if (input.type === 'password') { input.type = 'text'; icon.textContent = 'visibility'; }
|
|
else { input.type = 'password'; icon.textContent = 'visibility_off'; }
|
|
}
|
|
|
|
async function handleLogin() {
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
const errEl = document.getElementById('loginError');
|
|
const btn = document.getElementById('loginBtn');
|
|
if (!username || !password) { errEl.textContent = '请输入用户名和密码'; errEl.style.display = 'block'; return; }
|
|
|
|
// Show captcha modal if needed
|
|
const captchaOk = await CAPTCHA.verify('login');
|
|
if (!captchaOk) return; // user cancelled
|
|
|
|
errEl.style.display = 'none';
|
|
btn.disabled = true;
|
|
btn.textContent = '登录中...';
|
|
try {
|
|
const data = await API.login(username, password, 'verified');
|
|
localStorage.setItem('token', data.token);
|
|
localStorage.setItem('username', data.username);
|
|
localStorage.setItem('role', data.role);
|
|
window.location.href = '/';
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.textContent = '登录';
|
|
}
|
|
}
|
|
|
|
document.getElementById('username').addEventListener('keydown', e => { if (e.key === 'Enter') document.getElementById('password').focus(); });
|
|
document.getElementById('password').addEventListener('keydown', e => { if (e.key === 'Enter') handleLogin(); });
|
|
</script>
|
|
</body>
|
|
</html>
|