create-mithaq 0.0.0-stage → 0.2.0

package/template/templates/asas/src/ui-backoffice/organization-actions.tsx

@@ -0,0 +1,121 @@
+// The list's cell for the `slug` column. Rename is drawn only where this actor holds
+// `organization.rename`, with many organizations alone (with one, the name lives in code), and
+// members only where this actor reads them; the route refuses a rename without the key. A rename that lands asks the list behind it to be read again through
+// `mithaq:refresh`, so the list keeps its scroll.
+import { useState, type FormEvent } from 'react'
+import { holds, type CellProps } from 'mithaq/admin'
+import { useAccess, useLocale, useScreen } from 'mithaq/admin/react'
+import { writeQuery } from 'mithaq-admin/list-query.ts'
+import { endonym } from 'mithaq-admin/locale-menu.ts'
+import { defaultLocale, nameIn, organizationName, organizations } from '@asas/mithaq/auth/organizations'
+import { toast } from 'mithaq-admin/toast.tsx'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const slugShape = /^[a-z0-9]+(-[a-z0-9]+)*$/
+
+export function OrganizationActions({ value, row }: CellProps) {
+  const { t } = useLocale()
+  const access = useAccess()
+  const screen = useScreen()
+  const renames = organizations === 'many' && holds(access, 'organization.rename')
+  // The default locale's name is the required `name` box, so only the others get optional boxes of their own.
+  const others = Object.keys(organizationName).filter((one) => one !== defaultLocale)
+  const members = holds(access, 'member.find') && screen.kayan.member?.pages.list !== undefined
+  const [open, setOpen] = useState(false)
+  const [refusal, setRefusal] = useState<string>()
+  /** Said here rather than by the browser's own bubble, which is in the browser's language. */
+  const [wrong, setWrong] = useState<{ name?: string; slug?: string }>({})
+  const id = String(row.id ?? '')
+  const save = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const box = (key: string) => (event.currentTarget.elements.namedItem(key) as HTMLInputElement | null)?.value ?? ''
+    const name = box('name')
+    const slug = box('slug')
+    // An empty one falls back to `name`, so it is left out.
+    const names = { [defaultLocale]: name.trim(), ...Object.fromEntries(others.map((one) => [one, box(`name-${one}`).trim()]).filter(([, one]) => one)) }
+    const found = {
+      name: name.trim() ? undefined : t('organization.name.required', 'This field is required.'),
+      slug: !slug ? t('organization.slug.required', 'This field is required.') : slugShape.test(slug) ? undefined : t('backoffice.slugPattern', 'A slug is lowercase letters and digits joined by single dashes, such as admin-org.'),
+    }
+    setWrong(found)
+    if (found.name || found.slug) return
+    const response = await fetch('/api/backoffice/organizations/update', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id, names, slug }),
+    })
+    if (!response.ok) {
+      const key = ((await response.json().catch(() => null)) as { data?: { key?: string } } | null)?.data?.key
+      return setRefusal((key && t(key)) ?? t('backoffice.refused', 'The backoffice refused that action.'))
+    }
+    window.dispatchEvent(new Event('mithaq:refresh'))
+    // A function, so a name holding `$&` is put in as written.
+    toast.success((t('backoffice.renamed', 'The organization is now named {name}.') ?? '').replace('{name}', () => name))
+    setOpen(false)
+  }
+  return (
+    <div data-organization={id} className="flex items-center gap-2 whitespace-nowrap">
+      {/* An identifier, read left to right in either locale. */}
+      <span dir="ltr">{String(value ?? '')}</span>
+      {renames ? (
+        <Button size="sm" variant="outline" className="max-sm:h-11" data-action="rename" onClick={() => setOpen(true)}>
+          {t('backoffice.rename', 'Rename')}
+        </Button>
+      ) : null}
+      {members ? (
+        <Button
+          size="sm"
+          variant="outline"
+          className="max-sm:h-11"
+          data-action="members"
+          nativeButton={false}
+          render={<a href={`${screen.path}${screen.kayan.member!.pages.list!.path}?${new URLSearchParams(writeQuery({ where: { or: [{ and: [{ organizationId: { equals: id } }] }] } }))}`} />}
+        >
+          {t('backoffice.members', 'Members')}
+        </Button>
+      ) : null}
+      {open ? (
+        <Dialog open onOpenChange={setOpen}>
+          {/* Cancel is the way out, so the primitive's own close, named in
+              English alone, is not drawn beside it. */}
+          <DialogContent showCloseButton={false}>
+            <DialogHeader>
+              <DialogTitle>{t('backoffice.rename', 'Rename')}</DialogTitle>
+              <DialogDescription>{t('backoffice.renameAbout', 'The new name and slug take the place of the old ones for everyone in this organization.')}</DialogDescription>
+            </DialogHeader>
+            <form noValidate onSubmit={(event) => void save(event)} className="grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor={`organization-name-${id}`}>{t('organization.name', 'Name')}</Label>
+                <Input id={`organization-name-${id}`} name="name" required aria-required dir="auto" defaultValue={String(row.name ?? '')} aria-invalid={wrong.name ? true : undefined} aria-describedby={wrong.name ? `organization-name-${id}-error` : undefined} />
+                {wrong.name ? <p id={`organization-name-${id}-error`} role="alert" className="text-sm text-destructive">{wrong.name}</p> : null}
+              </div>
+              {others.map((one) => (
+                <div key={one} className="grid gap-2">
+                  <Label htmlFor={`organization-name-${one}-${id}`}>{(t('backoffice.nameIn', 'Name in {language}, if it has one') ?? '').replace('{language}', () => endonym(one))}</Label>
+                  <Input id={`organization-name-${one}-${id}`} name={`name-${one}`} lang={one} dir="auto" defaultValue={nameIn({ name: '', names: row.names }, one)} />
+                </div>
+              ))}
+              <div className="grid gap-2">
+                <Label htmlFor={`organization-slug-${id}`}>{t('organization.slug', 'Slug')}</Label>
+                <Input id={`organization-slug-${id}`} name="slug" required aria-required dir="ltr" pattern={slugShape.source.slice(1, -1)} defaultValue={String(value ?? '')} aria-invalid={wrong.slug ? true : undefined} aria-describedby={wrong.slug ? `organization-slug-${id}-error` : undefined} />
+                {wrong.slug ? <p id={`organization-slug-${id}-error`} role="alert" className="text-sm text-destructive">{wrong.slug}</p> : null}
+              </div>
+              {refusal ? (
+                <p role="alert" className="text-sm text-destructive">
+                  {refusal}
+                </p>
+              ) : null}
+              <DialogFooter>
+                <DialogClose render={<Button type="button" variant="outline" />}>{t('admin.cancel', 'Cancel')}</DialogClose>
+                <Button type="submit">{t('admin.save', 'Save')}</Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      ) : null}
+    </div>
+  )
+}

