acrylblends 0.7.8 → 0.8.0

package/templates/notes/src/notes-app.ts

@@ -0,0 +1,205 @@
+import type { Db } from '../plugins/acryl-db/src/index.ts'
+import {
+  createMiddleware,
+  deleteCookie,
+  getCookie,
+  schemaValidator,
+  setCookie,
+} from '../plugins/acryl-router/src/helpers/index.ts'
+import type { Context } from '../plugins/acryl-router/src/index.ts'
+import { Acryl, HTTPException } from '../plugins/acryl-router/src/index.ts'
+import { csrf } from '../plugins/acryl-router/src/middleware/index.ts'
+import { authStore, verifyPassword } from './auth.ts'
+import { notesStore } from './db.ts'
+import { checkCredentials, checkNote, NoteSchema } from './schema.ts'
+import { authPage, formPage, listPage } from './views.tsx'
+
+type Env = { Variables: { user: { id: number; email: string } } }
+
+const COOKIE = 'sid'
+const MONTH = 60 * 60 * 24 * 30
+
+export interface AppOptions {
+  /** Believe `X-Forwarded-Proto` (set it when a reverse proxy you run terminates HTTPS in front of the app). Default: the TRUST_PROXY=1 environment variable. */
+  trustProxy?: boolean
+  /** The address people use in the browser, for example `https://notes.example.com`. Behind a proxy the app sees `http://127.0.0.1:3000`, so csrf needs it. Default: PUBLIC_ORIGIN. */
+  publicOrigin?: string
+}
+
+export function createApi(db: Db) {
+  const auth = authStore(db)
+  const notes = notesStore(db)
+  return new Acryl<Env>()
+    .use(async (c, next) => {
+      const user = await auth.userFor(getCookie(c, COOKIE))
+      if (!user) return c.json({ error: 'Log in first.' }, 401)
+      c.set('user', user)
+      await next()
+    })
+    .get('/', async (c) =>
+      c.json({ notes: await notes.list(c.get('user').id, c.req.query('q') ?? '') }, 200),
+    )
+    .post('/', schemaValidator('json', NoteSchema), async (c) =>
+      c.json(
+        {
+          note: await notes.create(
+            c.get('user').id,
+            c.req.valid('json').title,
+            c.req.valid('json').body,
+          ),
+        },
+        201,
+      ),
+    )
+    .get('/:id', async (c) => {
+      const note = await notes.get(c.get('user').id, Number(c.req.param('id')))
+      return note ? c.json({ note }, 200) : c.json({ error: 'No such note.' }, 404)
+    })
+    .put('/:id', schemaValidator('json', NoteSchema), async (c) => {
+      const { title, body } = c.req.valid('json')
+      const note = await notes.update(c.get('user').id, Number(c.req.param('id')), title, body)
+      return note ? c.json({ note }, 200) : c.json({ error: 'No such note.' }, 404)
+    })
+    .delete('/:id', async (c) =>
+      (await notes.remove(c.get('user').id, Number(c.req.param('id'))))
+        ? c.json({ ok: true }, 200)
+        : c.json({ error: 'No such note.' }, 404),
+    )
+}
+
+export type Api = ReturnType<typeof createApi>
+
+export function createApp(
+  db: Db,
+  {
+    trustProxy = process.env.TRUST_PROXY === '1',
+    publicOrigin = process.env.PUBLIC_ORIGIN,
+  }: AppOptions = {},
+) {
+  const auth = authStore(db)
+  const notes = notesStore(db)
+  const app = new Acryl<Env>()
+  // Refuses a form POST that does not come from this site (checks Origin and Sec-Fetch-Site); JSON requests are not form-shaped and pass.
+  app.use(csrf(publicOrigin ? { origin: [publicOrigin] } : undefined))
+  // A secure cookie is only sent over HTTPS: set when the request is HTTPS, or a proxy we trust says it was.
+  const session = (c: Context<Env>) => ({
+    path: '/',
+    httpOnly: true,
+    sameSite: 'Lax' as const,
+    maxAge: MONTH,
+    secure:
+      new URL(c.req.url).protocol === 'https:' ||
+      (trustProxy && c.req.header('x-forwarded-proto') === 'https'),
+  })
+  // The log has the stack; the page never does.
+  app.onError((error, c) => {
+    if (error instanceof HTTPException) return error.getResponse()
+    console.error(error)
+    return c.text('Internal Server Error', 500)
+  })
+
+  const requireUser = createMiddleware<Env>(async (c, next) => {
+    const user = await auth.userFor(getCookie(c, COOKIE))
+    if (!user) return c.redirect('/login')
+    c.set('user', user)
+    await next()
+  })
+
+  app.get('/', (c) => c.redirect('/notes'))
+  app.get('/signup', (c) => c.html(authPage('signup')))
+  app.get('/login', (c) => c.html(authPage('login')))
+
+  app.post('/signup', async (c) => {
+    const form = await c.req.parseBody()
+    const email = String(form.email ?? '')
+      .trim()
+      .toLowerCase()
+    const errors = checkCredentials(email, form.password, true)
+    if (errors.length === 0 && (await auth.findUser(email)))
+      errors.push('That email already has an account. Log in instead.')
+    if (errors.length > 0) return c.html(authPage('signup', errors, email), 400)
+    const id = await auth.createUser(email, String(form.password))
+    setCookie(c, COOKIE, await auth.startSession(id), session(c))
+    return c.redirect('/notes', 303)
+  })
+
+  app.post('/login', async (c) => {
+    const form = await c.req.parseBody()
+    const email = String(form.email ?? '')
+      .trim()
+      .toLowerCase()
+    const errors = checkCredentials(email, form.password, false)
+    if (errors.length > 0) return c.html(authPage('login', errors, email), 400)
+    const user = await auth.findUser(email)
+    if (!user || !(await verifyPassword(String(form.password), user.password_hash)))
+      return c.html(authPage('login', ['Wrong email or password.'], email), 401)
+    setCookie(c, COOKIE, await auth.startSession(user.id), session(c))
+    return c.redirect('/notes', 303)
+  })
+
+  app.post('/logout', async (c) => {
+    const token = getCookie(c, COOKIE)
+    if (token) await auth.endSession(token)
+    deleteCookie(c, COOKIE, { path: '/' })
+    return c.redirect('/login', 303)
+  })
+
+  app.use('/notes/*', requireUser)
+  app.use('/notes', requireUser)
+
+  app.get('/notes', async (c) => {
+    const q = (c.req.query('q') ?? '').trim()
+    return c.html(listPage(c.get('user').email, await notes.list(c.get('user').id, q), q))
+  })
+  app.get('/notes/new', (c) =>
+    c.html(formPage(c.get('user').email, '/notes', { title: '', body: '' })),
+  )
+  app.post('/notes', async (c) => {
+    const form = await c.req.parseBody()
+    const checked = checkNote(form)
+    if ('issues' in checked)
+      return c.html(
+        formPage(
+          c.get('user').email,
+          '/notes',
+          { title: String(form.title ?? ''), body: String(form.body ?? '') },
+          checked.issues.map((i) => i.message),
+        ),
+        400,
+      )
+    await notes.create(c.get('user').id, checked.value.title, checked.value.body)
+    return c.redirect('/notes', 303)
+  })
+  app.get('/notes/:id/edit', async (c) => {
+    const note = await notes.get(c.get('user').id, Number(c.req.param('id')))
+    return note
+      ? c.html(formPage(c.get('user').email, `/notes/${note.id}`, note))
+      : c.html(listPage(c.get('user').email, [], ''), 404)
+  })
+  app.post('/notes/:id', async (c) => {
+    const id = Number(c.req.param('id'))
+    const form = await c.req.parseBody()
+    const checked = checkNote(form)
+    if ('issues' in checked)
+      return c.html(
+        formPage(
+          c.get('user').email,
+          `/notes/${id}`,
+          { title: String(form.title ?? ''), body: String(form.body ?? '') },
+          checked.issues.map((i) => i.message),
+        ),
+        400,
+      )
+    if (!(await notes.update(c.get('user').id, id, checked.value.title, checked.value.body)))
+      return c.text('No such note.', 404)
+    return c.redirect('/notes', 303)
+  })
+  app.post('/notes/:id/delete', async (c) => {
+    if (!(await notes.remove(c.get('user').id, Number(c.req.param('id')))))
+      return c.text('No such note.', 404)
+    return c.redirect('/notes', 303)
+  })
+
+  app.route('/api/notes', createApi(db))
+  return app
+}

