40 lines
2.1 KiB
HTML
40 lines
2.1 KiB
HTML
{# 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>
|