campaign_list_view

🎯 Campaign View: Attack List Interface (Legacy "Attack Settings" Mockup)#

This screen represents the primary Campaign detail view, listing all attacks attached to a specific campaign. The title should reflect the Campaign Name dynamically.

💡 General Notes#

The interface is a table-like layout rendered in the main content area, showing all active and configured attacks
Sidebar selection shows attack types, but creation flow is triggered via a toolbar button (+ Add Attack)

🧱 Layout Description#

🏷️ Title Bar#

<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
 [Campaign Name]
</h1>

The text should reflect the name of the current campaign (e.g., "Fall PenTest Roundup", "ACME Internal Audit").

📋 Attack Table#

The main table has six columns, styled like a data grid:

Column	Content
Attack	Human-readable label (e.g., "Dictionary", "Brute-force", "Previous Passwords")
Language	Usually "English", may be blank for dynamic sets
Length	Min → Max (e.g., `1-4`, `0-15`, `Trim from 1 to 13`)
Settings	Blue-linked summary of applied modifiers or charset
Passwords to Check	Numeric value (comma-separated thousands)
Complexity	0-5 dot visual meter (grey-filled circles)

Each row ends with a gear icon for a context menu (see Campaign Notes - Attack Row Actions)

🧩 Attack Row Example#

<div class="grid grid-cols-6 items-center gap-4 py-2 border-b border-gray-200 dark:border-gray-700">
 <div>
  Brute-force
 </div>
 <div>
  English
 </div>
 <div>
  1 - 4
 </div>
 <div class="text-blue-600 hover:underline">
  Lowercase, Uppercase, Numbers, Symbols
 </div>
 <div>
  78,914,410
 </div>
 <div>
  <div class="flex space-x-1">
   <span class="w-2 h-2 bg-gray-600 rounded-full">
   </span>
   <span class="w-2 h-2 bg-gray-600 rounded-full">
   </span>
   <span class="w-2 h-2 bg-gray-600 rounded-full">
   </span>
   <span class="w-2 h-2 bg-gray-600 rounded-full">
   </span>
   <span class="w-2 h-2 bg-gray-200 rounded-full">
   </span>
  </div>
 </div>
</div>

Each attack row has a trailing gear icon button (<button class="icon-btn"><CogIcon /></button>)

Trigger a dropdown menu:

<ul class="dropdown-menu">
 <li>
  <a href="#">
   Edit
  </a>
 </li>
 <li>
  <a href="#">
   Duplicate
  </a>
 </li>
 <li>
  <a href="#">
   Move Up
  </a>
 </li>
 <li>
  <a href="#">
   Move Down
  </a>
 </li>
 <li>
  <a class="text-red-600" href="#">
   Remove
  </a>
 </li>
</ul>

<button class="btn btn-outline" hx-get="/api/v1/web/attacks/new" hx-swap="innerHTML" hx-target="#attack-modal">
 + Add Attack...
</button>

Triggers modal dialog for choosing a new attack type and entering config.

🗑️ Remove All Attacks#

Located at the bottom toolbar, uses a trash icon with “All” text
Clicking it clears all attacks after confirmation

<button class="btn btn-outline text-red-600" hx-confirm="Remove all attacks from this campaign?" hx-post="/api/v1/web/campaigns/{id}/clear_attacks">
 <trashicon>
 </trashicon>
 All
</button>

⏱️ Sort + Presets#

Other toolbar buttons include:

Reset to Default: Restores default attack list template (optional)
Save / Load: Import/export JSON-encoded campaign configs
Sort by Duration: Changes order of attack rows (sorted by estimated cracking time)

Each of these uses standard HTTP interactions (GET for loading data, POST for saving).

📦 Backend Notes#

The attack list is populated from:

GET /api/v1/web/campaigns/{id}

Each attack is rendered from:

{
    "id": 123,
    "type": "brute_force",
    "language": "english",
    "length_min": 1,
    "length_max": 4,
    "settings_summary": "Lowercase, Uppercase, Numbers, Symbols",
    "keyspace": 78914410,
    "complexity_score": 4,
    "position": 3
}