Confirmation page and minor improvements to homepage and form messages

Basic redirect with flash messages for success and error messages
2025-09-16 16:47:28 +02:00
parent f948728348
commit b736e2fe8d
12 changed files with 102 additions and 75 deletions
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -2,7 +2,6 @@ mod admin;
 mod health_check;
 mod home;
 mod login;
-mod register;
 mod subscriptions;
 mod subscriptions_confirm;

@@ -10,6 +9,5 @@ pub use admin::*;
 pub use health_check::*;
 pub use home::*;
 pub use login::*;
-pub use register::*;
 pub use subscriptions::*;
 pub use subscriptions_confirm::*;
--- a/src/routes/home.rs
+++ b/src/routes/home.rs
@@ -1,11 +1,19 @@
 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() -> Html<String> {
-    let template = HomeTemplate;
+pub async fn home(messages: Messages) -> Html<String> {
+    let template = HomeTemplate {
+        message: messages
+            .last()
+            .map(|msg| msg.to_string())
+            .unwrap_or_default(),
+    };
    Html(template.render().unwrap())
 }
--- a/src/routes/login.rs
+++ b/src/routes/login.rs
@@ -13,7 +13,6 @@ use axum::{
 use axum_messages::Messages;
 use reqwest::StatusCode;
 use secrecy::SecretString;
-use std::fmt::Write;

 #[derive(thiserror::Error)]
 pub enum LoginError {
@@ -54,7 +53,7 @@ impl IntoResponse for LoginError {
 #[derive(Template)]
 #[template(path = "../templates/login.html")]
 struct LoginTemplate {
-    error_html: String,
+    error: String,
 }

 #[derive(serde::Deserialize)]
@@ -64,11 +63,12 @@ pub struct LoginFormData {
 }

 pub async fn get_login(messages: Messages) -> Html<String> {
-    let mut error_html = String::new();
-    for message in messages {
-        writeln!(error_html, "<p><i>{}</i></p>", message).unwrap();
-    }
-    let template = LoginTemplate { error_html };
+    let template = LoginTemplate {
+        error: messages
+            .last()
+            .map(|msg| msg.to_string())
+            .unwrap_or_default(),
+    };
    Html(template.render().unwrap())
 }

--- a/src/routes/register.rs
+++ b/src/routes/register.rs
@@ -1,11 +0,0 @@
-use axum::response::{Html, IntoResponse, Response};
-use axum_messages::Messages;
-use std::fmt::Write;
-
-pub async fn register(messages: Messages) -> Response {
-    let mut error_html = String::new();
-    for message in messages {
-        writeln!(error_html, "<p><i>{}</i></p>", message).unwrap();
-    }
-    Html(format!(include_str!("register/register.html"), error_html)).into_response()
-}
--- a/src/routes/register/confirm.html
+++ b/src/routes/register/confirm.html
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Account confirmed</title>
-  </head>
-  <body>
-    <p>Your account has been confirmed. Welcome!</p>
-  </body>
-</html>
--- a/src/routes/register/register.html
+++ b/src/routes/register/register.html
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Register</title>
-  </head>
-  <body>
-    <form action="/subscriptions" method="post">
-      <input type="text" name="name" placeholder="Name" />
-      <input type="text" name="email" placeholder="Email address" />
-      <input
-        type="text"
-        name="email_check"
-        placeholder="Confirm email address"
-      />
-      <button type="Register">Register</button>
-    </form>
-    {}
-    <p><a href="/">Back</a></p>
-  </body>
-</html>
--- a/src/routes/subscriptions.rs
+++ b/src/routes/subscriptions.rs
@@ -72,7 +72,7 @@ impl IntoResponse for SubscribeError {
                }),
            )
                .into_response(),
-            SubscribeError::ValidationError(_) => Redirect::to("/register").into_response(),
+            SubscribeError::ValidationError(_) => Redirect::to("/").into_response(),
        }
    }
 }
@@ -125,7 +125,7 @@ pub async fn subscribe(
        .await
        .context("Failed to commit the database transaction to store a new subscriber.")?;
    messages.success("A confirmation email has been sent.");
-    Ok(Redirect::to("/register").into_response())
+    Ok(Redirect::to("/").into_response())
 }

 #[tracing::instrument(
--- a/src/routes/subscriptions_confirm.rs
+++ b/src/routes/subscriptions_confirm.rs
@@ -1,4 +1,5 @@
 use crate::startup::AppState;
