BetterDesk/web-nodejs/views/security-audit.ejs

<%- include('layouts/main', {
  title,
  pageStyles,
  pageScripts,
  currentPage,
  breadcrumb,
  body: `
<div class="secaudit-container">
  <!-- Tab bar -->
  <div class="secaudit-tabs">
    <button class="secaudit-tab ${activeTab === 'overview' ? 'active' : ''}" data-tab="overview" onclick="SecurityAudit.switchTab('overview')">
      <span class="material-icons">dashboard</span> ${_('security_audit.tab_overview')}
    </button>
    <button class="secaudit-tab ${activeTab === 'events' ? 'active' : ''}" data-tab="events" onclick="SecurityAudit.switchTab('events')">
      <span class="material-icons">history</span> ${_('security_audit.tab_events')}
    </button>
    <button class="secaudit-tab ${activeTab === 'hardening' ? 'active' : ''}" data-tab="hardening" onclick="SecurityAudit.switchTab('hardening')">
      <span class="material-icons">shield</span> ${_('security_audit.tab_hardening')}
    </button>
    <button class="secaudit-tab ${activeTab === 'vulnerabilities' ? 'active' : ''}" data-tab="vulnerabilities" onclick="SecurityAudit.switchTab('vulnerabilities')">
      <span class="material-icons">bug_report</span> ${_('security_audit.tab_vulnerabilities')}
    </button>
  </div>

  <!-- Overview panel -->
  <div class="secaudit-panel" id="panel-overview" style="display: ${activeTab === 'overview' ? 'block' : 'none'}">
    <div class="secaudit-score-section">
      <div class="secaudit-score-ring" id="score-ring">
        <svg viewBox="0 0 120 120" class="secaudit-ring-svg">
          <circle cx="60" cy="60" r="52" stroke="var(--border-primary)" stroke-width="8" fill="none"/>
          <circle cx="60" cy="60" r="52" id="score-circle" stroke="var(--accent-blue)" stroke-width="8" fill="none"
            stroke-dasharray="326.73" stroke-dashoffset="326.73" stroke-linecap="round" transform="rotate(-90 60 60)"/>
          <text x="60" y="60" text-anchor="middle" dominant-baseline="central" class="secaudit-score-text" id="score-value">—</text>
        </svg>
        <div class="secaudit-score-label">${_('security_audit.security_score')}</div>
      </div>
      <div class="secaudit-stats-grid" id="overview-stats">
        <div class="secaudit-stat-card"><span class="material-icons">warning</span><div class="secaudit-stat-value" id="stat-failed-logins">—</div><div class="secaudit-stat-label">${_('security_audit.failed_logins')}</div></div>
        <div class="secaudit-stat-card"><span class="material-icons">block</span><div class="secaudit-stat-value" id="stat-bans">—</div><div class="secaudit-stat-label">${_('security_audit.active_bans')}</div></div>
        <div class="secaudit-stat-card"><span class="material-icons">vpn_key</span><div class="secaudit-stat-value" id="stat-api-keys">—</div><div class="secaudit-stat-label">${_('security_audit.api_keys')}</div></div>
        <div class="secaudit-stat-card"><span class="material-icons">update</span><div class="secaudit-stat-value" id="stat-old-keys">—</div><div class="secaudit-stat-label">${_('security_audit.old_keys')}</div></div>
      </div>
    </div>
    <h3 class="secaudit-section-title">${_('security_audit.security_checks')}</h3>
    <div class="secaudit-checks-grid" id="checks-grid"></div>
    <h3 class="secaudit-section-title">${_('security_audit.tls_status')}</h3>
    <div class="secaudit-tls-grid" id="tls-grid"></div>
  </div>

  <!-- Events panel -->
  <div class="secaudit-panel" id="panel-events" style="display: ${activeTab === 'events' ? 'block' : 'none'}">
    <div class="secaudit-toolbar">
      <select class="secaudit-select" id="event-filter" onchange="SecurityAudit.filterEvents()">
        <option value="">${_('security_audit.all_events')}</option>
        <option value="login_failed">${_('security_audit.event_login_failed')}</option>
        <option value="login_success">${_('security_audit.event_login_success')}</option>
        <option value="peer_banned">${_('security_audit.event_peer_banned')}</option>
        <option value="ip_banned">${_('security_audit.event_ip_banned')}</option>
        <option value="config_changed">${_('security_audit.event_config_changed')}</option>
        <option value="key_created">${_('security_audit.event_key_created')}</option>
      </select>
      <button class="secaudit-btn" onclick="SecurityAudit.loadEvents()"><span class="material-icons">refresh</span> ${_('security_audit.refresh')}</button>
    </div>
    <div class="secaudit-table-wrap">
      <table class="secaudit-table">
        <thead>
          <tr>
            <th>${_('security_audit.col_time')}</th>
            <th>${_('security_audit.col_action')}</th>
            <th>${_('security_audit.col_actor')}</th>
            <th>${_('security_audit.col_target')}</th>
            <th>${_('security_audit.col_ip')}</th>
            <th>${_('security_audit.col_details')}</th>
          </tr>
        </thead>
        <tbody id="events-tbody"></tbody>
      </table>
    </div>
    <div class="secaudit-pagination" id="events-pagination"></div>
  </div>

  <!-- Hardening panel -->
  <div class="secaudit-panel" id="panel-hardening" style="display: ${activeTab === 'hardening' ? 'block' : 'none'}">
    <p class="secaudit-hint">${_('security_audit.hardening_hint')}</p>
    <div class="secaudit-hardening-list" id="hardening-list"></div>
  </div>

  <!-- Vulnerabilities panel -->
  <div class="secaudit-panel" id="panel-vulnerabilities" style="display: ${activeTab === 'vulnerabilities' ? 'block' : 'none'}">
    <p class="secaudit-hint">${_('security_audit.vuln_hint')}</p>
    <div class="secaudit-vuln-summary" id="vuln-summary"></div>
    <div class="secaudit-vuln-list" id="vuln-list"></div>
  </div>
</div>
` }) %>