create-mithaq 0.0.0-stage → 0.2.0

package/template/apps/asas-tanstack/src/routes/auth.sign-in.tsx

@@ -0,0 +1,98 @@
+import { useState, type ComponentProps } from 'react'
+import { Link, createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { organizations, signUp } from 'asas/organizations'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { documentHead } from '../copy.ts'
+import { AuthBox, AuthFrame, authGate, gate, notAnEmail, redirectSearch, useRefusal } from '../auth-frame.tsx'
+import { firstRun } from '../first-run.ts'
+import { useCopy } from './__root.tsx'
+import { landing } from '../redirect.ts'
+
+// The password has no length rule here because the provider's sign-in has none: a wrong
+// password of any length is the one refusal it answers.
+
+export const Route = createFileRoute('/auth/sign-in')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.signIn')),
+  // The router hands `validateSearch` whatever the URL carried; `landing` decides what is honoured.
+  validateSearch: redirectSearch,
+  // Nobody signs in to an app of one organization before its owner has set it up.
+  beforeLoad: async ({ search }: { search: { redirect?: string } }) => {
+    if ((await firstRun()).open) throw redirect({ href: '/auth/first-run' })
+    return gate({ search })
+  },
+  component: SignIn,
+})
+
+/** Whether a visitor with no invitation may make an account here, so the page offers one. */
+const offersSignUp = organizations === 'many' || signUp === 'open'
+
+function SignIn() {
+  const navigate = useNavigate()
+  const { t } = useCopy()
+  const search = Route.useSearch()
+  const refused = useRefusal()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  // The answer, not its sentence, so a language switch says it again in the language chosen.
+  const [refusal, setRefusal] = useState<Parameters<typeof refused>[0] | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const required = t('auth.required', 'This field is required.')
+  const wrong = {
+    email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+    password: () => (password ? 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'>) => (
+    <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 answered = await authArm('sign-in/email', { email, password })
+    // The project's own sentence for the provider's code, never its English `message`, since copy carries every locale.
+    if (!answered.ok) {
+      setPending(false)
+      return setRefusal(answered)
+    }
+
+    setPending(false)
+
+    // The first screen this actor enters is read only once the session exists.
+    await navigate({ href: landing({ asked: search.redirect, screens: (await authGate()).screens }) })
+  }
+
+  return (
+    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInDescription', 'Welcome back. Sign in with your email and password.')}>
+      <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 })}
+        <Link className="-mt-2 justify-self-end text-sm text-muted-foreground underline-offset-4 hover:underline" to="/auth/forgot-password" search={{ redirect: search.redirect }}>
+          {t('auth.forgotPasswordQuestion', 'Forgot password?')}
+        </Link>
+        {/* `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">
+            {refused(refusal, t('auth.failed', 'That sign-in did not work.'))}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {pending ? t('auth.signInPending', 'Signing in…') : t('auth.signIn', 'Sign in')}
+        </Button>
+      </form>
+      {offersSignUp ? (
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          {t('auth.noAccount', 'No account yet?')}{' '}
+          <Link className="text-primary underline underline-offset-4" to="/auth/sign-up" search={{ redirect: search.redirect }}>
+            {t('auth.signUp', 'Sign up')}
+          </Link>
+        </p>
+      ) : null}
+    </AuthFrame>
+  )
+}

package/template/apps/asas-tanstack/src/routes/auth.sign-up.tsx

@@ -0,0 +1,143 @@
+import { useState, type ComponentProps } from 'react'
+import { Link, createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { organizations, signUp, verifyEmail } from 'asas/organizations'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { documentHead } from '../copy.ts'
+import { AuthBox, AuthFrame, authGate, gate, notAnEmail, redirectSearch, useRefusal } from '../auth-frame.tsx'
+import { firstRun } from '../first-run.ts'
+import { landing, wanted } from '../redirect.ts'
+import { useCopy } from './__root.tsx'
+
+export const Route = createFileRoute('/auth/sign-up')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.signUp')),
+  validateSearch: redirectSearch,
+  // An app of one organization that has none yet takes no account before its owner's.
+  beforeLoad: async ({ search }: { search: { redirect?: string } }) => {
+    if ((await firstRun()).open) throw redirect({ href: '/auth/first-run' })
+    return gate({ search })
+  },
+  component: SignUp,
+})
+
+/**
+ * Whether a new account proves its address before it signs in, so the sign-up answers with no session: with many
+ * organizations always, where the person then founds or joins one, and with one where an open sign-up says so. Such a
+ * sign-up asks no password: it is chosen once, on the page the mailed link opens, and the server keeps none typed here.
+ */
+const verifies = signUp === 'open' && verifyEmail
+
+function SignUp() {
+  const navigate = useNavigate()
+  const { t } = useCopy()
+  const search = Route.useSearch()
+  const refused = useRefusal()
+  const { password: bounds } = Route.useRouteContext()
+  // The redirect is a link anyone can write; a crafted one only makes an account with no organization,
+  // which reads nothing until an organization invites it.
+  const asked = wanted({ asked: search.redirect, home: '/' })
+  const invited = asked.startsWith('/auth/accept-invitation?')
+  // The invitation's id, which a sign-up by invitation carries: holding it is what lets it through.
+  const invitationId = invited ? new URLSearchParams(asked.slice(asked.indexOf('?'))).get('id') ?? undefined : undefined
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [pending, setPending] = useState(false)
+  const [refusal, setRefusal] = useState<string | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const [sent, setSent] = useState<string | null>(null)
+  const required = t('auth.required', 'This field is required.')
+  const named = {
+    name: () => (name ? undefined : required),
+    email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+  }
+  const chosen = {
+    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.')),
+  }
+  const wrong: Partial<Record<'name' | 'email' | 'password' | 'confirmation', () => string | undefined>> = verifies ? named : { ...named, ...chosen }
+  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('sign-up/email', { name, email, ...(!verifies && { password }), ...(invitationId && { invitationId }) })
+    setPending(false)
+    if (!made.ok) return setRefusal(refused(made, t('auth.signUpFailed', 'That sign-up did not work.')))
+    // An account that proves its address first has no session yet, invited or not, so it is told to open its mail.
+    if (verifies) return setSent(email)
+    // The server accepted the invitation the sign-up carried, so its page would only say it is spent.
+    await navigate({ href: landing({ asked: invited ? undefined : search.redirect, screens: (await authGate()).screens }) })
+  }
+
+  const toSignIn = (
+    <p className="mt-4 text-center text-sm text-muted-foreground">
+      {t('auth.haveAccount', 'Already have an account?')}{' '}
+      <Link className="text-primary underline underline-offset-4" to="/auth/sign-in" search={{ redirect: search.redirect }}>
+        {t('auth.signIn', 'Sign in')}
+      </Link>
+    </p>
+  )
+  // By invitation, nobody without one is offered a form the server would refuse.
+  if (organizations === 'one' && signUp === 'invite' && !invitationId) {
+    return (
+      <AuthFrame title={t('auth.signUp', 'Sign up')} description={t('auth.inviteOnly', 'Accounts here are made by invitation. Open the link of the invitation sent to you, or sign in.')}>
+        {toSignIn}
+      </AuthFrame>
+    )
+  }
+  if (sent) {
+    return (
+      <AuthFrame
+        title={t('auth.verifySent', 'Check your email')}
+        description={<span className="[overflow-wrap:anywhere]">{t('auth.verifySentDescription', 'We sent a link to {email}. Open it to confirm your address and choose your password, then sign in. It lasts an hour.')!.split(/(\{email\})/).map((part, at) => (part === '{email}' ? <bdi key={at}>{sent}</bdi> : part))}</span>}
+      >
+        {toSignIn}
+      </AuthFrame>
+    )
+  }
+  return (
+    <AuthFrame
+      title={t('auth.signUp', 'Sign up')}
+      description={invited ? t('auth.signUpInvitedDescription', 'Make an account with the email address the invitation was sent to.') : t('auth.signUpDescription', 'Make an account.')}
+    >
+      <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 })}
+        {verifies ? null : 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,
+        })}
+        {verifies ? null : box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+          autoComplete: 'new-password',
+          onChange: (event) => setConfirmation(event.target.value),
+          type: 'password',
+          value: confirmation,
+        })}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refusal}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {pending ? t('auth.signUpPending', 'Signing up…') : t('auth.signUp', 'Sign up')}
+        </Button>
+      </form>
+      {toSignIn}
+    </AuthFrame>
+  )
+}