+use askama::Template;
 use axum::{
    extract::{Query, State},
    http::StatusCode,
@@ -8,6 +9,10 @@ use serde::Deserialize;
 use sqlx::PgPool;
 use uuid::Uuid;

+#[derive(Template)]
+#[template(path = "../templates/confirm.html")]
+struct ConfirmTemplate;
+
 #[tracing::instrument(name = "Confirming new subscriber", skip(params))]
 pub async fn confirm(
    State(AppState {
@@ -27,7 +32,7 @@ pub async fn confirm(
        {
            StatusCode::INTERNAL_SERVER_ERROR.into_response()
        } else {
-            Html(include_str!("register/confirm.html")).into_response()
+            Html(ConfirmTemplate.render().unwrap()).into_response()
        }
    } else {
        StatusCode::UNAUTHORIZED.into_response()
--- a/src/startup.rs
+++ b/src/startup.rs
@@ -127,7 +127,6 @@ pub fn app(
        .layer(middleware::from_fn(require_auth));
    Router::new()
        .route("/", get(home))
-        .route("/register", get(register))
        .route("/login", get(get_login).post(post_login))
        .route("/health_check", get(health_check))
        .route("/subscriptions", post(subscribe))
--- a/templates/confirm.html
+++ b/templates/confirm.html
@@ -0,0 +1,67 @@
+{% extends "base.html" %} {% block title %}zero2prod{% endblock %} {% block
+content %}
+<div class="min-h-[60vh] flex items-center justify-center">
+  <div class="max-w-md w-full space-y-8">
+    <div class="text-center">
+      <div
+        class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-6"
+      >
+        <svg
+          class="h-8 w-8 text-green-600"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M5 13l4 4L19 7"
+          ></path>
+        </svg>
+      </div>
+
+      <h1 class="text-3xl font-bold text-gray-900 mb-4">
+        Subscription confirmed!
+      </h1>
+      <p class="text-lg text-gray-600 mb-8">
+        Your email has been confirmed. You're all set to receive our newsletter
+        updates.
+      </p>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+      <div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
+        <div class="flex">
+          <svg
+            class="h-5 w-5 text-green-400 mt-0.5"
+            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"
+            />
+          </svg>
+          <div class="ml-3">
+            <p class="text-sm font-medium text-green-800">
+              Welcome to our newsletter! You'll receive quality content about
+              Rust backend development straight to your inbox.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center">
+        <a
+          href="/"
+          class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
+        >
+          ← Back to homepage
+        </a>
+      </div>
+    </div>
+  </div>
+  {% endblock %}
+</div>
--- a/templates/home.html
+++ b/templates/home.html
@@ -7,7 +7,7 @@ block content %}
    <div class="max-w-3xl">
      <h1 class="text-4xl font-bold mb-4">zero2prod</h1>
      <p class="text-xl text-blue-100 mb-6">
-        Welcome to my newsletter! Stay updated on my latest projects and
+        Welcome to our newsletter! Stay updated on our latest projects and
        thoughts. Unsubscribe at any time.
      </p>
      <div class="flex flex-col sm:flex-row gap-4">
@@ -28,7 +28,6 @@ block content %}
    </div>
  </div>

-  <!-- Feature Cards -->
  <div class="grid md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
      <div
@@ -113,15 +112,10 @@ block content %}
    <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 my newsletter to get the latest updates.
+        Subscribe to our newsletter to get the latest updates.
      </p>

-      <form
-        hx-post="/subscriptions"
-        hx-target="#subscription-result"
-        hx-swap="innerHTML"
-        class="max-w-md mx-auto"
-      >
+      <form action="/subscriptions" method="post" class="max-w-md mx-auto">
        <div class="flex flex-col sm:flex-row gap-3">
          <input
            type="email"
@@ -139,7 +133,7 @@ block content %}
        </div>
      </form>

-      <div id="subscription-result" class="mt-4"></div>
+      <div class="mt-4">{{ message }}</div>
    </div>
  </div>

@@ -159,12 +153,12 @@ block content %}
        </div>
      </div>
      <div>
-        <div class="text-2xl font-bold text-orange-600">0</div>
+        <div class="text-2xl font-bold text-green-600">0</div>
        <div class="text-sm text-gray-600">email opened</div>
      </div>
      <div>
-        <div class="text-2xl font-bold text-purple-600">~1ms</div>
-        <div class="text-sm text-gray-600">response time</div>
+        <div class="text-2xl font-bold text-purple-600">3</div>
+        <div class="text-sm text-gray-600">issues delivered</div>
      </div>
    </div>
  </div>
--- a/templates/login.html
+++ b/templates/login.html
@@ -5,7 +5,7 @@ block content %}
    <div class="text-center">
      <h2 class="text-3xl font-bold text-gray-900">Login</h2>
      <p class="mt-2 text-sm text-gray-600">
-        Sign in to access the admin dashboard
+        Sign in to access the admin dashboard.
      </p>
    </div>

@@ -53,7 +53,7 @@ block content %}
        </div>
      </form>

-      <div class="mt-4">{{ error_html }}</div>
+      <div class="mt-4 text-center">{{ error }}</div>
    </div>

    <div class="text-center">