sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
54 lines
3.8 KiB
HTML
54 lines
3.8 KiB
HTML
<!-- External Dashboard Modal -->
|
|
<div x-cloak x-show="{{ show_state }}" class="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="fixed inset-0 bg-black/50" @click="{{ show_state }} = false"></div>
|
|
<div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl max-w-lg w-full mx-4 border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">External Dashboard</h3>
|
|
<button @click="{{ show_state }} = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="px-6 py-5 space-y-5">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Dashboard URL</h4>
|
|
<div class="flex items-center gap-2">
|
|
<input type="text" readonly value="{{ request.scheme }}://{{ request.get_host }}{% url 'external-dashboard' external_access.access_token %}" class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100" id="dashboard-url">
|
|
<button type="button" onclick="copyToClipboard('dashboard-url','Dashboard URL copied!')" class="px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 shrink-0">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Password</h4>
|
|
<div class="flex items-center gap-2">
|
|
<input type="text" readonly value="{{ external_access.password }}" class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono" id="dashboard-password">
|
|
<button type="button" onclick="copyToClipboard('dashboard-password','Password copied!')" class="px-3 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 shrink-0">Copy</button>
|
|
</div>
|
|
</div>
|
|
{% if external_access.last_accessed_at %}
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">Last Accessed</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">{{ external_access.last_accessed_at|date:"d/m/Y H:i" }}</p>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Status</h4>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if external_access.is_active %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400{% else %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400{% endif %}">
|
|
{{ external_access.is_active|yesno:"Active,Inactive" }}
|
|
</span>
|
|
</div>
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
|
|
<h5 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">Instructions</h5>
|
|
<ol class="text-sm text-blue-800 dark:text-blue-200 space-y-1 list-decimal list-inside">
|
|
<li>Share the Dashboard URL with your external users</li>
|
|
<li>Provide them with the password for access</li>
|
|
<li>Users will be able to view project progress and tickets</li>
|
|
</ol>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-1">
|
|
<form method="post" action="{% url 'external-access-regenerate-project' project.id %}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="dk-btn dk-btn-ghost text-sm text-amber-600"><i class="fas fa-undo mr-1"></i>Regenerate</button>
|
|
</form>
|
|
<button @click="{{ show_state }} = false" class="dk-btn dk-btn-ghost text-sm">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|