feat(ui): integrate bootstrap with auth shell

2026-08-15 01:08:11 +07:00
parent f48fc63775
commit f9ddef6861
3 changed files with 51 additions and 11 deletions
@@ -1,15 +1,18 @@
 <!doctype html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head><meta charset="utf-8"><title>Initialize Lab Timesheet</title></head>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      th:replace="~{fragments/auth-layout :: shell(
+          pageTitle='Create the first administrator',
+          eyebrow='One-time initialization',
+          content=~{::main})}">
 <body>
 <main>
-  <h1>Create the first administrator</h1>
-  <p th:if="${error}" th:text="${error}" role="alert"></p>
-  <form method="post" th:action="@{/bootstrap}">
-    <label>Email <input name="email" type="email" required autocomplete="email"></label>
-    <label>Display name <input name="displayName" required autocomplete="name"></label>
-    <label>Password <input name="password" type="password" minlength="12" maxlength="128" required autocomplete="new-password"></label>
-    <button type="submit">Create administrator</button>
+  <p class="page-description">Initialize this installation once. Later accounts are created by an active Admin.</p>
+  <p class="alert alert-error" th:if="${error}" th:text="${error}" role="alert"></p>
+  <form class="form-grid auth-form" method="post" th:action="@{/bootstrap}">
+    <div class="field"><label class="field-label" for="email">Email</label><input class="control" id="email" name="email" type="email" required autocomplete="email" autofocus></div>
+    <div class="field"><label class="field-label" for="displayName">Display name</label><input class="control" id="displayName" name="displayName" required autocomplete="name"></div>
+    <div class="field"><label class="field-label" for="password">Password</label><input class="control" id="password" name="password" type="password" minlength="12" maxlength="128" required autocomplete="new-password"></div>
+    <button class="button button-primary" type="submit">Create administrator</button>
  </form>
 </main>
 </body>
@@ -63,6 +63,19 @@ class AccountTemplateIntegrationTest {
                .andExpect(content().string(containsString("src=\"/assets/theme.js\"")));
    }

+    @Test
+    void bootstrapUsesPublicAuthShellAndPreservesFirstAdminContract() throws Exception {
+        mvc.perform(get("/template-contract/bootstrap")
+                        .with(user("bootstrap-template-viewer")))
+                .andExpect(status().isOk())
+                .andExpect(content().string(containsString("class=\"auth-shell\"")))
+                .andExpect(content().string(containsString("action=\"/bootstrap\"")))
+                .andExpect(content().string(containsString("name=\"email\"")))
+                .andExpect(content().string(containsString("name=\"displayName\"")))
+                .andExpect(content().string(containsString("autocomplete=\"new-password\"")))
+                .andExpect(content().string(containsString("src=\"/assets/theme.js\"")));
+    }
+
    @Controller
    public static class TemplateController {

@@ -81,5 +94,10 @@ class AccountTemplateIntegrationTest {
        String login() {
            return "accounts/login";
        }
+
+        @GetMapping("/template-contract/bootstrap")
+        String bootstrap() {
+            return "bootstrap/form";
+        }
    }
 }