package/template/templates/asas/src/ui-backoffice/record-page.tsx

@@ -0,0 +1,30 @@
+// The backoffice's record page: the shared one under a link back to the list the
+// record belongs to, so a person's page, an organization's and a role's are never
+// a dead end. The link is named as the nav names the list, which is already the
+// viewer's own word for it.
+import type { ReactNode } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import type { LayoutProps } from 'mithaq/admin'
+import { useKayan, useLocale, useScreen } from 'mithaq/admin/react'
+import { RecordPage } from '@asas/mithaq/ui/record-page.tsx'
+import { navLabel } from '@asas/mithaq/ui/screen-nav.tsx'
+
+export const regions = ['main', 'side', 'danger'] as const
+
+export function BackofficeRecordPage(props: LayoutProps<readonly ['main', 'side', 'danger'], ReactNode>) {
+  const { locale, t } = useLocale()
+  const screen = useScreen()
+  const kayan = useKayan()
+  const list = screen.nav.find((entry) => entry.kayan === kayan.name)
+  return (
+    <div className="grid gap-4">
+      {list ? (
+        <a href={`${screen.path}${list.path}`} data-back="" className="inline-flex w-fit items-center gap-1.5 text-sm underline underline-offset-4 max-sm:min-h-11">
+          <ArrowLeft className="size-4 rtl:-scale-x-100" aria-hidden="true" />
+          <span>{navLabel({ entry: list, screen, locale, t })}</span>
+        </a>
+      ) : null}
+      <RecordPage {...props} />
+    </div>
+  )
+}

package/template/templates/asas/src/ui-backoffice/role-cells.tsx