package/templates/notes/src/routes.ts

@@ -0,0 +1,14 @@
+import type { Context } from '@deepseek-ai/cordis'
+import type {} from '../plugins/acryl-db/src/cordis.ts'
+import { createApp } from './notes-app.ts'
+import { createClient } from './runtime.ts'
+
+/** The app's own plugin: it builds the app on the `db` port and mounts it on the router. The mount is removed when the plugin is disposed. */
+export const routes = {
+  name: 'routes',
+  inject: ['router', 'db'],
+  apply(ctx: Context) {
+    ctx.router.route('/', createApp(ctx.db))
+    ctx.router.route('/client', createClient())
+  },
+}

package/templates/notes/src/runtime.ts

@@ -0,0 +1,17 @@
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+import { clientModules } from '../plugins/acryl-node-server/src/client-modules.ts'
+
+/** The browser builds of the DOM renderer and the typed client, shipped by the `acrylblends` package this app depends on (`clientModules` serves them). */
+const runtimeDir = join(
+  dirname(createRequire(import.meta.url).resolve('acrylblends/package.json')),
+  'lib',
+  'browser',
+)
+
+/**
+ * Client components without a bundler: `src/client` is compiled when the browser asks; `npm run build` compiles it once for production
+ * (`NODE_ENV=production` then serves only `dist/client`). `src/routes.ts` mounts it at `/client` on the router, next to the app.
+ */
+export const createClient = () =>
+  clientModules({ root: 'src/client', compiled: 'dist/client', runtimeDir })

