create-mithaq 0.0.0-stage → 0.2.0

package/template/apps/asas-tanstack/src/first-run.ts

@@ -0,0 +1,16 @@
+import { createServerFn } from '@tanstack/react-start'
+
+type FirstRun = { open: false } | { open: true; code: 'none' | 'required' | 'unset' }
+
+/**
+ * Whether this app of one organization still waits for its first owner, and while it does,
+ * whether first-run asks the setup code: the provider's own state, read in process. With
+ * many organizations nobody waits: each sign-up founds one.
+ */
+export const firstRun = createServerFn({ method: 'GET' }).handler(async (): Promise<FirstRun> => {
+  // Imported inside the server half so no page ships the provider to the browser.
+  const [{ asas }, { organizations }] = await Promise.all([import('asas'), import('asas/organizations')])
+  if (organizations === 'many') return { open: false }
+  type Provider = { name: string; server: { api: { firstRunState(): Promise<FirstRun> } } }
+  return (asas.auth.strategies as unknown as Provider[]).find((one) => one.name === 'user')!.server.api.firstRunState()
+})

package/template/apps/asas-tanstack/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/apps/asas-tanstack/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/apps/asas-tanstack/src/links.ts

@@ -0,0 +1,38 @@
+/**
+ * The path a click on a plain `<a href>` is routed to inside the screen, or
+ * `undefined` for a click the browser keeps: a modified or handled click, another
+ * target, a download, another origin, or a path outside the screen's `base`.
+ */
+export const routedHref = ({
+  event,
+  origin,
+  base,
+}: {
+  event: Pick<MouseEvent, 'button' | 'metaKey' | 'altKey' | 'ctrlKey' | 'shiftKey' | 'defaultPrevented' | 'target'>
+  origin: string
+  base: string
+}): string | undefined => {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return undefined
+  const anchor = (event.target as Element | null)?.closest?.('a[href]')
+  const target = anchor?.getAttribute('target')
+  if (!anchor || (target && target !== '_self') || anchor.hasAttribute('download')) return undefined
+  // The browser's own resolution against the current page: against the origin
+  // alone, `href="edit"` on `/dashboard/courses/` would read as `/edit`.
+  const url = new URL((anchor as HTMLAnchorElement).href)
+  if (url.origin !== origin || (url.pathname !== base && !url.pathname.startsWith(`${base}/`))) return undefined
+  return `${url.pathname}${url.search}${url.hash}`
+}
+
+/**
+ * Where a list asked for a page past its last is sent instead: the same URL at
+ * the last page, or with no page where the last is the first. `undefined` for a
+ * page in range.
+ */
+export const clampedHref = ({ href, page, totalPages }: { href: string; page: number; totalPages: number }): string | undefined => {
+  if (page <= Math.max(1, totalPages)) return undefined
+  const url = new URL(href, 'http://local')
+  if (totalPages > 1) url.searchParams.set('page', String(totalPages))
+  else url.searchParams.delete('page')
+  return `${url.pathname}${url.search}${url.hash}`
+}
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 4754cbac64eeac528e7e037173ad56ffa8d07df3e526e1191bbe3be400db97a5

package/template/apps/asas-tanstack/src/locale-switch.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { localeEntries } from 'mithaq-admin/locale-menu.ts'
+import { locales, showLocale, type Locale } from './copy.ts'
+
+/** The language switch of the auth and landing pages, which redraws the page in place, so a form keeps what was typed. */
+export function LocaleSwitch({ locale }: { locale: Locale }) {
+  const router = useRouter()
+  return (
+    <div className="flex items-center gap-1">
+      {localeEntries(locales, locale).map((entry) => (
+        <Button
+          key={entry.locale}
+          type="button"
+          variant={entry.active ? 'secondary' : 'ghost'}
+          size="xs"
+          aria-current={entry.active}
+          aria-label={entry.label}
+          onClick={() => void showLocale({ to: entry.locale, router })}
+        >
+          <span className="hidden sm:inline">{entry.label}</span>
+          <span className="sm:hidden">{entry.locale.toUpperCase()}</span>
+        </Button>
+      ))}
+    </div>
+  )
+}
+// mithaq-admin 0.0.0 37e32a32766452cd88389e2e4cc6c246ccc3ccb40bf941f8c1e3835b4e377f98

package/template/apps/asas-tanstack/src/no-organization.tsx

