beskar 0.0.2 → 0.2.0

data/app/views/beskar/security_events/show.html.erb

@@ -0,0 +1,293 @@
+<% content_for :page_title, "Security Event ##{@event.id}" %>
+
+<% content_for :header_actions do %>
+  <%= link_to "← Back to Events", security_events_path, class: "btn btn-secondary" %>
+  <% unless Beskar::BannedIp.banned?(@event.ip_address) %>
+    <%= link_to "Ban This IP", new_banned_ip_path(ip_address: @event.ip_address, reason: "security_event_#{@event.id}"),
+        class: "btn btn-danger" %>
+  <% end %>
+<% end %>
+
+<!-- Event Overview -->
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Event Details</h3>
+    <div class="card-subtitle">Event ID: <%= @event.id %></div>
+  </div>
+  <div class="card-body">
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+      <!-- Event Type -->
+      <div>
+        <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+          Event Type
+        </div>
+        <div style="font-size: 16px; font-weight: 500; color: #1A1F36;">
+          <%= format_event_type(@event.event_type) %>
+        </div>
+        <div style="font-size: 13px; color: #697386; margin-top: 0.25rem;">
+          <%= @event.event_type %>
+        </div>
+      </div>
+
+      <!-- Risk Score -->
+      <div>
+        <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+          Risk Score
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <span style="font-size: 24px; font-weight: 600; color: <%= risk_level_color(@event.risk_score) %>;">
+            <%= @event.risk_score %>
+          </span>
+          <span class="badge badge-<%= risk_level_class(@event.risk_score) %>">
+            <%= risk_level_label(@event.risk_score) %>
+          </span>
+        </div>
+      </div>
+
+      <!-- Timestamp -->
+      <div>
+        <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+          Occurred At
+        </div>
+        <div style="font-size: 14px; color: #1A1F36;">
+          <%= @event.created_at.strftime("%B %d, %Y") %>
+        </div>
+        <div style="font-size: 13px; color: #697386; margin-top: 0.25rem;">
+          <%= @event.created_at.strftime("%H:%M:%S %Z") %>
+          (<%= time_ago_in_words(@event.created_at) %> ago)
+        </div>
+      </div>
+
+      <!-- IP Address -->
+      <div>
+        <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+          IP Address
+        </div>
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+          <span style="font-family: monospace; font-size: 16px; color: #1A1F36;">
+            <%= @event.ip_address %>
+          </span>
+          <% if @ip_ban %>
+            <span class="badge badge-danger">Banned</span>
+          <% end %>
+        </div>
+        <% if @event.metadata&.dig("geolocation") %>
+          <div style="font-size: 13px; color: #697386; margin-top: 0.25rem;">
+            <%= [@event.metadata.dig("geolocation", "city"),
+                 @event.metadata.dig("geolocation", "region"),
+                 @event.metadata.dig("geolocation", "country")].compact.join(", ") %>
+          </div>
+        <% end %>
+      </div>
+
+      <!-- User -->
+      <div>
+        <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+          User
+        </div>
+        <% if @event.user %>
+          <div style="font-size: 14px; color: #1A1F36;">
+            <%= audit_user_label(@event) %>
+          </div>
+          <div style="font-size: 13px; color: #697386; margin-top: 0.25rem;">
+            ID: <%= @event.user_id %> • Type: <%= @event.user_type %>
+          </div>
+        <% elsif @event.attempted_email %>
+          <div style="font-size: 14px; color: #697386;">
+            <%= audit_user_label(@event) %> <span style="font-size: 12px;">(attempted)</span>
+          </div>
+        <% else %>
+          <div style="color: #C1C7D0;">No user associated</div>
+        <% end %>
+      </div>
+
+      <!-- Details -->
+      <% if @event.details.present? || @event.metadata&.dig("message").present? %>
+        <div>
+          <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+            Details
+          </div>
+          <div style="font-size: 14px; color: #1A1F36;">
+            <%= @event.details || @event.metadata&.dig("message") || "No additional details" %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- User Agent & Device Info -->
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Device & Browser Information</h3>
+  </div>
+  <div class="card-body">
+    <div style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
+      <!-- User Agent -->
+      <div>
+        <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386; margin-bottom: 0.5rem;">
+          User Agent
+        </div>
+        <div style="font-family: monospace; font-size: 13px; color: #1A1F36; background: #F4F5F7; padding: 0.75rem; border-radius: 6px; word-break: break-all;">
+          <%= @event.user_agent || "Not recorded" %>
+        </div>
+      </div>
+
+      <% if @event.device_info.present? %>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+          <% @event.device_info.each do |key, value| %>
+            <div>
+              <div style="font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #697386;">
+                <%= key.to_s.humanize %>
+              </div>
+              <div style="font-size: 14px; color: #1A1F36; margin-top: 0.25rem;">
+                <%= value || "-" %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- Metadata -->
+<% if @event.metadata.present? && @event.metadata.any? %>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">Additional Metadata</h3>
+    </div>
+    <div class="card-body">
+      <pre style="font-family: monospace; font-size: 12px; background: #F4F5F7; padding: 1rem; border-radius: 6px; overflow-x: auto;"><%= JSON.pretty_generate(@event.metadata) %></pre>
+    </div>
+  </div>
+<% end %>
+
+<!-- Related Events -->
+<% if @related_events.any? %>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">Related Events from Same IP</h3>
+      <div class="card-subtitle"><%= @related_events.count %> other events from <%= @event.ip_address %></div>
+    </div>
+    <div class="card-body" style="padding: 0;">
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Event Type</th>
+              <th>User</th>
+              <th>Risk Score</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @related_events.each do |event| %>
+              <tr>
+                <td>
+                  <div style="font-size: 13px;">
+                    <%= event.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+                  </div>
+                  <div style="font-size: 11px; color: #697386;">
+                    <%= time_ago_in_words(event.created_at) %> ago
+                  </div>
+                </td>
+                <td>
+                  <div style="font-size: 13px;">
+                    <%= format_event_type(event.event_type) %>
+                  </div>
+                </td>
+                <td>
+                  <% if event.user %>
+                    <%= audit_user_label(event) %>
+                  <% elsif event.attempted_email %>
+                    <span style="color: #697386;"><%= audit_user_label(event) %></span>
+                  <% else %>
+                    <span style="color: #C1C7D0;">-</span>
+                  <% end %>
+                </td>
+                <td>
+                  <span class="badge badge-<%= risk_level_class(event.risk_score) %>">
+                    <%= event.risk_score %>
+                  </span>
+                </td>
+                <td>
+                  <%= link_to "View", security_event_path(event), class: "btn btn-sm btn-secondary" %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- User Events -->
+<% if @user_events&.any? %>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">User's Recent Events</h3>
+      <div class="card-subtitle"><%= @user_events.count %> other events from this user</div>
+    </div>
+    <div class="card-body" style="padding: 0;">
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Event Type</th>
+              <th>IP Address</th>
+              <th>Risk Score</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @user_events.each do |event| %>
+              <tr>
+                <td>
+                  <div style="font-size: 13px;">
+                    <%= event.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+                  </div>
+                  <div style="font-size: 11px; color: #697386;">
+                    <%= time_ago_in_words(event.created_at) %> ago
+                  </div>
+                </td>
+                <td>
+                  <div style="font-size: 13px;">
+                    <%= format_event_type(event.event_type) %>
+                  </div>
+                </td>
+                <td>
+                  <div style="font-family: monospace; font-size: 13px;">
+                    <%= event.ip_address %>
+                  </div>
+                </td>
+                <td>
+                  <span class="badge badge-<%= risk_level_class(event.risk_score) %>">
+                    <%= event.risk_score %>
+                  </span>
+                </td>
+                <td>
+                  <%= link_to "View", security_event_path(event), class: "btn btn-sm btn-secondary" %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Actions -->
+<div style="display: flex; gap: 1rem; margin-top: 2rem;">
+  <%= link_to "← Back to Events", security_events_path, class: "btn btn-secondary" %>
+  <% unless @ip_ban %>
+    <%= link_to "Ban This IP", new_banned_ip_path(ip_address: @event.ip_address, reason: "security_event_#{@event.id}"),
+        class: "btn btn-danger" %>
+  <% else %>
+    <%= link_to "View Ban Details", banned_ip_path(@ip_ban), class: "btn btn-primary" %>
+  <% end %>
+</div>

