93 lines
4.1 KiB
HTML
93 lines
4.1 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>登录 — Mi Diario 西班牙语日记</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
body { align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
|
|
#auth-box {
|
|
width: 100%; max-width: 380px;
|
|
background: var(--panel-bg); border: 1px solid var(--border);
|
|
border-radius: var(--radius); box-shadow: var(--shadow);
|
|
padding: 1.5rem;
|
|
}
|
|
#auth-box h1 { font-size: 1.25rem; margin-bottom: 0.25rem; }
|
|
#auth-box p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }
|
|
#auth-box label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
|
|
#auth-box input {
|
|
width: 100%; border: 1px solid var(--border); border-radius: 6px;
|
|
padding: 0.55rem 0.7rem; font-size: 0.9rem; margin-bottom: 0.75rem;
|
|
background: var(--bg); color: var(--text); outline: none;
|
|
}
|
|
#auth-box input:focus { border-color: var(--accent); }
|
|
#auth-box button {
|
|
width: 100%; background: var(--accent); color: #fff; border: none;
|
|
padding: 0.6rem; border-radius: 6px; font-size: 0.95rem; cursor: pointer;
|
|
}
|
|
#auth-box button:hover { background: var(--accent-hover); }
|
|
#auth-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin-bottom: 0.5rem; }
|
|
#auth-switch { margin-top: 1rem; font-size: 0.85rem; text-align: center; color: var(--text-muted); }
|
|
#auth-switch a { color: var(--accent); cursor: pointer; text-decoration: none; }
|
|
#display-name-field { display: none; }
|
|
#back-home { display: block; text-align: center; margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="auth-box">
|
|
<h1 id="auth-title">登录</h1>
|
|
<p>Mi Diario 西班牙语日记</p>
|
|
<div id="auth-error"></div>
|
|
<form id="auth-form">
|
|
<label for="auth-username">用户名</label>
|
|
<input id="auth-username" type="text" autocomplete="username" required>
|
|
<div id="display-name-field">
|
|
<label for="auth-display-name">显示名</label>
|
|
<input id="auth-display-name" type="text" autocomplete="nickname">
|
|
</div>
|
|
<label for="auth-password">密码</label>
|
|
<input id="auth-password" type="password" autocomplete="current-password" required>
|
|
<button type="submit" id="auth-submit">登录</button>
|
|
</form>
|
|
<div id="auth-switch"><a id="auth-toggle">还没有账号？注册</a></div>
|
|
<a id="back-home" href="index.html">返回首页</a>
|
|
</div>
|
|
|
|
<script src="api.js"></script>
|
|
<script>
|
|
var isRegister = false;
|
|
var title = document.getElementById('auth-title');
|
|
var submit = document.getElementById('auth-submit');
|
|
var toggle = document.getElementById('auth-toggle');
|
|
var displayNameField = document.getElementById('display-name-field');
|
|
var errorBox = document.getElementById('auth-error');
|
|
|
|
function setMode(register) {
|
|
isRegister = register;
|
|
title.textContent = register ? '注册' : '登录';
|
|
submit.textContent = register ? '注册并登录' : '登录';
|
|
toggle.textContent = register ? '已有账号？登录' : '还没有账号？注册';
|
|
displayNameField.style.display = register ? 'block' : 'none';
|
|
errorBox.textContent = '';
|
|
}
|
|
|
|
toggle.addEventListener('click', function() { setMode(!isRegister); });
|
|
|
|
document.getElementById('auth-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
errorBox.textContent = '';
|
|
var username = document.getElementById('auth-username').value.trim();
|
|
var password = document.getElementById('auth-password').value;
|
|
var displayName = document.getElementById('auth-display-name').value.trim();
|
|
var action = isRegister ? apiRegister(username, password, displayName || username) : apiLogin(username, password);
|
|
action.then(function() {
|
|
location.href = 'index.html';
|
|
}).catch(function(err) {
|
|
errorBox.textContent = err.message || '操作失败';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|