|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN" class="h-full"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>登录 - Sora2API</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
@keyframes slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}} |
|
|
.animate-slide-up{animation:slide-up .3s ease-out} |
|
|
</style> |
|
|
<script> |
|
|
tailwind.config={theme:{extend:{colors:{border:"hsl(0 0% 89%)",input:"hsl(0 0% 89%)",ring:"hsl(0 0% 3.9%)",background:"hsl(0 0% 100%)",foreground:"hsl(0 0% 3.9%)",primary:{DEFAULT:"hsl(0 0% 9%)",foreground:"hsl(0 0% 98%)"},secondary:{DEFAULT:"hsl(0 0% 96.1%)",foreground:"hsl(0 0% 9%)"},muted:{DEFAULT:"hsl(0 0% 96.1%)",foreground:"hsl(0 0% 45.1%)"},destructive:{DEFAULT:"hsl(0 84.2% 60.2%)",foreground:"hsl(0 0% 98%)"}}}}} |
|
|
</script> |
|
|
</head> |
|
|
<body class="h-full bg-background text-foreground antialiased"> |
|
|
<div class="flex min-h-full flex-col justify-center py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="sm:mx-auto sm:w-full sm:max-w-md"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-bold">Sora2API</h1> |
|
|
<p class="mt-2 text-sm text-muted-foreground">管理员控制台</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="sm:mx-auto sm:w-full sm:max-w-md"> |
|
|
<div class="bg-background py-8 px-4 sm:px-10 rounded-lg"> |
|
|
<form id="loginForm" class="space-y-6"> |
|
|
<div class="space-y-2"> |
|
|
<label for="username" class="text-sm font-medium">账户</label> |
|
|
<input type="text" id="username" name="username" required class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50" placeholder="请输入账户"> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<label for="password" class="text-sm font-medium">密码</label> |
|
|
<input type="password" id="password" name="password" required class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50" placeholder="请输入密码"> |
|
|
</div> |
|
|
<button type="submit" id="loginButton" class="inline-flex items-center justify-center rounded-md font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 w-full disabled:opacity-50">登录</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6 text-center text-xs text-muted-foreground"> |
|
|
<p>Sora2API © 2025</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const form=document.getElementById('loginForm'),btn=document.getElementById('loginButton'); |
|
|
form.addEventListener('submit',async(e)=>{e.preventDefault();btn.disabled=true;btn.textContent='登录中...';try{const fd=new FormData(form),r=await fetch('/api/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:fd.get('username'),password:fd.get('password')})});const d=await r.json();d.success?(localStorage.setItem('adminToken',d.token),location.href='/manage'):showToast(d.message||'登录失败','error')}catch(e){showToast('网络错误，请稍后重试','error')}finally{btn.disabled=false;btn.textContent='登录'}}); |
|
|
function showToast(m,t='error'){const d=document.createElement('div'),bc={success:'bg-green-600',error:'bg-destructive',info:'bg-primary'};d.className=`fixed bottom-4 right-4 ${bc[t]||bc.error} text-white px-4 py-2.5 rounded-lg shadow-lg text-sm font-medium z-50 animate-slide-up`;d.textContent=m;document.body.appendChild(d);setTimeout(()=>{d.style.opacity='0';d.style.transition='opacity .3s';setTimeout(()=>d.parentNode&&document.body.removeChild(d),300)},2000)} |
|
|
window.addEventListener('DOMContentLoaded',()=>{const t=localStorage.getItem('adminToken');t&&fetch('/api/stats',{headers:{Authorization:`Bearer ${t}`}}).then(r=>{if(r.ok)location.href='/manage'})}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
