shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement audit logs system, request extractor, admin log panel, and dedicated documentation

Browse Source 
- Added an enterprise-grade, request-scoped AuditLogger extractor in Axum.
- Configured MongoDB persistence for structured, replayable audit logs (capturing timestamp, user, action, type, payload snapshot, client IP with proxy header support, and User-Agent).
- Created a live Administrator console at /auth/audit to filter and inspect log events.
- Re-architected documentation by moving Design Wiki pages out of /components into a dedicated /docs route.
- Published logging architecture documentation at /docs/logging.
This commit is contained in:
Enciphered
2026-05-30 18:23:49 +05:00
parent f6ea8a99d9
commit 4c98dd93ad
34 changed files with 1389 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/docs/inputs.html
+178
View File
@@ -0,0 +1,178 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Form Fields & Select - Design System Wiki{% endblock %}
{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
<!-- Left Navigation Sidebar -->
{% include "docs/sidebar.html" %}
<!-- Main Content -->
<div class="flex-1 space-y-8">
<!-- Header -->
<div class="pb-6 border-b border-border">
<span class="text-xs font-semibold text-indigo-400">Forms & Inputs</span>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Form Fields & Select</h1>
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
Standard text inputs, passwords, multi-line textareas, and custom styled select dropdown elements overdrawn by vector SVG chevron arrows.
</p>
</div>
<!-- Section Fields -->
<section class="space-y-4">
<h2 class="text-lg font-bold text-slate-200">Form Inputs & Select Menu Showcase</h2>
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
<!-- Tab Headers -->
<div class="flex border-b border-border/60 pb-1.5">
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'input-sandbox')">Interactive Demo</button>
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'input-code')">HTML Markup</button>
</div>
<!-- Demo Viewport -->
<div id="input-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
<!-- Text field using macro -->
{{ ui::text_input(id="demo-username", name="username", label="Username Input", type="text", placeholder="e.g. dev_alice") }}
<!-- Password field using macro -->
{{ ui::text_input(id="demo-password", name="password", label="Security Password", type="password", placeholder="••••••••") }}
<!-- Textarea using macro -->
{{ ui::textarea(id="demo-details", name="details", label="Task Details", placeholder="Provide a detailed description of the task requirements...") }}
<!-- Custom Styled Select Dropdown using paired macros -->
{{ ui::select_open(name="specialization", label="Developer Specialization", current_value="Senior Rust Engineer", current_text="Senior Rust Engineer") }}
{{ ui::select_item(value="Senior Rust Engineer", label="Senior Rust Engineer", is_selected=true) }}
{{ ui::select_item(value="Frontend Architect", label="Frontend Architect") }}
{{ ui::select_item(value="DevOps Lead", label="DevOps Lead") }}
{{ ui::select_item(value="Database Administrator", label="Database Administrator") }}
{{ ui::select_close() }}
</div>
<!-- Code Snippet Area -->
<div id="input-code" class="wiki-pane hidden">
<div class="relative group">
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
&lt;!-- Styled Text Input --&gt;
{{ "{{" }} ui::text_input(id="demo-username", name="username", label="Username Input", type="text", placeholder="e.g. dev_alice") {{ "}}" }}
&lt;!-- Styled Password Input --&gt;
{{ "{{" }} ui::text_input(id="demo-password", name="password", label="Security Password", type="password", placeholder="••••••••") {{ "}}" }}
&lt;!-- Styled Textarea --&gt;
{{ "{{" }} ui::textarea(id="demo-details", name="details", label="Task Details", placeholder="Provide a detailed description...") {{ "}}" }}
&lt;!-- Custom Styled Select Dropdown --&gt;
{{ "{{" }} ui::select_open(name="specialization", label="Developer Specialization", current_value="Senior Rust Engineer", current_text="Senior Rust Engineer") {{ "}}" }}
{{ "{{" }} ui::select_item(value="Senior Rust Engineer", label="Senior Rust Engineer", is_selected=true) {{ "}}" }}
{{ "{{" }} ui::select_item(value="Frontend Architect", label="Frontend Architect") {{ "}}" }}
{{ "{{" }} ui::select_item(value="DevOps Lead", label="DevOps Lead") {{ "}}" }}
{{ "{{" }} ui::select_close() {{ "}}" }}</code></pre>
</div>
</div>
</div>
</section>
<!-- Global JS Bindings Documentation -->
<section class="space-y-4 border-t border-border/60 pt-6">
<h2 class="text-lg font-bold text-slate-200">How the Global Custom Select JS Works</h2>
<p class="text-xs text-muted-foreground leading-relaxed">
The global script <code>components.js</code> monitors specific class names to run the premium custom select elements. Ensure your markup uses these selectors to integrate selection, triggers, and keyboard arrow controls:
</p>
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
<table class="w-full border-collapse text-left text-xs">
<thead>
<tr class="border-b border-border text-muted-foreground font-bold">
<th class="pb-2.5 w-1/4">Selector / Class</th>
<th class="pb-2.5 w-1/4">Type</th>
<th class="pb-2.5">Behavior & Purpose</th>
</tr>
</thead>
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-select</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Outer wrapper for the entire select component. Scopes and isolates input values and popovers.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-value</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Applied to the <code>&lt;input type="hidden"&gt;</code> that stores the raw value submitted to forms.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-trigger</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
The visible button that user clicks. Toggles popover visibility and chevron rotation on click.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-text</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Inner text element inside trigger button that dynamically changes its text content to match the selected option.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-chevron</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Arrow SVG icon. Rotates 180 degrees (adds <code>rotate-180</code>) when the menu opens.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-popover</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Floating list container. Starts with the class <code>hidden</code>. Positioned absolutely.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-item</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Applied to choices inside popover (usually buttons). Must have <code>data-value="..."</code> containing the raw option value.
</td>
</tr>
</tbody>
</table>
</div>
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
<p class="text-slate-400 leading-normal">
You can customize the button trigger layout (paddings, chevrons, fonts, sizing), borders, shadows, options listing alignment, and checkmark icons. Ensure you preserve the classes <code>.custom-select</code>, <code>.select-value</code>, <code>.select-trigger</code>, <code>.select-popover</code>, and <code>.select-item</code> with its <code>data-value</code> attribute so that mouse selections and keyboard arrows function correctly.
</p>
</div>
</section>
</div>
</div>
<script>
function toggleWikiTabs(btn, paneId) {
const card = btn.closest('.border-border');
if (!card) return;
card.querySelectorAll('button').forEach(b => {
b.classList.remove('border-sky-500', 'text-sky-400');
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
});
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
btn.classList.add('border-sky-500', 'text-sky-400');
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
const target = card.querySelector('#' + paneId);
if (target) target.classList.remove('hidden');
}
</script>
{% endblock %}