refactor: update routes for Bootstrap component APIs

- Home: simplify to pass Layout only LoginStatus (h1 moved to component)
- Auth (login): centered layout, remove FormSection wrapper
- Auth (magic link): centered layout with form-label and form-control
- Auth (GitHub OAuth): default callbackURL to /profile
- Profile: use outline-secondary back link, outline-danger logout
- Admin: cleaned up commented query params, Bootstrap button styles

Author: mroderick

src/app/routes/admin.js

@@ -9,23 +9,9 @@ export default new Hono()
   .get("/admin", async (c) => {
     const auth = getAuthFromContext(c);
     const users = await auth.api.listUsers({
-      query: {
-        query: {
-          // searchValue: "some name",
-          // searchField: "name",
-          // searchOperator: "contains",
-          // limit: 100,
-          // offset: 100,
-          // sortBy: "name",
-          // sortDirection: "desc",
-          // filterField: "email",
-          // filterValue: "hello@example.com",
-          // filterOperator: "eq",
-        },
-      },
+      query: { query: {} },
       headers: c.req.raw.headers,
     });
-    console.log(users);
 
     const error = c.req.query("error");
     const success = c.req.query("success");
@@ -34,8 +20,10 @@ export default new Hono()
       Layout({
         title: "Admin",
         children: html`
-          <h1>Admin</h1>
-          <a href="/">Back to Home</a>
+          <h1 class="h3 mb-3 fw-semibold">Admin</h1>
+          <a href="/" class="btn btn-outline-secondary btn-sm mb-3"
+            >← Back to Home</a
+          >
 
           ${Message({ error, success })}
           ${UsersList({ users: users.users, total: users.total })}
@@ -50,10 +38,7 @@ export default new Hono()
 
     try {
       await auth.api.setRole({
-        body: {
-          userId,
-          role,
-        },
+        body: { userId, role },
         headers: c.req.raw.headers,
       });
 

src/app/routes/auth.js

@@ -1,7 +1,7 @@
 import { Hono } from "hono";
 import { html } from "hono/html";
 import { Layout, Navigation } from "../components/layout.js";
-import { Message, FormSection } from "../components/common.js";
+import { Message } from "../components/common.js";
 import { GitHubButton, MagicLinkButton } from "../components/login.js";
 import { getAuthFromContext } from "../utils/auth.js";
 import { logout } from "../handlers/logout.js";
@@ -17,14 +17,18 @@ function showLogin(c) {
     Layout({
       title: "Sign In",
       children: html`
-        <h1>Sign In</h1>
-        ${Navigation({ back: { href: "/", text: "Back to Home" } })}
-        ${Message({ error, success })}
-        ${FormSection({
-          children: html`
-            ${MagicLinkButton({ callbackURL })} ${GitHubButton({ callbackURL })}
-          `,
-        })}
+        <div class="row justify-content-center">
+          <div class="col-md-8 col-lg-6">
+            <h1 class="h3 mb-3 fw-semibold">Sign In</h1>
+            ${Navigation({ back: { href: "/", text: "Back to Home" } })}
+            <hr class="my-3" />
+            ${Message({ error, success })}
+            <div class="row g-3">
+              <div class="col-sm-6">${GitHubButton({ callbackURL })}</div>
+              <div class="col-sm-6">${MagicLinkButton({ callbackURL })}</div>
+            </div>
+          </div>
+        </div>
       `,
     }),
   );
@@ -37,28 +41,34 @@ function showMagicLinkForm(c) {
     Layout({
       title: "Magic Link Login",
       children: html`
-        <h1>Magic Link Login</h1>
-        ${Navigation({ back: { href: "/login", text: "Back to Login" } })}
-        ${Message({
-          error: c.req.query("error"),
-          success: c.req.query("success"),
-        })}
-        ${FormSection({
-          children: html`
+        <div class="row justify-content-center">
+          <div class="col-md-6 col-lg-5">
+            <h1 class="h3 mb-3 fw-semibold">Sign In</h1>
+            ${Navigation({ back: { href: "/login", text: "Back to Login" } })}
+            <hr class="my-3" />
+            ${Message({
+              error: c.req.query("error"),
+              success: c.req.query("success"),
+            })}
             <form method="post" action="/login/magic-link">
               <input type="hidden" name="callbackURL" value="${callbackURL}" />
-              <fieldset>
+              <div class="mb-3">
+                <label for="email" class="form-label">Email address</label>
                 <input
                   type="email"
+                  class="form-control"
+                  id="email"
                   name="email"
-                  placeholder="Enter your email"
+                  placeholder="you@example.com"
                   required
                 />
-              </fieldset>
-              <button type="submit">Send Magic Link</button>
+              </div>
+              <button type="submit" class="btn btn-cb-primary w-100">
+                Send magic link
+              </button>
             </form>
-          `,
-        })}
+          </div>
+        </div>
       `,
     }),
   );
@@ -85,7 +95,7 @@ async function sendMagicLink(c) {
 async function startGitHubOAuth(c) {
   const auth = getAuthFromContext(c);
   const body = await c.req.parseBody();
-  const { callbackURL } = body;
+  const callbackURL = body.callbackURL || "/";
 
   const data = await auth.api.signInSocial({
     body: { provider: "github", callbackURL },

src/app/routes/home.js

@@ -7,11 +7,8 @@ export default new Hono().get("/", async (c) => {
   const user = c.get("user");
   return c.html(
     Layout({
-      title: "Auth Demo",
-      children: html`
-        <h1>codebar authentication</h1>
-        ${LoginStatus({ user })}
-      `,
+      title: "Home",
+      children: html`${LoginStatus({ user })}`,
     }),
   );
 });

src/app/routes/profile.js

@@ -5,7 +5,6 @@ import { Message } from "../components/common.js";
 import { UserInfo } from "../components/profile.js";
 
 export default new Hono().get("/profile", async (c) => {
-  // Profile page
   const user = c.get("user");
   if (!user) return c.redirect("/login?error=no+session");
 
@@ -16,14 +15,16 @@ export default new Hono().get("/profile", async (c) => {
     Layout({
       title: "Profile",
       children: html`
-        <h1>Profile</h1>
+        <h1 class="h3 mb-3 fw-semibold">Profile</h1>
 
         ${Message({ error, success })} ${UserInfo({ user })}
 
-        <form method="post" action="/logout">
-          <button type="submit">Logout</button>
-        </form>
-        <a href="/">Back to Home</a>
+        <div class="mt-3 d-flex gap-2">
+          <a href="/" class="btn btn-outline-secondary">← Back to Home</a>
+          <form method="post" action="/logout" class="d-inline">
+            <button type="submit" class="btn btn-outline-danger">Logout</button>
+          </form>
+        </div>
       `,
     }),
   );