@@ -0,0 +1,59 @@
+// The two role columns the backoffice lists, each named in the viewer's locale
+// where the column holds a slug, so an Arabic page reads no English word and
+// no slug for them.
+import type { CellProps } from 'mithaq/admin'
+import { useLocale } from 'mithaq/admin/react'
+import { listed } from 'mithaq-admin/format.tsx'
+// add-on: roles
+import { use } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import type { Row } from 'mithaq/admin'
+import { ListContext, useClient, useScreen } from 'mithaq/admin/react'
+import type { asas } from '../asas.ts'
+import { refusalKeyOf } from 'mithaq-admin/refusal.ts'
+import { systemRoles } from '@asas/mithaq/roles/system-roles.ts'
+// end add-on: roles
+
+/**
+ * A membership's role, which is the provider's own governance role, `owner`,
+ * `admin` or `member`, several of them comma-joined, each by the project's word for it.
+ */
+export function MembershipRole({ value }: CellProps) {
+  const { locale, t } = useLocale()
+  if (typeof value !== 'string' || !value) return null
+  return listed(value.split(',').map((one) => t(`backoffice.membership.${one.trim()}`) ?? one.trim()), locale)
+}
+
+// add-on: roles
+/**
+ * A business role an assignment names by its slug, by its label: a fixed
+ * role's from its code, and a custom role's from its row of the assignment's own tenant, one read for
+ * every custom slug the page's rows name, shared through the query client as
+ * the session column shares its own. A role the viewer may not read keeps its
+ * slug, the one thing the column holds.
+ */
+export function RoleName({ value, row }: CellProps) {
+  const client = useClient<typeof asas.router>()
+  const { locale } = useLocale()
+  const { maxLimit } = useScreen()
+  const slugs = [...new Set((use(ListContext)?.page.docs ?? [row]).flatMap((one: Row) => (typeof one.role === 'string' && !Object.hasOwn(systemRoles, one.role) ? [one.role] : [])))].sort()
+  const { data: custom } = useQuery({
+    queryKey: ['role-name', slugs],
+    queryFn: () =>
+      client({ kayan: 'roles', operation: 'find', input: { where: { name: { in: slugs } }, limit: maxLimit } }).then(
+        (found) => found.docs,
+        (thrown: unknown) => {
+          if (refusalKeyOf(thrown)) return []
+          throw thrown
+        },
+      ),
+    enabled: slugs.length > 0,
+    staleTime: 30_000,
+  })
+  if (typeof value !== 'string') return null
+  const label: Record<string, string> | undefined = Object.hasOwn(systemRoles, value)
+    ? systemRoles[value as keyof typeof systemRoles].label
+    : (custom?.find((one) => one.name === value && one.organization === row.organization)?.label as Record<string, string> | undefined)
+  return label?.[locale] ?? value
+}
+// end add-on: roles

package/template/templates/asas/src/ui-backoffice/user-actions.tsx

