104 lines
4.8 KiB
HTML
104 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Deploy: copy to /www/wwwroot/soft_download/login.html on the server. Must be excluded from auth_basic in Nginx. -->
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录 - 软件下载页面</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { font-size: 18px; line-height: 1.6; font-family: sans-serif; margin: 0; padding: 2em; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f5f5; }
|
|
.login-box { background: #fff; padding: 2em 2.5em; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 380px; width: 100%; }
|
|
h1 { font-size: 22px; margin: 0 0 1.2em 0; color: #333; border-bottom: 2px solid #ccc; padding-bottom: 0.4em; }
|
|
.form-group { margin-bottom: 1.2em; }
|
|
.form-group label { display: block; margin-bottom: 0.3em; color: #555; font-size: 16px; }
|
|
.form-group input { width: 100%; padding: 0.5em 0.8em; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; }
|
|
.form-group input:focus { outline: none; border-color: #0066cc; }
|
|
.login-btn { width: 100%; padding: 0.6em 1em; font-size: 18px; background: #0066cc; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
|
|
.login-btn:hover { background: #0052a3; }
|
|
.error-msg { color: #c00; font-size: 14px; margin-top: 0.5em; display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-box">
|
|
<h1>登录</h1>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="username">用户名</label>
|
|
<input type="text" id="username" name="username" required autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">密码</label>
|
|
<input type="password" id="password" name="password" required autocomplete="current-password">
|
|
</div>
|
|
<div class="error-msg" id="error-msg"></div>
|
|
<button type="submit" class="login-btn">登录</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var form = document.getElementById('login-form');
|
|
var errorEl = document.getElementById('error-msg');
|
|
|
|
function getReturnPath() {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var ret = params.get('return');
|
|
return ret && ret.length > 0 ? ret : '/';
|
|
}
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
var user = document.getElementById('username').value.trim();
|
|
var pass = document.getElementById('password').value;
|
|
if (!user || !pass) {
|
|
errorEl.textContent = '请输入用户名和密码';
|
|
errorEl.style.display = 'block';
|
|
return;
|
|
}
|
|
var returnPath = getReturnPath();
|
|
if (!returnPath.startsWith('/')) returnPath = '/' + returnPath;
|
|
|
|
// Submit to login.php via POST
|
|
var formData = new FormData();
|
|
formData.append('username', user);
|
|
formData.append('password', pass);
|
|
formData.append('return', returnPath);
|
|
|
|
fetch('/login.php', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'same-origin'
|
|
})
|
|
.then(function(response) {
|
|
if (response.redirected) {
|
|
window.location.href = response.url;
|
|
} else if (response.ok) {
|
|
window.location.href = returnPath;
|
|
} else {
|
|
return response.text();
|
|
}
|
|
})
|
|
.then(function(html) {
|
|
if (html) {
|
|
// Login failed, extract error message from response
|
|
var parser = new DOMParser();
|
|
var doc = parser.parseFromString(html, 'text/html');
|
|
var errorMsg = doc.querySelector('.error-msg');
|
|
if (errorMsg) {
|
|
errorEl.textContent = errorMsg.textContent;
|
|
} else {
|
|
errorEl.textContent = '登录失败，请重试';
|
|
}
|
|
errorEl.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(function(err) {
|
|
errorEl.textContent = '网络错误，请重试';
|
|
errorEl.style.display = 'block';
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|