package/template/apps/asas-tanstack/src/routes/index.tsx

@@ -0,0 +1,146 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { organizations, signUp } from 'asas/organizations'
+import { LayoutDashboard, Languages, ShieldCheck } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { useHomeLabel } from '../auth-frame.tsx'
+import { LocaleSwitch } from '../locale-switch.tsx'
+import { loadEnterable } from '../screens.tsx'
+import { useCopy } from './__root.tsx'
+
+// A host file because it reads `loadEnterable`, which only a host file may.
+export const Route = createFileRoute('/')({
+  loader: () => loadEnterable(),
+  component: Landing,
+})
+
+/** Whether a visitor with no invitation may make an account, so the page offers one, as sign-in does. */
+const offersSignUp = organizations === 'many' || signUp === 'open'
+
+function EntryActions({ screens, size }: { screens: readonly { name: string; path: string }[] | null; size: 'sm' | 'lg' }) {
+  const { t } = useCopy()
+  const label = useHomeLabel()
+  if (screens === null) {
+    return (
+      <>
+        {offersSignUp ? (
+          <Link to="/auth/sign-up">
+            <Button size={size}>{t('marketing.getStarted', 'Get started')}</Button>
+          </Link>
+        ) : null}
+        <Link to="/auth/sign-in">
+          <Button size={size} variant={offersSignUp ? 'outline' : 'default'}>
+            {t('auth.signIn', 'Sign in')}
+          </Button>
+        </Link>
+      </>
+    )
+  }
+  // A plain anchor: the path is the screen's own data, not a route the router knows.
+  const home: { path: string; name?: string } = screens[0] ?? { path: '/unauthorized' }
+  return (
+    <a href={home.path}>
+      <Button size={size}>{label(home, 'marketing.openScreen')}</Button>
+    </a>
+  )
+}
+
+function Feature({ icon: Icon, title, description }: { icon: typeof ShieldCheck; title: string; description: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <Icon className="mb-2 h-6 w-6 text-primary" />
+        <CardTitle className="text-base font-semibold">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="text-sm text-muted-foreground">{description}</CardContent>
+    </Card>
+  )
+}
+
+function Step({ number, title, description }: { number: number; title: string; description: string }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold">
+        {number}
+      </div>
+      <h3 className="font-semibold">{title}</h3>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </div>
+  )
+}
+
+function Landing() {
+  const { t, locale } = useCopy()
+  const screens = Route.useLoaderData()?.screens ?? null
+  // `t` answers `string | undefined` for a key no locale carries; the fallback only satisfies that type.
+  const tt = (key: string, fallback: string) => t(key, fallback) ?? fallback
+  const features = [
+    { icon: ShieldCheck, title: tt('marketing.featureRolesTitle', 'Roles and permissions'), description: tt('marketing.featureRolesDescription', '') },
+    { icon: Languages, title: tt('marketing.featureBilingualTitle', 'Arabic and English, either direction'), description: tt('marketing.featureBilingualDescription', '') },
+    { icon: LayoutDashboard, title: tt('marketing.featurePortalTitle', 'A dashboard and a customer portal'), description: tt('marketing.featurePortalDescription', '') },
+  ]
+  const steps = [
+    { title: tt('marketing.howStep1Title', 'Set up your organization'), description: tt('marketing.howStep1Description', '') },
+    { title: tt('marketing.howStep2Title', 'Add your records and roles'), description: tt('marketing.howStep2Description', '') },
+    { title: tt('marketing.howStep3Title', 'Open the portal to your customers'), description: tt('marketing.howStep3Description', '') },
+  ]
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-2 px-4 sm:gap-4 sm:px-6">
+          <span className="text-lg font-semibold">{t('marketing.brand', 'Asas')}</span>
+          <div className="flex items-center gap-1 sm:gap-2">
+            <LocaleSwitch locale={locale} />
+            <EntryActions screens={screens} size="sm" />
+          </div>
+        </div>
+      </header>
+
+      <main className="flex-1">
+        <section className="mx-auto flex max-w-4xl flex-col items-center gap-6 px-4 py-20 text-center sm:px-6 sm:py-28">
+          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{t('marketing.heroTitle', 'Run your organization without the busywork')}</h1>
+          <p className="max-w-2xl text-lg text-muted-foreground">{t('marketing.heroSubtitle', '')}</p>
+          <div className="flex flex-col gap-3 sm:flex-row">
+            <EntryActions screens={screens} size="lg" />
+          </div>
+        </section>
+
+        <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
+          <div className="mx-auto mb-12 max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight">{t('marketing.featuresTitle', 'Everything an organization needs')}</h2>
+            <p className="mt-3 text-muted-foreground">{t('marketing.featuresSubtitle', '')}</p>
+          </div>
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {features.map((feature) => (
+              <Feature key={feature.title} {...feature} />
+            ))}
+          </div>
+        </section>
+
+        <section className="border-t bg-muted/30">
+          <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
+            <h2 className="mb-10 text-center text-3xl font-bold tracking-tight">{t('marketing.howTitle', 'How it works')}</h2>
+            <div className="grid gap-8 sm:grid-cols-3">
+              {steps.map((step, at) => (
+                <Step key={step.title} number={at + 1} {...step} />
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="mx-auto flex max-w-3xl flex-col items-center gap-6 px-4 py-20 text-center sm:px-6">
+          <h2 className="text-3xl font-bold tracking-tight">{t('marketing.ctaTitle', 'Start running your organization on Asas')}</h2>
+          <p className="text-muted-foreground">{t('marketing.ctaSubtitle', '')}</p>
+          <EntryActions screens={screens} size="lg" />
+        </section>
+      </main>
+
+      <footer className="border-t py-8">
+        <div className="mx-auto max-w-6xl px-4 text-center text-sm text-muted-foreground sm:px-6">
+          {t('marketing.footer', 'Asas — one place for an organization\'s records.')}
+        </div>
+      </footer>
+    </div>
+  )
+}
+// mithaq-admin 0.0.0 4ea8d722cd59ec1a91778142281c6f7db6ab9abe005dfc5f8c0192ee4e1095aa

package/template/apps/asas-tanstack/src/routes/unauthorized.tsx

@@ -0,0 +1,134 @@
+import { Fragment, useState, type ReactNode } from 'react'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+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 } : {}),
+  loaderDeps: ({ search }) => ({ from: search.from }),
+  loader: async ({ deps, context }) => {
+    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.
+  head: ({ match, loaderData }) => documentHead(match.context, (t) => (loaderData?.screens.length === 0 ? t('auth.noAccess') : t('auth.unauthorized'))),
+  component: Unauthorized,
+})
+
+function Unauthorized() {
+  const { t } = useCopy()
+  const { screens, refused, email, impersonating, organizations = [], others = [] } = Route.useLoaderData()
+  const refusal = useRefusal()
+  const [switching, setSwitching] = useState<string>()
+  const [failed, setFailed] = useState<string>()
+  // The slug sits beside the name where another membership shares the name.
+  const memberships = [...organizations, ...others]
+  const named = (one: { id: string; name: string; slug?: string }): ReactNode =>
+    one.slug && memberships.some((other) => other.id !== one.id && other.name === one.name) ? (
+      <>
+        {one.name} <span dir="ltr" data-slug="" className="text-muted-foreground text-xs font-normal">{one.slug}</span>
+      </>
+    ) : (
+      one.name
+    )
+  // Each name is isolated so an email or Latin name in an Arabic sentence keeps
+  // its order, and is one inline box that wraps whole, so a long address never
+  // runs past the card on a phone.
+  const whole = 'inline-block max-w-full [overflow-wrap:anywhere]'
+  const said = (text: string | undefined) =>
+    text!.split(/(\{email\}|\{organization\}|\{page\})/).map((part, at) =>
+      part === '{email}' ? <bdi key={at} className={whole}>{email}</bdi>
+      : part === '{organization}' ? <bdi key={at}>{organizations.map((one, index) => <Fragment key={one.id}>{index ? ', ' : ''}<span className={whole}>{named(one)}</span></Fragment>)}</bdi>
+      : 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', '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', '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.'))}
+        </span>
+      }
+    >
+      <div className="grid gap-4">
+        {/* Stopping impersonation is the way out in place of Sign out. */}
+        {impersonating ? <ImpersonationBar name={impersonating} /> : null}
+        {refused ? (
+          <a className={link} href={refused.screen.path}>
+            {(t('auth.backTo', 'Back to {screen}') ?? 'Back to {screen}').replace('{screen}', () => screenName(refused.screen.name))}
+          </a>
+        ) : screens.length ? (
+          <div className="grid gap-2">
+            {screens.map((screen) => (
+              // 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>
+            ))}
+          </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) => (
+          <Button
+            key={one.id}
+            type="button"
+            variant="secondary"
+            data-switch-organization={one.id}
+            // Busy while it runs, so a second press sends nothing.
+            disabled={switching !== undefined}
+            aria-busy={switching === one.id || undefined}
+            onClick={() => {
+              setSwitching(one.id)
+              setFailed(undefined)
+              void authArm('organization/set-active', { organizationId: one.id }).then((answer) => {
+                if (answer.ok) return window.location.assign('/auth/sign-in')
+                setSwitching(undefined)
+                setFailed(refusal(answer, t('auth.requestFailed', 'That request did not work.')))
+              })
+            }}
+          >
+            {/* One box, so the button's gap does not open beside the name. */}
+            <span>{(t('auth.switchTo', 'Switch to {organization}') ?? 'Switch to {organization}').split(/(\{organization\})/).map((part, at) => (part === '{organization}' ? <bdi key={at}>{named(one)}</bdi> : part))}</span>
+          </Button>
+        ))}
+        {failed ? <p role="alert" className="text-destructive text-sm">{failed}</p> : null}
+        {/* `replace`, so Back does not return to the page signed out of. */}
+        {impersonating ? null : (
+          <Button type="button" variant="outline" className="max-sm:h-11" onClick={() => void authArm('sign-out').then(() => window.location.replace('/auth/sign-in'))}>
+            {t('admin.signOut', 'Sign out')}
+          </Button>
+        )}
+      </div>
+    </AuthFrame>
+  )
+}
+// mithaq-admin 0.0.0 81d25978cdacbb38254854b0f64b738946ee27baca06a952aed51d35e6fb10af

package/template/apps/asas-tanstack/src/screen-form.tsx

@@ -0,0 +1,36 @@
+import { useBlocker, useRouter } from '@tanstack/react-router'
+import { useState, type ReactElement } from 'react'
+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 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'> & {
+  /** The href of a row's edit page, or nothing where the kayan has none. */
+  edit: (id: string) => string | undefined
+  /** The href of the kayan's list, or nothing where it has none. */
+  list?: string
+}): ReactElement {
+  const router = useRouter()
+  const [dirty, setDirty] = useState(false)
+  const blocker = useBlocker({ shouldBlockFn: () => dirty, withResolver: true, enableBeforeUnload: false })
+  // `ignoreBlocker`: the form reports clean only on the render after the save.
+  const go = (href: string | undefined) => void (href ? router.navigate({ href, ignoreBlocker: true }) : router.invalidate())
+  const landing = (row: unknown, effect?: string) => {
+    const id = (row as { id?: unknown } | null | undefined)?.id
+    return effect === 'delete' ? list : effect === 'create' && id !== undefined ? edit(String(id)) : undefined
+  }
+  return (
+    <Form
+      {...props}
+      onDirty={setDirty}
+      onDone={(row, effect) => go(landing(row, effect))}
+      onCancel={list ? () => go(list) : undefined}
+      blocked={blocker.status === 'blocked' ? blocker : undefined}
+    />
+  )
+}
+// mithaq-admin 0.0.0 508fa95987312292d3a5737dd1fd6aba03fbd5a7dbbbf5bb3bea2812b2adfde4