package/templates/notes/src/schema.ts

@@ -0,0 +1,38 @@
+import type { StandardSchema } from '../plugins/acryl-router/src/helpers/index.ts'
+
+export interface NoteInput {
+  title: string
+  body: string
+}
+
+export const TITLE_MAX = 80
+export const BODY_MAX = 2000
+
+/** The one place a note's rules live: the HTML forms and the JSON API both use it. */
+export function checkNote(
+  value: unknown,
+): { value: NoteInput } | { issues: { message: string; path: string[] }[] } {
+  const input = (value ?? {}) as Record<string, unknown>
+  const title = typeof input.title === 'string' ? input.title.trim() : ''
+  const body = typeof input.body === 'string' ? input.body : ''
+  const issues: { message: string; path: string[] }[] = []
+  if (title === '') issues.push({ message: 'Give the note a title.', path: ['title'] })
+  else if (title.length > TITLE_MAX)
+    issues.push({ message: `The title is at most ${TITLE_MAX} characters.`, path: ['title'] })
+  if (body.length > BODY_MAX)
+    issues.push({ message: `The note is at most ${BODY_MAX} characters.`, path: ['body'] })
+  return issues.length > 0 ? { issues } : { value: { title, body } }
+}
+
+export const NoteSchema: StandardSchema<NoteInput> = {
+  '~standard': { validate: (value) => checkNote(value) },
+}
+
+export function checkCredentials(email: unknown, password: unknown, signup: boolean): string[] {
+  const errors: string[] = []
+  if (typeof email !== 'string' || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email))
+    errors.push('Enter a valid email address.')
+  if (typeof password !== 'string' || password === '') errors.push('Enter a password.')
+  else if (signup && password.length < 8) errors.push('The password needs at least 8 characters.')
+  return errors
+}

package/templates/notes/src/views.tsx

