feat: implement authentication modal and update dashboard password handling

This commit is contained in:
Lorenzo Venerandi
2026-03-07 17:06:29 +01:00
parent 513a5beccd
commit 4fd5832fdc
5 changed files with 213 additions and 9 deletions

View File

@@ -205,5 +205,8 @@
{# Raw request modal - Alpine.js #}
{% include "dashboard/partials/raw_request_modal.html" %}
{# Auth modal - Alpine.js #}
{% include "dashboard/partials/auth_modal.html" %}
</div>
{% endblock %}

View File

@@ -0,0 +1,39 @@
{# Authentication modal - Alpine.js controlled #}
<div class="auth-modal"
x-show="authModal.show"
x-cloak
@click.self="closeAuthModal()"
@keydown.escape.window="authModal.show && closeAuthModal()"
>
<div class="auth-modal-content">
<div class="auth-modal-header">
<div class="auth-modal-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" 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>
<h3>Authentication Required</h3>
</div>
<span class="auth-modal-close" @click="closeAuthModal()">&times;</span>
</div>
<form class="auth-modal-body" @submit.prevent="submitAuth()">
<p class="auth-modal-description">Enter the dashboard password to access protected panels.</p>
<div class="auth-modal-input-group">
<input type="password"
class="auth-modal-input"
:class="{ 'auth-modal-input-error': authModal.error }"
x-model="authModal.password"
x-ref="authPasswordInput"
placeholder="Password"
autocomplete="off" />
<p class="auth-modal-error" x-show="authModal.error" x-text="authModal.error" x-cloak></p>
</div>
<div class="auth-modal-footer">
<button type="button" class="auth-modal-btn auth-modal-btn-cancel" @click="closeAuthModal()">Cancel</button>
<button type="submit" class="auth-modal-btn auth-modal-btn-submit" :disabled="authModal.loading">
<span x-show="!authModal.loading">Unlock</span>
<span x-show="authModal.loading" x-cloak>Verifying...</span>
</button>
</div>
</form>
</div>
</div>