create-mithaq 0.1.1 → 0.2.1

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/links.ts

@@ -35,4 +35,4 @@ export const clampedHref = ({ href, page, totalPages }: { href: string; page: nu
   else url.searchParams.delete('page')
   return `${url.pathname}${url.search}${url.hash}`
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 4754cbac64eeac528e7e037173ad56ffa8d07df3e526e1191bbe3be400db97a5
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 4754cbac64eeac528e7e037173ad56ffa8d07df3e526e1191bbe3be400db97a5

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

@@ -1,9 +1,11 @@
+import { useRouter } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
-import { localeEntries } from './components/mithaq/nav.tsx'
-import { locales, switchLocale, type Locale } from './copy.ts'
+import { localeEntries } from 'mithaq-admin/locale-menu.ts'
+import { locales, showLocale, type Locale } from './copy.ts'
 
-/** The language switch for pages without a form: `switchLocale` reloads without asking, so a page with a form must use the user menu, which asks first. */
+/** 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) => (
@@ -14,7 +16,7 @@ export function LocaleSwitch({ locale }: { locale: Locale }) {
           size="xs"
           aria-current={entry.active}
           aria-label={entry.label}
-          onClick={() => switchLocale({ to: entry.locale })}
+          onClick={() => void showLocale({ to: entry.locale, router })}
         >
           <span className="hidden sm:inline">{entry.label}</span>
           <span className="sm:hidden">{entry.locale.toUpperCase()}</span>
@@ -23,4 +25,4 @@ export function LocaleSwitch({ locale }: { locale: Locale }) {
     </div>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 43c6d309a5bae4f6af3cdcf4c741106b3a16129ac77d142f1e4254594f5b8a54
+// 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/redirect.ts

@@ -6,15 +6,34 @@
  * `//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 {
-    return new URL(asked, base).origin === base ? asked : home
+    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

@@ -8,4 +8,4 @@ export const mergedHeaders = (session: Headers, own?: HeadersInit): Headers => {
   if (own) for (const [key, value] of new Headers(own)) if (key !== 'cookie') headers.set(key, value)
   return headers
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 2969a3dafbf201d6eb6074ecda0e8f17e341cbd1ca176100350844e74ec23623
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 2969a3dafbf201d6eb6074ecda0e8f17e341cbd1ca176100350844e74ec23623

package/template/apps/asas-tanstack/src/routeTree.gen.ts

@@ -15,9 +15,11 @@ import { Route as screensDashboardRouteImport } from './routes/(screens)/dashboa
 import { Route as screensPortalRouteImport } from './routes/(screens)/portal'
 import { Route as ApiSplatRouteImport } from './routes/api/$'
 import { Route as AuthAcceptInvitationRouteImport } from './routes/auth.accept-invitation'
+import { Route as AuthFirstRunRouteImport } from './routes/auth.first-run'
 import { Route as AuthForgotPasswordRouteImport } from './routes/auth.forgot-password'
 import { Route as AuthHandoffRouteImport } from './routes/auth.handoff'
 import { Route as AuthResetPasswordRouteImport } from './routes/auth.reset-password'
+import { Route as AuthSetPasswordRouteImport } from './routes/auth.set-password'
 import { Route as AuthSignInRouteImport } from './routes/auth.sign-in'
 import { Route as AuthSignUpRouteImport } from './routes/auth.sign-up'
 import { Route as screensDashboardIndexRouteImport } from './routes/(screens)/dashboard.index'
@@ -55,6 +57,11 @@ const AuthAcceptInvitationRoute = AuthAcceptInvitationRouteImport.update({
   path: '/auth/accept-invitation',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AuthFirstRunRoute = AuthFirstRunRouteImport.update({
+  id: '/auth/first-run',
+  path: '/auth/first-run',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthForgotPasswordRoute = AuthForgotPasswordRouteImport.update({
   id: '/auth/forgot-password',
   path: '/auth/forgot-password',
@@ -70,6 +77,11 @@ const AuthResetPasswordRoute = AuthResetPasswordRouteImport.update({
   path: '/auth/reset-password',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AuthSetPasswordRoute = AuthSetPasswordRouteImport.update({
+  id: '/auth/set-password',
+  path: '/auth/set-password',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthSignInRoute = AuthSignInRouteImport.update({
   id: '/auth/sign-in',
   path: '/auth/sign-in',
@@ -108,9 +120,11 @@ export interface FileRoutesByFullPath {
   '/portal': typeof screensPortalRouteWithChildren
   '/api/$': typeof ApiSplatRoute
   '/auth/accept-invitation': typeof AuthAcceptInvitationRoute
+  '/auth/first-run': typeof AuthFirstRunRoute
   '/auth/forgot-password': typeof AuthForgotPasswordRoute
   '/auth/handoff': typeof AuthHandoffRoute
   '/auth/reset-password': typeof AuthResetPasswordRoute
+  '/auth/set-password': typeof AuthSetPasswordRoute
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/dashboard/$': typeof screensDashboardSplatRoute
@@ -123,9 +137,11 @@ export interface FileRoutesByTo {
   '/unauthorized': typeof UnauthorizedRoute
   '/api/$': typeof ApiSplatRoute
   '/auth/accept-invitation': typeof AuthAcceptInvitationRoute
+  '/auth/first-run': typeof AuthFirstRunRoute
   '/auth/forgot-password': typeof AuthForgotPasswordRoute
   '/auth/handoff': typeof AuthHandoffRoute
   '/auth/reset-password': typeof AuthResetPasswordRoute
+  '/auth/set-password': typeof AuthSetPasswordRoute
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/dashboard/$': typeof screensDashboardSplatRoute
@@ -141,9 +157,11 @@ export interface FileRoutesById {
   '/(screens)/portal': typeof screensPortalRouteWithChildren
   '/api/$': typeof ApiSplatRoute
   '/auth/accept-invitation': typeof AuthAcceptInvitationRoute
+  '/auth/first-run': typeof AuthFirstRunRoute
   '/auth/forgot-password': typeof AuthForgotPasswordRoute
   '/auth/handoff': typeof AuthHandoffRoute
   '/auth/reset-password': typeof AuthResetPasswordRoute
+  '/auth/set-password': typeof AuthSetPasswordRoute
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/(screens)/dashboard/$': typeof screensDashboardSplatRoute
@@ -160,9 +178,11 @@ export interface FileRouteTypes {
     | '/portal'
     | '/api/$'
     | '/auth/accept-invitation'
+    | '/auth/first-run'
     | '/auth/forgot-password'
     | '/auth/handoff'
     | '/auth/reset-password'
+    | '/auth/set-password'
     | '/auth/sign-in'
     | '/auth/sign-up'
     | '/dashboard/$'
@@ -175,9 +195,11 @@ export interface FileRouteTypes {
     | '/unauthorized'
     | '/api/$'
     | '/auth/accept-invitation'
+    | '/auth/first-run'
     | '/auth/forgot-password'
     | '/auth/handoff'
     | '/auth/reset-password'
+    | '/auth/set-password'
     | '/auth/sign-in'
     | '/auth/sign-up'
     | '/dashboard/$'
@@ -192,9 +214,11 @@ export interface FileRouteTypes {
     | '/(screens)/portal'
     | '/api/$'
     | '/auth/accept-invitation'
+    | '/auth/first-run'
     | '/auth/forgot-password'
     | '/auth/handoff'
     | '/auth/reset-password'
+    | '/auth/set-password'
     | '/auth/sign-in'
     | '/auth/sign-up'
     | '/(screens)/dashboard/$'
@@ -210,9 +234,11 @@ export interface RootRouteChildren {
   screensPortalRoute: typeof screensPortalRouteWithChildren
   ApiSplatRoute: typeof ApiSplatRoute
   AuthAcceptInvitationRoute: typeof AuthAcceptInvitationRoute
+  AuthFirstRunRoute: typeof AuthFirstRunRoute
   AuthForgotPasswordRoute: typeof AuthForgotPasswordRoute
   AuthHandoffRoute: typeof AuthHandoffRoute
   AuthResetPasswordRoute: typeof AuthResetPasswordRoute
+  AuthSetPasswordRoute: typeof AuthSetPasswordRoute
   AuthSignInRoute: typeof AuthSignInRoute
   AuthSignUpRoute: typeof AuthSignUpRoute
 }
@@ -261,6 +287,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthAcceptInvitationRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/auth/first-run': {
+      id: '/auth/first-run'
+      path: '/auth/first-run'
+      fullPath: '/auth/first-run'
+      preLoaderRoute: typeof AuthFirstRunRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/auth/forgot-password': {
       id: '/auth/forgot-password'
       path: '/auth/forgot-password'
@@ -282,6 +315,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthResetPasswordRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/auth/set-password': {
+      id: '/auth/set-password'
+      path: '/auth/set-password'
+      fullPath: '/auth/set-password'
+      preLoaderRoute: typeof AuthSetPasswordRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/auth/sign-in': {
       id: '/auth/sign-in'
       path: '/auth/sign-in'
@@ -361,9 +401,11 @@ const rootRouteChildren: RootRouteChildren = {
   screensPortalRoute: screensPortalRouteWithChildren,
   ApiSplatRoute: ApiSplatRoute,
   AuthAcceptInvitationRoute: AuthAcceptInvitationRoute,
+  AuthFirstRunRoute: AuthFirstRunRoute,
   AuthForgotPasswordRoute: AuthForgotPasswordRoute,
   AuthHandoffRoute: AuthHandoffRoute,
   AuthResetPasswordRoute: AuthResetPasswordRoute,
+  AuthSetPasswordRoute: AuthSetPasswordRoute,
   AuthSignInRoute: AuthSignInRoute,
   AuthSignUpRoute: AuthSignUpRoute,
 }

package/template/apps/asas-tanstack/src/router.tsx

@@ -1,7 +1,18 @@
 import { createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 import { flatSearch } from './screen-list.tsx'
+import { ComponentsProvider, RouteError } from 'mithaq-admin/components.tsx'
+import { components } from './components.ts'
 
 // The search is read and written as the URL's own pairs, one string each, because a list
 // keeps its `qs` query there.
-export const getRouter = () => createRouter({ routeTree, scrollRestoration: true, ...flatSearch })
+export const getRouter = () =>
+  createRouter({
+    routeTree,
+    scrollRestoration: true,
+    ...flatSearch,
+    // Around every route, so each screen draws its controls from this map.
+    Wrap: ({ children }) => <ComponentsProvider components={components}>{children}</ComponentsProvider>,
+    // Drawn in place of the route that threw, so the shell around it stays.
+    defaultErrorComponent: RouteError,
+  })

package/template/apps/asas-tanstack/src/routes/(screens)/dashboard/files.ts

@@ -1,4 +1,11 @@
 // Written by `mithaq generate screens`. Do not edit.
 /// <reference types="vite/client" />
-// Every file the `dashboard` screen's references name, each loaded when a page draws it.
-export const files = import.meta.glob(['./src/audit-log/ui/activity.tsx', './src/courses/ui/fee-cell.tsx', './src/courses/ui/no-courses.tsx', './src/courses/ui/status-cell.tsx', './src/enrollments/ui/session-cell.tsx', './src/media/ui/preview.tsx', './src/roles/ui/role-form.tsx', './src/roles/ui/roles.tsx', './src/ui-dashboard/dashboard.tsx', './src/ui-dashboard/members.tsx', './src/ui-dashboard/theme-provider.tsx', './src/ui-dashboard/versions.tsx', './src/ui/app-shell.tsx', './src/ui/record-page.tsx', './src/ui/rich-text-nodes.tsx', './src/ui/session-labels.tsx', './src/ui/table-page.tsx', './src/ui/top-shell.tsx'], { base: '/node_modules/asas/', exhaustive: true })
+// Every file the `dashboard` screen's references name, each loaded when a page draws it, keyed as the reference prints it.
+const named = (name: string, files: Record<string, () => Promise<unknown>>) => Object.fromEntries(Object.entries(files).map(([file, load]) => [`${name}:${file}`, load]))
+export const files = {
+  ...import.meta.glob(['./src/ui-dashboard/dashboard.tsx', './src/ui-dashboard/members.tsx', './src/ui-dashboard/theme-provider.tsx', './src/ui-dashboard/versions.tsx'], { base: '../../../../../../templates/asas/', exhaustive: true }),
+  ...named('@asas/courses', import.meta.glob(['./courses/ui/archived-badge.tsx', './courses/ui/fee-cell.tsx', './courses/ui/no-courses.tsx', './courses/ui/status-cell.tsx', './courses/ui/unpublish-button.tsx', './enrollments/ui/session-cell.tsx', './enrollments/ui/session-labels.tsx'], { base: '../../../../../../templates/features/courses/', exhaustive: true })),
+  ...named('@asas/media', import.meta.glob(['./media/ui/preview.tsx'], { base: '../../../../../../templates/features/media/', exhaustive: true })),
+  ...named('@asas/mithaq', import.meta.glob(['./src/ui/activity-page.tsx', './src/ui/activity.tsx', './src/ui/app-shell.tsx', './src/ui/record-page.tsx', './src/ui/rich-text-nodes.tsx', './src/ui/table-page.tsx', './src/ui/top-shell.tsx'], { base: '../../../../../../templates/mithaq/', exhaustive: true })),
+  ...named('@asas/roles', import.meta.glob(['./roles/ui/role-form.tsx', './roles/ui/roles.tsx'], { base: '../../../../../../templates/features/roles/', exhaustive: true })),
+}