pccs/wwwroot/login.html

41 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>PCCS Login</title>
<style>
body{font-family:system-ui;background:#f8fafc;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:32px;width:360px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
h2{margin:0 0 24px;text-align:center;color:#1e293b}
.form-group{margin-bottom:16px}
label{display:block;font-size:.85rem;color:#64748b;margin-bottom:4px}
input{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:1rem;box-sizing:border-box}
.btn{width:100%;padding:10px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:600}
.btn:hover{opacity:.9}
.msg{margin-top:12px;font-size:.85rem;text-align:center;color:#dc2626}
a{color:#2563eb;text-decoration:none;font-size:.85rem;display:block;text-align:center;margin-top:12px}
</style></head>
<body>
<div class="card">
<h2>PCCS 登录</h2>
<div class="form-group"><label>用户名</label><input type="text" id="user" placeholder="admin"></div>
<div class="form-group"><label>密码</label><input type="password" id="pass" placeholder="admin123"></div>
<button class="btn" onclick="login()">登录</button>
<div class="msg" id="msg"></div>
<a href="/">← 返回首页</a>
</div>
<script>
async function login(){
var u=document.getElementById('user').value;
var p=document.getElementById('pass').value;
if(!u||!p){document.getElementById('msg').textContent='请输入用户名和密码';return}
var fd=new FormData();fd.append('username',u);fd.append('password',p);
try{
var r=await fetch('/pccs/api/login.dspy',{method:'POST',body:fd});
var d=await r.json();
if(d.status==='ok'){document.getElementById('msg').style.color='#16a34a';document.getElementById('msg').textContent='登录成功! '+d.user.username;setTimeout(function(){location.href='/'},1000)}
else document.getElementById('msg').textContent=d.message||'登录失败'
}catch(e){document.getElementById('msg').textContent='网络错误'}
}
document.getElementById('pass').addEventListener('keydown',function(e){if(e.key==='Enter')login()})
</script>
</body>
</html>