feat: implement authentication modal and update dashboard password handling
This commit is contained in:
@@ -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 %}
|
||||
|
||||
39
src/templates/jinja2/dashboard/partials/auth_modal.html
Normal file
39
src/templates/jinja2/dashboard/partials/auth_modal.html
Normal 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()">×</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>
|
||||
Reference in New Issue
Block a user