158 lines
7.4 KiB
HTML
158 lines
7.4 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>初始设置 - 有音个性化教学系统</title>
|
|
<link rel="icon" type="image/jpeg" href="/static/images/logo-YoIn-200.jpg">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
|
|
.setup-card { background: white; border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 40px; max-width: 450px; width: 100%; }
|
|
.form-control:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); }
|
|
.btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
|
|
.btn-primary:hover { background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%); }
|
|
.password-rules { font-size: 12px; color: #6c757d; }
|
|
.password-rules li { margin-bottom: 2px; }
|
|
.password-rules .valid { color: #28a745; }
|
|
.password-rules .invalid { color: #dc3545; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="setup-card">
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-music-note-beamed" style="font-size: 48px; color: #667eea;"></i>
|
|
<h4 class="mt-3">欢迎使用系统</h4>
|
|
<p class="text-muted">请创建管理员账户</p>
|
|
</div>
|
|
|
|
<form id="setupForm">
|
|
<div class="mb-3">
|
|
<label class="form-label">用户名</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
|
<input type="text" class="form-control" id="username" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">密码</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
<input type="password" class="form-control" id="password" required oninput="checkPassword()">
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePassword('password')">
|
|
<i class="bi bi-eye" id="toggleIcon1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">确认密码</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
|
|
<input type="password" class="form-control" id="confirmPassword" required>
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirmPassword')">
|
|
<i class="bi bi-eye" id="toggleIcon2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="password-rules mb-3">
|
|
<li id="ruleLength"><i class="bi bi-circle"></i> 至少8位</li>
|
|
<li id="ruleUpper"><i class="bi bi-circle"></i> 包含大写字母</li>
|
|
<li id="ruleLower"><i class="bi bi-circle"></i> 包含小写字母</li>
|
|
<li id="ruleNumber"><i class="bi bi-circle"></i> 包含数字</li>
|
|
<li id="ruleSpecial"><i class="bi bi-circle"></i> 包含特殊字符(!@#$%^&*等)</li>
|
|
</ul>
|
|
|
|
<div id="errorMsg" class="alert alert-danger d-none"></div>
|
|
<button type="submit" class="btn btn-primary w-100 py-2">
|
|
<i class="bi bi-check-circle"></i> 创建账户
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function togglePassword(id) {
|
|
const input = document.getElementById(id);
|
|
const icon = input.nextElementSibling.querySelector('i');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('bi-eye');
|
|
icon.classList.add('bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('bi-eye-slash');
|
|
icon.classList.add('bi-eye');
|
|
}
|
|
}
|
|
|
|
function checkPassword() {
|
|
const pwd = document.getElementById('password').value;
|
|
|
|
const rules = {
|
|
ruleLength: pwd.length >= 8,
|
|
ruleUpper: /[A-Z]/.test(pwd),
|
|
ruleLower: /[a-z]/.test(pwd),
|
|
ruleNumber: /[0-9]/.test(pwd),
|
|
ruleSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(pwd)
|
|
};
|
|
|
|
for (const [id, valid] of Object.entries(rules)) {
|
|
const el = document.getElementById(id);
|
|
if (valid) {
|
|
el.classList.add('valid');
|
|
el.classList.remove('invalid');
|
|
el.querySelector('i').className = 'bi bi-check-circle-fill';
|
|
} else {
|
|
el.classList.remove('valid');
|
|
el.classList.add('invalid');
|
|
el.querySelector('i').className = 'bi bi-circle';
|
|
}
|
|
}
|
|
}
|
|
|
|
document.getElementById('setupForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
errorMsg.classList.add('d-none');
|
|
|
|
const password = document.getElementById('password').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (password !== confirmPassword) {
|
|
errorMsg.textContent = '两次密码输入不一致';
|
|
errorMsg.classList.remove('d-none');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('/api/setup', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
username: document.getElementById('username').value,
|
|
password: password,
|
|
confirm_password: confirmPassword
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (response.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errorMsg.textContent = result.error || '设置失败';
|
|
errorMsg.classList.remove('d-none');
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
.setup-footer { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.9); padding: 10px; text-align: center; }
|
|
.setup-footer img { height: 25px; width: auto; }
|
|
</style>
|
|
<div class="setup-footer">
|
|
<img src="/static/images/有音-logo和字.png" alt="有音教育" style="height:20px;margin-right:15px;">
|
|
<img src="/static/images/艺超-logo和字.png" alt="艺超音乐" style="height:20px;">
|
|
<p class="small text-muted mb-0 mt-1">© 2024-2026 有音教育 & 艺超音乐 联合开发</p>
|
|
</div>
|
|
</body>
|
|
</html> |