@@ -0,0 +1,136 @@
+import type { Note } from './db.ts'
+import { doorEnabled } from './door.ts'
+import { BODY_MAX, TITLE_MAX } from './schema.ts'
+
+const counterScript = `
+const filter = document.getElementById('filter')
+if (filter) filter.addEventListener('input', () => {
+  const q = filter.value.toLowerCase()
+  for (const li of document.querySelectorAll('[data-note]'))
+    li.hidden = !li.textContent.toLowerCase().includes(q)
+})
+`
+
+const Layout = ({
+  title,
+  user,
+  children,
+}: {
+  title: string
+  user?: string
+  children?: unknown
+}) => (
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <title>{title}</title>
+      <style
+        dangerouslySetInnerHTML={{
+          __html:
+            'body{font:16px system-ui;max-width:42rem;margin:2rem auto;padding:0 1rem}label{display:block;margin:.75rem 0 .25rem}input,textarea{width:100%;box-sizing:border-box;padding:.5rem}.error{color:#b00020}nav{display:flex;gap:1rem;align-items:center}nav form{margin-left:auto}li{margin:.5rem 0}',
+        }}
+      />
+    </head>
+    <body>
+      <nav>
+        <strong>Notes</strong>
+        {user ? (
+          <>
+            <a href="/notes">All notes</a>
+            <a href="/notes/new">New note</a>
+            <form method="post" action="/logout">
+              <span>{user} </span>
+              <button type="submit">Log out</button>
+            </form>
+          </>
+        ) : (
+          <>
+            <a href="/login">Log in</a>
+            <a href="/signup">Sign up</a>
+          </>
+        )}
+      </nav>
+      {children}
+      <script dangerouslySetInnerHTML={{ __html: counterScript }} />
+      <script type="module" src="/client/counter.tsx" />
+      {doorEnabled() ? <script type="module" src="/api/acryl-door/page.js" /> : null}
+    </body>
+  </html>
+)
+
+const Errors = ({ errors }: { errors: string[] }) =>
+  errors.length > 0 ? (
+    <ul class="error" role="alert">
+      {errors.map((e) => (
+        <li>{e}</li>
+      ))}
+    </ul>
+  ) : null
+
+export const authPage = (mode: 'login' | 'signup', errors: string[] = [], email = ''): string =>
+  (
+    <Layout title={mode === 'login' ? 'Log in' : 'Sign up'}>
+      <h1>{mode === 'login' ? 'Log in' : 'Sign up'}</h1>
+      <Errors errors={errors} />
+      <form method="post" action={`/${mode}`}>
+        <label for="email">Email</label>
+        <input id="email" name="email" type="email" value={email} />
+        <label for="password">Password</label>
+        <input id="password" name="password" type="password" />
+        <p>
+          <button type="submit">{mode === 'login' ? 'Log in' : 'Create account'}</button>
+        </p>
+      </form>
+    </Layout>
+  ).toString()
+
+export const listPage = (user: string, notes: Note[], q: string): string =>
+  (
+    <Layout title="Notes" user={user}>
+      <h1>Your notes</h1>
+      <form method="get" action="/notes">
+        <label for="filter">Search</label>
+        <input id="filter" name="q" type="search" value={q} />
+        <button type="submit">Search</button>
+      </form>
+      {notes.length === 0 ? <p>{q ? `No note matches "${q}".` : 'No notes yet.'}</p> : null}
+      <ul>
+        {notes.map((n) => (
+          <li data-note>
+            <a href={`/notes/${n.id}/edit`}>{n.title}</a>
+            <form method="post" action={`/notes/${n.id}/delete`} style="display:inline">
+              <button type="submit">Delete</button>
+            </form>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  ).toString()
+
+export const formPage = (
+  user: string,
+  action: string,
+  note: { title: string; body: string },
+  errors: string[] = [],
+): string =>
+  (
+    <Layout title="Note" user={user}>
+      <h1>{action === '/notes' ? 'New note' : 'Edit note'}</h1>
+      <Errors errors={errors} />
+      <form method="post" action={action}>
+        <label for="title">Title</label>
+        <input id="title" name="title" value={note.title} />
+        <label for="body">Note</label>
+        <textarea id="body" name="body" rows={8} maxlength={BODY_MAX}>
+          {note.body}
+        </textarea>
+        <small id="count" aria-live="polite" data-island="counter" />
+        <p>
+          <button type="submit">Save</button> <a href="/notes">Cancel</a>
+        </p>
+      </form>
+    </Layout>
+  ).toString()
+
+export { TITLE_MAX }

package/templates/notes/template.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    "instance",
+    "acryl-router",
+    "acryl-node-server",
+    "acryl-db-sqlite",
+    "manifest",
+    "save",
+    "acryl-door"
+  ]
+}