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)=>{
 constauth=getAuthFromContext(c);
 constusers=awaitauth.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);
 
 consterror=c.req.query("error");
 constsuccess=c.req.query("success");
@@ -34,8 +20,10 @@ export default new Hono()
 Layout({
 title: "Admin",
 children: html`
-<h1>Admin</h1>
-<ahref="/">Back to Home</a>
+<h1class="h3 mb-3 fw-semibold">Admin</h1>
+<ahref="/" 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{
 awaitauth.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 })}
- `,
-})}
+<divclass="row justify-content-center">
+<divclass="col-md-8 col-lg-6">
+<h1class="h3 mb-3 fw-semibold">Sign In</h1>
+${Navigation({back: {href: "/",text: "Back to Home"}})}
+<hrclass="my-3" />
+${Message({ error, success })}
+<divclass="row g-3">
+<divclass="col-sm-6">${GitHubButton({ callbackURL })}</div>
+<divclass="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`
+<divclass="row justify-content-center">
+<divclass="col-md-6 col-lg-5">
+<h1class="h3 mb-3 fw-semibold">Sign In</h1>
+${Navigation({back: {href: "/login",text: "Back to Login"}})}
+<hrclass="my-3" />
+${Message({
+error: c.req.query("error"),
+success: c.req.query("success"),
+})}
 <formmethod="post" action="/login/magic-link">
 <inputtype="hidden" name="callbackURL" value="${callbackURL}" />
-<fieldset>
+<divclass="mb-3">
+<labelfor="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>
-<buttontype="submit">Send Magic Link</button>
+</div>
+<buttontype="submit" class="btn btn-cb-primary w-100">
+ Send magic link
+</button>
 </form>
-`,
-})}
+</div>
+</div>
  `,
 }),
 );
@@ -85,7 +95,7 @@ async function sendMagicLink(c) {
 asyncfunctionstartGitHubOAuth(c){
 constauth=getAuthFromContext(c);
 constbody=awaitc.req.parseBody();
-const{callbackURL }=body;
+constcallbackURL=body.callbackURL||"/";
 
 constdata=awaitauth.api.signInSocial({
 body: {provider: "github", callbackURL },

src/app/routes/home.js

@@ -7,11 +7,8 @@ export default new Hono().get("/", async (c) => {
 constuser=c.get("user");
 returnc.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";
 
 exportdefaultnewHono().get("/profile",async(c)=>{
-// Profile page
 constuser=c.get("user");
 if(!user)returnc.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>
+<h1class="h3 mb-3 fw-semibold">Profile</h1>
 
 ${Message({ error, success })}${UserInfo({ user })}
 
-<formmethod="post" action="/logout">
-<buttontype="submit">Logout</button>
-</form>
-<ahref="/">Back to Home</a>
+<divclass="mt-3 d-flex gap-2">
+<ahref="/" class="btn btn-outline-secondary">← Back to Home</a>
+<formmethod="post" action="/logout" class="d-inline">
+<buttontype="submit" class="btn btn-outline-danger">Logout</button>
+</form>
+</div>
  `,
 }),
 );