@@ -0,0 +1,249 @@
+// Each action is the admin plugin's own route, drawn only where this actor holds its key
+// (`user.set-role`, `user.ban` or `user.impersonate`) and refused by the provider without it. None is
+// drawn on the viewer's own row, and on a staff member's, a person holding a backoffice role, only for a
+// super admin; the server refuses both whatever is drawn. An action that lands asks the page behind
+// it to be read again through `mithaq:refresh`, so the page keeps its scroll.
+import { useState, type ReactNode } from 'react'
+import { holds, type CellProps, type MenuProps, type Row } from 'mithaq/admin'
+import { useAccess, useLocale, useRecord, useUser } from 'mithaq/admin/react'
+import { backofficeRoles } from '@asas/mithaq/auth/backoffice-roles'
+import { authArm } from '@/api.ts'
+import { toast } from 'mithaq-admin/toast.tsx'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+/** The names `set-role` accepts: the backoffice roles and the plugin's own `user`, which is none of them. */
+const roleNames = ['user', ...Object.keys(backofficeRoles)] as const
+
+/** How long a ban lasts, in the seconds the plugin's `banExpiresIn` takes, or until it is lifted. */
+const banEnds = [
+  ['', 'backoffice.banUntilLifted', 'Until it is lifted'],
+  ['86400', 'backoffice.banDay', 'One day'],
+  ['604800', 'backoffice.banWeek', 'Seven days'],
+  ['2592000', 'backoffice.banMonth', 'Thirty days'],
+] as const
+
+type Action = 'set-role' | 'ban' | 'unban' | 'impersonate'
+
+/** What a native choice looks like beside the underline `Input`: no box, no corners, the line under it. */
+const choiceClass =
+  'h-10 w-full rounded-none border border-transparent border-b-input bg-transparent px-0 text-sm outline-none focus-visible:border-b-ring [&>option]:bg-popover [&>option]:text-popover-foreground'
+
+const refusalsByCode: Record<string, [key: string, fallback: string]> = {
+  BANNED_USER: ['backoffice.refusedBanned', 'This person is banned, so they cannot be impersonated.'],
+}
+
+const useBackofficeRoleLabel = () => {
+  const { locale, t } = useLocale()
+  return (one: string) =>
+    Object.hasOwn(backofficeRoles, one) ? backofficeRoles[one as keyof typeof backofficeRoles].label[locale === 'ar' ? 'ar' : 'en'] : t('backoffice.noRole', 'No backoffice role')
+}
+
+/** A person's backoffice roles as badges, each by its label, which a record page draws where the column holds the slugs. */
+export function BackofficeRole({ value }: Pick<CellProps, 'value'>) {
+  const labelOf = useBackofficeRoleLabel()
+  const role = typeof value === 'string' && value ? value : 'user'
+  return (
+    <span className="inline-flex flex-wrap gap-1">
+      {role.split(',').map((one) => (
+        <Badge key={one} variant="secondary">
+          {labelOf(one.trim())}
+        </Badge>
+      ))}
+    </span>
+  )
+}
+
+const usePerson = (row: Row) => {
+  const access = useAccess()
+  const viewer = useUser()
+  const role = typeof row.role === 'string' && row.role ? row.role : 'user'
+  const own = typeof row.email === 'string' && row.email === viewer.email
+  const staff = role.split(',').some((one) => Object.hasOwn(backofficeRoles, one.trim()))
+  // None on the viewer's own row, and on a staff member's only for a super
+  // admin; the server refuses both whatever is drawn.
+  const acts = !own && (!staff || access.permissions === '*')
+  const actions: Action[] = [
+    ...(acts && holds(access, 'user.set-role') ? ['set-role' as const] : []),
+    ...(acts && holds(access, 'user.ban') ? [row.banned === true ? ('unban' as const) : ('ban' as const)] : []),
+    // A banned account is refused a session, so impersonating it cannot work.
+    ...(acts && row.banned !== true && holds(access, 'user.impersonate') ? ['impersonate' as const] : []),
+  ]
+  return { role, actions }
+}
+
+const useNames = () => {
+  const { t } = useLocale()
+  return { 'set-role': t('backoffice.setRole', 'Set role'), ban: t('backoffice.ban', 'Ban'), unban: t('backoffice.unban', 'Unban'), impersonate: t('backoffice.impersonate', 'Impersonate') }
+}
+
+function PersonDialog({ row, action, onClose }: { row: Row; action: Action; onClose: () => void }) {
+  const { t } = useLocale()
+  const names = useNames()
+  const labelOf = useBackofficeRoleLabel()
+  const { role } = usePerson(row)
+  const [chosen, setChosen] = useState(role)
+  const [reason, setReason] = useState('')
+  const [ends, setEnds] = useState('')
+  const [refusal, setRefusal] = useState<string>()
+  const [busy, setBusy] = useState(false)
+  const userId = String(row.id ?? '')
+  const name = String(row.name || row.email || '')
+  const send = async () => {
+    const [path, body] = {
+      'set-role': ['admin/set-role', { userId, role: chosen }],
+      ban: ['admin/ban-user', { userId, banReason: reason.trim(), ...(ends ? { banExpiresIn: Number(ends) } : {}) }],
+      unban: ['admin/unban-user', { userId }],
+      impersonate: ['admin/impersonate-user', { userId }],
+    }[action] as [string, Record<string, unknown>]
+    setBusy(true)
+    const answered = await authArm(path, body).finally(() => setBusy(false))
+    // The provider's own sentence is English alone, so the dialog says the
+    // refusal in the viewer's locale; the detail stays in the answer's body.
+    if (!answered.ok) {
+      const known = refusalsByCode[String(answered.body?.code)]
+      return setRefusal(known ? t(known[0], known[1]) : t('backoffice.refused', 'The backoffice refused that action.'))
+    }
+    // The backoffice answers a one-time link into the tenant app, which trades it for the impersonated
+    // session under its own cookie.
+    if (action === 'impersonate') {
+      onClose()
+      return window.location.assign(String(answered.body?.url))
+    }
+    window.dispatchEvent(new Event('mithaq:refresh'))
+    toast.success(landed[action])
+    onClose()
+  }
+  // Functions, so a name holding `$&` is put in as written and never read as a pattern.
+  const fill = (text: string | undefined) => (text ?? '').replace('{name}', () => name).replace('{role}', () => labelOf(chosen) ?? chosen)
+  const said = {
+    // Asked only once another role is picked: the dialog opens on the role
+    // the person holds, which there is nothing to give.
+    'set-role': fill(chosen === role ? t('backoffice.pickRole', 'Pick another backoffice role for {name}.') : t('backoffice.confirmRole', 'Give {name} the backoffice role "{role}"?')),
+    ban: fill(t('backoffice.confirmBan', 'Ban {name}? They are signed out of both apps and cannot sign in until the ban ends.')),
+    unban: fill(t('backoffice.confirmUnban', 'Lift the ban on {name}? They can sign in again.')),
+    impersonate: fill(t('backoffice.confirmImpersonate', 'Impersonate {name}? You act as them in the tenant app until you stop.')),
+  }[action]
+  const landed = {
+    'set-role': fill(t('backoffice.roleSet', '{name} now holds the backoffice role "{role}".')),
+    ban: fill(t('backoffice.banned', '{name} is banned.')),
+    unban: fill(t('backoffice.unbanned', 'The ban on {name} is lifted.')),
+  }
+  return (
+    <AlertDialog open onOpenChange={(open) => !open && onClose()}>
+      <AlertDialogContent data-person={userId}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{names[action]}</AlertDialogTitle>
+          <AlertDialogDescription>{said}</AlertDialogDescription>
+        </AlertDialogHeader>
+        {action === 'set-role' ? (
+          <div className="grid gap-2">
+            <Label htmlFor={`role-${userId}`}>{t('backoffice.role', 'Backoffice role')}</Label>
+            <select
+              id={`role-${userId}`}
+              data-role="chosen"
+              className={choiceClass}
+              value={chosen}
+              onChange={(event) => setChosen(event.target.value)}
+            >
+              {roleNames.map((one) => (
+                <option key={one} value={one}>
+                  {labelOf(one)}
+                </option>
+              ))}
+            </select>
+          </div>
+        ) : null}
+        {action === 'ban' ? (
+          <div className="grid gap-3">
+            <div className="grid gap-2">
+              <Label htmlFor={`ban-reason-${userId}`}>{t('backoffice.banReason', 'Reason')}</Label>
+              {/* Required, and said so while it is empty, since Ban stays off until a reason is given. */}
+              <Input id={`ban-reason-${userId}`} data-ban="reason" required aria-required maxLength={200} aria-describedby={reason.trim() ? undefined : `ban-reason-${userId}-needed`} value={reason} onChange={(event) => setReason(event.target.value)} />
+              {reason.trim() ? null : (
+                <p id={`ban-reason-${userId}-needed`} className="text-muted-foreground text-sm">
+                  {t('backoffice.banReasonNeeded', 'A ban needs a reason.')}
+                </p>
+              )}
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor={`ban-ends-${userId}`}>{t('backoffice.banEnds', 'Ban lasts')}</Label>
+              <select
+                id={`ban-ends-${userId}`}
+                data-ban="ends"
+                className={choiceClass}
+                value={ends}
+                onChange={(event) => setEnds(event.target.value)}
+              >
+                {banEnds.map(([seconds, key, fallback]) => (
+                  <option key={seconds} value={seconds}>
+                    {t(key, fallback)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        ) : null}
+        {refusal ? (
+          <p role="alert" className="text-sm text-destructive">
+            {refusal}
+          </p>
+        ) : null}
+        <AlertDialogFooter className="max-sm:[&_button]:h-11">
+          <AlertDialogCancel data-button="close">{t('admin.cancel', 'Cancel')}</AlertDialogCancel>
+          <AlertDialogAction
+            data-button="confirm"
+            variant={action === 'ban' ? 'destructive' : 'default'}
+            disabled={busy || (action === 'ban' && !reason.trim()) || (action === 'set-role' && chosen === role)}
+            onClick={() => void send()}
+          >
+            {names[action]}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+/** The actions in a row's menu of the users list, after the list's own View; each opens its dialog below the table, which outlives the menu. */
+export function UserMenu({ row, open }: MenuProps<ReactNode>) {
+  const names = useNames()
+  const { actions } = usePerson(row)
+  return actions.map((action) => (
+    <DropdownMenuItem key={action} data-action={action} variant={action === 'ban' ? 'destructive' : 'default'} onClick={() => open(<PersonDialog row={row} action={action} onClose={() => open(null)} />)}>
+      {names[action]}
+    </DropdownMenuItem>
+  ))
+}
+
+/** The same actions as buttons on the person's own page, which a row opens. */
+export function UserButtons() {
+  const row = useRecord()
+  const names = useNames()
+  const { actions } = usePerson(row ?? {})
+  const [asking, setAsking] = useState<Action>()
+  if (!row || !actions.length) return null
+  return (
+    <div data-person-actions={actions.join(' ')} className="flex flex-wrap gap-2">
+      {actions.map((action) => (
+        <Button key={action} type="button" size="sm" variant={action === 'ban' ? 'destructive' : 'outline'} data-action={action} onClick={() => setAsking(action)}>
+          {names[action]}
+        </Button>
+      ))}
+      {asking ? <PersonDialog row={row} action={asking} onClose={() => setAsking(undefined)} /> : null}
+    </div>
+  )
+}