119 lines
7.2 KiB
HTML
119 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>注册码管理</title>
|
||
<style>
|
||
body { margin:0; font-family: system-ui,-apple-system, Segoe UI, Roboto, sans-serif; background:#fafafa; }
|
||
.sidebar { position:fixed; top:0; left:0; width:180px; height:100vh; background:#1e1e2e; color:#fff; padding:20px; box-shadow:2px 0 5px rgba(0,0,0,0.1); z-index:1000; display:flex; flex-direction:column; align-items:center; }
|
||
.sidebar h3 { margin:0; font-size:18px; color:#add8e6; text-align:center; }
|
||
.navigation-links { width:100%; margin-top:60px; }
|
||
.sidebar a, .sidebar button { display:block; color:#8be9fd; text-decoration:none; margin:10px 0; font-size:16px; padding:15px; border-radius:4px; background:transparent; border:none; cursor:pointer; width:calc(100% - 40px); text-align:left; transition:all .2s ease; }
|
||
.sidebar a:hover, .sidebar button:hover { color:#ff79c6; background-color:rgba(139,233,253,.2); }
|
||
.main { margin-left:200px; padding:20px; color:#333; }
|
||
.card { background:#fff; border-radius:14px; box-shadow:0 10px 24px rgba(31,35,40,.08); padding:20px; margin-bottom:20px; }
|
||
.row { display:flex; gap:16px; }
|
||
.col { flex:1; }
|
||
label { display:block; margin-bottom:6px; font-weight:600; }
|
||
input[type=text], input[type=number], select { width:100%; padding:8px 12px; border:1px solid #d1d5db; border-radius:6px; box-sizing:border-box; }
|
||
.btn { padding:8px 12px; border:none; border-radius:8px; cursor:pointer; margin:0 4px; }
|
||
.btn-primary { background:#4f46e5; color:#fff; }
|
||
.btn-secondary { background:#64748b; color:#fff; }
|
||
.notice { padding:10px; border-radius:6px; margin-top:10px; display:none; }
|
||
.notice.success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
|
||
.notice.error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
|
||
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding:12px; border:1px solid #e5e7eb; border-radius:8px; background:#fafafa; margin-top:10px; }
|
||
</style>
|
||
{% csrf_token %}
|
||
<script>
|
||
function getCookie(name){const v=`; ${document.cookie}`;const p=v.split(`; ${name}=`);if(p.length===2) return p.pop().split(';').shift();}
|
||
async function loadKeys(){
|
||
const resp=await fetch('/elastic/registration-codes/keys/');
|
||
const data=await resp.json();
|
||
const opts=(data.data||[]);
|
||
const keySel=document.getElementById('keys');
|
||
const mkeySel=document.getElementById('manageKeys');
|
||
keySel.innerHTML=''; mkeySel.innerHTML='';
|
||
opts.forEach(k=>{
|
||
const o=document.createElement('option'); o.value=k; o.textContent=k; keySel.appendChild(o);
|
||
const o2=document.createElement('option'); o2.value=k; o2.textContent=k; mkeySel.appendChild(o2);
|
||
});
|
||
}
|
||
async function addKey(){
|
||
const keyName=(document.getElementById('newKey').value||'').trim();
|
||
if(!keyName) return;
|
||
const csrftoken=getCookie('csrftoken');
|
||
const resp=await fetch('/elastic/registration-codes/keys/add/',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json','X-CSRFToken':csrftoken||''},body:JSON.stringify({key:keyName})});
|
||
const data=await resp.json();
|
||
const msg=document.getElementById('msg');
|
||
if(resp.ok && data.status==='success'){msg.textContent='新增key成功'; msg.className='notice success'; msg.style.display='block'; document.getElementById('newKey').value=''; loadKeys();}
|
||
else{msg.textContent=data.message||'新增失败'; msg.className='notice error'; msg.style.display='block';}
|
||
}
|
||
function selectedValues(sel){return Array.from(sel.selectedOptions).map(o=>o.value);}
|
||
function enableToggleSelect(sel){ sel.addEventListener('mousedown',function(e){ if(e.target && e.target.tagName==='OPTION'){ e.preventDefault(); const op=e.target; op.selected=!op.selected; this.dispatchEvent(new Event('change',{bubbles:true})); } }); }
|
||
function clearSelection(id){ const sel=document.getElementById(id); Array.from(sel.options).forEach(o=>o.selected=false); }
|
||
async function generateCode(){
|
||
const csrftoken=getCookie('csrftoken');
|
||
const keys=selectedValues(document.getElementById('keys'));
|
||
const manageKeys=selectedValues(document.getElementById('manageKeys'));
|
||
const mode=document.getElementById('expireMode').value;
|
||
let days=30; if(mode==='month') days=30; else if(mode==='fouryears') days=1460; else { const d=parseInt(document.getElementById('customDays').value||'30'); days=isNaN(d)?30:Math.max(1,d);}
|
||
const resp=await fetch('/elastic/registration-codes/generate/',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json','X-CSRFToken':csrftoken||''},body:JSON.stringify({keys,manage_keys:manageKeys,expires_in_days:days})});
|
||
const data=await resp.json();
|
||
const out=document.getElementById('codeOut');
|
||
const msg=document.getElementById('msg');
|
||
if(resp.ok && data.status==='success'){out.textContent=data.data.code; msg.textContent='生成成功'; msg.className='notice success'; msg.style.display='block';}
|
||
else{msg.textContent=data.message||'生成失败'; msg.className='notice error'; msg.style.display='block';}
|
||
}
|
||
document.addEventListener('DOMContentLoaded',()=>{loadKeys(); enableToggleSelect(document.getElementById('keys')); enableToggleSelect(document.getElementById('manageKeys'));});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="sidebar">
|
||
<h3>用户ID：{{ user_id }}</h3>
|
||
<div class="navigation-links">
|
||
<a href="{% url 'main:home' %}">主页</a>
|
||
</div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="card">
|
||
<h2>管理注册码</h2>
|
||
<div class="row">
|
||
<div class="col">
|
||
<label>新增key</label>
|
||
<input id="newKey" type="text" placeholder="输入新的key" />
|
||
<button class="btn btn-secondary" onclick="addKey()">新增</button>
|
||
</div>
|
||
</div>
|
||
<div class="row" style="margin-top:12px;">
|
||
<div class="col">
|
||
<label>选择keys</label>
|
||
<select id="keys" multiple size="10"></select>
|
||
<div style="margin-top:8px;"><button class="btn btn-secondary" onclick="clearSelection('keys')">清空选择</button></div>
|
||
</div>
|
||
<div class="col">
|
||
<label>选择manage_keys</label>
|
||
<select id="manageKeys" multiple size="10"></select>
|
||
<div style="margin-top:8px;"><button class="btn btn-secondary" onclick="clearSelection('manageKeys')">清空选择</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="row" style="margin-top:12px;">
|
||
<div class="col">
|
||
<label>有效期</label>
|
||
<select id="expireMode">
|
||
<option value="month">一个月</option>
|
||
<option value="fouryears">四年</option>
|
||
<option value="custom">自定义天数</option>
|
||
</select>
|
||
<input id="customDays" type="number" min="1" placeholder="自定义天数" />
|
||
</div>
|
||
<div class="col" style="display:flex; align-items:flex-end;">
|
||
<button class="btn btn-primary" onclick="generateCode()">生成注册码</button>
|
||
</div>
|
||
</div>
|
||
<div id="msg" class="notice"></div>
|
||
<div class="code-box" id="codeOut"></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |