@devchitchat/chat 0.0.0

package/pages/admin/users/[userId].phtml

@@ -0,0 +1,57 @@
+<div class="admin-page">
+  <nav class="admin-nav">
+    <a href="{{base}}/admin/invites" class="admin-nav-link">Invites</a>
+    <a href="{{base}}/admin/users" class="admin-nav-link active">Users</a>
+    <a href="{{base}}/admin/bots" class="admin-nav-link">Bots</a>
+  </nav>
+
+  <h1>Edit user: <code>{{target.handle}}</code></h1>
+
+  {{#if flash}}
+  <div class="admin-notice admin-notice--success">Saved.</div>
+  {{/if}}
+
+  <section class="admin-section">
+    <h2>Display name</h2>
+    <form method="POST" class="admin-form">
+      <input type="hidden" name="action" value="set_display_name">
+      <div class="form-row">
+        <label for="display_name">Display name</label>
+        <input type="text" id="display_name" name="display_name" value="{{target.display_name}}" required>
+      </div>
+      <button type="submit" class="btn">Save</button>
+    </form>
+  </section>
+
+  <section class="admin-section">
+    <h2>Roles</h2>
+    <form method="POST" class="admin-form">
+      <input type="hidden" name="action" value="set_roles">
+      <div class="form-row">
+        <label class="checkbox-label">
+          <input type="checkbox" name="roles" value="user" {{#if isUser}}checked{{/if}}> user
+        </label>
+        <label class="checkbox-label">
+          <input type="checkbox" name="roles" value="guest" {{#if isGuest}}checked{{/if}}> guest
+        </label>
+        <label class="checkbox-label">
+          <input type="checkbox" name="roles" value="admin" {{#if isAdmin}}checked{{/if}}> admin
+        </label>
+      </div>
+      <button type="submit" class="btn">Update roles</button>
+    </form>
+  </section>
+
+  <section class="admin-section">
+    <h2>Reset password</h2>
+    <form method="POST" class="admin-form">
+      <input type="hidden" name="action" value="set_password">
+      <div class="form-row">
+        <label for="new_password">New password</label>
+        <input type="password" id="new_password" name="new_password" minlength="8" required>
+      </div>
+      <button type="submit" class="btn btn-danger">Reset password</button>
+    </form>
+    <p class="admin-hint">Resets the password and revokes all active sessions for this user.</p>
+  </section>
+</div>

package/pages/admin/users/index.js

@@ -0,0 +1,20 @@
+import { requireAdminSession } from '../../../src/adminAuth.js'
+import { auth } from '../../../src/context.js'
+
+export function GET(req) {
+  const session = requireAdminSession(req)
+  if (session instanceof Response) return session
+
+  const users = auth.listUsers({ requestingUserId: session.user.user_id })
+
+  return {
+    user: session.user,
+    pageTitle: 'Admin — Users',
+    users: users.map(u => ({
+      ...u,
+      isAdmin: u.roles.includes('admin'),
+      isBot: u.roles.includes('bot'),
+      created_at_fmt: new Date(u.created_at).toLocaleString(),
+    })),
+  }
+}

package/pages/admin/users/index.phtml

@@ -0,0 +1,37 @@
+<div class="admin-page">
+  <nav class="admin-nav">
+    <a href="{{base}}/admin/invites" class="admin-nav-link">Invites</a>
+    <a href="{{base}}/admin/users" class="admin-nav-link active">Users</a>
+    <a href="{{base}}/admin/bots" class="admin-nav-link">Bots</a>
+  </nav>
+
+  <h1>Users</h1>
+
+  <section class="admin-section">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Handle</th>
+          <th>Display name</th>
+          <th>Roles</th>
+          <th>Joined</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+      {{#each users}}
+        <tr>
+          <td><code>{{handle}}</code></td>
+          <td>{{display_name}}</td>
+          <td>
+            {{#if isAdmin}}<span class="tag tag--admin">admin</span>{{/if}}
+            {{#if isBot}}<span class="tag tag--bot">bot</span>{{/if}}
+          </td>
+          <td>{{created_at_fmt}}</td>
+          <td><a href="{{base}}/admin/users/{{user_id}}" class="btn-ghost">Edit</a></td>
+        </tr>
+      {{/each}}
+      </tbody>
+    </table>
+  </section>
+</div>

package/pages/api/uploads/index.js

@@ -0,0 +1,66 @@
+/**
+ * POST /api/uploads
+ *
+ * Accepts multipart/form-data with fields:
+ *   file      — binary file
+ *   channel_id — target channel
+ *
+ * Returns 200 { upload_id, url, original_name, mime_type, size_bytes }
+ * or 4xx/5xx on error.
+ */
+import { sessionFromRequest, botUserFromRequest, uploadService } from '../../../src/context.js'
+import { ServiceError, httpStatus } from '../../../src/util/errors.js'
+
+const MAGIC_BYTES = 16
+
+export async function POST(req) {
+  const session  = sessionFromRequest(req)
+  const botUser  = session ? null : await botUserFromRequest(req)
+  const reqUser  = session?.user ?? botUser
+  if (!reqUser) return new Response('Unauthorized', { status: 401 })
+
+  let formData
+  try {
+    formData = await req.formData()
+  } catch {
+    return new Response('Bad Request: expected multipart/form-data', { status: 400 })
+  }
+
+  const channelId = formData.get('channel_id')
+  if (!channelId) return new Response('Bad Request: channel_id required', { status: 400 })
+
+  const fileEntry = formData.get('file')
+  if (!fileEntry || typeof fileEntry === 'string') {
+    return new Response('Bad Request: file required', { status: 400 })
+  }
+
+  const filename = fileEntry.name || 'upload'
+  const sizeBytes = fileEntry.size
+
+  // Read the full file into memory — needed for MIME detection and storage
+  const fullBuf = await fileEntry.arrayBuffer()
+  const buf = new Uint8Array(fullBuf)
+  const magicBuf = buf.slice(0, MAGIC_BYTES)
+
+  try {
+    const result = await uploadService.upload({
+      userId: reqUser.user_id,
+      channelId,
+      userRoles: reqUser.roles ?? [],
+      filename,
+      stream: buf,
+      sizeBytes,
+      magicBuf,
+    })
+    return Response.json(result, { status: 200 })
+  } catch (err) {
+    if (err instanceof ServiceError) {
+      const status = httpStatus(err)
+      return Response.json({ error: err.message }, { status })
+    }
+    if (err.code === 'UNSUPPORTED_TYPE') {
+      return Response.json({ error: err.message }, { status: 415 })
+    }
+    throw err
+  }
+}

package/pages/api/user/settings.js

@@ -0,0 +1,26 @@
+import { sessionFromRequest, userSettingsService } from '../../../src/context.js'
+
+export async function GET(req) {
+  const session = sessionFromRequest(req)
+  if (!session) return new Response('Unauthorized', { status: 401 })
+  const result = userSettingsService.getSettings(session.user.user_id)
+  return Response.json(result)
+}
+
+export async function PUT(req) {
+  const session = sessionFromRequest(req)
+  if (!session) return new Response('Unauthorized', { status: 401 })
+
+  let body
+  try {
+    body = await req.json()
+  } catch {
+    return new Response('Bad Request', { status: 400 })
+  }
+
+  const { settings, updated_at } = body
+  if (typeof updated_at !== 'number') return new Response('Bad Request', { status: 400 })
+
+  const result = userSettingsService.putSettings(session.user.user_id, settings ?? {}, updated_at)
+  return Response.json(result)
+}

package/pages/auth/signout.js

@@ -0,0 +1,14 @@
+import { auth, sessionFromRequest, sessionCookie } from '../../src/context.js'
+import { p } from '../../src/config.js'
+
+export async function POST(req) {
+  const session = sessionFromRequest(req)
+  if (session) auth.revokeSession(session.session_id)
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: p('/login'),
+      'Set-Cookie': sessionCookie(null, { clear: true }),
+    }
+  })
+}

package/pages/channels/[channelId].js

@@ -0,0 +1,99 @@
+import { sessionFromRequest, channelService, hubService, messageService, reactionService, auth, logger } from '../../src/context.js'
+import { renderMarkdown } from '@devchitchat/index97/markdown'
+import { p, BASE_PATH } from '../../src/config.js'
+
+/// TODO: Come up with a better strategy to allow for styled messages. Maybe you build a custom markdown parser
+// that drops everything else but the styled text?
+function sanitizeForFrontEnd(html) {
+  let output = html.toString()
+  output = output.replaceAll('<script>', '')
+  output = output.replaceAll('</script>', '')
+
+  return output
+}
+
+export async function GET(req) {
+  const session = sessionFromRequest(req)
+  if (!session) return Response.redirect(new URL(p('/login'), req.url), 302)
+
+  const url = new URL(req.url)
+  const channelId = url.pathname.split('/').pop()
+  const user = session.user
+  let channel = channelService.getChannel(channelId)
+  if (!channel || channel.deleted_at) {
+    logger?.warn('channel.not_found', { channelId, userId: user.user_id })
+    return new Response('Channel not found', { status: 404 })
+  }
+
+  // Auto-join public channels on first visit
+  if (!channelService.isMember(channelId, user.user_id)) {
+    if (channel.visibility === 'public') {
+      try {
+        channelService.joinChannel({ channelId, userId: user.user_id, userRoles: user.roles })
+      } catch (err) {
+        logger?.error('channel.join_failed', { channelId, userId: user.user_id, error: err.message })
+        return new Response('Forbidden', { status: 403 })
+      }
+    } else {
+      logger?.warn('channel.access_denied', { channelId, userId: user.user_id, visibility: channel.visibility })
+      return new Response('Forbidden', { status: 403 })
+    }
+  }
+
+  // SSR: last 50 messages baked into the page for instant render
+  const { messages: rawSeedMessages } = messageService.listLatestMessages({
+    channelId,
+    userId: user.user_id,
+    limit: 50,
+  })
+  const seedMessages = reactionService
+    ? reactionService.enrichWithReactions({ messages: rawSeedMessages, requestingUserId: user.user_id })
+    : rawSeedMessages
+  const seedSeq = seedMessages.length ? seedMessages[seedMessages.length - 1].seq : 0
+  const seedFirstSeq = seedMessages.length ? seedMessages[0].seq : 0
+  const seedHasMore = seedFirstSeq > 1
+
+  // Sidebar data: hubs + channels for nav
+  const hubs = hubService.listHubs(user.user_id, user.roles)
+  const allChannels = channelService.listChannels(user.user_id, user.roles)
+  const hubsWithChannels = hubs.map(hub => ({
+    ...hub,
+    channels: allChannels
+      .filter(c => c.hub_id === hub.hub_id)
+      .map(c => ({
+        ...c,
+        className: channelId === c.channel_id ? 'channel-item active' : 'channel-item',
+        url: p(`/channels/${c.channel_id}`),
+        label: `# ${c.name}`
+      }))
+  }))
+
+  // For DM channels, replace the internal name with the other person's display name
+  if (channel.kind === 'dm') {
+    const otherUserId = channel.name.split(':').slice(1).find(id => id !== user.user_id)
+    const otherUser = otherUserId ? auth.getUser(otherUserId) : null
+    channel = { ...channel, name: otherUser?.display_name ?? 'Direct Message', topic: null }
+  }
+
+  return {
+    user,
+    isAdmin: user.roles?.includes('admin') ?? false,
+    channel,
+    currentChannelId: channelId,
+    vapidPublicKey: process.env.VAPID_PUBLIC_KEY ?? '',
+    base: BASE_PATH,
+    seedFirstSeq,
+    seedHasMore,
+    seedMessages: seedMessages.map(m => ({
+      ...m,
+      raw_text: m.text,
+      text: sanitizeForFrontEnd(renderMarkdown(m.text).html),
+      ts_fmt: new Date(m.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      attachments_json: m.attachments?.length ? JSON.stringify(m.attachments) : '',
+      reactions_json: m.reactions?.length ? JSON.stringify(m.reactions) : '',
+      edited_at: m.edited_at ?? '',
+    })),
+    seedSeq,
+    hubs: hubsWithChannels,
+  }
+}

package/pages/channels/[channelId].phtml

@@ -0,0 +1,173 @@
+<!-- Sidebar island: hub/channel nav + online presence -->
+<aside class="sidebar" id="sidebar" role="navigation" aria-label="Channels" island="{{base}}/client/islands/sidebar.js" data-currentChannel="{{currentChannelId}}" data-userid="{{user.user_id}}" data-vapid-key="{{vapidPublicKey}}">
+  <section each="hubs" key="hub_id" class="hub-group">
+    {{#each hubs}}
+    <details class="hub-header" data-key="{{hub_id}}" data-visibility="{{visibility}}" data-description="{{description}}" draggable="true" open>
+      <summary class="hub-name" data-hub-id="{{hub_id}}">
+        <span text="name">{{name}}</span>
+        <button class="btn-hub-gear btn-icon" title="Hub settings" aria-label="Hub settings" type="button">&#9881;</button>
+        <button class="btn-hub-add btn-icon" title="Create a channel" aria-label="Create a channel" type="button">+</button>
+      </summary>
+      <ul each="channels" key="channel_id" class="channel-list">
+        <template>
+          <li class="channel-item" cls="className" draggable="true">
+            <a attr="href:url" text="name" class="channel-link"
+               data-channel-id=""
+               data-channel-name=""
+               data-channel-topic=""
+               data-channel-kind=""
+               data-channel-visibility=""></a>
+            <span class="call-badge" aria-label="Call active"></span>
+            <button class="btn-channel-gear btn-icon" title="Channel settings" aria-label="Channel settings" type="button">&#9881;</button>
+          </li>
+        </template>
+      {{#each channels}}
+        <li data-key="{{channel_id}}" class="channel-item {{className}}" cls="className" draggable="true">
+          <a attr="href:url" text="name" class="channel-link"
+             href="{{base}}/channels/{{channel_id}}"
+             data-channel-id="{{channel_id}}"
+             data-channel-name="{{name}}"
+             data-channel-topic="{{topic}}"
+             data-channel-kind="{{kind}}"
+             data-channel-visibility="{{visibility}}">{{name}}</a>
+          <span class="call-badge" aria-label="Call active"></span>
+          <button class="btn-channel-gear btn-icon" title="Channel settings" aria-label="Channel settings" type="button">&#9881;</button>
+        </li>
+      {{/each}}
+      </ul>
+    </details>
+    {{/each}}
+  </section>
+
+  <section class="dm-section">
+    <h3 class="dm-section-title">Direct Messages</h3>
+    <ul class="dm-list" id="dm-list">
+      <!-- populated by sidebar.js via dm.list_result -->
+    </ul>
+  </section>
+
+  <footer class="sidebar-footer">
+    <button class="btn-new-hub" id="btn-new-hub" type="button" aria-label="Create a new hub">+ New hub</button>
+    <div class="sidebar-footer-controls">
+      {{#if user}}
+      <span class="sidebar-username">{{user.display_name}}</span>
+      {{/if}}
+      <label for="theme-picker" class="sr-only">Theme</label>
+      <select id="theme-picker" aria-label="Choose theme" autocomplete="off">
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+        <option value="ocean">Ocean</option>
+        <option value="forest">Forest</option>
+        <option value="rose">Rose</option>
+      </select>
+      {{#if isAdmin}}
+      <a href="{{base}}/admin/invites" class="btn-ghost btn-sm">Admin</a>
+      {{/if}}
+      {{#if user}}
+      <form method="POST" action="{{base}}/auth/signout">
+        <button type="submit" class="btn-ghost btn-sm">Sign out</button>
+      </form>
+      {{/if}}
+    </div>
+    <!-- Mini-bar: shown when the user is in a call and navigates to another channel -->
+    <div class="call-mini-bar" id="call-mini-bar">
+      <span class="call-mini-bar-channel" id="mini-bar-channel-name"></span>
+      <button class="btn-icon" id="mini-bar-mic" aria-label="Toggle mic" type="button">🎙</button>
+      <button class="btn-ghost" id="mini-bar-return" aria-label="Return to call" type="button">↩</button>
+      <button class="btn-ghost" id="mini-bar-leave" aria-label="Leave call" style="color: var(--color-danger)" type="button">✕</button>
+    </div>
+  </footer>
+</aside>
+
+<!-- Main content wrapper: slides in from right on mobile -->
+<div class="main-content">
+
+<!-- Chat + call island: messages, composer, and WebRTC -->
+<section class="chat-panel" island="{{base}}/client/islands/call.js"
+  data-id="{{channel.channel_id}}"
+  data-name="{{channel.name}}"
+  data-topic="{{channel.topic}}"
+  data-kind="{{channel.kind}}"
+  data-user-id="{{user.user_id}}"
+  data-user-handle="{{user.handle}}"
+  data-user-display-name="{{user.display_name}}"
+  data-user-roles="{{user.roles}}"
+  data-seed-seq="{{seedSeq}}"
+  data-seed-first-seq="{{seedFirstSeq}}"
+  data-seed-has-more="{{seedHasMore}}"
+>
+
+  <header class="chat-header">
+    <button class="btn-back-mobile" aria-label="Back to channels" type="button">&#8592;</button>
+    <hgroup>
+      <h2 class="chat-title" text="channelName">{{channel.name}}</h2>
+      <p class="chat-topic" text="channelTopic">{{channel.topic}}</p>
+    </hgroup>
+    <div class="chat-header-actions">
+      <button class="btn-ghost btn-start-call" id="btn-start-call" aria-label="Start call" type="button">
+        Start call
+      </button>
+    </div>
+  </header>
+
+  <!-- Call status row: shown when a call is active and user hasn't joined -->
+  <div class="call-status" id="call-status" hidden>
+    <span class="call-status-dot"></span>
+    <span class="call-status-info" id="call-status-info">Call in progress</span>
+    <div class="call-status-avatars" id="call-status-avatars"></div>
+    <button class="btn-primary" id="btn-join-call" style="padding: 6px 14px; font-size: 13px" type="button">
+      Join call
+    </button>
+  </div>
+
+  <!-- In-call controls bar: shown when user is in the call -->
+  <div class="call-controls-bar" id="call-controls-bar">
+    <button class="btn-icon" id="ctrl-mic" aria-label="Toggle microphone" type="button">🎙</button>
+    <button class="btn-icon" id="ctrl-cam" aria-label="Toggle camera" type="button">📷</button>
+    <button class="btn-icon" id="ctrl-screen" aria-label="Share screen" type="button">🖥</button>
+    <button class="btn-icon" id="ctrl-devices" aria-label="Switch camera or microphone" type="button">&#9881;</button>
+    <span class="call-peer-count" id="call-peer-count"></span>
+    <button class="btn-leave" id="btn-leave-call" type="button">Leave</button>
+  </div>
+
+  <!-- Server-rendered initial messages baked in -->
+  <div class="messages" id="messages" aria-live="polite" aria-label="Messages" role="log">
+    <div class="load-more-sentinel" id="load-more-sentinel" aria-hidden="true" hidden></div>
+    {{#each seedMessages}}
+    <article class="message" data-seq="{{seq}}" data-msg-id="{{msg_id}}" data-key="message_id" data-user-id="{{user_id}}" data-raw-text="{{raw_text}}" data-edited-at="{{edited_at}}" data-attachments="{{attachments_json}}" data-reactions="{{reactions_json}}">
+      <span class="message-handle" data-user-id="{{user_id}}">{{user_display_name}}</span>
+      <time class="message-time" datetime="{{ts}}">{{ts_fmt}}{{#if edited_at}}<span class="message-edited">(edited)</span>{{/if}}</time>
+      <p class="message-text">{{{text}}}</p>
+      <div class="reaction-bar"></div>
+    </article>
+    {{/each}}
+    <template>
+    <article class="message">
+      <span class="message-handle"></span>
+      <time class="message-time" datetime=""></time>
+      <p class="message-text" text="text"></p>
+    </article>
+    </template>
+  </div>
+
+  <footer class="composer">
+    <button onclick="toggleUrgentMode" class="btn-urgent-toggle" type="button"
+      cls="urgentClass"
+      title="Toggle urgent mode — Enter sends as urgent (Ctrl+Enter for one-shot)" aria-label="Toggle urgent send">&#x1F514;</button>
+    <textarea model="draft" id="message-input" placeholder="Message in {{channel.name}}" aria-label="Write a message"
+      rows="1" onkeydown="handleComposerKey">
+    </textarea>
+    <button onclick="sendMessage" class="btn-send" aria-label="Send message" type="button">Send</button>
+  </footer>
+</section><!-- /.chat-panel -->
+
+<!-- Tile panel: sibling of chat-panel, never inside it -->
+<div class="tile-panel" id="tile-panel">
+  <div class="tile-panel-header">
+    <span class="tile-panel-title" id="tile-panel-title">Call</span>
+    <button class="btn-icon tile-panel-collapse" id="tile-panel-collapse" aria-label="Collapse tile panel" type="button">&#8854;</button>
+  </div>
+  <div class="tile-grid" id="tile-grid"></div>
+</div>
+
+</div><!-- /.main-content -->

package/pages/index.js

@@ -0,0 +1,33 @@
+import { sessionFromRequest, channelService, hubService, userSettingsService } from '../src/context.js'
+import { p } from '../src/config.js'
+
+export async function GET(req) {
+  const session = sessionFromRequest(req)
+  if (!session) {
+    return Response.redirect(new URL(p('/login'), req.url), 302)
+  }
+
+  const user = session.user
+
+  // Fresh-device fallback: redirect to last visited channel if recorded and still accessible.
+  // Clear the setting and fall through if the channel is gone or the user lost access,
+  // so they are never trapped in a redirect loop.
+  const { settings } = userSettingsService.getSettings(user.user_id)
+  if (settings.last_channel_id) {
+    if (channelService.canAccessChannel(settings.last_channel_id, user.user_id, user.roles)) {
+      return Response.redirect(new URL(p(`/channels/${settings.last_channel_id}`), req.url), 302)
+    }
+    userSettingsService.putSettings(user.user_id, { last_channel_id: null }, Date.now())
+  }
+
+  const channels = channelService.listChannels(user.user_id, user.roles)
+  if (channels.length > 0) {
+    return Response.redirect(new URL(p(`/channels/${channels[0].channel_id}`), req.url), 302)
+  }
+
+  // No channels yet — bootstrap defaults and redirect
+  const hub = hubService.ensureDefaultHub(user.user_id)
+  const channel = channelService.ensureDefaultChannel(hub.hub_id, user.user_id)
+  channelService.joinChannel({ channelId: channel.channel_id, userId: user.user_id, userRoles: user.roles })
+  return Response.redirect(new URL(p(`/channels/${channel.channel_id}`), req.url), 302)
+}

package/pages/invite/[token].js

@@ -0,0 +1,10 @@
+import { p } from '../../src/config.js'
+
+/**
+ * /invite/:token — redirect to the signup tab on /login with token pre-filled.
+ */
+export async function GET(req) {
+  const url = new URL(req.url)
+  const token = url.pathname.split('/').pop()
+  return Response.redirect(new URL(p(`/login?invite=${encodeURIComponent(token)}`), req.url), 302)
+}

package/pages/login/index.js

@@ -0,0 +1,57 @@
+import { auth, sessionFromRequest, sessionCookie } from '../../src/context.js'
+import { p } from '../../src/config.js'
+
+export async function GET(req) {
+  const session = sessionFromRequest(req)
+  if (session) return Response.redirect(new URL(p('/'), req.url), 302)
+
+  const url = new URL(req.url)
+  const inviteToken = url.searchParams.get('invite') ?? ''
+  const shouldShowSignup = !!inviteToken
+  return { error: null, shouldShowSignup, invite_token: inviteToken }
+}
+
+export async function POST(req) {
+  const form = await req.formData()
+  const action = form.get('_action')
+
+  try {
+    if (action === 'signin') {
+      const handle = form.get('handle')?.trim()
+      const password = form.get('password')
+      const result = await auth.signInWithPassword({ handle, password })
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: p('/'),
+          'Set-Cookie': sessionCookie(result.sessionToken),
+        }
+      })
+    }
+
+    if (action === 'signup') {
+      const inviteToken = form.get('invite_token')?.trim()
+      const handle = form.get('handle')?.trim()
+      const display_name = form.get('display_name')?.trim() || handle
+      const password = form.get('password')
+      const result = await auth.redeemInvite({ inviteToken, profile: { handle, display_name }, password })
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: p('/'),
+          'Set-Cookie': sessionCookie(result.sessionToken),
+        }
+      })
+    }
+
+    return new Response('Bad request', { status: 400 })
+  } catch (err) {
+    const showSignup = action === 'signup'
+    const invite_token = showSignup ? (form.get('invite_token') ?? '') : ''
+    return {
+      error: err.message ?? 'Something went wrong',
+      showSignup,
+      invite_token,
+    }
+  }
+}

package/pages/login/index.phtml

@@ -0,0 +1,29 @@
+<section class="signin">
+{{#if error}}
+  <div class="alert alert-error" role="alert">{{error}}</div>
+{{/if}}
+
+  <!-- Sign in -->
+  <section id="panel-signin" role="tabpanel">
+    <form method="POST" action="{{base}}/login" class="auth-form" novalidate>
+      <input type="hidden" name="_action" value="signin">
+      <div class="field">
+        <label for="signin-handle">Handle</label>
+        <input id="signin-handle" name="handle" type="text" autocomplete="username" autocapitalize="none" required
+          placeholder="your-handle">
+      </div>
+      <div class="field">
+        <label for="signin-password">Password</label>
+        <input id="signin-password" name="password" type="password" autocomplete="current-password" required
+          placeholder="••••••••">
+      </div>
+      <button type="submit" class="btn-primary">Sign in</button>
+    </form>
+  </section>
+  <footer>
+    <div class="auth-tabs" role="tablist">
+      <a role="tab" aria-controls="panel-signin" aria-selected="true" href="{{base}}/login" title="Sign in">Sign in</a>
+      <a role="tab" aria-controls="panel-signup" aria-selected="false" href="{{base}}/registration" title="Sign up">Sign up</a>
+    </div>
+  </footer>
+</section>