Use HTML swap to display success and error messages
This commit is contained in:
Alphonse Paix
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Admin Dashboard - zero2prod{% endblock %}
|
||||
{% block title %}Dashboard - zero2prod{% endblock %}
|
||||
{% block content %}
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="mb-8">
|
||||
@@ -7,6 +7,15 @@
|
||||
<p class="mt-2 text-gray-600">
|
||||
Connected as <span class="font-bold">{{ username }}</span>
|
||||
</p>
|
||||
<form action="/admin/logout" method="post" class="inline">
|
||||
<button type="submit"
|
||||
class="flex items-center text-sm text-gray-500 hover:text-red-600 transition-colors cursor-pointer gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
|
||||
@@ -99,7 +108,10 @@
|
||||
<p class="text-sm text-gray-600 mt-1">Create and send a newsletter issue.</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form action="/admin/newsletters" method="post" class="space-y-4">
|
||||
<form hx-post="/admin/newsletters"
|
||||
hx-target="#newsletter-messages"
|
||||
hx-swap="innerHTML"
|
||||
class="space-y-4">
|
||||
<input type="hidden" name="idempotency_key" value="{{ idempotency_key }}" />
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700 mb-2">Title</label>
|
||||
@@ -107,7 +119,6 @@
|
||||
id="title"
|
||||
name="title"
|
||||
required
|
||||
placeholder="Enter newsletter title..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -116,7 +127,6 @@
|
||||
name="html"
|
||||
rows="6"
|
||||
required
|
||||
placeholder="Enter HTML content..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
@@ -125,7 +135,6 @@
|
||||
name="text"
|
||||
rows="6"
|
||||
required
|
||||
placeholder="Enter plain text content..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
|
||||
</div>
|
||||
<button type="submit"
|
||||
@@ -138,6 +147,7 @@
|
||||
</svg>
|
||||
Send
|
||||
</button>
|
||||
<div id="newsletter-messages" class="mt-4"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,7 +165,10 @@
|
||||
<p class="text-sm text-gray-600 mt-1">Set a new password for your account.</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form action="/admin/password" method="post" class="space-y-4">
|
||||
<form hx-post="/admin/password"
|
||||
hx-target="#password-messages"
|
||||
hx-swap="innerHTML"
|
||||
class="space-y-4">
|
||||
<div>
|
||||
<label for="current_password"
|
||||
class="block text-sm font-medium text-gray-700 mb-2">Current password</label>
|
||||
@@ -193,60 +206,10 @@
|
||||
</svg>
|
||||
Update password
|
||||
</button>
|
||||
<div id="password-messages" class="mt-4"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 bg-white rounded-lg shadow-md border border-gray-200">
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Recent activity</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
||||
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
|
||||
<svg class="w-4 h-4 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">Newsletter "Weekly Update #23" sent</p>
|
||||
<p class="text-xs text-gray-500">2 hours ago • 2,143 recipients</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
||||
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
|
||||
<svg class="w-4 h-4 text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">5 new subscribers confirmed</p>
|
||||
<p class="text-xs text-gray-500">1 day ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
|
||||
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
|
||||
<svg class="w-4 h-4 text-purple-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">Password changed successfully</p>
|
||||
<p class="text-xs text-gray-500">3 days ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user