orbit-codex-bridge 0.0.0-stage → 0.1.1

package/public/admin.js

@@ -0,0 +1,186 @@
+const select=selector=>document.querySelector(selector);
+const escapeHtml=value=>String(value??'').replace(/[&<>"']/g,character=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[character]));
+let users=[];
+const userFilter={search:'',status:'all',page:1,pageSize:25};
+let refreshTimer;
+
+async function api(url,body,method='POST'){
+  const response=await fetch(url,body===undefined?{}:{
+    method,headers:{'Content-Type':'application/json'},body:JSON.stringify(body)
+  });
+  const result=await response.json();
+  if(!response.ok)throw new Error(result.error||'请求失败。');
+  return result;
+}
+function showSecret(title,description,value){
+  select('#secret-title').textContent=title;
+  select('#secret-description').textContent=description;
+  select('#secret-value').value=value;
+  select('#secret-dialog').showModal();
+}
+function flash(message){
+  const element=select('#admin-message');
+  element.hidden=false;element.textContent=message;
+  clearTimeout(flash.timer);flash.timer=setTimeout(()=>element.hidden=true,8000);
+}
+function localDateTime(timestamp){
+  if(!timestamp)return '';
+  const date=new Date(timestamp);
+  date.setSeconds(0,0);
+  date.setMinutes(date.getMinutes()-date.getTimezoneOffset());
+  return date.toISOString().slice(0,16);
+}
+function renderUsers(){
+  select('#users-list').innerHTML=users.map(user=>{
+    const devices=user.devices||[];
+    const expired=user.status==='active'&&user.expiresAt&&user.expiresAt<=Date.now();
+    const statusLabel=user.status==='suspended'?'已停用':expired?'已到期':'有效';
+    const statusClass=user.status==='suspended'||expired?'suspended':'';
+    const actions=[
+      `<button data-issue="${escapeHtml(user.id)}" type="button">签发电脑</button>`,
+      `<button data-reset="${escapeHtml(user.id)}" type="button">重置密码</button>`,
+      `<button data-status="${escapeHtml(user.id)}" data-next-status="${user.status==='active'?'suspended':'active'}" type="button">${user.status==='active'?'停用':'启用'}</button>`
+    ].join('');
+    const rows=devices.map(device=>`<div class="device-row"><span><strong>${escapeHtml(device.name)}</strong> · ${device.online?'<span class="badge">在线</span>':'<span class="badge offline">离线</span>'}<br>设备 ID：${escapeHtml(device.id)} · 最近在线：${device.lastSeen?new Date(device.lastSeen).toLocaleString('zh-CN'):'从未'}</span>${device.status==='active'?`<button data-device="${escapeHtml(device.id)}" data-next-status="revoked" type="button">撤销凭证</button>`:'<span class="badge revoked">凭证已永久撤销</span>'}</div>`).join('');
+    return `<article class="user-row"><div class="user-identity"><strong>${escapeHtml(user.displayName)}</strong><small>${escapeHtml(user.username)} · <span class="badge ${statusClass}">${statusLabel}</span></small></div><div class="user-meta">套餐 ${escapeHtml(user.plan)}<br>设备 ${devices.filter(device=>device.status==='active').length}/${user.maxDevices}</div><div class="user-meta secondary">创建于 ${new Date(user.createdAt).toLocaleDateString('zh-CN')}${user.expiresAt?`<br>到期 ${new Date(user.expiresAt).toLocaleDateString('zh-CN')}`:'<br>不过期'}</div><div class="user-actions">${actions}</div><form class="user-settings" data-user-settings="${escapeHtml(user.id)}"><label>显示名称<input name="displayName" maxlength="120" value="${escapeHtml(user.displayName)}" required></label><label>套餐<input name="plan" maxlength="40" value="${escapeHtml(user.plan)}" required></label><label>设备上限<input name="maxDevices" type="number" min="1" max="50" value="${user.maxDevices}" required></label><label>到期时间<input name="expiresAt" type="datetime-local" value="${localDateTime(user.expiresAt)}"></label><button type="submit">保存设置</button></form><div class="device-list">${rows||'<div class="user-meta">尚未绑定电脑</div>'}</div></article>`;
+  }).join('')||(userFilter.search||userFilter.status!=='all'?'<p class="user-meta">没有符合条件的用户。</p>':'<p class="user-meta">尚未创建用户。</p>');
+}
+async function refresh(){
+  const {search,status,page,pageSize}=userFilter;
+  const query=new URLSearchParams({search,status,page:String(page),pageSize:String(pageSize)});
+  const [overview,userData,auditData]=await Promise.all([
+    api('/api/admin/overview'),api(`/api/admin/users?${query}`,undefined,'GET'),api('/api/admin/audit?limit=80',undefined,'GET')
+  ]);
+  if(search!==userFilter.search||status!==userFilter.status||page!==userFilter.page)return;
+  users=userData.users;
+  userFilter.page=userData.page;
+  select('#overview-users').textContent=overview.users;
+  select('#overview-active-users').textContent=overview.activeUsers;
+  select('#overview-suspended-users').textContent=overview.suspendedUsers;
+  select('#overview-expired-users').textContent=overview.expiredUsers;
+  select('#overview-devices').textContent=overview.activeDevices;
+  select('#overview-online').textContent=overview.onlineDevices;
+  select('#admin-status').textContent=`Relay 在线 ${overview.onlineDevices} 台电脑`;
+  select('#user-count').textContent=`${userData.total} 个用户`;
+  const pageCount=Math.max(1,Math.ceil(userData.total/userData.pageSize));
+  select('#users-page').textContent=`第 ${userData.page} / ${pageCount} 页`;
+  select('#users-previous').disabled=userData.page<=1;
+  select('#users-next').disabled=userData.page>=pageCount;
+  renderUsers();
+  select('#audit-list').innerHTML=auditData.events.map(event=>`<div class="audit-row"><time>${new Date(event.createdAt).toLocaleString('zh-CN')}</time><strong>${escapeHtml(event.action)}</strong><span>${escapeHtml(event.actor)} · ${escapeHtml(event.targetId||'')}</span></div>`).join('')||'<p class="user-meta">暂无管理事件。</p>';
+}
+function scheduleUserRefresh(){
+  clearTimeout(refreshTimer);
+  refreshTimer=setTimeout(()=>refresh().catch(error=>flash(error.message)),250);
+}
+function enterApp(){
+  select('#admin-login').hidden=true;
+  select('#admin-app').hidden=false;
+  select('#admin-logout').hidden=false;
+  refresh().catch(error=>flash(error.message));
+}
+async function checkSession(){
+  try{await api('/api/admin/overview');enterApp()}catch{
+    select('#admin-login').hidden=false;
+    select('#admin-app').hidden=true;
+    select('#admin-logout').hidden=true;
+    select('#admin-status').textContent='需要管理员登录';
+  }
+}
+
+select('#admin-login-form').addEventListener('submit',async event=>{
+  event.preventDefault();
+  const button=event.submitter;button.disabled=true;
+  select('#admin-login-error').textContent='';
+  try{await api('/api/admin/login',{token:select('#admin-token').value});select('#admin-token').value='';enterApp()}
+  catch(error){select('#admin-login-error').textContent=error.message}
+  finally{button.disabled=false}
+});
+select('#admin-logout').onclick=async()=>{
+  try{await api('/api/admin/logout',{});location.reload()}
+  catch(error){flash(error.message)}
+};
+select('#refresh-admin').onclick=()=>refresh().catch(error=>flash(error.message));
+select('#user-search').addEventListener('input',event=>{
+  userFilter.search=event.currentTarget.value.trim();
+  userFilter.page=1;
+  scheduleUserRefresh();
+});
+select('#user-status').addEventListener('change',event=>{
+  userFilter.status=event.currentTarget.value;
+  userFilter.page=1;
+  refresh().catch(error=>flash(error.message));
+});
+select('#users-previous').onclick=()=>{
+  userFilter.page=Math.max(1,userFilter.page-1);
+  refresh().catch(error=>flash(error.message));
+};
+select('#users-next').onclick=()=>{
+  userFilter.page++;
+  refresh().catch(error=>flash(error.message));
+};
+select('#create-user-form').addEventListener('submit',async event=>{
+  event.preventDefault();
+  const form=event.currentTarget;
+  const button=event.submitter;button.disabled=true;
+  const values=Object.fromEntries(new FormData(form));
+  values.maxDevices=Number(values.maxDevices);
+  values.expiresAt=values.expiresAt?Date.parse(values.expiresAt):null;
+  if(!values.password)delete values.password;
+  try{
+    const result=await api('/api/admin/users',values);
+    showSecret('用户账号已创建',`请将登录名 ${result.user.username} 和此初始密码通过安全渠道交给用户。`,`${result.user.username}\n${result.initialPassword}`);
+    form.reset();form.elements.plan.value='standard';form.elements.maxDevices.value='2';
+    await refresh();
+  }catch(error){flash(error.message)}
+  finally{button.disabled=false}
+});
+document.addEventListener('click',async event=>{
+  const issue=event.target.closest('[data-issue]');
+  const reset=event.target.closest('[data-reset]');
+  const status=event.target.closest('[data-status]');
+  const device=event.target.closest('[data-device]');
+  try{
+    if(issue){
+      const name=window.prompt('电脑设备名称','我的电脑');
+      if(name===null)return;
+      const result=await api(`/api/admin/users/${encodeURIComponent(issue.dataset.issue)}/devices`,{name});
+      showSecret('电脑代理密钥',`只显示一次。把密钥写入电脑的 ORBIT_RELAY_AGENT_TOKEN。设备 ID：${result.device.id}`,result.agentToken);
+      await refresh();
+    }else if(reset){
+      const password=window.prompt('输入新密码（至少 6 个字符）；留空则自动生成');
+      if(password===null)return;
+      const result=await api(`/api/admin/users/${encodeURIComponent(reset.dataset.reset)}/reset-password`,password?{password}:{});
+      showSecret('新密码已签发','旧用户会话已撤销，请通过安全渠道交付新密码。',result.initialPassword);
+    }else if(status){
+      await api(`/api/admin/users/${encodeURIComponent(status.dataset.status)}`,{status:status.dataset.nextStatus},'PATCH');
+      flash(status.dataset.nextStatus==='suspended'?'用户已停用，在线设备已断开。':'用户已重新启用。');
+      await refresh();
+    }else if(device){
+      await api(`/api/admin/devices/${encodeURIComponent(device.dataset.device)}`,{status:device.dataset.nextStatus},'PATCH');
+      flash(device.dataset.nextStatus==='revoked'?'设备凭证已撤销。':'设备已重新启用。');
+      await refresh();
+    }
+  }catch(error){flash(error.message)}
+});
+document.addEventListener('submit',async event=>{
+  const form=event.target.closest('[data-user-settings]');
+  if(!form)return;
+  event.preventDefault();
+  const button=event.submitter;button.disabled=true;
+  const values=Object.fromEntries(new FormData(form));
+  values.maxDevices=Number(values.maxDevices);
+  values.expiresAt=values.expiresAt?Date.parse(values.expiresAt):null;
+  try{
+    await api(`/api/admin/users/${encodeURIComponent(form.dataset.userSettings)}`,values,'PATCH');
+    flash('用户套餐与额度已更新。');
+    await refresh();
+  }catch(error){flash(error.message)}
+  finally{button.disabled=false}
+});
+select('#copy-secret').onclick=async()=>{
+  try{await navigator.clipboard.writeText(select('#secret-value').value);flash('凭证已复制。')}
+  catch{select('#secret-value').focus();select('#secret-value').select();flash('浏览器未授权剪贴板，请手动复制选中文本。')}
+};
+select('#secret-dialog').addEventListener('close',()=>{select('#secret-value').value=''});
+checkSession();