@@ -0,0 +1,108 @@
+// What `/unauthorized` draws below its sentence for a person who belongs to no organization: the invitations sent to
+// their address, and with many organizations a way to found one. The screen host imports it from the app, which knows
+// the organization mode the host does not.
+import { useEffect, useState } from 'react'
+import { defaultLocale, organizations } from 'asas/organizations'
+import { endonym } from 'mithaq-admin/locale-menu.ts'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { authArm } from './api.ts'
+import { useRefusal } from './auth-frame.tsx'
+import { locales } from './copy.ts'
+import { useCopy } from './routes/__root.tsx'
+
+/** An invitation as the auth setup answers it: the organization's name in each locale beside the provider's one. */
+type Invitation = { id: string; organizationName: string; organizationNames?: Record<string, string>; expiresAt: string }
+
+/**
+ * Better Auth requires a unique slug, so a random tail keeps same-named organizations apart.
+ * Padded before the cut, so the tail is always six characters and the slug never ends in `-`.
+ */
+const slugOf = (name: string) =>
+  `${name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40) || 'organization'}-${Math.random().toString(36).slice(2).padEnd(6, '0').slice(0, 6)}`
+
+/** Signing in again lands a signed-in person on their first screen, in the organization the session now names. */
+const goIn = () => window.location.assign('/auth/sign-in')
+
+export function NoOrganization({ email, founds = organizations === 'many' }: { email: string | undefined; founds?: boolean }) {
+  const { t, locale } = useCopy()
+  const refusal = useRefusal()
+  const [invitations, setInvitations] = useState<Invitation[]>([])
+  const [name, setName] = useState('')
+  // The organization's name in each other locale, optional: one left empty falls back to `name`.
+  const [names, setNames] = useState<Record<string, string>>({})
+  const others = locales.filter((one) => one !== defaultLocale)
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState<string>()
+  useEffect(() => {
+    // A refusal, such as an address nobody proved, reads as no invitation.
+    void fetch('/api/auth/user/organization/list-user-invitations').then(async (answer) => {
+      if (answer.ok) setInvitations(((await answer.json()) as Invitation[]).filter((one) => new Date(one.expiresAt).getTime() > Date.now()))
+    })
+    if (founds) {
+      void fetch('/api/auth/user/get-session').then(async (answer) => {
+        const named = ((await answer.json().catch(() => null)) as { user?: { name?: string } } | null)?.user?.name
+        if (named) setName((typed) => typed || t('auth.workspaceOf', '{name}\'s workspace')!.replace('{name}', () => named))
+      })
+    }
+  }, [])
+  /** One request at a time, its refusal said in this app's words. */
+  const send = async ({ path, body, done }: { path: string; body: Record<string, unknown>; done: () => void }) => {
+    setBusy(true)
+    setFailed(undefined)
+    const answered = await authArm(path, body)
+    setBusy(false)
+    if (!answered.ok) return setFailed(refusal(answered, t('auth.requestFailed', 'That request did not work.')))
+    done()
+  }
+  return (
+    <div data-no-organization="" className="grid gap-4">
+      {invitations.length ? (
+        <section className="grid gap-2">
+          <h2 className="text-sm font-medium">{t('auth.yourInvitations', 'Your invitations')}</h2>
+          <ul className="grid gap-2">
+            {invitations.map((one) => (
+              <li key={one.id} data-invitation={one.id} className="flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2">
+                <bdi className="[overflow-wrap:anywhere]">{one.organizationNames?.[locale] || one.organizationName}</bdi>
+                <span className="flex gap-2">
+                  <Button type="button" size="sm" data-accept={one.id} disabled={busy} onClick={() => void send({ path: 'organization/accept-invitation', body: { invitationId: one.id }, done: goIn })}>
+                    {t('auth.invitationAccept', 'Accept the invitation')}
+                  </Button>
+                  <Button type="button" size="sm" variant="outline" data-decline={one.id} disabled={busy} onClick={() => void send({ path: 'organization/reject-invitation', body: { invitationId: one.id }, done: () => setInvitations((all) => all.filter((other) => other.id !== one.id)) })}>
+                    {t('auth.invitationDecline', 'Decline')}
+                  </Button>
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+      {founds ? (
+        <form
+          data-create-organization=""
+          className="grid gap-2"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault()
+            const named = { [defaultLocale]: name.trim(), ...Object.fromEntries(others.map((one) => [one, names[one]?.trim() ?? '']).filter(([, one]) => one)) }
+            if (name.trim()) void send({ path: 'organization/create', body: { name: name.trim(), names: JSON.stringify(named), slug: slugOf(name.trim()) }, done: goIn })
+          }}
+        >
+          <label htmlFor="new-organization" className="text-sm font-medium">{t('auth.createOrganization', 'Create an organization')}</label>
+          <Input id="new-organization" value={name} maxLength={100} autoComplete="organization" dir="auto" onChange={(event) => setName(event.target.value)} />
+          {others.map((one) => (
+            <div key={one} className="grid gap-1">
+              <label htmlFor={`new-organization-${one}`} className="text-muted-foreground text-sm">{t('auth.organizationNameIn', 'Its name in {language}, if it has one')!.replace('{language}', () => endonym(one))}</label>
+              <Input id={`new-organization-${one}`} lang={one} dir="auto" value={names[one] ?? ''} maxLength={100} onChange={(event) => setNames((held) => ({ ...held, [one]: event.target.value }))} />
+            </div>
+          ))}
+          <Button type="submit" disabled={busy || !name.trim()}>{t('auth.createOrganizationSubmit', 'Create')}</Button>
+        </form>
+      ) : null}
+      <p className="text-muted-foreground text-sm">
+        {t('auth.askToBeInvited', 'Ask an administrator to invite {email}.')!.split(/(\{email\})/).map((part, at) => (part === '{email}' ? <bdi key={at} className="[overflow-wrap:anywhere]">{email}</bdi> : part))}
+      </p>
+      {failed ? <p role="alert" className="text-destructive text-sm">{failed}</p> : null}
+    </div>
+  )
+}

package/template/apps/asas-tanstack/src/quiet-abort.ts

@@ -0,0 +1,25 @@
+/**
+ * h3 knows its own error by the name `HTTPError` alone. 499 is the status nginx logs for a client
+ * that closed its request.
+ */
+const gone = () =>
+  Object.assign(new Error('The client closed the request.'), {
+    name: 'HTTPError',
+    status: 499,
+    statusText: 'Client Closed Request',
+    toJSON: () => ({ status: 499, message: 'The client closed the request.' }),
+  })
+
+/**
+ * The request handed to TanStack Start, whose signal aborts with `gone` when the client's does.
+ * Start throws the signal's reason on abort and h3 logs any error that is not its own as an
+ * unhandled 500, so a closed tab would be logged as a fault. The request is rebuilt from its parts
+ * because the Node server's srvx request is a class `new Request(request)` cannot read.
+ */
+export const withQuietAbort = (request: Request): Request => {
+  const controller = new AbortController()
+  if (request.signal.aborted) controller.abort(gone())
+  else request.signal.addEventListener('abort', () => controller.abort(gone()), { once: true })
+  const { method, headers, body } = request
+  return new Request(request.url, { method, headers, body: method === 'GET' || method === 'HEAD' ? null : body, signal: controller.signal, duplex: 'half' } as RequestInit)
+}

package/template/apps/asas-tanstack/src/redirect.ts

@@ -0,0 +1,39 @@
+/**
+ * Where signing in lands: only a path of this origin, so a link cannot turn the sign-in page
+ * into a jump to another site; anything else lands on `home`.
+ *
+ * The origin is the URL parser's answer rather than a prefix test's, so `https://elsewhere`,
+ * `//elsewhere` and `javascript:` are refused however they are spelled. A backslash, a C0 control
+ * and DEL are refused before the parse, since the parser rewrites or strips them before reading
+ * the host. They are written as escapes so git and grep keep reading this file as text.
+ *
+ * The answer is the parser's own path, its dot segments resolved, plain or percent-encoded, so what
+ * a caller reads is where the browser goes. A path that resolves to `//` is refused, since a browser
+ * reads it as another origin: `/..//elsewhere` resolves to `//elsewhere`.
+ */
+const base = 'https://mithaq.invalid'
+
+export const wanted = ({ asked, home }: { asked: string | undefined; home: string }): string => {
+  if (asked === undefined || !asked.startsWith('/') || /[\\\x00-\x1f\x7f]/.test(asked)) return home
+  try {
+    const url = new URL(asked, base)
+    return url.origin === base && !url.pathname.startsWith('//') ? url.pathname + url.search + url.hash : home
+  } catch {
+    // `new URL('//', base)` throws rather than resolving.
+    return home
+  }
+}
+
+/**
+ * Where a signed-in person goes: the path asked for where it lies inside a screen they open, else the
+ * one screen they open, else the dashboard, since whoever opens several is staff, else `/unauthorized`,
+ * which asks which of several or says why there is none. The dashboard is found by its screen's name,
+ * never its place in the list. A path in a screen they do not open is not followed, since there they
+ * would only be refused.
+ */
+export const landing = ({ asked, screens }: { asked: string | undefined; screens: readonly { name: string; path: string }[] }): string => {
+  const home = (screens.length === 1 ? screens[0] : screens.find((one) => one.name === 'dashboard'))?.path ?? '/unauthorized'
+  const path = wanted({ asked, home })
+  const { pathname } = new URL(path, base)
+  return screens.some(({ path: screen }) => pathname === screen || pathname.startsWith(`${screen}/`)) ? path : home
+}

package/template/apps/asas-tanstack/src/request-headers.ts

@@ -0,0 +1,11 @@
+/**
+ * The headers a page's server-side `request` call sends: the session's, with
+ * the loader's own layered over them. The session's cookie always wins, so a
+ * loader's headers cannot act as another actor.
+ */
+export const mergedHeaders = (session: Headers, own?: HeadersInit): Headers => {
+  const headers = new Headers(session)
+  if (own) for (const [key, value] of new Headers(own)) if (key !== 'cookie') headers.set(key, value)
+  return headers
+}
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 2969a3dafbf201d6eb6074ecda0e8f17e341cbd1ca176100350844e74ec23623