Server-Rendered Web Apps and Forms

.package(url: "https://github.com/vapor/leaf.git", exact: "4.5.2"),
// ...
.product(name: "Leaf", package: "leaf"),

import Fluent
import FluentSQLiteDriver
import Leaf
import Vapor

func configure(_ app: Application) async throws {
    app.databases.use(.sqlite(.memory), as: .sqlite)
    app.migrations.add(CreateBookshelf())
    try await app.autoMigrate()
    if app.environment != .testing || Environment.get("SEED") == "1" { try await seed(on: app.db) }

    // Templates: Resources/Views, cached only in production so edits show up on reload.
    app.views.use(.leaf)
    app.leaf.cache.isEnabled = app.environment.isRelease

    // Sessions: in-memory (one instance only) with a hardened cookie.
    let secure = app.environment.isRelease
    app.sessions.use(.memory)
    app.sessions.configuration = .init(cookieName: "bookshelf-session") { id in
        HTTPCookies.Value(string: id.string, expires: Date(timeIntervalSinceNow: 8 * 3600), maxAge: nil, domain: nil,
                          path: "/", isSecure: secure, isHTTPOnly: true, sameSite: .lax)
    }

    // Order (outside in): default ErrorMiddleware, sessions, static files, HTML error pages.
    app.middleware.use(app.sessions.middleware)
    app.middleware.use(FileMiddleware(publicDirectory: app.directory.publicDirectory))
    app.middleware.use(HTMLErrorMiddleware())

    app.get { req in req.redirect(to: "/books", redirectType: .normal) }
    // The site's own origin, for the CSRF middleware's Origin check. Set PUBLIC_ORIGIN in production.
    let origin = Environment.get("PUBLIC_ORIGIN") ?? "http://127.0.0.1:8080"
    try app.register(collection: WebBooksController(allowedOrigins: [origin]))
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>#(title) - Bookshelf</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  <meta name="htmx-config" content='{"historyRestoreAsHxRequest": false, "responseHandling": [{"code": "204", "swap": false}, {"code": "[23]..", "swap": true}, {"code": "422", "swap": true}, {"code": "[45]..", "swap": false, "error": true}]}'>
</head>
<body hx-headers='{"X-CSRF-Token": "#(csrf)"}'>
  <a class="visually-hidden-focusable" href="#main">Skip to main content</a>
  <nav class="navbar navbar-expand bg-body-tertiary" aria-label="Main">
    <div class="container">
      <a class="navbar-brand" href="/books">Bookshelf</a>
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="/books">Books</a></li>
        <li class="nav-item"><a class="nav-link" href="/books/new">New book</a></li>
      </ul>
    </div>
  </nav>
  <main id="main" class="container my-4">
    #for(flash in flashes):
    <div class="alert alert-#(flash.kind)" role="#(flash.role)">#(flash.text)</div>
    #endfor
    #import("content")
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.11/dist/htmx.min.js"
          integrity="sha384-2OatzQy1H+Zd/IIrjr1TcuDGqLXeHhbooAyJY1KdQMKnr4LZ22k31GBLdYKHmVjg" crossorigin="anonymous"></script>
</body>
</html>

import Vapor

/// A one-shot message shown on the next page (Bootstrap alert colour in `kind`).
struct FlashMessage: Codable, Sendable {
    let kind: String
    let text: String
}

extension Request {
    /// Queues a flash message in the session; it is shown on the next rendered page.
    func flash(_ kind: String, _ text: String) {
        var all = peekFlashes()
        all.append(FlashMessage(kind: kind, text: text))
        if let data = try? JSONEncoder().encode(all) {
            session.data["flash"] = String(decoding: data, as: UTF8.self)
        }
    }

    private func peekFlashes() -> [FlashMessage] {
        guard let json = session.data["flash"] else { return [] }
        return (try? JSONDecoder().decode([FlashMessage].self, from: Data(json.utf8))) ?? []
    }

    /// Returns the queued messages and removes them, so each is displayed exactly once.
    func takeFlashes() -> [FlashMessage] {
        let all = peekFlashes()
        session.data["flash"] = nil
        return all
    }
}

/// A flash message as the template sees it: Leaf has no ternary operator, so the ARIA role is computed here.
struct FlashView: Encodable, Sendable {
    let kind: String
    let text: String
    let role: String
    init(_ message: FlashMessage) {
        kind = message.kind
        text = message.text
        role = message.kind == "danger" ? "alert" : "status"
    }
}

/// Everything the base layout needs, plus the page-specific `content`.
struct Page<Content: Encodable & Sendable>: Encodable, Sendable {
    let title: String
    let csrf: String
    let flashes: [FlashView]
    let content: Content

    init(_ title: String, _ req: Request, content: Content) {
        self.title = title
        self.csrf = req.csrfToken
        self.flashes = req.takeFlashes().map(FlashView.init)
        self.content = content
    }
}

extension Request {
    /// True when htmx issued the request (and it is not a history-cache restore).
    var isHTMX: Bool {
        headers.first(name: "HX-Request") == "true" && headers.first(name: "HX-History-Restore-Request") != "true"
    }

    /// JSON only when the client explicitly prefers it; a missing or wildcard `Accept` means HTML.
    var wantsJSON: Bool {
        headers.accept.comparePreference(for: .json, to: .html) == .orderedDescending
    }
}

extension Response {
    func varying(_ names: String...) -> Response {
        headers.replaceOrAdd(name: .vary, value: names.joined(separator: ", "))
        return self
    }
}

import Vapor
import Fluent

func formatPrice(_ cents: Int) -> String {
    let fraction = cents % 100
    return "\(cents / 100).\(fraction < 10 ? "0" : "")\(fraction)"
}

/// What the list and detail templates need, and the JSON body for API clients.
struct BookDTO: Content {
    let id: UUID
    let title: String
    let isbn: String
    let author: String
    let publishedYear: Int
    let price: String
    let status: String

    init(_ book: Book) throws {
        self.id = try book.requireID()
        self.title = book.title
        self.isbn = book.isbn
        self.author = book.$author.value?.name ?? ""
        self.publishedYear = book.publishedYear
        self.price = formatPrice(book.priceCents)
        self.status = book.status.rawValue
    }
}

/// A table row: the same fields as the API body plus presentation-only data (Leaf cannot compute a badge colour).
struct BookRow: Encodable, Sendable {
    let book: BookDTO
    let badge: String

    init(_ book: Book) throws {
        self.book = try BookDTO(book)
        self.badge = book.status == .published ? "success" : "secondary"
    }
}

struct BookListView: Encodable, Sendable {
    let rows: [BookRow]
    let q: String
    /// `q` percent-encoded for use inside an `href` (Leaf escapes HTML, not URLs).
    let encodedQ: String
    let page: Int
    let pageCount: Int
    let total: Int
    let hasPrevious: Bool
    let hasNext: Bool
    let previousPage: Int
    let nextPage: Int
}

struct ReviewView: Encodable, Sendable {
    let rating: Int
    let body: String
}

struct BookDetailView: Encodable, Sendable {
    let book: BookDTO
    let tags: [String]
    let reviews: [ReviewView]
}

struct Option: Encodable, Sendable {
    let value: String
    let label: String
    let selected: Bool
}

struct BookFormView: Encodable, Sendable {
    let action: String
    let heading: String
    let submitLabel: String
    let values: BookForm
    let errors: FieldErrors
    let errorList: [String]
    let hasErrors: Bool
    let authors: [Option]
    let statuses: [Option]

    static func make(action: String, heading: String, submitLabel: String, values: BookForm,
                     errors: FieldErrors, db: any Database) async throws -> BookFormView {
        let authors = try await Author.query(on: db).sort(\.$name).all().map {
            Option(value: $0.id?.uuidString ?? "", label: $0.name, selected: $0.id?.uuidString == values.authorId)
        }
        let statuses = [BookStatus.draft, .published, .archived].map {
            Option(value: $0.rawValue, label: $0.rawValue.capitalized, selected: $0.rawValue == (values.status ?? "draft"))
        }
        return BookFormView(action: action, heading: heading, submitLabel: submitLabel, values: values,
                            errors: errors, errorList: ["title", "isbn", "publishedYear", "price", "authorId", "status", "tags"].compactMap { errors[$0] },
                            hasErrors: !errors.isEmpty, authors: authors, statuses: statuses)
    }
}

struct ErrorView: Encodable, Sendable {
    let status: Int
    let reason: String
}

import Vapor
import Fluent

struct WebBooksController: RouteCollection {
    let allowedOrigins: Set<String>

    func boot(routes: any RoutesBuilder) throws {
        let books = routes.grouped("books").grouped(CSRFMiddleware(allowedOrigins: allowedOrigins))
        books.get(use: index)
        books.post(use: create)
        books.get("new", use: newForm)
        books.group(":bookID") { book in
            book.get(use: show)
            book.post(use: update)
            book.delete(use: destroyHTMX)
            book.get("edit", use: editForm)
            book.post("delete", use: destroy)
        }
    }

    // GET /books?q=&page=
    @Sendable func index(req: Request) async throws -> Response {
        let q = (try? req.query.get(String.self, at: "q"))?.trimmingCharacters(in: .whitespaces) ?? ""
        let pageNumber = max(1, (try? req.query.get(Int.self, at: "page")) ?? 1)
        var query = Book.query(on: req.db).with(\.$author).sort(\.$title)
        if !q.isEmpty { query = query.filter(\.$title ~~ q) }
        let page = try await query.paginate(PageRequest(page: pageNumber, per: 5))
        let pageCount = max(1, page.metadata.pageCount)
        let list = BookListView(
            rows: try page.items.map(BookRow.init), q: q,
            encodedQ: q.addingPercentEncoding(withAllowedCharacters: .alphanumerics) ?? "", page: pageNumber, pageCount: pageCount,
            total: page.metadata.total, hasPrevious: pageNumber > 1, hasNext: pageNumber < pageCount,
            previousPage: pageNumber - 1, nextPage: pageNumber + 1)

        if req.wantsJSON { return try await list.rows.map(\.book).encodeResponse(for: req).varying("Accept", "HX-Request") }
        let template = req.isHTMX ? "books/_table" : "books/index"
        let view = try await req.view.render(template, Page("Books", req, content: list))
        return try await view.encodeResponse(for: req).varying("Accept", "HX-Request")
    }

    // GET /books/:bookID : one URL, two representations
    @Sendable func show(req: Request) async throws -> Response {
        let book = try await loadBook(req, with: true)
        let dto = try BookDTO(book)
        if req.wantsJSON { return try await dto.encodeResponse(for: req).varying("Accept") }
        let detail = BookDetailView(
            book: dto, tags: try await book.$tags.get(on: req.db).map(\.name),
            reviews: book.reviews.map { ReviewView(rating: $0.rating, body: $0.body) })
        let view = try await req.view.render("books/show", Page(book.title, req, content: detail))
        return try await view.encodeResponse(for: req).varying("Accept")
    }

    // GET /books/new
    @Sendable func newForm(req: Request) async throws -> View {
        let form = try await BookFormView.make(action: "/books", heading: "New book", submitLabel: "Create book",
                                               values: BookForm(status: "draft"), errors: [:], db: req.db)
        return try await req.view.render("books/form", Page("New book", req, content: form))
    }

    // POST /books : validate, then redirect (POST-redirect-GET) or re-render with 422
    @Sendable func create(req: Request) async throws -> Response {
        let form = try req.content.decode(BookForm.self)
        switch try await form.validated(on: req.db) {
        case .valid(let input):
            let book = Book(title: input.title, isbn: input.isbn, publishedYear: input.publishedYear,
                            priceCents: input.priceCents, status: input.status, authorID: input.authorID)
            try await req.db.transaction { db in
                try await book.save(on: db)
                try await book.syncTags(input.tags, on: db)
            }
            req.flash("success", "Created \u{201C}\(book.title)\u{201D}.")
            return req.redirect(to: "/books/\(try book.requireID())", redirectType: .normal)
        case .invalid(let errors):
            let view = try await BookFormView.make(action: "/books", heading: "New book", submitLabel: "Create book",
                                                   values: form, errors: errors, db: req.db)
            return try await invalid(req, "New book", view)
        }
    }

    // GET /books/:bookID/edit
    @Sendable func editForm(req: Request) async throws -> View {
        let book = try await loadBook(req)
        let values = BookForm(title: book.title, isbn: book.isbn, publishedYear: String(book.publishedYear),
                              price: formatPrice(book.priceCents), status: book.status.rawValue,
                              authorId: book.$author.id.uuidString,
                              tags: try await book.$tags.get(on: req.db).map(\.name).sorted().joined(separator: ", "))
        let form = try await BookFormView.make(action: "/books/\(try book.requireID())", heading: "Edit book",
                                               submitLabel: "Save changes", values: values, errors: [:], db: req.db)
        return try await req.view.render("books/form", Page("Edit \(book.title)", req, content: form))
    }

    // POST /books/:bookID
    @Sendable func update(req: Request) async throws -> Response {
        let book = try await loadBook(req)
        let id = try book.requireID()
        let form = try req.content.decode(BookForm.self)
        switch try await form.validated(on: req.db, excluding: id) {
        case .valid(let input):
            book.title = input.title
            book.isbn = input.isbn
            book.publishedYear = input.publishedYear
            book.priceCents = input.priceCents
            book.status = input.status
            book.$author.id = input.authorID
            try await req.db.transaction { db in
                try await book.update(on: db)
                try await book.syncTags(input.tags, on: db)
            }
            req.flash("success", "Saved \u{201C}\(book.title)\u{201D}.")
            return req.redirect(to: "/books/\(id)", redirectType: .normal)
        case .invalid(let errors):
            let view = try await BookFormView.make(action: "/books/\(id)", heading: "Edit book", submitLabel: "Save changes",
                                                   values: form, errors: errors, db: req.db)
            return try await invalid(req, "Edit book", view)
        }
    }

    // POST /books/:bookID/delete : plain HTML forms can only send GET and POST
    @Sendable func destroy(req: Request) async throws -> Response {
        let book = try await loadBook(req)
        try await book.delete(on: req.db)
        req.flash("success", "Deleted \u{201C}\(book.title)\u{201D}.")
        return req.redirect(to: "/books", redirectType: .normal)
    }

    // DELETE /books/:bookID : the htmx variant; an empty 200 lets htmx swap the row away
    @Sendable func destroyHTMX(req: Request) async throws -> Response {
        try await loadBook(req).delete(on: req.db)
        return Response(status: .ok)
    }

    private func loadBook(_ req: Request, with details: Bool = false) async throws -> Book {
        // A malformed id is a 404, not a 400: the URL simply names nothing.
        guard let id = req.parameters.get("bookID", as: UUID.self) else { throw Abort(.notFound, reason: "No such book.") }
        var query = Book.query(on: req.db).filter(\.$id == id).with(\.$author)
        if details { query = query.with(\.$reviews) }
        guard let book = try await query.first() else { throw Abort(.notFound, reason: "No such book.") }
        return book
    }

    /// A rejected form is re-rendered with status 422 so that clients (and tests) can tell it was not saved.
    private func invalid(_ req: Request, _ title: String, _ form: BookFormView) async throws -> Response {
        let view = try await req.view.render("books/form", Page(title, req, content: form))
        let response = try await view.encodeResponse(for: req)
        response.status = .unprocessableEntity
        return response
    }
}

#extend("base"):
  #export("content"):
    <h1>Books</h1>
    <form class="row g-2 mb-3" method="get" action="/books" role="search">
      <div class="col-auto">
        <label class="visually-hidden" for="q">Search by title</label>
        <input id="q" name="q" type="search" class="form-control" placeholder="Search by title" value="#(content.q)"
               hx-get="/books" hx-trigger="input changed delay:300ms, search" hx-target="#book-table"
               hx-push-url="true" hx-sync="this:replace" autocomplete="off">
      </div>
      <div class="col-auto"><button class="btn btn-outline-secondary" type="submit">Search</button></div>
    </form>
    <div id="book-table" aria-live="polite">
      #extend("books/_table")
    </div>
  #endexport
#endextend

#if(content.total == 0):
<p>No books match.</p>
#else:
<table class="table table-striped align-middle">
  <caption>#(content.total) books, page #(content.page) of #(content.pageCount)</caption>
  <thead><tr><th scope="col">Title</th><th scope="col">Author</th><th scope="col">Year</th><th scope="col" class="text-end">Price</th><th scope="col">Status</th><th scope="col"><span class="visually-hidden">Actions</span></th></tr></thead>
  <tbody>
  #for(row in content.rows):
    <tr>
      <th scope="row"><a href="/books/#(row.book.id)">#(row.book.title)</a></th>
      <td>#(row.book.author)</td>
      <td>#(row.book.publishedYear)</td>
      <td class="text-end">#(row.book.price)</td>
      <td><span class="badge text-bg-#(row.badge)">#(row.book.status)</span></td>
      <td class="text-end">
        <a class="btn btn-sm btn-outline-primary" href="/books/#(row.book.id)/edit">Edit<span class="visually-hidden"> #(row.book.title)</span></a>
        <button class="btn btn-sm btn-outline-danger" type="button" hx-delete="/books/#(row.book.id)"
                hx-confirm="Delete this book?" hx-target="closest tr" hx-swap="outerHTML">Delete<span class="visually-hidden"> #(row.book.title)</span></button>
      </td>
    </tr>
  #endfor
  </tbody>
</table>
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item#if(!content.hasPrevious): disabled#endif"><a class="page-link" href="/books?page=#(content.previousPage)&amp;q=#(content.encodedQ)"#if(!content.hasPrevious): aria-disabled="true" tabindex="-1"#endif>Previous</a></li>
    <li class="page-item#if(!content.hasNext): disabled#endif"><a class="page-link" href="/books?page=#(content.nextPage)&amp;q=#(content.encodedQ)"#if(!content.hasNext): aria-disabled="true" tabindex="-1"#endif>Next</a></li>
  </ul>
</nav>
#endif

// From WebSupport.swift
var wantsJSON: Bool {
    headers.accept.comparePreference(for: .json, to: .html) == .orderedDescending
}

Accept: text/html,application/xhtml+xml,*/*;q=0.8   ->  Content-Type: text/html; charset=utf-8
Accept: application/json                             ->  Content-Type: application/json; charset=utf-8, Vary: Accept
Accept: */*                                          ->  Content-Type: text/html; charset=utf-8
(no Accept header)                                   ->  Content-Type: text/html; charset=utf-8

import Vapor
import Fluent

/// The raw form fields, exactly as the browser sent them. Everything is an optional String so a
/// missing or malformed field never fails decoding; validation reports it per field instead.
struct BookForm: Content {
    var title: String?
    var isbn: String?
    var publishedYear: String?
    var price: String?
    var status: String?
    var authorId: String?
    var tags: String?          // comma-separated tag names
}

/// The validated, typed result.
struct BookInput: Sendable {
    let title: String
    let isbn: String
    let publishedYear: Int
    let priceCents: Int
    let status: BookStatus
    let authorID: UUID
    let tags: [String]
}

typealias FieldErrors = [String: String]

/// The outcome of validating a form: typed input, or one message per invalid field.
enum FormOutcome: Sendable {
    case valid(BookInput)
    case invalid(FieldErrors)
}

extension BookForm {
    /// Validates the fields; `excluding` is the book being edited, so its own ISBN is not a duplicate.
    func validated(on db: any Database, excluding bookID: UUID? = nil) async throws -> FormOutcome {
        var errors = FieldErrors()

        let title = (self.title ?? "").trimmingCharacters(in: .whitespacesAndNewlines)
        if title.isEmpty { errors["title"] = "Enter a title." }
        else if title.count > 200 { errors["title"] = "The title must be at most 200 characters." }

        let isbn = (self.isbn ?? "").filter { $0.isNumber || $0 == "X" }
        if isbn.count != 10 && isbn.count != 13 { errors["isbn"] = "Enter a 10 or 13 digit ISBN." }

        let maxYear = Calendar(identifier: .gregorian).component(.year, from: Date()) + 1
        let year = Int((publishedYear ?? "").trimmingCharacters(in: .whitespaces))
        if let year, (1450...maxYear).contains(year) {} else { errors["publishedYear"] = "Enter a year between 1450 and \(maxYear)." }

        var cents: Int?
        let priceText = (price ?? "").trimmingCharacters(in: .whitespaces)
        let parts = priceText.split(separator: ".", omittingEmptySubsequences: false)
        if (1...2).contains(parts.count), let whole = Int(parts[0]), whole >= 0,
           parts.count == 1 || (parts[1].count <= 2 && !parts[1].isEmpty && parts[1].allSatisfy(\.isNumber)) {
            let fraction = parts.count == 2 ? Int(parts[1].padding(toLength: 2, withPad: "0", startingAt: 0)) ?? 0 : 0
            cents = whole * 100 + fraction
        } else {
            errors["price"] = "Enter a price such as 12.50."
        }

        let status = BookStatus(rawValue: self.status ?? "")
        if status == nil { errors["status"] = "Choose a status." }

        var authorID: UUID?
        if let raw = authorId, let id = UUID(uuidString: raw), try await Author.find(id, on: db) != nil {
            authorID = id
        } else {
            errors["authorId"] = "Choose an author."
        }

        let tags = Self.tagNames(from: self.tags, errors: &errors)

        if errors["isbn"] == nil {
            let clash = try await Book.query(on: db).filter(\.$isbn == isbn).first()
            if let clash, clash.id != bookID { errors["isbn"] = "A book with this ISBN already exists." }
        }

        guard errors.isEmpty, let year, let cents, let status, let authorID else { return .invalid(errors) }
        return .valid(BookInput(title: title, isbn: isbn, publishedYear: year, priceCents: cents,
                                  status: status, authorID: authorID, tags: tags))
    }
}

// CSRF.swift
import Vapor

/// Session-bound CSRF protection for browser forms (synchroniser token pattern).
///
/// Safe methods pass. Every other method must (1) come from an allowed origin and
/// (2) carry the token that is stored in the session, in the `X-CSRF-Token` header or the `_csrf` form field.
struct CSRFMiddleware: AsyncMiddleware {
    static let sessionKey = "csrf-token"
    static let headerName = "X-CSRF-Token"
    static let fieldName = "_csrf"

    /// Origins that may submit state-changing requests, for example `https://bookshelf.example.com`.
    let allowedOrigins: Set<String>

    func respond(to req: Request, chainingTo next: any AsyncResponder) async throws -> Response {
        // Mint the token on the first request of the session so that forms can embed it.
        let token = req.csrfToken

        switch req.method {
        case .GET, .HEAD, .OPTIONS:
            return try await next.respond(to: req)
        default:
            break
        }

        guard OriginPolicy(allowedOrigins: allowedOrigins).allows(req) else {
            throw Abort(.forbidden, reason: "Cross-origin request rejected.")
        }
        let submitted: String?
        if let header = req.headers.first(name: Self.headerName) {
            submitted = header                                   // fetch() and XMLHttpRequest clients
        } else if req.headers.contentType == .urlEncodedForm {
            // Middleware runs before the route collects the body, so collect it here (within the default limit).
            _ = try await req.body.collect(max: req.application.routes.defaultMaxBodySize.value).get()
            submitted = try? req.content.get(String.self, at: Self.fieldName)
        } else {
            submitted = nil
        }
        guard let submitted, constantTimeEqual(submitted, token) else {
            throw Abort(.forbidden, reason: "Missing or invalid CSRF token.")
        }
        return try await next.respond(to: req)
    }
}

extension Request {
    /// The CSRF token of this session. Reading it creates the session (and the token) when needed.
    var csrfToken: String {
        if let existing = session.data[CSRFMiddleware.sessionKey] { return existing }
        let token = Data([UInt8].random(count: 32)).base64EncodedString()
            .replacingOccurrences(of: "+", with: "-")
            .replacingOccurrences(of: "/", with: "_")
            .replacingOccurrences(of: "=", with: "")
        session.data[CSRFMiddleware.sessionKey] = token
        return token
    }
}

/// Compares two strings without returning early at the first difference.
func constantTimeEqual(_ a: String, _ b: String) -> Bool {
    let x = Array(a.utf8), y = Array(b.utf8)
    guard x.count == y.count else { return false }
    var difference: UInt8 = 0
    for (l, r) in zip(x, y) { difference |= l ^ r }
    return difference == 0
}

/// Fetch Metadata and `Origin` checks, the second layer of CSRF defence.
struct OriginPolicy: Sendable {
    let allowedOrigins: Set<String>

    func allows(_ req: Request) -> Bool {
        // Modern browsers say how the request relates to the site.
        if let site = req.headers.first(name: "Sec-Fetch-Site") {
            return site == "same-origin" || site == "none"
        }
        // Older browsers and non-browser clients: fall back to Origin.
        if let origin = req.headers.first(name: .origin) {
            return allowedOrigins.contains(origin)
        }
        // Neither header: not a browser cross-site request (curl, a native app). The token still applies.
        return true
    }
}

import Vapor

/// Renders an HTML error page for browsers. JSON clients get the standard error body.
struct HTMLErrorMiddleware: AsyncMiddleware {
    func respond(to request: Request, chainingTo next: any AsyncResponder) async throws -> Response {
        do {
            return try await next.respond(to: request)
        } catch {
            if request.wantsJSON || request.isHTMX { throw error }
            let status = (error as? any AbortError)?.status ?? .internalServerError
            let reason = status.code < 500 ? ((error as? any AbortError)?.reason ?? status.reasonPhrase) : "Something went wrong."
            request.logger.report(error: error)
            let view = try await request.view.render(
                "error", Page("Error \(status.code)", request, content: ErrorView(status: Int(status.code), reason: reason)))
            let response = try await view.encodeResponse(for: request)
            response.status = status
            return response
        }
    }
}

#extend("base"):
  #export("content"):
    <h1>#(content.status)</h1>
    <p>#(content.reason)</p>
    <a href="/books">Back to the catalogue</a>
  #endexport
#endextend

curl -s https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A

$ curl -si -X POST localhost:8099/books -d title=x   # no session, no token
HTTP/1.1 403 Forbidden
content-type: text/html; charset=utf-8

$ curl -si -b jar -X POST localhost:8099/books -d _csrf=... -d title= -d isbn=12 ...   # invalid
HTTP/1.1 422 Unprocessable Entity
content-type: text/html; charset=utf-8

$ curl -si -b jar -X POST localhost:8099/books -d _csrf=... (valid)
HTTP/1.1 303 See Other
content-length: 0
location: /books/8E055189-6610-40D7-8DF3-E7573E492039

$ curl -s -b jar localhost:8099/books/8E055189-6610-40D7-8DF3-E7573E492039 | grep -m1 -A0 'role="status"'
    <div class="alert alert-success" role="status">Created “Swift on the Server”.</div>

$ same URL again
0

$ curl -si -H "Accept: application/json" localhost:8099/books/8E055189-6610-40D7-8DF3-E7573E492039
HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
content-length: 180
vary: Accept
{"title":"Swift on the Server","publishedYear":2024,"status":"published","author":"Ada Lovelace","isbn":"9781402894626","price":"29.90","id":"8E055189-6610-40D7-8DF3-E7573E492039"}
$ curl -si -H "HX-Request: true" "localhost:8099/books?q=swift" | head
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
content-length: 1427
vary: Accept, HX-Request
connection: keep-alive
date: Sat, 17 Oct 2026 16:06:24 GMT



$ update
HTTP/1.1 303 See Other
content-length: 0
location: /books/8E055189-6610-40D7-8DF3-E7573E492039
    <div class="alert alert-success" role="status">Saved “Swift on the Server, 2nd ed.”.</div>

$ delete (plain form POST)
HTTP/1.1 303 See Other
content-length: 0
location: /books
    <div class="alert alert-success" role="status">Deleted “Swift on the Server, 2nd ed.”.</div>

$ htmx-style DELETE with the token header
HTTP/1.1 200 OK
content-length: 0
HTTP/1.1 403 Forbidden

import Fluent
import Testing
import VaporTesting
@testable import App

@Suite(.serialized)
struct WebBooksTests {
    /// A started application with one author, and a helper that carries the session cookie between requests.
    func withApp(_ body: (Application, UUID) async throws -> Void) async throws {
        let app = try await Application.make(.testing)
        do {
            try await configure(app)
            let author = Author(name: "Test Author")
            try await author.save(on: app.db)
            try await body(app, author.requireID())
        } catch {
            try await app.asyncShutdown()
            throw error
        }
        try await app.asyncShutdown()
    }

    /// GET a page and return the session cookie header value and the CSRF token embedded in it.
    func startSession(_ app: Application) async throws -> (cookie: String, token: String) {
        var cookie = "", token = ""
        try await app.testing().test(.GET, "books/new") { res async in
            cookie = res.headers.setCookie?["bookshelf-session"]?.string ?? ""
            let body = res.body.string
            if let r = body.range(of: #"name="_csrf" value="([^"]+)""#, options: .regularExpression) {
                token = String(body[r]).replacingOccurrences(of: #"name="_csrf" value=""#, with: "").replacingOccurrences(of: "\"", with: "")
            }
        }
        return (cookie, token)
    }

    func form(_ pairs: [(String, String)]) -> ByteBuffer {
        var allowed = CharacterSet.alphanumerics
        allowed.insert(charactersIn: "-._~")
        let text = pairs.map { "\($0.0)=\($0.1.addingPercentEncoding(withAllowedCharacters: allowed) ?? "")" }.joined(separator: "&")
        return ByteBuffer(string: text)
    }

    func headers(cookie: String, extra: [(String, String)] = []) -> HTTPHeaders {
        var h: HTTPHeaders = ["Content-Type": "application/x-www-form-urlencoded", "Cookie": "bookshelf-session=\(cookie)"]
        for (k, v) in extra { h.add(name: k, value: v) }
        return h
    }

    @Test func postWithoutTokenIsForbidden() async throws {
        try await withApp { app, authorID in
            let (cookie, _) = try await startSession(app)
            try await app.testing().test(.POST, "books", headers: headers(cookie: cookie),
                                         body: form([("title", "No token")])) { res async in
                #expect(res.status == .forbidden)
            }
        }
    }

    @Test func createRedirectsAndFlashesOnce() async throws {
        try await withApp { app, authorID in
            let (cookie, token) = try await startSession(app)
            var location = ""
            let fields = [("_csrf", token), ("title", "Swift on the Server"), ("isbn", "978-1-4028-9462-6"),
                          ("publishedYear", "2024"), ("price", "29.9"), ("status", "published"), ("authorId", authorID.uuidString)]
            try await app.testing().test(.POST, "books", headers: headers(cookie: cookie), body: form(fields)) { res async in
                #expect(res.status == .seeOther)
                location = res.headers.first(name: .location) ?? ""
            }
            #expect(location.hasPrefix("/books/"))
            let getHeaders: HTTPHeaders = ["Cookie": "bookshelf-session=\(cookie)"]
            try await app.testing().test(.GET, location, headers: getHeaders) { res async in
                #expect(res.status == .ok)
                #expect(res.body.string.contains("Created"))
                #expect(res.body.string.contains("29.90"))
            }
            try await app.testing().test(.GET, location, headers: getHeaders) { res async in
                #expect(!res.body.string.contains("Created"))
            }
        }
    }

    @Test func tagInputCreatesAndSyncsTags() async throws {
        try await withApp { app, authorID in
            let (cookie, token) = try await startSession(app)
            var location = ""
            let base = [("_csrf", token), ("title", "Tagged"), ("isbn", "9781402894626"), ("publishedYear", "2024"),
                        ("price", "10"), ("status", "published"), ("authorId", authorID.uuidString)]
            try await app.testing().test(.POST, "books", headers: headers(cookie: cookie),
                                         body: form(base + [("tags", "Classics, computing,classics, ")])) { res async in
                #expect(res.status == .seeOther)
                location = res.headers.first(name: .location) ?? ""
            }
            let book = try #require(try await Book.query(on: app.db).filter(\.$title == "Tagged").first())
            #expect(try await book.$tags.get(on: app.db).map(\.name).sorted() == ["classics", "computing"])
            try await app.testing().test(.GET, location + "/edit", headers: ["Cookie": "bookshelf-session=\(cookie)"]) { res async in
                #expect(res.body.string.contains(#"value="classics, computing""#))
            }
            try await app.testing().test(.POST, location, headers: headers(cookie: cookie),
                                         body: form(base + [("tags", "computing, history")])) { res async in
                #expect(res.status == .seeOther)
            }
            #expect(try await book.$tags.get(reload: true, on: app.db).map(\.name).sorted() == ["computing", "history"])
            #expect(try await Tag.query(on: app.db).count() == 3)
            let tooMany = (1...11).map { "t\($0)" }.joined(separator: ",")
            try await app.testing().test(.POST, location, headers: headers(cookie: cookie),
                                         body: form(base + [("tags", tooMany)])) { res async in
                #expect(res.status == .unprocessableEntity)
                #expect(res.body.string.contains("Use at most 10 tags."))
            }
        }
    }

    @Test func invalidFormIs422AndKeepsValues() async throws {
        try await withApp { app, authorID in
            let (cookie, token) = try await startSession(app)
            let fields = [("_csrf", token), ("title", ""), ("isbn", "12"), ("publishedYear", "abc"),
                          ("price", "1.234"), ("status", "draft"), ("authorId", "")]
            try await app.testing().test(.POST, "books", headers: headers(cookie: cookie), body: form(fields)) { res async in
                #expect(res.status == .unprocessableEntity)
                let body = res.body.string
                #expect(body.contains("Enter a title."))
                #expect(body.contains("Enter a 10 or 13 digit ISBN."))
                #expect(body.contains(#"value="abc""#))
                #expect(body.contains(#"aria-invalid="true""#))
            }
        }
    }

    @Test func titleIsHTMLEscaped() async throws {
        try await withApp { app, authorID in
            let book = Book(title: "<script>x</script>", isbn: "9780306406157", publishedYear: 2000, priceCents: 100, authorID: authorID)
            try await book.save(on: app.db)
            try await app.testing().test(.GET, "books/\(try book.requireID())") { res async in
                #expect(!res.body.string.contains("<script>x"))
                #expect(res.body.string.contains("&lt;script&gt;x&lt;/script&gt;"))
            }
        }
    }

    @Test func oneUrlTwoRepresentations() async throws {
        try await withApp { app, authorID in
            let book = Book(title: "Negotiated", isbn: "9780306406157", publishedYear: 2000, priceCents: 100, authorID: authorID)
            try await book.save(on: app.db)
            let path = "books/\(try book.requireID())"
            try await app.testing().test(.GET, path, headers: ["Accept": "text/html,application/xhtml+xml,*/*;q=0.8"]) { res async in
                #expect(res.headers.contentType == .html)
            }
            try await app.testing().test(.GET, path, headers: ["Accept": "application/json"]) { res async throws in
                #expect(res.headers.contentType == .json)
                #expect(res.headers.first(name: .vary) == "Accept")
                #expect(try res.content.decode(BookDTO.self).title == "Negotiated")
            }
            try await app.testing().test(.GET, path, headers: ["Accept": "*/*"]) { res async in
                #expect(res.headers.contentType == .html)
            }
        }
    }

    @Test func htmxGetsOnlyThePartial() async throws {
        try await withApp { app, authorID in
            try await app.testing().test(.GET, "books", headers: ["HX-Request": "true"]) { res async in
                #expect(!res.body.string.contains("<html"))
            }
            try await app.testing().test(.GET, "books") { res async in
                #expect(res.body.string.contains("<html"))
            }
        }
    }

    @Test func htmlErrorPageForBrowsersJSONForClients() async throws {
        try await withApp { app, _ in
            try await app.testing().test(.GET, "books/00000000-0000-0000-0000-000000000000") { res async in
                #expect(res.status == .notFound)
                #expect(res.headers.contentType == .html)
            }
            try await app.testing().test(.GET, "books/00000000-0000-0000-0000-000000000000", headers: ["Accept": "application/json"]) { res async in
                #expect(res.headers.contentType == .json)
            }
        }
    }
}

✔ Test postWithoutTokenIsForbidden() passed after 0.020 seconds.
✔ Test createRedirectsAndFlashesOnce() passed after 0.019 seconds.
✔ Test tagInputCreatesAndSyncsTags() passed after 0.023 seconds.
✔ Test invalidFormIs422AndKeepsValues() passed after 0.012 seconds.
✔ Test titleIsHTMLEscaped() passed after 0.009 seconds.
✔ Test oneUrlTwoRepresentations() passed after 0.013 seconds.
✔ Test htmxGetsOnlyThePartial() passed after 0.010 seconds.
✔ Test htmlErrorPageForBrowsersJSONForClients() passed after 0.008 seconds.
✔ Suite WebBooksTests passed after 0.117 seconds.
✔ Test run with 8 tests in 1 suite passed after 0.117 seconds.