Use HTML swap to display success and error messages

Cargo.lock

@@ -229,32 +229,6 @@ dependencies = [
  "tracing",
 ]
 
-[[package]]
-name = "axum-extra"
-version = "0.10.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45bf463831f5131b7d3c756525b305d40f1185b688565648a92e1392ca35713d"
-dependencies = [
- "axum",
- "axum-core",
- "bytes",
- "cookie",
- "form_urlencoded",
- "futures-util",
- "http",
- "http-body",
- "http-body-util",
- "mime",
- "pin-project-lite",
- "rustversion",
- "serde",
- "serde_html_form",
- "serde_path_to_error",
- "tower",
- "tower-layer",
- "tower-service",
-]
-
 [[package]]
 name = "axum-macros"
 version = "0.5.0"
@@ -266,22 +240,6 @@ dependencies = [
  "syn",
 ]
 
-[[package]]
-name = "axum-messages"
-version = "0.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d67ce6e7bc1e1e71f2a4e86d418045a29c63c4ebb631f3d9bb2f81c4958ea391"
-dependencies = [
- "axum-core",
- "http",
- "parking_lot",
- "serde",
- "serde_json",
- "tower",
- "tower-sessions-core",
- "tracing",
-]
-
 [[package]]
 name = "axum-server"
 version = "0.7.2"
@@ -1141,12 +1099,6 @@ dependencies = [
  "windows-sys 0.59.0",
 ]
 
-[[package]]
-name = "htmlescape"
-version = "0.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e9025058dae765dee5070ec375f591e2ba14638c63feff74f13805a72e523163"
-
 [[package]]
 name = "http"
 version = "1.3.1"
@@ -1464,15 +1416,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "keccak"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ecc2af9a1119c51f12a14607e783cb977bde58bc069ff0c3da1095e635d70654"
-dependencies = [
- "cpufeatures",
-]
-
 [[package]]
 name = "lazy_static"
 version = "1.5.0"
@@ -2456,19 +2399,6 @@ dependencies = [
  "syn",
 ]
 
-[[package]]
-name = "serde_html_form"
-version = "0.2.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9d2de91cf02bbc07cde38891769ccd5d4f073d22a40683aa4bc7a95781aaa2c4"
-dependencies = [
- "form_urlencoded",
- "indexmap",
- "itoa",
- "ryu",
- "serde",
-]
-
 [[package]]
 name = "serde_json"
 version = "1.0.143"
@@ -2534,16 +2464,6 @@ dependencies = [
  "digest",
 ]
 
-[[package]]
-name = "sha3"
-version = "0.10.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75872d278a8f37ef87fa0ddbda7802605cb18344497949862c0d4dcb291eba60"
-dependencies = [
- "digest",
- "keccak",
-]
-
 [[package]]
 name = "sharded-slab"
 version = "0.1.7"
