Malin/krawl.es
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement FastAPI authentication with password protection for admin panel

Browse Source
This commit is contained in:
Lorenzo Venerandi
2026-03-06 22:19:59 +01:00
parent 755de7f231
commit 18536f0706
8 changed files with 188 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/templates/jinja2/dashboard/index.html
View File

@@ -59,6 +59,19 @@
<a class="tab-button" :class="{ active: tab === 'ip-insight', disabled: !insightIp }" @click.prevent="insightIp && switchToIpInsight()" href="#ip-insight">
IP Insight<span x-show="insightIp" x-text="' (' + insightIp + ')'"></span>
</a>
<a class="tab-button tab-right" :class="{ active: tab === 'admin' }" x-show="authenticated" x-cloak @click.prevent="switchToAdmin()" href="#admin">Admin</a>
{# Lock icon (not authenticated) #}
<a class="tab-button tab-lock-btn" :class="{ 'tab-right': !authenticated }" @click.prevent="promptAuth()" x-show="!authenticated" href="#" title="Unlock protected panels">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M4 4a4 4 0 0 1 8 0v2h.25c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-5.5C2 6.784 2.784 6 3.75 6H4Zm8.25 3.5h-8.5a.25.25 0 0 0-.25.25v5.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25ZM10.5 6V4a2.5 2.5 0 1 0-5 0v2Z"/>
</svg>
</a>
{# Logout icon (authenticated) #}
<a class="tab-button tab-lock-btn" @click.prevent="logout()" x-show="authenticated" x-cloak href="#" title="Logout">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm10.44 4.5-1.97-1.97a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.97-1.97H6.75a.75.75 0 0 1 0-1.5Z"/>
</svg>
</a>
</div>
{# ==================== OVERVIEW TAB ==================== #}
@@ -184,6 +197,11 @@
</div>
</div>
{# ==================== ADMIN TAB (protected, loaded via HTMX with server-side auth) ==================== #}
<div x-show="tab === 'admin'" x-cloak>
<div id="admin-htmx-container"></div>
</div>
{# Raw request modal - Alpine.js #}
{% include "dashboard/partials/raw_request_modal.html" %}

4
src/templates/jinja2/dashboard/partials/admin_panel.html Normal file
View File

@@ -0,0 +1,4 @@
<div class="table-container" style="text-align: center; padding: 60px 20px;">
<h2 style="color: #58a6ff;">Admin Panel</h2>
<p style="color: #8b949e; font-size: 16px;">This is a protected panel. More features coming soon.</p>
</div>

17
src/templates/static/css/dashboard.css
View File

@@ -854,6 +854,23 @@ tbody {
color: #484f58;
background: transparent;
}
.tab-right {
margin-left: auto;
}
.tab-lock-btn {
display: flex;
align-items: center;
padding: 12px 16px;
color: #8b949e;
}
.tab-lock-btn:hover {
color: #f0883e;
background: #1c2128;
}
.tab-lock-btn svg {
width: 16px;
height: 16px;
}
.tab-content {
display: none;
}

61
src/templates/static/js/dashboard.js
View File

@@ -20,7 +20,16 @@ document.addEventListener('alpine:init', () => {
// IP Insight state
insightIp: null,
init() {
// Auth state (UI only — actual security enforced server-side via cookie)
authenticated: false,
async init() {
// Check if already authenticated (cookie-based)
try {
const resp = await fetch(`${this.dashboardPath}/api/auth/check`, { credentials: 'same-origin' });
if (resp.ok) this.authenticated = true;
} catch {}
// Handle hash-based tab routing
const hash = window.location.hash.slice(1);
if (hash === 'ip-stats' || hash === 'attacks') {
@@ -32,8 +41,9 @@ document.addEventListener('alpine:init', () => {
const h = window.location.hash.slice(1);
if (h === 'ip-stats' || h === 'attacks') {
this.switchToAttacks();
} else if (h === 'admin') {
if (this.authenticated) this.switchToAdmin();
} else if (h !== 'ip-insight') {
// Don't switch away from ip-insight via hash if already there
if (this.tab !== 'ip-insight') {
this.switchToOverview();
}
@@ -61,6 +71,53 @@ document.addEventListener('alpine:init', () => {
window.location.hash = '#overview';
},
switchToAdmin() {
if (!this.authenticated) return;
this.tab = 'admin';
window.location.hash = '#admin';
this.$nextTick(() => {
const container = document.getElementById('admin-htmx-container');
if (container && typeof htmx !== 'undefined') {
htmx.ajax('GET', `${this.dashboardPath}/htmx/admin`, {
target: '#admin-htmx-container',
swap: 'innerHTML'
});
}
});
},
async logout() {
try {
await fetch(`${this.dashboardPath}/api/auth/logout`, {
method: 'POST',
credentials: 'same-origin',
});
} catch {}
this.authenticated = false;
if (this.tab === 'admin') this.switchToOverview();
},
async promptAuth() {
const password = prompt('Enter dashboard password:');
if (!password) return;
try {
const resp = await fetch(`${this.dashboardPath}/api/auth`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ password }),
});
if (resp.ok) {
this.authenticated = true;
this.switchToAdmin();
} else {
alert('Invalid password');
}
} catch {
alert('Authentication failed');
}
},
switchToIpInsight() {
// Only allow switching if an IP is selected
if (!this.insightIp) return;