Render Kratos self-service flows as themed pages (todo §4); buildFlowView + views/auth.ejs + login/registration/recovery/verification/settings routes

2026-06-17 17:55:56 +02:00
parent 2a64cfd409
commit 0928f9dd39
11 changed files with 405 additions and 4 deletions
--- a/views/auth.ejs
+++ b/views/auth.ejs
@@ -0,0 +1,39 @@
+<%#
+  Themed Kratos self-service page (todo §4): sign-in / register / reset / verify / settings.
+  Renders a FlowView (src/flow-view.ts) into the html-css-foundation auth layout, reusing the
+  auth-card + field partials. The form posts straight to flow.ui.action — Kratos owns its CSRF.
+  Auto theme follows the OS (styles.css), so no theme switch is shown here.
+%><%
+  const brand = locals.brand || "Plainpages";
+  const body = include("partials/flow-body", { flow });
+%><!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= flow.title %></title>
+    <link rel="stylesheet" href="/public/css/styles.css" />
+    <link rel="stylesheet" href="/public/css/auth.css" />
+    <link rel="icon" href="/public/favicon.svg" />
+  </head>
+  <body>
+    <%- include("partials/icons") %>
+    <main class="auth-stage">
+      <div class="auth">
+        <div class="auth-brand">
+          <span class="brand-mark"><svg class="ico ico-sm"><use href="#i-box" /></svg></span>
+          <span class="brand-name"><%= brand %></span>
+        </div>
+        <%- include("partials/auth-card", {
+          action: flow.action,
+          alt: flow.alt,
+          back: flow.back,
+          body,
+          method: flow.method,
+          sub: flow.sub,
+          title: flow.title,
+        }) %>
+      </div>
+    </main>
+  </body>
+</html>
--- a/views/partials/alert.ejs
+++ b/views/partials/alert.ejs
@@ -0,0 +1,8 @@
+<%#
+  Inline alert / notice banner (design-system tone tokens). Config:
+    text, tone? ∈ pos|neg|info|warn (default info), title?
+%><%
+  const tone = locals.tone || "info";
+  const icon = tone === "pos" ? "i-check-circle" : "i-alert";
+-%>
+<div class="alert alert-<%= tone %>" role="<%= tone === "neg" ? "alert" : "status" %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#<%= icon %>"/></svg><div class="alert-body"><% if (locals.title) { %><strong><%= locals.title %></strong><% } %><span><%= locals.text %></span></div></div>
--- a/views/partials/flow-body.ejs
+++ b/views/partials/flow-body.ejs
@@ -0,0 +1,17 @@
+<%#
+  Kratos flow form body (todo §4): the inner of the auth-card form — flow messages,
+  hidden inputs (incl. csrf_token), themed fields, then submit button(s). `flow` is a
+  FlowView (src/flow-view.ts). Captured by views/auth.ejs and handed to auth-card's body.
+-%>
+<% flow.messages.forEach((m) => { -%>
+<%- include("alert", m) %>
+<% }) -%>
+<% flow.hidden.forEach((h) => { -%>
+<input type="hidden" name="<%= h.name %>" value="<%= h.value %>">
+<% }) -%>
+<% flow.fields.forEach((field) => { -%>
+<%- include("field", field) %>
+<% }) -%>
+<% flow.buttons.forEach((b, i) => { -%>
+<button type="submit" class="btn btn-block<%= i === 0 ? " btn-primary" : "" %>"<% if (b.name) { %> name="<%= b.name %>"<% } %><% if (b.value != null) { %> value="<%= b.value %>"<% } %>><%= b.label %></button>
+<% }) -%>