create-mithaq 0.1.1 → 0.2.1

package/template/apps/{asas-platform/src/routes/(screens)/platform → asas-backoffice/src/routes/(screens)/backoffice}/types.ts

@@ -22,6 +22,7 @@ export type OrganizationValues = {
   slug: string
   logo: string | null
   metadata: string | null
+  names: string | null
 }
 export type MemberValues = {
   id: string
@@ -30,6 +31,7 @@ export type MemberValues = {
   organizationId: string
   userId: string
   role: string
+  lastSeenAt: Date | null
 }
 export type CoursesValues = {
   id: string
@@ -54,6 +56,7 @@ export type CoursesValues = {
   _status: 'draft' | 'published' | null
   details: { root: Record<string, unknown> } | null
   cover: unknown
+  selfEnroll: boolean | null
 }
 export type SessionsValues = {
   id: string
@@ -68,6 +71,7 @@ export type SessionsValues = {
   archived: boolean | null
   details: { root: Record<string, unknown> } | null
   enrollments: Values['enrollments'][]
+  archiveReason: string | null
 }
 export type EnrollmentsValues = {
   id: string
@@ -118,6 +122,18 @@ export type LocalUsersValues = {
   _verified: boolean | null
   _verificationToken: string | null
 }
+export type BackofficeLogValues = {
+  id: string
+  createdAt: Date
+  action: 'impersonate' | 'stopImpersonating' | 'setRole' | 'ban' | 'unban'
+  actor: string | null
+  actorEmail: string | null
+  target: string | null
+  targetEmail: string | null
+  previousRole: string | null
+  role: string | null
+  banReason: string | null
+}
 export type Values = {
   user: UserValues
   organization: OrganizationValues
@@ -129,6 +145,7 @@ export type Values = {
   roles: RolesValues
   memberRoles: MemberRolesValues
   localUsers: LocalUsersValues
+  backofficeLog: BackofficeLogValues
 }
 export type Pages = {
   user: 'list' | 'view'
@@ -141,5 +158,6 @@ export type Pages = {
   roles: 'list' | 'view'
   memberRoles: 'list' | 'view'
   localUsers: 'list' | 'edit'
+  backofficeLog: 'list'
 }
 export type ScreenClient = Client<Pages>

package/template/apps/{asas-platform/src/routes/(screens)/platform.$.tsx → asas-backoffice/src/routes/(screens)/backoffice.$.tsx}

@@ -1,13 +1,13 @@
 // Written by `mithaq generate screens`. Do not edit.
 import { createFileRoute } from '@tanstack/react-router'
 import { ScreenNotFound, ScreenPageView, askedFor, pageHead, pageLoader } from '@/screens.tsx'
-import { files } from './platform/files.ts'
+import { files } from './backoffice/files.ts'
 
-export const Route = createFileRoute('/(screens)/platform/$')({
+export const Route = createFileRoute('/(screens)/backoffice/$')({
   validateSearch: askedFor,
-  loader: ({ location, params }) => pageLoader({ screen: 'platform', files, path: params._splat ?? '', query: location.search, href: location.href }),
+  loader: ({ location, params }) => pageLoader({ screen: 'backoffice', files, path: params._splat ?? '', query: location.search, href: location.href }),
   head: ({ loaderData, match }) => pageHead(loaderData, match.context),
-  notFoundComponent: () => <ScreenNotFound files={files} screen={'platform'} />,
+  notFoundComponent: () => <ScreenNotFound files={files} screen={'backoffice'} />,
   component: Page,
 })
 

package/template/apps/{asas-platform/src/routes/(screens)/platform.index.tsx → asas-backoffice/src/routes/(screens)/backoffice.index.tsx}

@@ -1,10 +1,10 @@
 // Written by `mithaq generate screens`. Do not edit.
 import { createFileRoute } from '@tanstack/react-router'
 import { ScreenPageView, askedFor, pageHead, pageLoader } from '@/screens.tsx'
-import { files } from './platform/files.ts'
+import { files } from './backoffice/files.ts'
 
-export const Route = createFileRoute('/(screens)/platform/')({
-  loader: ({ location }) => pageLoader({ screen: 'platform', files, path: '', query: {}, href: location.href }),
+export const Route = createFileRoute('/(screens)/backoffice/')({
+  loader: ({ location }) => pageLoader({ screen: 'backoffice', files, path: '', query: {}, href: location.href }),
   head: ({ loaderData, match }) => pageHead(loaderData, match.context),
   component: () => <ScreenPageView files={files} data={Route.useLoaderData()} query={askedFor({})} onQuery={() => {}} />,
 })

package/template/apps/{asas-platform/src/routes/(screens)/platform.tsx → asas-backoffice/src/routes/(screens)/backoffice.tsx}

@@ -1,10 +1,10 @@
 // Written by `mithaq generate screens`. Do not edit.
 import { Outlet, createFileRoute } from '@tanstack/react-router'
 import { ScreenFrame, frameLoader } from '@/screens.tsx'
-import { files } from './platform/files.ts'
+import { files } from './backoffice/files.ts'
 
-export const Route = createFileRoute('/(screens)/platform')({
-  loader: ({ location }) => frameLoader({ screen: 'platform', files, href: location.href }),
+export const Route = createFileRoute('/(screens)/backoffice')({
+  loader: ({ location }) => frameLoader({ screen: 'backoffice', files, href: location.href }),
   component: () => (
     <ScreenFrame files={files} data={Route.useLoaderData()}>
       <Outlet />

package/template/apps/{asas-platform → asas-backoffice}/src/routes/__root.tsx

@@ -2,7 +2,7 @@ import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-r
 import { DirectionProvider } from '@/components/ui/direction'
 export { locales } from '../copy.ts'
 import { dirOf, documentHead, localeOf, translator } from '../copy.ts'
-import { ThemeProvider } from '../components/mithaq/nav.tsx'
+import { ThemeProvider } from 'mithaq-admin/theme.tsx'
 import { themeStorageKey } from '../theme.ts'
 import appCss from '../styles.css?url'
 
@@ -37,7 +37,7 @@ export const Route = createRootRoute({
       typeof document === 'undefined'
         ? localeOf((ctx as unknown as FromRequest).serverContext?.locale as string | undefined)
         : localeOf(document.documentElement.lang)
-    return { locale, dir: dirOf(locale), app: 'platform.brand' }
+    return { locale, dir: dirOf(locale), app: 'backoffice.brand' }
   },
   // The favicon stops the browser asking for a `/favicon.ico` nobody serves.
   head: ({ match }) => ({

package/template/apps/asas-backoffice/src/routes/api/$.ts

@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router'
+// Loads the types of the `server` route option; erased at build.
+import type {} from '@tanstack/start-client-core'
+import { asas, backofficeURL } from 'asas'
+
+// The backoffice reads every organization: a read of a kayan asks `tenant: 'all'`, which the runner
+// grants backoffice staff in this app alone and refuses anyone else. A global is one organization's row
+// and asks for none.
+const reads = new Set(asas.operations.filter((one) => one.effect === 'read' && !one.single).map((one) => `/api/${one.kayan}/${one.name}`))
+
+// The body is handed on unread, so the plug that answers bounds it before any session is looked at.
+const acrossTenants = (request: Request) => {
+  const url = new URL(request.url)
+  if (!reads.has(url.pathname)) return request
+  url.searchParams.set('tenant', 'all')
+  return new Request(url, { method: request.method, headers: request.headers, body: request.body, signal: request.signal, duplex: 'half' } as RequestInit)
+}
+
+// A write whose `Origin` is not BACKOFFICE_URL's is refused: the data plug checks no origin and leans on
+// the session cookie's `SameSite=Lax`, which the customer app's sibling subdomain passes, so this check
+// is the barrier between the two. Never the URL the request arrived on: behind a TLS proxy it is
+// http://, and its host is whatever the Host header said.
+const origin = new URL(backofficeURL).origin
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      ANY: async ({ request }) =>
+        request.method === 'GET' || request.method === 'HEAD' || request.headers.get('origin') === origin
+          ? asas.handler(acrossTenants(request))
+          : new Response('Forbidden', { status: 403 }),
+    },
+  },
+})

package/template/apps/asas-backoffice/src/routes/auth.create-first-user.tsx

@@ -0,0 +1,113 @@
+import { useState, type ComponentProps } from 'react'
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { AuthBox, AuthFrame, authGate, notAnEmail, useRefusal } from '../auth-frame.tsx'
+import { documentHead } from '../copy.ts'
+import { firstUser } from '../first-user.ts'
+import { useCopy } from './__root.tsx'
+
+export const Route = createFileRoute('/auth/create-first-user')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.createFirstUser')),
+  beforeLoad: async () => {
+    const state = await firstUser()
+    if (state.initialized) throw redirect({ to: '/auth/sign-in' })
+    return { code: state.code, password: (await authGate()).password }
+  },
+  component: CreateFirstUser,
+})
+
+function CreateFirstUser() {
+  const navigate = useNavigate()
+  const { t } = useCopy()
+  const refused = useRefusal()
+  const { code: asked, password: bounds } = Route.useRouteContext()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [code, setCode] = useState('')
+  const [pending, setPending] = useState(false)
+  const [refusal, setRefusal] = useState<string | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const required = t('auth.required', 'This field is required.')
+  const wrong = {
+    name: () => (name.trim() ? undefined : required),
+    email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+    password: () =>
+      !password ? required
+      : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
+      : password.length > bounds.max ? t('auth.passwordTooLong', 'Password too long')
+      : undefined,
+    confirmation: () => (!confirmation ? required : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
+    code: () => (asked !== 'required' || code ? undefined : required),
+  }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
+    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
+  )
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setLeft(new Set(Object.keys(wrong)))
+    if (Object.values(wrong).some((check) => check())) return
+    setPending(true)
+    setRefusal(null)
+    const made = await authArm('first-register', { name, email, password, ...(asked === 'required' && { code }) })
+    setPending(false)
+    if (!made.ok) return setRefusal(refused(made, t('auth.createFirstUserFailed', 'That administrator could not be created.')))
+    await navigate({ to: '/auth/sign-in' })
+  }
+
+  if (asked === 'unset') {
+    return (
+      <AuthFrame title={t('auth.createFirstUser', 'Create the first administrator')}>
+        <p className="text-sm" role="alert">
+          {t('auth.setupCodeUnset')}
+        </p>
+      </AuthFrame>
+    )
+  }
+  return (
+    <AuthFrame
+      title={t('auth.createFirstUser', 'Create the first administrator')}
+      description={t('auth.createFirstUserDescription', 'No one administers this backoffice yet. The account made here becomes its first administrator.')}
+    >
+      <form className="grid gap-4" noValidate onSubmit={submit}>
+        {box('name', t('auth.name', 'Name'), { autoComplete: 'name', onChange: (event) => setName(event.target.value), type: 'text', value: name })}
+        {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
+        {box('password', t('auth.password', 'Password'), {
+          autoComplete: 'new-password',
+          description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
+          onChange: (event) => setPassword(event.target.value),
+          type: 'password',
+          value: password,
+        })}
+        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+          autoComplete: 'new-password',
+          onChange: (event) => setConfirmation(event.target.value),
+          type: 'password',
+          value: confirmation,
+        })}
+        {asked === 'required'
+          ? box('code', t('auth.setupCode', 'Setup code'), {
+              autoComplete: 'off',
+              description: t('auth.setupCodeDescription', 'The SETUP_CODE this server was started with.'),
+              onChange: (event) => setCode(event.target.value),
+              type: 'password',
+              value: code,
+            })
+          : null}
+        {/* `role="alert"` so a refusal is spoken when it appears; nothing moves the focus to it. */}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refusal}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {pending ? t('auth.createFirstUserPending', 'Creating…') : t('auth.createFirstUserSubmit', 'Create the administrator')}
+        </Button>
+      </form>
+    </AuthFrame>
+  )
+}

package/template/apps/{asas-platform → asas-backoffice}/src/routes/auth.sign-in.tsx

@@ -1,15 +1,20 @@
 import { useState, type ComponentProps } from 'react'
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { authArm } from '../api.ts'
 import { AuthBox, AuthFrame, authGate, notAnEmail, redirectSearch, useRefusal } from '../auth-frame.tsx'
 import { documentHead } from '../copy.ts'
+import { firstUser } from '../first-user.ts'
 import { useCopy } from './__root.tsx'
-import { wanted } from '../redirect.ts'
+import { landing } from '../redirect.ts'
 
 export const Route = createFileRoute('/auth/sign-in')({
   head: ({ match }) => documentHead(match.context, (t) => t('auth.signIn')),
   validateSearch: redirectSearch,
+  // Nobody can sign in to a backoffice no one administers yet.
+  beforeLoad: async () => {
+    if (!(await firstUser()).initialized) throw redirect({ href: '/auth/create-first-user' })
+  },
   component: SignIn,
 })
 
@@ -49,11 +54,11 @@ function SignIn() {
     setPending(false)
 
     // A navigation, not a reload, so the screen's loader runs with the cookie just set.
-    await navigate({ to: wanted({ asked: search.redirect, home: (await authGate()).home.path }) })
+    await navigate({ href: landing({ asked: search.redirect, screens: (await authGate()).screens }) })
   }
 
   return (
-    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInPlatformDescription', 'Sign in to reach the platform.')}>
+    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInBackofficeDescription', 'Sign in to reach the backoffice.')}>
       <form className="grid gap-4" noValidate onSubmit={submit}>
         {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
         {box('password', t('auth.password', 'Password'), { autoComplete: 'current-password', onChange: (event) => setPassword(event.target.value), type: 'password', value: password })}

package/template/apps/{asas-platform → asas-backoffice}/src/routes/unauthorized.tsx

@@ -4,9 +4,17 @@ import { Button } from '@/components/ui/button'
 import { authArm } from '../api.ts'
 import { AuthFrame, useRefusal } from '../auth-frame.tsx'
 import { documentHead } from '../copy.ts'
+import { NoOrganization } from '../no-organization.tsx'
 import { ImpersonationBar, loadEnterable } from '../screens.tsx'
 import { useCopy } from './__root.tsx'
 
+/**
+ * Where someone sent here from a screen their role does not open goes without being asked: the one screen it does
+ * open. A page refused inside that screen is said instead, and so is an impersonation, whose bar is the way out.
+ */
+export const onwardOf = ({ screens, refused, impersonating }: { screens: readonly { path: string }[]; refused?: unknown; impersonating?: unknown }) =>
+  !refused && !impersonating && screens.length === 1 ? screens[0]!.path : undefined
+
 export const Route = createFileRoute('/unauthorized')({
   // The path a screen refused; the server only matches it against the build's pages.
   validateSearch: (search: Record<string, unknown>): { from?: string } => (typeof search.from === 'string' ? { from: search.from } : {}),
@@ -15,6 +23,8 @@ export const Route = createFileRoute('/unauthorized')({
     const entered = await loadEnterable({ data: { from: deps.from, locale: context.locale } })
     // Carries this page's own path so a visitor whose session expired lands back here after signing in.
     if (!entered) throw redirect({ to: '/auth/sign-in', search: { redirect: '/unauthorized' } })
+    const onward = onwardOf(entered)
+    if (onward) throw redirect({ href: onward })
     return entered
   },
   // After the loader, so its data's type is inferred before this reads it.
@@ -49,19 +59,21 @@ function Unauthorized() {
       : part === '{page}' ? <bdi key={at}>{refused?.page}</bdi>
       : part)
   const link = 'text-foreground underline underline-offset-4'
+  // Someone who belongs to no organization is shown the ways into one, which the app draws.
+  const unplaced = !refused && !screens.length && !organizations.length && !others.length && !impersonating
   const screenName = (name: string) => t(`screens.${name}`, name) ?? name
   return (
     <AuthFrame
-      title={screens.length ? t('auth.unauthorized', 'Not for your role') : t('auth.noAccess', 'Your account has no access yet')}
+      title={screens.length ? t('auth.unauthorized', 'Choose where to go') : t('auth.noAccess', 'Your account has no access yet')}
       description={
         <span data-no-access={screens.length ? undefined : ''}>
           {refused
             ? said(t('auth.unauthorizedPage', 'Your role does not open that page: {page}.'))
             : screens.length
-              ? t('auth.unauthorizedDescription', 'Your role does not open that screen. These are the screens it opens:')
+              ? t('auth.unauthorizedDescription', 'This page isn\'t part of your account. Where would you like to go?')
               : organizations.length
                 ? said(t('auth.noAccessDescription', '{email} is a member of {organization} and holds no role that opens a screen here. Ask an administrator of {organization} to give you one.'))
-                : said(t('auth.noOrganization', '{email} belongs to no organization yet. Ask an administrator to invite you.'))}
+                : said(t('auth.noOrganization', '{email} belongs to no organization yet.'))}
         </span>
       }
     >
@@ -73,16 +85,16 @@ function Unauthorized() {
             {(t('auth.backTo', 'Back to {screen}') ?? 'Back to {screen}').replace('{screen}', () => screenName(refused.screen.name))}
           </a>
         ) : screens.length ? (
-          <ul className="grid gap-2">
+          <div className="grid gap-2">
             {screens.map((screen) => (
-              <li key={screen.name}>
-                {/* An anchor: the path is the screen's own data, not a route the router knows. */}
-                <a className={link} href={screen.path}>
-                  {screenName(screen.name)}
-                </a>
-              </li>
+              // An anchor: the path is the screen's own data, not a route the router knows.
+              <Button key={screen.name} nativeButton={false} className="max-sm:h-11" render={<a href={screen.path} />}>
+                {screenName(screen.name)}
+              </Button>
             ))}
-          </ul>
+          </div>
+        ) : unplaced ? (
+          <NoOrganization email={email} />
         ) : null}
         {/* So a switch into an organization where the actor holds no role is not a dead end. */}
         {others.map((one) => (
@@ -119,4 +131,4 @@ function Unauthorized() {
     </AuthFrame>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 3c5c304b3892c56759bf780f155ef3aa154ce3cc954e3d240b3537cdd97da735
+// mithaq-admin 0.0.0 81d25978cdacbb38254854b0f64b738946ee27baca06a952aed51d35e6fb10af

package/template/apps/{asas-platform → asas-backoffice}/src/screen-form.tsx

@@ -1,9 +1,11 @@
 import { useBlocker, useRouter } from '@tanstack/react-router'
 import { useState, type ReactElement } from 'react'
-import { Form, type FormProps } from './components/mithaq/form.tsx'
+import { Form } from 'mithaq-admin/form.tsx'
+import type { FormProps } from 'mithaq-admin/form-types.tsx'
 
 /**
- * A kayan's form on a screen's page. A create moves to the new row's edit page, a delete to the list.
+ * A kayan's form on a screen's page. A create moves to where `edit` sends it, the new row's edit page or, for a page
+ * opened over its list, the list; a delete moves to the list.
  * While the form holds a change the router blocks navigation and the form asks its discard question.
  */
 export function ScreenForm({ edit, list, ...props }: Omit<FormProps, 'onDone' | 'onDirty' | 'onCancel' | 'blocked'> & {
@@ -31,4 +33,4 @@ export function ScreenForm({ edit, list, ...props }: Omit<FormProps, 'onDone' |
     />
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 7284b5e97770fd0c395fafa0b7459cab4ceb458e4bc982dc8233894126116170
+// mithaq-admin 0.0.0 508fa95987312292d3a5737dd1fd6aba03fbd5a7dbbbf5bb3bea2812b2adfde4

package/template/apps/{asas-platform → asas-backoffice}/src/screen-list.tsx

@@ -2,10 +2,11 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState, type ReactElement } from 'react'
 import { ListContext, useScreen } from 'mithaq/admin/react'
 import { Button } from '@/components/ui/button'
-import { List, type ListProps, type Page } from './components/mithaq/list.tsx'
-import { QueryRefused, findOf, readQuery, readRaw, rulesOf, scopedTo, writeQuery, type ListQuery, type RawQuery } from './components/mithaq/list-query.ts'
-import { counted } from './components/mithaq/controls.tsx'
-import { listOf } from './components/mithaq/nodes.tsx'
+import { List } from 'mithaq-admin/list.tsx'
+import type { ListProps, Page } from 'mithaq-admin/list-types.tsx'
+import { QueryRefused, findOf, readQuery, readRaw, rulesOf, scopedTo, writeQuery, type ListQuery, type RawQuery } from 'mithaq-admin/list-query.ts'
+import { counted } from 'mithaq-admin/format.tsx'
+import { listOf } from 'mithaq-admin/node-tree.ts'
 
 /**
  * The list's search as the router carries it: the URL's pairs as strings, each
@@ -136,4 +137,4 @@ export function ScreenList({
     </ListContext>
   )
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 3c37825f9f645fd3f9c95a3d1ec554e863e85767e8329a1b2e16a40e5f5ea381
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 900f9707948cf18e36aec6776da8f9e77e4ed92438073443319e54e7a33a9ecf

package/template/apps/{asas-platform → asas-backoffice}/src/screen-names.ts

@@ -7,4 +7,4 @@ export const screenNamed = <Known extends object>(known: Known, name: unknown):
   if (typeof name !== 'string' || !Object.hasOwn(known, name)) throw new Error(`"${String(name)}" is no screen of this app.`)
   return name as keyof Known & string
 }
-// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 878b7180f2aa169546feb42bcdfcb6002841d08e46788c94ddd6edfc4e3502ca
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 878b7180f2aa169546feb42bcdfcb6002841d08e46788c94ddd6edfc4e3502ca