@@ -3924,15 +3844,12 @@ dependencies = [
  "argon2",
  "askama",
  "axum",
- "axum-extra",
- "axum-messages",
  "axum-server",
  "base64 0.22.1",
  "chrono",
  "claims",
  "config",
  "fake",
- "htmlescape",
  "linkify",
  "once_cell",
  "quickcheck",
@@ -3944,7 +3861,6 @@ dependencies = [
  "serde-aux",
  "serde_json",
  "serde_urlencoded",
- "sha3",
  "sqlx",
  "thiserror",
  "tokio",

Cargo.toml

@@ -16,13 +16,10 @@ anyhow = "1.0.99"
 argon2 = { version = "0.5.3", features = ["std"] }
 askama = "0.14.0"
 axum = { version = "0.8.4", features = ["macros"] }
-axum-extra = { version = "0.10.1", features = ["query", "cookie"] }
-axum-messages = "0.8.0"
 axum-server = { version = "0.7.2", features = ["tls-rustls-no-provider"] }
 base64 = "0.22.1"
 chrono = { version = "0.4.41", default-features = false, features = ["clock"] }
 config = "0.15.14"
-htmlescape = "0.3.1"
 rand = { version = "0.9.2", features = ["std_rng"] }
 reqwest = { version = "0.12.23", default-features = false, features = [
     "rustls-tls",
@@ -32,7 +29,6 @@ reqwest = { version = "0.12.23", default-features = false, features = [
 secrecy = { version = "0.10.3", features = ["serde"] }
 serde = { version = "1.0.219", features = ["derive"] }
 serde-aux = "4.7.0"
-sha3 = "0.10.8"
 sqlx = { version = "0.8.6", features = [
     "runtime-tokio-rustls",
     "macros",

src/email_client.rs

@@ -137,7 +137,7 @@ mod tests {
         Mock::given(header_exists("Authorization"))
             .and(header("Content-Type", "application/json"))
             .and(header("X-Requested-With", "XMLHttpRequest"))
-            .and(path("v1/email"))
+            .and(path("email"))
             .and(method("POST"))
             .and(SendEmailBodyMatcher)
             .respond_with(ResponseTemplate::new(200))

src/lib.rs

@@ -8,3 +8,4 @@ pub mod routes;
 pub mod session_state;
 pub mod startup;
 pub mod telemetry;
+pub mod templates;

src/routes/admin.rs

@@ -2,12 +2,12 @@ pub mod change_password;
 pub mod dashboard;
 pub mod newsletters;
 
-use crate::{routes::error_chain_fmt, session_state::TypedSession};
+use crate::{routes::error_chain_fmt, session_state::TypedSession, templates::ErrorTemplate};
+use askama::Template;
 use axum::{
     Json,
-    response::{IntoResponse, Redirect, Response},
+    response::{Html, IntoResponse, Redirect, Response},
 };
-use axum_messages::Messages;
 pub use change_password::*;
 pub use dashboard::*;
 pub use newsletters::*;
@@ -20,7 +20,7 @@ pub enum AdminError {
     #[error("Trying to access admin dashboard without authentication.")]
     NotAuthenticated,
     #[error("Updating password failed.")]
-    ChangePassword,
+    ChangePassword(String),
     #[error("Could not publish newsletter.")]
     Publish(#[source] anyhow::Error),
     #[error("The idempotency key was invalid.")]
@@ -51,8 +51,18 @@ impl IntoResponse for AdminError {
             )
                 .into_response(),
             AdminError::NotAuthenticated => Redirect::to("/login").into_response(),
-            AdminError::ChangePassword => Redirect::to("/admin/password").into_response(),
+            AdminError::ChangePassword(e) => {
-            AdminError::Publish(_) => Redirect::to("/admin/newsletters").into_response(),
+                let template = ErrorTemplate {
+                    error_message: e.to_owned(),
+                };
+                Html(template.render().unwrap()).into_response()
+            }
+            AdminError::Publish(e) => {
+                let template = ErrorTemplate {
+                    error_message: e.to_string(),
+                };
+                Html(template.render().unwrap()).into_response()
+            }
             AdminError::Idempotency(e) => {
                 (StatusCode::BAD_REQUEST, Json(ErrorResponse { message: e })).into_response()
             }
@@ -60,9 +70,8 @@ impl IntoResponse for AdminError {
     }
 }
 
-#[tracing::instrument(name = "Logging out", skip(messages, session))]
+#[tracing::instrument(name = "Logging out", skip(session))]
-pub async fn logout(messages: Messages, session: TypedSession) -> Result<Response, AdminError> {
+pub async fn logout(session: TypedSession) -> Result<Response, AdminError> {
     session.clear().await;
-    messages.success("You have successfully logged out.");
     Ok(Redirect::to("/login").into_response())
 }

src/routes/admin/change_password.rs

@@ -2,13 +2,14 @@ use crate::{
     authentication::{self, AuthenticatedUser, Credentials, validate_credentials},
     routes::AdminError,
     startup::AppState,
+    templates::SuccessTemplate,
 };
+use askama::Template;
 use axum::{
     Extension, Form,
     extract::State,
-    response::{IntoResponse, Redirect, Response},
+    response::{Html, IntoResponse, Response},
 };
-use axum_messages::Messages;
 use secrecy::{ExposeSecret, SecretString};
 
 #[derive(serde::Deserialize)]
@@ -23,7 +24,6 @@ pub async fn change_password(
     State(AppState {
         connection_pool, ..
     }): State<AppState>,
-    messages: Messages,
     Form(form): Form<PasswordFormData>,
 ) -> Result<Response, AdminError> {
     let credentials = Credentials {
@@ -31,23 +31,26 @@ pub async fn change_password(
         password: form.current_password,
     };
     if form.new_password.expose_secret() != form.new_password_check.expose_secret() {
-        messages.error("You entered two different passwords - the field values must match.");
+        Err(AdminError::ChangePassword(
-        Err(AdminError::ChangePassword)
+            "You entered two different passwords - the field values must match.".to_string(),
+        ))
     } else if validate_credentials(credentials, &connection_pool)
         .await
         .is_err()
     {
-        messages.error("The current password is incorrect.");
+        Err(AdminError::ChangePassword(
-        Err(AdminError::ChangePassword)
+            "The current password is incorrect.".to_string(),
+        ))
     } else if let Err(e) = verify_password(form.new_password.expose_secret()) {
-        messages.error(e);
+        Err(AdminError::ChangePassword(e))
-        Err(AdminError::ChangePassword)
     } else {
         authentication::change_password(user_id, form.new_password, &connection_pool)
             .await
-            .map_err(|_| AdminError::ChangePassword)?;
+            .map_err(|e| AdminError::ChangePassword(e.to_string()))?;
-        messages.success("Your password has been changed.");
+        let template = SuccessTemplate {
-        Ok(Redirect::to("/admin/password").into_response())
+            success_message: "Your password has been changed.".to_string(),
+        };
+        Ok(Html(template.render().unwrap()).into_response())
     }
 }
 

src/routes/admin/newsletters.rs

@@ -3,14 +3,15 @@ use crate::{
     idempotency::{IdempotencyKey, save_response, try_processing},
     routes::AdminError,
     startup::AppState,
+    templates::SuccessTemplate,
 };
 use anyhow::Context;
+use askama::Template;
 use axum::{
     Extension, Form,
     extract::State,
-    response::{IntoResponse, Redirect, Response},
+    response::{Html, IntoResponse, Response},
 };
-use axum_messages::Messages;
 use sqlx::{Executor, Postgres, Transaction};
 use uuid::Uuid;
 
@@ -67,20 +68,15 @@ async fn enqueue_delivery_tasks(
     Ok(())
 }
 
-#[tracing::instrument(
+#[tracing::instrument(name = "Publishing a newsletter", skip(connection_pool, form))]
-    name = "Publishing a newsletter",
-    skip(connection_pool, form, messages)
-)]
 pub async fn publish_newsletter(
     State(AppState {
         connection_pool, ..
     }): State<AppState>,
     Extension(AuthenticatedUser { user_id, .. }): Extension<AuthenticatedUser>,
-    messages: Messages,
     Form(form): Form<BodyData>,
 ) -> Result<Response, AdminError> {
     if let Err(e) = validate_form(&form) {
-        messages.error(e);
         return Err(AdminError::Publish(anyhow::anyhow!(e)));
     }
 
@@ -89,17 +85,9 @@ pub async fn publish_newsletter(
         .try_into()
         .map_err(AdminError::Idempotency)?;
 
-    let success_message = || {
-        messages.success(format!(
-            "The newsletter issue '{}' has been published!",
-            form.title
-        ))
-    };
-
     let mut transaction = match try_processing(&connection_pool, &idempotency_key, user_id).await? {
         crate::idempotency::NextAction::StartProcessing(t) => t,
         crate::idempotency::NextAction::ReturnSavedResponse(response) => {
-            success_message();
             return Ok(response);
         }
     };
@@ -112,8 +100,12 @@ pub async fn publish_newsletter(
         .await
         .context("Failed to enqueue delivery tasks")?;
 
-    let response = Redirect::to("/admin/newsletters").into_response();
+    let success_message = format!(
-    success_message();
+        r#"The newsletter issue "{}" has been published!"#,
+        form.title
+    );
+    let template = SuccessTemplate { success_message };
+    let response = Html(template.render().unwrap()).into_response();
     save_response(transaction, &idempotency_key, user_id, response)
         .await
         .map_err(AdminError::UnexpectedError)

src/routes/home.rs

@@ -1,19 +1,10 @@
 use askama::Template;
 use axum::response::Html;
-use axum_messages::Messages;
 
 #[derive(Template)]
 #[template(path = "../templates/home.html")]
-struct HomeTemplate {
+struct HomeTemplate;
-    message: String,
-}
 
-pub async fn home(messages: Messages) -> Html<String> {
+pub async fn home() -> Html<String> {
-    let template = HomeTemplate {
+    Html(HomeTemplate.render().unwrap())
-        message: messages
-            .last()
-            .map(|msg| msg.to_string())
-            .unwrap_or_default(),
-    };
-    Html(template.render().unwrap())
 }

src/routes/login.rs

@@ -3,6 +3,7 @@ use crate::{
     routes::error_chain_fmt,
     session_state::TypedSession,
     startup::AppState,
+    templates::ErrorTemplate,
 };
 use askama::Template;
 use axum::{
@@ -10,7 +11,6 @@ use axum::{
     extract::State,
     response::{Html, IntoResponse, Redirect, Response},
 };
-use axum_messages::Messages;
 use reqwest::StatusCode;
 use secrecy::SecretString;
 
@@ -45,16 +45,19 @@ impl IntoResponse for LoginError {
                 }),
             )
                 .into_response(),
-            LoginError::AuthError(_) => Redirect::to("/login").into_response(),
+            LoginError::AuthError(e) => {
+                let template = ErrorTemplate {
+                    error_message: e.to_string(),
+                };
+                Html(template.render().unwrap()).into_response()
+            }
         }
     }
 }
 
 #[derive(Template)]
 #[template(path = "../templates/login.html")]
-struct LoginTemplate {
+struct LoginTemplate;
-    error: String,
-}
 
 #[derive(serde::Deserialize)]
 pub struct LoginFormData {
@@ -62,19 +65,12 @@ pub struct LoginFormData {
     password: SecretString,
 }
 
-pub async fn get_login(messages: Messages) -> Html<String> {
+pub async fn get_login() -> Html<String> {
-    let template = LoginTemplate {
+    Html(LoginTemplate.render().unwrap())
-        error: messages
-            .last()
-            .map(|msg| msg.to_string())
-            .unwrap_or_default(),
-    };
-    Html(template.render().unwrap())
 }
 
 pub async fn post_login(
     session: TypedSession,
-    messages: Messages,
     State(AppState {
         connection_pool, ..
     }): State<AppState>,
@@ -89,11 +85,7 @@ pub async fn post_login(
         Err(e) => {
             let e = match e {
                 AuthError::UnexpectedError(_) => LoginError::UnexpectedError(e.into()),
-                AuthError::InvalidCredentials(_) => {
+                AuthError::InvalidCredentials(_) => LoginError::AuthError(e.into()),
-                    let e = LoginError::AuthError(e.into());
-                    messages.error(e.to_string());
-                    e
-                }
                 AuthError::NotAuthenticated => unreachable!(),
             };
             Err(e)

src/routes/subscriptions.rs

@@ -2,15 +2,16 @@ use crate::{
     domain::{NewSubscriber, SubscriberEmail},
     email_client::EmailClient,
     startup::AppState,
+    templates::{ErrorTemplate, SuccessTemplate},
 };
 use anyhow::Context;
+use askama::Template;
 use axum::{
     Form, Json,
     extract::State,
     http::StatusCode,
-    response::{IntoResponse, Redirect, Response},
+    response::{Html, IntoResponse, Response},
 };
-use axum_messages::Messages;
 use chrono::Utc;
 use rand::{Rng, distr::Alphanumeric};
 use serde::Deserialize;
@@ -72,20 +73,22 @@ impl IntoResponse for SubscribeError {
                 }),
             )
                 .into_response(),
-            SubscribeError::ValidationError(_) => Redirect::to("/").into_response(),
+            SubscribeError::ValidationError(e) => {
+                let template = ErrorTemplate { error_message: e };
+                Html(template.render().unwrap()).into_response()
+            }
         }
     }
 }
 
 #[tracing::instrument(
     name = "Adding a new subscriber",
-    skip(messages, connection_pool, email_client, base_url, form),
+    skip(connection_pool, email_client, base_url, form),
     fields(
         subscriber_email = %form.email,
     )
 )]
 pub async fn subscribe(
-    messages: Messages,
     State(AppState {
         connection_pool,
         email_client,
@@ -97,7 +100,6 @@ pub async fn subscribe(
     let new_subscriber = match form.try_into() {
         Ok(new_sub) => new_sub,
         Err(e) => {
-            messages.error(&e);
             return Err(SubscribeError::ValidationError(e));
         }
     };
@@ -124,8 +126,10 @@ pub async fn subscribe(
         .commit()
         .await
         .context("Failed to commit the database transaction to store a new subscriber.")?;
-    messages.success("A confirmation email has been sent.");
+    let template = SuccessTemplate {
-    Ok(Redirect::to("/").into_response())
+        success_message: "A confirmation email has been sent.".to_string(),
+    };
+    Ok(Html(template.render().unwrap()).into_response())
 }
 
 #[tracing::instrument(

src/startup.rs

@@ -8,7 +8,6 @@ use axum::{
     middleware,
     routing::{get, post},
 };
-use axum_messages::MessagesManagerLayer;
 use axum_server::tls_rustls::RustlsConfig;
 use secrecy::ExposeSecret;
 use sqlx::{PgPool, postgres::PgPoolOptions};
@@ -147,7 +146,6 @@ pub fn app(
                 )
             }),
         )
-        .layer(MessagesManagerLayer)
         .layer(SessionManagerLayer::new(redis_store).with_secure(false))
         .with_state(app_state)
 }

src/templates.rs

@@ -0,0 +1,13 @@
+use askama::Template;
+
+#[derive(Template)]
+#[template(path = "../templates/success.html")]
+pub struct SuccessTemplate {
+    pub success_message: String,
+}
+
+#[derive(Template)]
+#[template(path = "../templates/error.html")]
+pub struct ErrorTemplate {
+    pub error_message: String,
+}

templates/dashboard.html

@@ -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 %}

templates/error.html

@@ -0,0 +1,9 @@
+<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-4">
+    <div class="flex items-center">
+        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd">
+            </path>
+        </svg>
+        <span class="font-medium">{{ error_message }}</span>
+    </div>
+</div>

templates/home.html

@@ -74,11 +74,14 @@
       <div class="max-w-2xl mx-auto text-center">
         <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
         <p class="text-gray-600 mb-6">Subscribe to our newsletter to get the latest updates.</p>
-        <form action="/subscriptions" method="post" class="max-w-md mx-auto">
+        <form hx-post="/subscriptions"
+              hx-target="#subscribe-messages"
+              hx-swap="innerHTML"
+              class="max-w-md mx-auto">
           <div class="flex flex-col sm:flex-row gap-3">
             <input type="email"
                    name="email"
-                   placeholder="Enter your email address"
+                   placeholder="you@example.com"
                    required
                    class="flex-1 px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
             <button type="submit"
@@ -86,8 +89,8 @@
               Subscribe
             </button>
           </div>
+          <div id="subscribe-messages" class="mt-4"></div>
         </form>
-        <div class="mt-4">{{ message }}</div>
       </div>
     </div>
     <div class="mt-8 bg-gray-50 rounded-lg p-6">

templates/login.html

@@ -8,7 +8,10 @@
         <p class="mt-2 text-sm text-gray-600">Sign in to access the admin dashboard.</p>
       </div>
       <div class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
-        <form action="/login" method="post" class="space-y-6">
+        <form hx-post="/login"
+              hx-target="#login-messages"
+              hx-swap="innerHTML"
+              class="space-y-6">
           <div>
             <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
             <input type="text"
@@ -31,8 +34,8 @@
               Continue
             </button>
           </div>
+          <div id="login-messages" class="mt-4"></div>
         </form>
-        <div class="mt-4 text-center">{{ error }}</div>
       </div>
       <div class="text-center">
         <a href="/"

templates/success.html

@@ -0,0 +1,9 @@
+<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md mb-4">
+    <div class="flex items-center">
+        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd">
+            </path>
+        </svg>
+        <span class="font-medium">{{ success_message }}</span>
+    </div>
+</div>