feat(ui): integrate account pages with shared shell

2026-08-15 00:53:45 +07:00
parent 69b81ddc71
commit 7dd61b9dd4
9 changed files with 236 additions and 28 deletions
@@ -1,15 +1,18 @@
 <!doctype html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head><meta charset="utf-8"><title>Activate account</title></head>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      th:replace="~{fragments/auth-layout :: shell(
+          pageTitle='Choose your password',
+          eyebrow='Account activation',
+          content=~{::main})}">
 <body>
 <main>
-  <h1>Choose your password</h1>
-  <p th:if="${error}" th:text="${error}" role="alert"></p>
-  <form method="post" th:action="@{/activate}">
+  <p class="page-description">Use at least 12 characters. This activation link can be used once.</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="@{/activate}">
    <input name="token" type="hidden" th:value="${token}">
-    <label>Password <input name="password" type="password" minlength="12" maxlength="128" required autocomplete="new-password"></label>
-    <label>Confirm password <input name="confirmPassword" type="password" minlength="12" maxlength="128" required autocomplete="new-password"></label>
-    <button type="submit">Activate account</button>
+    <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>
+    <div class="field"><label class="field-label" for="confirmPassword">Confirm password</label><input class="control" id="confirmPassword" name="confirmPassword" type="password" minlength="12" maxlength="128" required autocomplete="new-password"></div>
+    <button class="button button-primary" type="submit">Activate account</button>
  </form>
 </main>
 </body>