data/app/views/beskar/shared/_export_form.html.erb

@@ -0,0 +1,10 @@
+<%= form_with url: export_url, method: :get, local: true do %>
+  <% request.query_parameters.except("format", "audit_reason", "page", "per_page").each do |key, value| %>
+    <%= hidden_field_tag key, value if value.is_a?(String) %>
+  <% end %>
+  <%= label_tag :export_audit_reason, "Export reason" %>
+  <%= text_field_tag :audit_reason, nil, id: :export_audit_reason, required: true, maxlength: 1000 %>
+  <%= label_tag :export_format, "Export format" %>
+  <%= select_tag :format, options_for_select([["CSV", "csv"], ["JSON", "json"]]), id: :export_format %>
+  <%= submit_tag "Export", class: "btn btn-secondary" %>
+<% end %>

data/app/views/layouts/beskar/_behavior.html.erb

@@ -0,0 +1,121 @@
+<%= javascript_tag nonce: true do %>
+  (() => {
+    // One delegated installation per document, even if a host evaluates the
+    // layout again. Native navigation is the dashboard's supported boundary.
+    if (window.beskarDashboardBehaviorInstalled) return;
+    window.beskarDashboardBehaviorInstalled = true;
+
+    function isPermanent(form) {
+      return form.querySelector('[name="ban_type"]:checked')?.value === 'permanent' ||
+        form.querySelector('[name="banned_ip[permanent]"]:checked')?.value === 'true';
+    }
+
+    function updateBanForm(form) {
+      const permanent = isPermanent(form);
+      const options = form.querySelector('#temporary-options');
+      options.hidden = permanent;
+      options.querySelectorAll('input, select, button').forEach(input => { input.disabled = permanent; });
+      const expiry = form.querySelector('#banned_ip_expires_at');
+      expiry.required = !permanent && !!form.querySelector('[name="banned_ip[permanent]"]');
+      const preview = document.getElementById('ban-preview');
+      if (!preview) return;
+      const ip = form.querySelector('#banned_ip_ip_address');
+      const reason = form.querySelector('#banned_ip_reason');
+      preview.hidden = !(ip.value || reason.value);
+      document.getElementById('preview-ip').textContent = ip.value || '-';
+      document.getElementById('preview-reason').textContent = reason.selectedOptions[0]?.textContent || '-';
+      const duration = form.querySelector('[name="duration"]:checked');
+      document.getElementById('preview-duration').textContent = permanent ? 'Permanent' :
+        (expiry.value ? `${expiry.value.replace('T', ' ')} UTC` : (duration?.parentElement.textContent.trim() || '24 hours (server default)'));
+      const status = document.getElementById('preview-status');
+      status.textContent = permanent ? 'Permanent' : 'Temporary';
+      status.className = permanent ? 'badge badge-critical' : 'badge badge-danger';
+    }
+
+    function updateSelection(form) {
+      const boxes = Array.from(form.querySelectorAll('.ban-checkbox'));
+      const count = boxes.filter(box => box.checked).length;
+      form.querySelector('#selected-count').textContent = count;
+      form.querySelector('#bulk-actions-bar').hidden = count === 0;
+      const all = form.querySelector('#select-all');
+      all.checked = boxes.length > 0 && count === boxes.length;
+      all.indeterminate = count > 0 && count < boxes.length;
+    }
+
+    function initialize() {
+      if (!document.querySelector('[data-beskar-dashboard]')) return;
+      document.querySelectorAll('[data-beskar-ban-form]').forEach(updateBanForm);
+      document.querySelectorAll('#bulk-actions-form').forEach(updateSelection);
+    }
+
+    document.addEventListener('change', event => {
+      if (!event.target.closest('[data-beskar-dashboard]')) return;
+      if (event.target.matches('[data-beskar-auto-submit]')) event.target.form.requestSubmit();
+      const form = event.target.closest('[data-beskar-ban-form]');
+      if (form) {
+        const expiry = form.querySelector('#banned_ip_expires_at');
+        if (event.target.name === 'duration') expiry.value = '';
+        if (event.target.name === 'banned_ip[permanent]' && !isPermanent(form) && !expiry.value) {
+          expiry.value = new Date(Date.now() + 86400000).toISOString().slice(0, -1);
+        }
+        updateBanForm(form);
+      }
+      const bulk = event.target.closest('#bulk-actions-form');
+      if (bulk) {
+        if (event.target.id === 'select-all') {
+          bulk.querySelectorAll('.ban-checkbox').forEach(box => { box.checked = event.target.checked; });
+        }
+        updateSelection(bulk);
+      }
+    });
+
+    document.addEventListener('input', event => {
+      const form = event.target.closest('[data-beskar-ban-form]');
+      if (!form) return;
+      if (event.target.id === 'banned_ip_expires_at' && event.target.value) {
+        form.querySelectorAll('[name="duration"]').forEach(input => { input.checked = false; });
+      }
+      updateBanForm(form);
+    });
+
+    document.addEventListener('click', event => {
+      if (!event.target.closest('[data-beskar-dashboard]')) return;
+      const clear = event.target.closest('[data-beskar-clear-selection]');
+      if (clear) {
+        const form = clear.closest('form');
+        form.querySelectorAll('.ban-checkbox').forEach(box => { box.checked = false; });
+        updateSelection(form);
+      }
+      const extend = event.target.closest('[data-beskar-extend-hours]');
+      if (extend) {
+        const form = extend.closest('form');
+        const expiry = form.querySelector('#banned_ip_expires_at');
+        // The displayed wall-clock value is UTC, never browser-local time.
+        const base = expiry.value ? Date.parse(`${expiry.value}Z`) : Date.now();
+        if (Number.isFinite(base)) {
+          expiry.value = new Date(Math.max(base, Date.now()) + Number(extend.dataset.beskarExtendHours) * 3600000).toISOString().slice(0, -1);
+          updateBanForm(form);
+        }
+      }
+      const permanent = event.target.closest('[data-beskar-make-permanent]');
+      if (permanent) {
+        const form = permanent.closest('form');
+        form.querySelector('[name="banned_ip[permanent]"][value="true"]').checked = true;
+        updateBanForm(form);
+      }
+    });
+
+    document.addEventListener('submit', event => {
+      if (!event.target.closest('[data-beskar-dashboard]')) return;
+      const message = event.submitter?.dataset.beskarConfirm;
+      if (message && !window.confirm(message)) event.preventDefault();
+      // Do not synthesize forms, bypass validation, or convert duration presets
+      // to client-clock timestamps. Rails forms carry CSRF and method fields.
+    });
+
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initialize, { once: true });
+    else initialize();
+    document.addEventListener('pageshow', initialize);
+    document.addEventListener('turbo:load', initialize);
+  })();
+<% end %>