71 Commits
Author SHA1 Message Date
jcoffey-dev 0ea86b6be0 Merge pull request 'Point links at git.coffeylabs.org after the move from GitHub' (#10) from fix/links-after-move into main
ci / build (push) Successful in 1m4s
ci / publish (push) Skipped
2026-09-22 16:11:23 +00:00
jcoffey-dev 3e7bb80f73 Point links at git.coffeylabs.org after the move from GitHub
ci / build (pull_request) Successful in 1m6s
ci / publish (pull_request) Skipped
GitHub took the organization's repos and GHCR offline on 2026-09-20. Repo,
release, raw-file and clone links now go to Gitea at git.coffeylabs.org,
container images to registry.coffeylabs.org, and GitLab-style /-/blob paths
to Gitea's /src/branch form. Go module paths are identifiers and stay as
they are; links to GitHub issues and pull requests are left as history.
2026-09-22 09:08:22 -07:00
jcoffey-dev 4eb838042c Merge pull request 'ci: run socket-free jobs on the light label' (#9) from ci/light-runner into main
ci / build (push) Successful in 1m6s
ci / publish (push) Skipped
2026-09-22 13:54:26 +00:00
jcoffey-dev 14ccb05e52 ci: run socket-free jobs on the light label
ci / build (pull_request) Successful in 1m55s
ci / publish (pull_request) Skipped
Both runners carry `light` (host1, and host2 over the wg-hosts link), so
these jobs run on whichever host is free. Jobs that mount the docker socket
keep `runs-on: docker`, which only host1 has.
2026-09-22 06:45:44 -07:00
jcoffey-dev 7d5f2273ae Merge branch 'ci/gitea-actions' into 'main'
ci / build (push) Successful in 4m23s
ci / publish (push) Skipped
ci: add Gitea Actions workflow

See merge request inbuxa/inbuxa-admin!8
2026-09-22 00:00:36 -07:00
jcoffey-dev de58de765a ci: fail clearly when PACKAGE_TOKEN is missing
ci / build (pull_request) Successful in 6m2s
ci / publish (pull_request) Skipped
ci / build (push) Successful in 3m14s
ci / publish (push) Failing after 46s
2026-09-21 23:20:50 -07:00
jcoffey-dev 1be7b5c60b ci: add Gitea Actions workflows ported from .gitlab-ci.yml 2026-09-21 22:52:11 -07:00
jcoffey-dev 2cd73c6705 Merge branch 'ci/registry-token-host' into 'main'
Fetch the registry token from the public address, not the runner's

See merge request inbuxa/inbuxa-admin!7
2026-09-21 18:20:30 -07:00
jcoffey-dev 7a455e7b6a Fetch the registry token from the public address, not the runner's
The builder on the host's network (the last change here) didn't help: the
next publish failed exactly as before. Looking on the host showed why.
Both builders resolve git.coffeylabs.org publicly; the token isn't fetched
by the builder at all. buildx fetches registry tokens on the client side,
in the job container, and on ci-net the name git.coffeylabs.org belongs to
the gitlab container itself (172.30.0.2) -- which is how the runner clones
over plain HTTP, and which has nothing on 443. So every push asked
https://git.coffeylabs.org/jwt/auth for a token and was refused. The login
before it worked because the host's daemon does the login, and the host
resolves the name publicly.

For the publish job only, the name now points at its public address in the
job's /etc/hosts, looked up from a public resolver, as the host sees it.
/etc/hosts wins over Docker's DNS, and nothing else in the job is affected:
the checkout is done, and image layers go to the registry's own DNS-only
name, not this one. The builder goes back to the shared ci-builder; its
network was never the problem.

The lookup and the /etc/hosts write were tried in the job's own image
(docker:28-cli, same digest): it picks the first public IPv4 address and
getent then returns it.
2026-09-21 16:48:43 -07:00
weekly-release ff38c7a5e8 Version 2026.9.21.2 2026-09-21 23:35:57 +00:00
jcoffey-dev 0454528e8a Merge branch 'ci/buildx-host-network' into 'main'
Publish with a builder on the host's network

See merge request inbuxa/inbuxa-admin!6
2026-09-21 16:33:30 -07:00
jcoffey-dev 9967f9cd7f Publish with a builder on the host's network
The first release's image never reached the registry. Both platforms
built, then the push failed:

  failed to fetch oauth token: Post "https://git.coffeylabs.org/jwt/auth":
  dial tcp 172.30.0.2:443: connect: connection refused

buildx's docker-container builder is a container of its own on the host's
daemon, and it does the push, token and all. On the network it was
created on, git.coffeylabs.org resolves to an internal address with
nothing listening on 443. The job's own `docker login` worked because it
goes through the host daemon, which resolves the name publicly.
ihasmail's publish failed the same way this morning (job 513), so this is
the runners, not this pipeline.

The builder now runs on the host's network, so it resolves the name as
the login does. Only the token request goes to git.coffeylabs.org; image
layers still go to registry.coffeylabs.org, the registry's DNS-only name.
It gets a new name, ci-builder-host: `ci-builder` is a long-lived
container shared between jobs, and `create || use` would keep reusing it
on its old network.
2026-09-21 16:31:01 -07:00
weekly-release 2611815a7e Version 2026.9.21 2026-09-21 22:31:40 +00:00
jcoffey-dev 4859607bab Merge branch 'feat/tenant-legacy-switch' into 'main'
Each tenant's page carries its legacy protocols switch

See merge request inbuxa/inbuxa-admin!5
2026-09-21 13:44:09 -07:00
jcoffey-dev 11d85cd759 Each tenant's page carries its legacy protocols switch (LP-9 to LP-18)
A card above the tenant form: whether legacy mail protocols are on or off
for the organization, a one-click "Turn legacy protocols back on", and
"Turn off legacy protocols…", which opens -- before anything can change --
the impact panel with the tenant's own people (LP-15), the statement at
tenant scope and the typed confirmation (LP-16, LP-17). The statement reads
"everyone in {organization}" and names no ports and no firewall: a
tenant's switch closes nothing, other tenants share the ports (LP-13).

It reads and turns inbuxa:TenantProtocolPolicy, with the domain
permissions the server checks for it. It shows on the read-only tenant page
too: a tenant administrator reads its tenant without changing it (MT-12)
and may still turn the switch. Turning it back on while the server has
legacy protocols off is refused by the server, and the refusal is shown.

The banner (LP-18) falls back to the tenant's switch where the server's
can't be read -- inside a tenant -- and reads "off for your
organization".

The impact panel, statement and confirmation move to parts.tsx, shared by
Hardening and the tenant card; the statement takes its scope.

Checked by hand against a local server with a tenant, two of its users and
the admin signed in over IMAP: the tenant card's panel lists the tenant's
two users and not the admin; the statement reads "everyone in Example Co"
with no ports or firewall; turning it off makes the tenant's user get "NO
[ALERT] Your organization allows only INBUXA webmail and JMAP apps" over
IMAP; one click turns it back on; Hardening's panel lists all three. Not
checked by hand: the banner as a tenant administrator sees it.
2026-09-21 13:39:56 -07:00
jcoffey-dev e020f9f02c Merge branch 'feat/legacy-impact-panel' into 'main'
Hardening shows who still uses legacy mail apps (LP-15)

See merge request inbuxa/inbuxa-admin!4
2026-09-21 13:31:40 -07:00
jcoffey-dev 2aff8c8a10 Hardening shows who still uses legacy mail apps (LP-15)
The impact panel, above the statement, shown before anything can change:
"3 accounts used a legacy mail app in the last 30 days. Their mail apps
will stop working the moment you turn this on:", then one line per
account with every protocol it used and how long ago it last did, most
recent first. With nobody, it says so in one line. While the switch is
off it isn't shown -- there is nothing left to warn about.

It reads recentLegacyUse from inbuxa:ProtocolPolicy, which the server
fills from one timestamp per account and protocol (inbuxa-server
feat/legacy-use-panel). A server without it gets no panel at all rather
than a false "nobody": null and an empty list are kept apart.

Protocols read as the table names them (IMAP, POP3, ManageSieve, SMTP
submission), and "2 days ago" comes from Intl.RelativeTimeFormat in the
reader's language.
2026-09-21 11:46:38 -07:00
jcoffey-dev 8001a6e71b Merge branch 'ci/weekly-release' into 'main'
Release weekly and publish the image from GitLab

See merge request inbuxa/inbuxa-admin!3
2026-09-21 10:45:47 -07:00
jcoffey-dev 25e33767af Release weekly and publish the image from GitLab
Ports release.yml and publish.yml, the two workflows left behind when the
GitHub account was suspended; nothing has released INBUXA Admin since.

weekly-release keeps release.yml's decision unchanged: on a schedule that
sets RELEASE_WEEKLY=1, count the commits on main since the newest published
release, stop if there are none, and otherwise pick today's version
(YYYY.M.D, .2 and on for a second release in a day), commit it to main in
inbuxa-version.json and cut the release at that commit. DRY_RUN=1 stops
after the decision.

What changes is how it writes. GitHub's job pushed the bump with
GITHUB_TOKEN; here the bump goes through the commits API with RELEASE_TOKEN,
and last_commit_id pins it to the commit the job counted from, so a main
that moved underneath makes the job fail rather than release something the
notes don't describe. The release and its tag go through the releases API
with the same token, which as an ordinary push starts a tag pipeline --
replacing publish.yml's workflow_call, which only existed because a
GITHUB_TOKEN release raises no event.

publish runs in that tag pipeline, after the build job has built and
tested the tag again. It pushes a two-architecture image (arm64 under QEMU,
as ihasmail's does) to the project registry,
registry.coffeylabs.org/inbuxa/inbuxa-admin, tagged with the version and
latest. Only date tags publish, not the inherited v1.0.x, and a tag whose
commit's inbuxa-version.json says anything else is refused, so an image
never reports a version other than its tag.

Tag lookups use git show-ref, after ihasmail's port found rev-parse
--verify reading some tag names as describe output on the git in these
images.

Needs, on the project: a RELEASE_TOKEN variable (project access token,
Maintainer, api scope, protected and masked) whose role may push to main,
and a pipeline schedule on main, Mondays 09:37 UTC, setting
RELEASE_WEEKLY=1.
2026-09-21 10:31:09 -07:00
jcoffey-dev baa8181c19 Merge branch 'feat/legacy-protocols-screen' into 'main'
Settings › Security › Hardening: the legacy mail protocols switch

See merge request inbuxa/inbuxa-admin!2
2026-09-21 09:30:18 -07:00
jcoffey-dev b6b54d2ac0 Settings › Security › Hardening: the legacy mail protocols switch
The screen for inbuxa:ProtocolPolicy, the server-wide switch that closes
IMAP, POP3 and ManageSieve (legacy-protocols spec). Reached as
CustomComponent/LegacyProtocols, which the server's schema places under
Settings › Security; a server without that link never shows it.

- The selector lists every mail protocol, with what the switch does to
  each and on which ports. SMTP and JMAP are shown locked, from the
  server's lockedProtocols rather than a list carried here, so unlocking
  later needs no admin release (LP-21).
- The statement is shown in full before the switch moves and while it is
  off, with the listeners that close by name and port, and the note that
  firewall rules and port-forwards are the operator's to reconcile
  (LP-16, LP-20).
- Turning it off takes the typed phrase "turn off legacy mail", matched
  exactly. Turning it back on is one click (LP-17).
- Listeners that could not be reopened stay listed, with a Try again
  (LP-5).
- A banner on the Security settings and the dashboard while it is off
  (LP-18). It stays silent on a server without the switch.

Visible to whoever may see listeners, changeable by whoever may update
them, matching the permissions the server checks.

Not here yet: the impact panel (LP-15), which needs the server to record
last use per protocol, and the tenant switch (LP-9 to LP-14).
2026-09-21 09:26:18 -07:00
jcoffey-dev 8a95814eee Merge branch 'ci/gitlab-pipeline' into 'main'
Run CI on the self-hosted GitLab

See merge request inbuxa/inbuxa-admin!1
2026-09-20 20:36:20 -07:00
jcoffey-dev 0ff997d111 Run CI on the self-hosted GitLab
Ports .github/workflows/ci.yml after the GitHub account was suspended and
Actions stopped being reachable. Same checks, same order, with the image
pinned by digest in place of the workflow's SHA-pinned actions.

cleanup.yml is not ported: it pruned GHCR through an action, and GitLab
keeps that as a container registry cleanup policy on the project rather
than as a pipeline. publish.yml and release.yml are larger and follow
separately.

The Actions workflows stay in the tree as the reference.

.gitignore blanket-ignores dotfiles, so .gitlab-ci.yml is negated there the
same way .github already is.
2026-09-20 20:17:38 -07:00
jcoffey a157fed8f2 Release weekly, and publish an image (#5)
INBUXA Admin had CI and nothing after it: twelve tags inherited from
upstream's numbering, no GitHub releases at all, and no image. Deploying
it meant building the tree yourself.

This adds the three workflows ihasmail already runs -- weekly release,
publish, prune -- and the Dockerfile they need.

Monday 09:37 UTC, and nothing on a quiet week. Staggered twenty minutes
behind ihasmail-inbuxa's and twenty ahead of the server's, so three
releases do not compete for runners and a bad Monday names one
repository rather than three.

The version is the difference from ihasmail. ihasmail derives its
version from the commit it builds, so its release only reads. INBUXA
Admin keeps its version in inbuxa-version.json, so the release writes
it: the bump is committed to main and the tag names that commit. The
tree a tag points at therefore reports the version the tag claims, which
a tag placed beside an unbumped file cannot promise. The bump is written
with a JSON parser rather than sed, because a version substituted into
JSON as a string is one stray quote from a file nothing can read.

The image is nginx serving the built files and nothing else -- the
interface talks to the mail server from the browser, never from the
container. It is built from source in the image rather than copied from
dist/, so an image always matches the commit it claims.

One image serves any installation: API_BASE_URL writes the
`<meta name="api-base-url">` tag that README already documents as the
deploy-time way to point the interface at its server. Set nothing and
the container still starts, for a build that was given
VITE_API_BASE_URL instead.

Two things the smoke test found rather than review. Unprivileged nginx
runs as uid 101, so the copied files are chowned to it or the tag can
never be written. And the directory stays root's, so the entrypoint
writes back through the existing file instead of `sed -i`, which
replaces the file and needs to create a temp file in the directory.

Verified by running it: the tag lands, a deep route falls back to
index.html, hashed assets come back immutable while index.html is
no-cache, it runs as uid 101, and it starts with no API_BASE_URL set.
2026-09-20 16:12:20 -07:00
jcoffey 4720470a3d The source offer is a link to this fork, not a tarball beside the app (#7)
INBUXA Admin built its own source into every deployment: the whole tree
packed as source.tar.gz next to the app, with an identity string shown
beside the link and in the version tooltip. The top bar menu and the
source link offered that download.

It answered the AGPL precisely -- the source of *this* build, uncommitted
work and all -- but it paid for that by carrying the tree into every
deployment, to a repository that is public and already has it. The
version shown beside the link already names the build, so the link and
the version together say what the archive said.

This is the same change already made to ihasmail-inbuxa, for the same
reason, and it leaves the two forks answering the offer the same way.

It is also what lets INBUXA Admin be built in an Alpine image: the
plugin shelled out to `tar --transform`, which BusyBox tar does not
have, so `npm run build` failed there and nowhere else.

Removed with it: source-archive.ts, the Vite plugin call, __SOURCE_ID__
and sourceDownloadUrl(). The build no longer shells out to git or tar,
and nothing is written next to the app.

The two strings that named the archive change with it: the link now
reads "Source code (<version>), AGPL-3.0" rather than naming a tree id,
and the version tooltip drops the id it appended.
2026-09-20 16:10:27 -07:00
jcoffey fa42a74697 Take the lint error out of main (#6)
`npm run lint` fails on main, and has since CI was added, so every pull
request opened against it starts red for a reason that has nothing to do
with the change in it. Two unrelated PRs came back with the same failure,
which is how it was found.

    vite.config.ts
      1:1  error  Do not use a triple slash reference for vitest/config,
                  use `import` style instead

The reference was doing one job: putting the `test` key in scope for
defineConfig. Importing defineConfig from vitest/config rather than vite
does the same job in the style the rule asks for, and the file already
imported configDefaults from there on the next line.
2026-09-20 16:08:17 -07:00
jcoffey-dev 9c44a28197 Community files and CI, now that the repository is public
It had none: no security policy, no contributing guide, no code of conduct,
no sponsor link, and no CI. A public repository with an administrative
interface in it should at least say where to send a vulnerability, so that
part names what is worth reporting here specifically -- a session acting
beyond its permissions, one tenant's data reaching another, a token landing
somewhere that outlives the session -- and where a report goes if it turns
out to belong to the server or to upstream.

CI is what a contributor can run: typecheck, lint, test, build. Nothing in
it needs a live server, so a red run means the code, not the runner.
2026-09-20 00:00:38 -07:00
jcoffey-dev 3a33f3d514 Mark the files this fork changed (AGPL section 5(a))
Publishing the source is what asks for it: a modified version has to carry
prominent notices saying it was modified, with a date. These files already
added a Coffey Labs copyright line beside upstream's, which implies as much
without saying it; now they say it.

38 files, found by diffing against the merge base with upstream rather than
by guessing. Upstream's own notices are untouched. The build is unchanged.
2026-09-19 23:48:44 -07:00
jcoffey 93a76098cc Update README to remove development status
Removed status indication from README.
2026-09-19 23:46:37 -07:00
jcoffey-dev 8ae4156aee Sections across the top, and a choice between the two shells
The old web UI put everything in a sidebar, and a reskin of it would
still read as the old web UI. The modern shell splits navigation in two
instead: the layout switcher already in the top bar is tier one, and a
new bar under it carries that layout's own top-level items, each group
opening its children in a menu. Nothing on the left, so a queue table or
a dashboard gets the whole window.

- Management's nine entries and Account's eleven suit a menu bar; the
  bar measures its items once per layout and folds whatever doesn't fit
  into "More", recomputing on resize from the cached widths.
- Settings keeps the sidebar. Nineteen groups is a configuration browser,
  not a set of destinations, and a menu bar stops helping however wide
  the window; the threshold is on the count, not on the name, so a
  changed schema can't strand anyone.
- Which shell to use is the reader's, beside the theme: user menu,
  Layout, Modern or Legacy. Modern is the default, and the choice is
  remembered in the browser rather than with the account — settings.json
  is shared with the webmail, which has no notion of this.
- A phone is unchanged. The section bar is hidden below md and the
  sidebar stays as the slide-over behind the hamburger.
- The tree walking both shells need moves to lib/navTree.ts, so the
  sidebar and the section bar agree on what is visible, what is locked
  and what is active.
2026-09-19 22:03:53 -07:00
jcoffey-dev e04975915e Dev sign-in bypass renews itself with a refresh token
VITE_REFRESH_TOKEN, when set next to VITE_ACCESS_TOKEN, is handed to the
admin with the server's token endpoint, so the ordinary refresh keeps a
dev session alive instead of it ending when the access token expires.
2026-09-19 10:09:28 -07:00
jcoffey-dev 3d3dcb0227 Hover cards for domains and people, and defaults in option tooltips
- A domain's name in any list opens a card on hover: whether it's taking
  mail, how many people it has, which of its key records (mail routing,
  SPF, DKIM, DMARC) are live in public DNS, and whether DNS, signing keys
  and certificates are automatic.
- A person's shows their name, storage against their quota, role, groups
  and when they joined. The server keeps no last sign-in on the account,
  so the card doesn't claim one.
- Cards load on open and are cached for a minute.
- Option tooltips end with the option's default, and an option set away
  from its default gets a small "changed" mark.
2026-09-19 02:06:50 -07:00
jcoffey-dev 824427ef46 Help on every option and every page
- Each option's explanation moves from a line of text under its label to
  a small tooltip on an ⓘ beside it, so forms read calmer and the help is
  still one hover away.
- Help text is ours where written (src/help/texts.ts: domains, people,
  DNS providers, blocked addresses, and the main pages), and the schema's
  description elsewhere.
- A "?" on every list and form opens a side panel: what the page is for,
  what people usually do there, and every option explained.
- Every tooltip and panel carries a stable help id (x:Domain.dnsManagement,
  x:Domain), and manual.ts turns an id into a link to the admin manual
  once one is configured (VITE_MANUAL_URL, or <meta name="manual-url">).
  Until then no link shows.
2026-09-19 01:59:14 -07:00
jcoffey-dev 7ab0b8099c Dashboard status line only when something needs a look
In a healthy state it only repeated the cards below it. It now appears
only for failed tasks, retrying messages or recipients given up on.
2026-09-19 01:53:15 -07:00
jcoffey-dev 5bf09ceed5 Dashboard: every number leads somewhere, real counts, and new charts
- Cards and charts link to the page they're about: pending messages to the
  queue, bans to blocked IPs, report warnings to the reports, and so on,
  shown only to viewers who may open that page.
- A one-line status under the greeting: what needs a look (failed tasks,
  messages retrying, recipients given up on) or, when nothing does, what's
  there. Each phrase is a link.
- Counts from the server's own objects stand in for live metrics it can't
  report, and a live number with no source reads as unknown, not zero.
- Who uses the space: a treemap of people sized by storage, colored by how
  near their quota they are, each tile opening the account.
- Where mail is waiting: queued recipients by destination, split into
  waiting, retrying and given up, each row opening the filtered queue.
- The weekly rhythm: messages by hour and weekday, shown once metric
  history exists.
- Dashboard tabs are titled by their label.
2026-09-19 01:50:07 -07:00
jcoffey-dev 5641560a91 Guided wizards, opt-in every time, and automatic DNS as the first
A job that has a wizard now asks "Guide me / I'll do it myself" each time
it starts; nothing is remembered. The shared wizard shell gives every guide
a stepper, a side panel on what each step does and how to undo it, and the
way forward or back.

Automatic DNS, from a domain's DNS section:
- finds where the domain's DNS is hosted from its SOA and NS records, and
  offers that host when the server can drive it;
- for the major hosts, steps to create the narrowest credential, and the
  field named as the steps name it;
- records grouped by what they do, TLSA off unless the zone is signed;
- saves the provider and switches the domain over, removing the provider
  again if the switch fails;
- watches the publishing task and public DNS, ticking each record green,
  and boils a host's refusal down to its distinct messages;
- for hosts it can't drive, or domains not in DNS yet, every record laid
  out for copying, with the same live checks.
2026-09-19 01:41:00 -07:00
jcoffey-dev 2e02532279 Store the theme with the account, in the webmail's settings.json
The palette and light/dark choice now live in the account's JMAP Files
(ihasmail/settings.json), the same file and keys INBUXA webmail uses, so
the theme follows the user across devices and both apps. The admin
reads it at sign-in and writes only palette, mode and the derived
legacy theme, after a fresh read, keeping every other key. A palette
change keeps the stored mode. localStorage stays as the first-paint
cache.
2026-09-19 01:05:56 -07:00
jcoffey-dev 91531b4784 Theme menu: the same palettes as INBUXA webmail
Under the user menu, Theme offers ihasmail's palettes, in the same order and
under the same names. ihasmail is the default look, the colors the admin
already had, until someone picks another. The choice is remembered and
applied before the first paint, and dark mode still toggles on its own.

The other palettes' colors are ihasmail's, already contrast-checked, mapped
onto the admin's tokens by scripts/import-palettes.py; re-running it re-syncs
them. NOTICE carries the palettes' MIT notices and the fonts' OFL notices.
2026-09-19 00:56:35 -07:00
jcoffey-dev 96e7b9842f Dashboard greeting names who is signed in
It greets the account by its full name where it has one, and otherwise by
the name it signs in with. The line beneath says who is signed in. The account
is looked up by its local part and matched on the whole address, so a
same-named account on another domain can't answer. The username is kept from
the JMAP session and cleared on sign-out.
2026-09-19 00:51:26 -07:00
jcoffey-dev 3fec79545c Source link opens in a new tab 2026-09-19 00:49:11 -07:00
jcoffey-dev 2d2b551d46 Areas in the top bar, the collapse toggle at the top of the sidebar
Management, Settings and Account move to the top bar, as icons with tooltips
beside the theme toggle. The sidebar opens with its area's name and the
collapse toggle, in both states. The source link lives in the user menu, the
sign-in card and the version tooltip, so the sidebar no longer repeats it.
2026-09-19 00:47:48 -07:00
jcoffey-dev e4ad5e2c1e A warmer, friendlier admin: first pass
- The INBUXA palette on warm surfaces, softer cards, buttons and inputs, and
  self-hosted Inter and Space Grotesk.
- Each section's icon sits on a colored tile, colored by what the section is
  about.
- The sidebar gets a guide line for sub-pages and a labeled Management /
  Settings / Account switch, and folds to a rail of tiles (remembered).
- Every page has a header with its section's tile.
- Fields and pages with no label of their own are spelled out in words
  (defaultCertificateId becomes Default certificate ID).
- The dashboard greets you, and its stat cards wear colored tiles.
- Unavailable live numbers are a calm note, not an error.
- The cat appears in empty lists and while loading.
- Chart colors work again: they were hex values wrapped in hsl().
2026-09-19 00:38:53 -07:00
jcoffey-dev 92bcb58f76 AGPL source offer, notices and name cleanup
Every build writes the exact tree it was built from, uncommitted work
included, as source.tar.gz next to the app, and names that tree. The sidebar,
user menu, sign-in card and version tooltip link to it.

Coffey Labs' copyright line is added below Stalwart Labs' in every inherited
file changed, and the new files carry Coffey Labs' alone.

The upgrade prompt and its links are gone, the edition tooltip is neutral,
storage keys and the package description are INBUXA's own, and the README
states the lineage once, in the fine print.
2026-09-19 00:01:57 -07:00
jcoffey-dev 14d708ecf8 Go straight to the server's sign-in page, with no account-name step
INBUXA Admin talks to one known server whose own page signs in every account,
so it reads the server's OpenID configuration instead of looking endpoints up
per account. The login card now only shows while redirecting, or to retry
when that fails.
2026-09-18 15:50:10 -07:00
jcoffey-dev 2399f5ce97 Sign in as inbuxa-admin when hosted apart from the server (inbuxa-server contract C-6) 2026-09-18 13:05:04 -07:00
jcoffey-dev e387e7976f Versioning: INBUXA Admin's own dated version, with the WebUI base shown
inbuxa-version.json holds INBUXA's version. package.json keeps upstream's so
its bumps merge cleanly. The top bar reads "INBUXA Admin 2026.9.18 (WebUI 1.0.11)".
2026-09-18 12:09:52 -07:00
jcoffey-dev 1d72ef3aa1 Fork Stalwart WebUI v1.0.11 as INBUXA Admin
- One edition: whatever edition the server reports, nothing is hidden or
  disabled as Enterprise-only (accountStore.setAccountInfo).
- INBUXA branding: name, logo (mark plus a text-colored wordmark), favicon,
  page titles, setup wizard text, and ihasmail's palette in light and dark.
- Two-factor setup names INBUXA as the issuer and drops the image parameter
  that made authenticator apps fetch a logo from a third-party site.
- Runs apart from the server: the server address can be set at deploy time
  with <meta name="api-base-url">, and OAuth endpoints the server returns as
  relative paths are resolved against the server's address, not the page's.
  Verified end to end against a separate inbuxa-server.
- Upstream's release workflow moved to .github-upstream so it never runs.

Upstream's history contains no Enterprise-only code, so this is an ordinary
fork. upstream is a fetch-only remote.
2026-09-18 12:00:54 -07:00
Maurus Decimus dc462b137f Sievepad integration 2026-09-15 09:27:02 +02:00
Maurus Decimus b0b8e4e090 v1.0.10 2026-09-04 10:16:53 +02:00
Maurus Decimus af11f5119c v1.0.9 2026-08-24 15:44:51 +02:00
Maurus Decimus 8cab61a9c5 v1.0.8 2026-07-31 15:52:36 +02:00
Maurus Decimus 189e270785 v1.0.7 (fixes #17) 2026-07-30 17:16:05 +02:00
Maurus Decimus f18f3012aa v1.0.6 2026-07-28 10:57:49 +02:00
Maurus Decimus 5eea77346a v1.0.6 2026-07-28 10:57:30 +02:00
Maurus Decimus e080a6e061 Properly serialize date filters when applying them to the list filter 2026-06-23 17:26:22 +02:00
Maurus Decimus 574de03e42 Include required JMAP capabilities in using 2026-06-21 15:33:51 +02:00
Maurus Decimus a7fda8bd6b Default scopes omit offline_access (fixes #10) 2026-05-25 13:58:38 +02:00
Maurus Decimus 001a1f3a15 v1.0.4 2026-05-11 16:35:11 +02:00
Maurus Decimus 782dde0573 Align base32 alphabet with the server 2026-05-07 15:08:54 +02:00
Maurus Decimus cbe77f9e4a v1.0.3 2026-05-05 11:36:51 +02:00
Maurus Decimus e9b9efa084 Fix: Resolve object ids in map keys 2026-05-04 19:16:37 +02:00
Maurus Decimus dee0f7fbe3 Fix broken "Delivery History" link on OSS/Community editions 2026-05-01 09:03:02 +02:00
Maurus Decimus ba6b4472d2 Display validation errors returned by the server 2026-04-30 18:12:30 +02:00
Maurus Decimus 612fd796f3 Add "Copy Secret" button to TOTP setup flow 2026-04-30 13:29:05 +02:00
Maurus Decimus a3376b0a7d Include email and profile scopes in OIDC authentication requests 2026-04-30 12:11:40 +02:00
Maurus Decimus 2344c96651 Include openid scope in OIDC authentication requests 2026-04-25 08:14:47 +02:00
Maurus Decimus 68f0ca3629 Fix mobile display issues (fixes #4) 2026-04-23 15:21:55 +02:00
Maurus Decimus 47fcf1fe08 Logout users from OIDC provider when logging out of the app 2026-04-23 13:57:27 +02:00
Maurus Decimus 27ba55fbf6 Fix: Editing a secret clears its masked value 2026-04-22 20:09:53 +02:00
Maurus Decimus 35e0ef74b9 Fix array label properties display 2026-04-21 15:44:00 +02:00
Maurus Decimus cfb3a308cd Updated screencast 2026-04-20 18:42:46 +02:00
162 changed files with 14151 additions and 2847 deletions
-1
View File
@@ -1,5 +1,4 @@
VITE_API_BASE_URL=http://localhost:8080
VITE_OAUTH_CLIENT_ID=stalwart-webui
#VITE_ACCESS_TOKEN=OPEN_SESAME
VITE_OAUTH_SCOPES=
+127
View File
@@ -0,0 +1,127 @@
# CI on the self-hosted Gitea, ported from .gitlab-ci.yml during the move off
# GitLab (2026-09-22). Gitea reads .gitea/workflows and ignores .github/ once
# this directory exists; .github/workflows stays as it was for GitHub.
#
# Every job runs in an image pinned by digest (tag in the trailing comment),
# and the only action used is coffey-labs/actions/checkout pinned by SHA. The
# instance resolves short `uses:` against itself, never GitHub, so nothing
# unreviewed can be pulled in. Read the comment for the version; the digest is
# what runs.
#
# Jobs run on the runner's `ci-net` network and clone from Gitea's internal
# address, never through the Cloudflare-proxied public name, which caps
# request bodies at 100 MB. Images go to the registry's own DNS-only name
# (vars.REGISTRY, an org variable).
#
# The weekly release is its own workflow, weekly-release.yml.
#
# Not ported:
# * cleanup.yml pruned GHCR with dataaxiom/ghcr-cleanup-action; on Gitea
# that belongs in the package cleanup rules (owner settings -> Packages),
# not in a workflow.
name: ci
on:
push:
branches: [main]
# Only date tags publish (v2026.9.21, v2026.9.21.2). The repository still
# carries the inherited v1.0.x tags, and a tag of any other shape pushed
# by hand is not a release.
tags:
- 'v[0-9][0-9][0-9][0-9].[0-9]+.[0-9]+'
- 'v[0-9][0-9][0-9][0-9].[0-9]+.[0-9]+.[0-9]+'
pull_request:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
# A release tag is built and tested again before its image is published.
build:
runs-on: light
container:
image: node:22-bookworm-slim@sha256:48e4b67d85f87bd551df43704e24d252f56cc5f8e9718841aace50f19948f0f9 # 22-bookworm-slim
env:
NPM_CONFIG_CACHE: ${{ github.workspace }}/.npm
steps:
- uses: coffey-labs/actions/checkout@fab0c4d45e0162963965f1555df27b7bed5e20ec
- run: npm ci --ignore-scripts
- run: npm run typecheck
- run: npm run lint
- run: npm test
- run: npm run build
# ----------------------------------------------------------- publish ------
# Port of publish.yml, to the owner's own registry now that GHCR went with
# the GitHub account: <REGISTRY>/inbuxa/inbuxa-admin, the same path the
# GitLab registry used.
#
# Tag-driven. A release cut with the job's own token raises no event on
# Gitea (as on GitHub), so weekly-release.yml creates its release with
# RELEASE_TOKEN; the tag that makes is an ordinary push, and starts this.
#
# The tag must agree with inbuxa-version.json at the commit it names -- the
# property release.yml was built around: the tree a tag points at reports
# the version the tag claims. A tag placed beside an unbumped file fails
# here rather than publishing an image that reports the wrong version.
#
# Both architectures build under QEMU on this amd64 host, where publish.yml
# had a native arm64 runner. That is slow -- tens of minutes for npm ci and
# the Vite build through instruction translation -- and tolerable for a
# weekly tag, which is why this is tag-only. If arm64 starts timing out, the
# fix is an arm64 runner, not dropping the platform.
#
# The push logs in with PACKAGE_TOKEN (jcoffey-dev, write:package): Gitea's
# per-job token is refused by the container registry. The registry hands out
# its push tokens from its own name, so unlike on GitLab nothing here has to
# be pointed at a public address.
publish:
if: ${{ startsWith(github.ref, 'refs/tags/') }}
needs: [build]
runs-on: docker
container:
image: docker:28-cli@sha256:625d9431a9f54c5a2bc90f24f0e1c3d55b1349fd857dd85035f98c2c9acbdd4d # 28-cli
volumes:
- /var/run/docker.sock:/var/run/docker.sock
env:
DOCKER_BUILDKIT: "1"
REGISTRY: ${{ vars.REGISTRY }}
IMAGE: ${{ vars.REGISTRY }}/${{ github.repository }}
PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
steps:
- uses: coffey-labs/actions/checkout@fab0c4d45e0162963965f1555df27b7bed5e20ec
- run: |
set -eu
apk add --no-cache -q jq curl
VERSION="$(jq -er .version inbuxa-version.json)"
if [ "$GITHUB_REF_NAME" != "v$VERSION" ]; then
echo "Tag $GITHUB_REF_NAME names a commit whose inbuxa-version.json says $VERSION." >&2
echo "Refusing to publish an image that would report the wrong version." >&2
exit 1
fi
echo "VERSION=$VERSION" >> "$GITHUB_ENV"
- run: |
test -n "$REGISTRY"
test -n "$PACKAGE_TOKEN" || { echo "PACKAGE_TOKEN secret is not set on this repository" >&2; exit 1; }
echo "$PACKAGE_TOKEN" | docker login -u jcoffey-dev --password-stdin "$REGISTRY"
docker run --privileged --rm tonistiigi/binfmt --install arm64
docker buildx create --use --name gitea-builder --driver docker-container || docker buildx use gitea-builder
# Attestations are off, as they were in publish.yml: they add manifests
# of their own to the index.
- run: |
docker buildx build \
--platform linux/amd64,linux/arm64 \
--provenance=false --sbom=false \
--tag "$IMAGE:$VERSION" \
--tag "$IMAGE:latest" \
--push .
docker buildx imagetools inspect "$IMAGE:$VERSION"
# Gitea keeps a container package on its owner; linking it shows it on
# the repository's Packages tab. Idempotent.
- run: |
curl -fsS -o /dev/null -X POST -H "Authorization: token $PACKAGE_TOKEN" \
"$CI_SERVER_INTERNAL/api/v1/packages/${GITHUB_REPOSITORY%%/*}/container/${GITHUB_REPOSITORY#*/}/-/link/${GITHUB_REPOSITORY#*/}" \
|| echo "package already linked (or link refused); not fatal"
- if: always()
run: docker logout "$REGISTRY" || true
+135
View File
@@ -0,0 +1,135 @@
# Weekly release, ported from the weekly-release job in .gitlab-ci.yml (itself
# a port of release.yml): cut a release once a week, but only if there is
# something in it. The decision is unchanged -- count the commits on main
# since the newest published release, and skip the week if there are none. A
# release with nothing in it moves :latest to an identical build, spends a
# version number, and notifies everybody about nothing.
#
# The version is the date, YYYY.M.D unpadded, with a .N suffix from 2 for a
# second release on one day. It is committed to main in inbuxa-version.json
# and the tag names that commit, so the commit is the release.
#
# Mondays 09:37 UTC, as release.yml did. Run it by hand from the Actions tab
# (workflow_dispatch); dry_run defaults to true, so a manual run shows the
# decision and stops unless you untick it.
#
# SIDE-BY-SIDE PERIOD: until the GitLab cutover, GitLab's own schedule is
# still live and still cuts the real release, and its bump commit and tag
# reach this copy through the sync. Two releasers would race to write the same
# version, so this workflow only ever dry-runs unless the variable
# RELEASE_LIVE is '1'. Set RELEASE_LIVE=1 (repo or org Actions variable) at
# cutover, when GitLab's schedule is switched off -- not before.
#
# Reads use the job's own token. Everything that writes uses RELEASE_TOKEN
# (jcoffey-dev, write:repository), because a tag Gitea creates for the job
# token raises no event (checked 2026-09-22) and the tag must start ci.yml's
# publish job:
# * the bump is committed through the contents API. Gitea's API has no
# "only if the branch is still at X" guard like GitLab's last_commit_id,
# so the job checks main's head immediately before writing and refuses if
# it moved since the commit it counted from; run it again. Otherwise the
# notes and the count would describe a different commit from the one
# released. (The API does refuse if the file itself changed, via its blob
# sha.)
# * the release -- and with it the tag -- is created through the releases
# API. A tag made that way is an ordinary push, so it starts ci.yml and
# `publish` builds the image.
# The token's owner must be allowed to push to main.
name: weekly-release
on:
schedule:
- cron: '37 9 * * 1'
workflow_dispatch:
inputs:
dry_run:
description: Show the decision and stop
type: boolean
default: true
# One at a time: two overlapping runs would race to write the same version and
# create the same tag.
concurrency:
group: weekly-release
cancel-in-progress: false
jobs:
weekly-release:
runs-on: light
container:
image: node:22-bookworm-slim@sha256:48e4b67d85f87bd551df43704e24d252f56cc5f8e9718841aace50f19948f0f9 # 22-bookworm-slim
env:
READ_TOKEN: ${{ secrets.GITHUB_TOKEN }}
RELEASE_TOKEN: ${{ secrets.RELEASE_TOKEN }}
# Live only with RELEASE_LIVE=1 AND either the schedule or a manual run
# with dry_run unticked.
DRY_RUN: ${{ (vars.RELEASE_LIVE == '1' && (github.event_name == 'schedule' || inputs.dry_run == false || inputs.dry_run == 'false')) && '0' || '1' }}
steps:
- uses: coffey-labs/actions/checkout@fab0c4d45e0162963965f1555df27b7bed5e20ec
with:
fetch-depth: 0
- run: apt-get update -qq && apt-get install -y -qq --no-install-recommends curl jq ca-certificates >/dev/null
- shell: bash
run: |
set -euo pipefail
API="${CI_SERVER_INTERNAL}/api/v1/repos/${GITHUB_REPOSITORY}"
sha="$(git rev-parse HEAD)"
# The newest published release, or empty on a project that has never
# had one -- in which case everything counts as new.
previous="$(curl -fsS -H "Authorization: token ${READ_TOKEN}" "${API}/releases?draft=false&pre-release=false&limit=1" | jq -r '.[0].tag_name // ""')"
# A release can outlive its tag; falling back to the whole history
# over-counts, which cuts a release that was due anyway. Tag lookups
# use show-ref, which matches an exact ref: rev-parse --verify on this
# git can read some tag names as describe output and "find" a tag
# that isn't there (see ihasmail's port).
if [ -n "$previous" ] && git show-ref --verify --quiet "refs/tags/${previous}"; then
count="$(git rev-list --count "${previous}..HEAD")"; range="${previous}..HEAD"
else
count="$(git rev-list --count HEAD)"; range="HEAD"
fi
if [ "$count" -eq 0 ]; then
echo "Nothing to release: no commits since ${previous}."; exit 0
fi
today="$(date -u +%Y.%-m.%-d)"
version="$today"; n=2
while git show-ref --verify --quiet "refs/tags/v${version}"; do
version="${today}.${n}"; n=$((n + 1))
done
tag="v${version}"
echo "Releasing ${tag} -- ${count} commit(s) since ${previous:-the beginning}, from ${sha}."
if [ "$DRY_RUN" = "1" ]; then echo "Dry run (RELEASE_LIVE='${{ vars.RELEASE_LIVE }}'): stopping here."; exit 0; fi
auth=(-H "Authorization: token ${RELEASE_TOKEN}")
# The bump, written with a JSON parser rather than sed: a version put
# into JSON by string substitution is one stray quote from a file
# nothing can read.
VERSION="$version" node -e '
const fs = require("fs");
const f = "inbuxa-version.json";
const j = JSON.parse(fs.readFileSync(f, "utf8"));
j.version = process.env.VERSION;
fs.writeFileSync(f, JSON.stringify(j, null, 2) + "\n");
'
head="$(curl -fsS "${auth[@]}" "${API}/branches/main" | jq -er .commit.id)"
if [ "$head" != "$sha" ]; then
echo "main moved from ${sha} to ${head} since this run counted; run it again." >&2
exit 1
fi
blob="$(curl -fsS "${auth[@]}" "${API}/contents/inbuxa-version.json?ref=${sha}" | jq -er .sha)"
jq -n --arg msg "Version ${version}" --arg blob "$blob" \
--arg content "$(base64 -w0 inbuxa-version.json)" \
'{branch:"main", message:$msg, sha:$blob, content:$content}' > commit.json
bump="$(curl -fsS "${auth[@]}" -X PUT -H "Content-Type: application/json" \
--data @commit.json "${API}/contents/inbuxa-version.json" | jq -er .commit.sha)"
echo "committed the bump as ${bump}"
# Notes bounded to what is new: one line per change on main's
# first-parent history, which is what GitHub's generated notes listed.
notes="$(git log --first-parent --format='- %s' "$range")"
jq -n --arg tag "$tag" --arg ref "$bump" --arg name "INBUXA Admin ${version}" \
--arg body "$(printf '%s commit(s) since %s.\n\n%s' "$count" "${previous:-the beginning}" "$notes")" \
'{tag_name:$tag, target_commitish:$ref, name:$name, body:$body}' > release.json
curl -fsS "${auth[@]}" -H "Content-Type: application/json" \
--data @release.json "${API}/releases" | jq -r '"created release " + .tag_name'
+4
View File
@@ -0,0 +1,4 @@
# Funding platforms shown behind the repository's Sponsor button.
# https://docs.github.com/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository
github: jcoffey-dev
+31
View File
@@ -0,0 +1,31 @@
version: 2
updates:
# One npm entry at the root, where the single lockfile is.
#
# Minor and patch arrive as one pull request a week. Majors are left out of
# the group on purpose: they are migrations rather than bumps, and each one
# deserves its own pull request and its own CI run.
- package-ecosystem: npm
directory: "/"
schedule:
interval: weekly
day: tuesday
time: "09:00"
timezone: Etc/UTC
open-pull-requests-limit: 5
groups:
minor-and-patch:
update-types:
- minor
- patch
- package-ecosystem: github-actions
directory: "/"
schedule:
interval: weekly
day: tuesday
time: "09:00"
timezone: Etc/UTC
groups:
actions:
patterns:
- "*"
+31
View File
@@ -0,0 +1,31 @@
name: CI
on:
push:
branches: [main]
pull_request:
workflow_dispatch:
concurrency:
group: ci-${{ github.ref }}
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
steps:
# Pinned to full commit SHAs, with the release in the trailing comment.
# A tag is a mutable pointer, so trusting `@v7` is trusting every future
# version of that action. Dependabot updates both halves together on its
# weekly run -- do not "simplify" a pin back to a tag.
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
node-version: 22
cache: npm
# --ignore-scripts: a postinstall script in any transitive dependency
# would otherwise run with the runner's token in its environment.
- run: npm ci --ignore-scripts
- run: npm run typecheck
- run: npm run lint
- run: npm test
- run: npm run build
+69
View File
@@ -0,0 +1,69 @@
# Prune old image versions from GHCR.
#
# Releases are kept forever -- they carry no assets and their generated notes
# are this project's only changelog, so deleting one destroys history that
# cannot be reconstructed for nothing saved. Images are the opposite: a
# multi-arch build a week, and the by-digest push in publish.yml leaves two
# untagged per-architecture manifests behind each time on top of the tagged
# index. Those accumulate and nobody wants fifty of them.
#
# THE FOOTGUN: the obvious tool for this -- delete-package-versions with
# `delete-only-untagged-versions` -- will happily delete the per-architecture
# manifests that a multi-arch tag points *at*, because they are untagged by
# design. Nothing appears to break: the tag still exists, and pulls simply
# start failing for one architecture. This action understands manifest lists
# and will not orphan a retained index, and `validate` re-checks every
# multi-arch manifest against the registry afterwards.
#
# Separate from publish.yml, and dispatchable on its own, so `dry_run` can show
# exactly what would be deleted without rebuilding and re-pushing an image to
# find out.
name: Prune images
on:
workflow_call:
inputs:
dry_run:
type: boolean
default: false
workflow_dispatch:
inputs:
dry_run:
description: "List what would be deleted, delete nothing"
type: boolean
default: true
jobs:
prune:
runs-on: ubuntu-latest
permissions:
packages: write
steps:
# The only third-party action here that is not published by GitHub or
# Docker, and the one with the most to lose: it is handed
# `packages: write` and its whole job is deletion, so a ref repointed at
# something else -- by a compromise or a mistake upstream -- is a bad
# day. It was pinned to a commit long before the rest of them were.
- uses: dataaxiom/ghcr-cleanup-action@d52806a0dc70b430571a37da1fde39733ffd640f # v1.2.2
with:
owner: inbuxa
package: inbuxa-admin
token: ${{ secrets.GITHUB_TOKEN }}
# Ten weekly releases is roughly a quarter of history, which is more
# than enough to roll back to and far less than the year's worth that
# would otherwise pile up. Older *releases* stay either way; this
# only removes the images.
keep-n-tagged: 10
# Belt and braces on top of the action's own manifest awareness:
# `latest` is never a candidate for deletion under any counting.
exclude-tags: latest
delete-untagged: true
# Sweeps the wreckage of a half-failed run: an index whose platform
# images did not all land, and referrers whose parent is gone.
delete-partial-images: true
delete-orphaned-images: true
# Checks every remaining multi-architecture manifest still resolves
# in the registry. This is the step that would catch the footgun
# above rather than leaving a reader to discover it on `docker pull`.
validate: true
dry-run: ${{ inputs.dry_run }}
+194
View File
@@ -0,0 +1,194 @@
# Publish the container image to GHCR.
#
# The README and the docs site have told people to run
# `ghcr.io/inbuxa/inbuxa-admin:latest` for a long time, and nothing ever
# pushed it: `docker pull` answered `denied`, because the package did not
# exist. This is the workflow that makes those instructions true. It is also
# the prerequisite for the self-hosted app catalogs -- TrueNAS and Unraid
# both install by pulling an image and neither builds from source.
#
# FIRST RUN: a package GHCR creates for the first time is **private**, even in
# a public repository, and an anonymous `docker pull` will still answer
# `denied`. Nothing in a workflow can change that -- the visibility is set once
# by hand under the package's settings, and until it is, this looks like it
# worked while the docs stay just as wrong as before. Check with a logged-out
# pull, not with one from a machine that has credentials.
#
# Two architectures, each built on its own native runner rather than under
# QEMU. Emulated arm64 has to run `npm ci` and the Vite build through
# instruction translation, which takes tens of minutes and occasionally runs
# out of memory; `ubuntu-24.04-arm` is free for public repositories and does
# the same work at native speed. The cost is the by-digest dance below: each
# runner pushes an untagged image, and a final job joins the two digests into
# one multi-arch tag.
name: Publish image
on:
release:
types: [published]
# Callable, so release.yml can build the release it just cut. This is not a
# stylistic choice: a release created with GITHUB_TOKEN does **not** raise a
# `release` event -- GitHub refuses to let a token trigger another workflow,
# to stop a workflow looping on its own output. A scheduled job that cut a
# release and expected this file to notice would silently never publish. The
# alternatives are a personal access token kept as a secret, or calling the
# workflow directly. This is the one that needs no credential.
workflow_call:
inputs:
ref:
description: "Tag, branch or SHA to build"
required: true
type: string
tag_latest:
description: "Also move :latest to this build"
type: boolean
default: false
# Same reasoning as ci.yml's dispatch trigger: a run GitHub queues and then
# orphans can be neither rerun nor canceled, and this workflow otherwise
# only fires on a release -- which is not something to cut twice because a
# runner died. `ref` also allows publishing an image for a tag that predates
# this workflow, which is how the first one gets built.
workflow_dispatch:
inputs:
ref:
description: "Tag, branch or SHA to build"
required: true
default: main
tag_latest:
description: "Also move :latest to this build"
type: boolean
default: false
env:
# Hardcoded rather than derived from github.repository, which would have to
# be lowercased to be a legal registry path. This is the string the docs name.
IMAGE: ghcr.io/inbuxa/inbuxa-admin
jobs:
# The version is read once and handed to both builds, so the two
# architectures cannot disagree about what they are. It comes from the file
# the interface itself reads, which the weekly release commits before this
# runs -- so the image is tagged with the version it will report.
version:
runs-on: ubuntu-latest
outputs:
version: ${{ steps.v.outputs.version }}
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
ref: ${{ inputs.ref || github.ref }}
- id: v
run: |
set -euo pipefail
V="$(jq -er .version inbuxa-version.json)"
# A date version carries nothing a Docker tag objects to, so there is
# no second, sanitized form of it here.
echo "version=$V" >> "$GITHUB_OUTPUT"
echo "version $V"
build:
needs: version
runs-on: ${{ matrix.runner }}
permissions:
contents: read
packages: write
strategy:
fail-fast: false
matrix:
include:
- platform: linux/amd64
runner: ubuntu-latest
- platform: linux/arm64
runner: ubuntu-24.04-arm
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
ref: ${{ inputs.ref || github.ref }}
- uses: docker/setup-buildx-action@594f3bf4285d9ea8dc53c9a0c9c4092420091003 # v4.4.0
- uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and push by digest
id: push
uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
with:
context: .
platforms: ${{ matrix.platform }}
# Attestations are off deliberately: they add manifests of their own
# to the index, and `imagetools create` below expects the two entries
# it pushed rather than four.
provenance: false
sbom: false
cache-from: type=gha,scope=${{ matrix.platform }}
cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
- name: Save the digest
run: |
mkdir -p /tmp/digests
# The prefix is stripped here and put back in the merge job, so the
# filename is the bare hash. Leaving it on produces
# `image@sha256:sha256:...` when the reference is rebuilt.
digest="${{ steps.push.outputs.digest }}"
touch "/tmp/digests/${digest#sha256:}"
- uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
with:
# One artifact per platform; the merge job globs them back together.
name: digest-${{ strategy.job-index }}
path: /tmp/digests/*
retention-days: 1
if-no-files-found: error
# Joins the per-architecture digests into a single tagged manifest, so
# `docker pull ghcr.io/inbuxa/inbuxa-admin:<tag>` resolves on both.
publish:
needs: [version, build]
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
with:
path: /tmp/digests
pattern: digest-*
merge-multiple: true
- uses: docker/setup-buildx-action@594f3bf4285d9ea8dc53c9a0c9c4092420091003 # v4.4.0
- uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Create the manifest
run: |
# Arrays rather than a string: the tags and the digest references
# have to reach docker as separate arguments, and building them by
# word-splitting an unquoted variable is the version of this that
# breaks the day a value contains a space.
tags=(-t "${IMAGE}:${{ needs.version.outputs.version }}")
# :latest follows real releases only. A prerelease that moved it
# would hand every `:latest` deployment an unfinished build, and a
# dispatch run has to ask for it on purpose.
if [ "${{ github.event_name }}" = "release" ] && [ "${{ github.event.release.prerelease }}" = "false" ]; then
tags+=(-t "${IMAGE}:latest")
elif [ "${{ inputs.tag_latest }}" = "true" ]; then
tags+=(-t "${IMAGE}:latest")
fi
refs=()
for f in /tmp/digests/*; do
refs+=("${IMAGE}@sha256:$(basename "$f")")
done
echo "tags: ${tags[*]}"
echo "refs: ${refs[*]}"
docker buildx imagetools create "${tags[@]}" "${refs[@]}"
- name: Show what landed
run: docker buildx imagetools inspect "${IMAGE}:${{ needs.version.outputs.version }}"
# Runs only after a successful publish, because that is the only moment the
# package grows. See cleanup.yml for why this is not the obvious one-liner.
prune:
needs: publish
permissions:
packages: write
uses: ./.github/workflows/cleanup.yml
+182
View File
@@ -0,0 +1,182 @@
# Cut a release once a week, but only if there is something in it.
#
# It does nothing on a quiet week. A release with no commits in it is worse
# than no release: it moves `:latest` to an identical build, spends a version
# number, and mails everybody watching the repository about nothing.
#
# Unlike ihasmail, whose version is derived from the commit it builds, INBUXA
# Admin keeps its version in inbuxa-version.json. So this writes it: the bump
# is committed to main, and the tag names that commit. The commit is the
# release, which means the tree a tag points at always reports the version the
# tag claims -- something a tag placed beside an unbumped file cannot promise.
name: Weekly release
on:
schedule:
# Mondays, 09:37 UTC -- twenty minutes behind ihasmail-inbuxa's, twenty
# ahead of the server's. Staggered rather than simultaneous so three
# releases do not compete for runners, and so a bad Monday names one
# repository instead of three. GitHub runs scheduled jobs best-effort and
# can delay a run considerably, so the exact minute is not a promise; the
# odd minute keeps it off the crowded top of the hour.
#
# Note also that GitHub disables scheduled workflows in a repository with
# no activity for 60 days, which is worth checking for before assuming
# this file is broken.
- cron: "37 9 * * 1"
workflow_dispatch:
inputs:
dry_run:
description: "Work out what would be released, then stop"
type: boolean
default: false
# One at a time. Two overlapping runs would race to write the same version and
# create the same tag, and the loser fails noisily for a reason that has
# nothing to do with the code.
concurrency:
group: weekly-release
cancel-in-progress: false
jobs:
check:
runs-on: ubuntu-latest
permissions:
contents: read
outputs:
should_release: ${{ steps.decide.outputs.should_release }}
version: ${{ steps.decide.outputs.version }}
tag: ${{ steps.decide.outputs.tag }}
previous: ${{ steps.decide.outputs.previous }}
count: ${{ steps.decide.outputs.count }}
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
ref: main
fetch-depth: 0
- id: decide
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
set -euo pipefail
# The newest published release, or empty on a repository that has
# never had one -- in which case everything counts as new. Drafts are
# excluded: an unpublished draft is not a release anybody has, so
# counting from it would hide commits that have never shipped.
previous="$(gh release list --limit 1 --exclude-drafts --json tagName --jq '.[0].tagName // ""')"
# A tag named by a release is normally present after a full checkout,
# but a release can outlive its tag. Falling back to the whole
# history is the safe direction to be wrong in: it over-counts, which
# cuts a release that was due anyway, where under-counting would skip
# one that was.
if [ -n "$previous" ] && git rev-parse -q --verify "refs/tags/${previous}" >/dev/null; then
count="$(git rev-list --count "${previous}..HEAD")"
else
count="$(git rev-list --count HEAD)"
fi
# INBUXA's version is the date, as the rest of the family does it:
# YYYY.M.D, unpadded. A second release on one day takes a `.N`
# suffix, counting from 2, which is why this asks the tags rather
# than assuming today is free.
today="$(date -u +%Y.%-m.%-d)"
version="$today"
n=2
while git rev-parse -q --verify "refs/tags/v${version}" >/dev/null; do
version="${today}.${n}"
n=$((n + 1))
done
should_release=true
reason=""
if [ "$count" -eq 0 ]; then
should_release=false
reason="no commits since ${previous}"
fi
{
echo "should_release=$should_release"
echo "version=$version"
echo "tag=v${version}"
echo "previous=$previous"
echo "count=$count"
} >> "$GITHUB_OUTPUT"
# Written to the run summary so a skipped week reads as a decision
# rather than as a workflow that quietly did nothing.
{
echo "### Weekly release"
echo
if [ "$should_release" = "true" ]; then
echo "Releasing **v${version}** — ${count} commit(s) since ${previous:-the beginning}."
else
echo "Nothing to release: ${reason}."
fi
} >> "$GITHUB_STEP_SUMMARY"
cut:
needs: check
if: needs.check.outputs.should_release == 'true' && !inputs.dry_run
runs-on: ubuntu-latest
permissions:
contents: write
outputs:
sha: ${{ steps.bump.outputs.sha }}
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
ref: main
fetch-depth: 0
- id: bump
env:
VERSION: ${{ needs.check.outputs.version }}
run: |
set -euo pipefail
# Rewritten with a JSON parser rather than sed: the file is small and
# the shape is known, but a version written into JSON by string
# substitution is one stray quote away from a file nothing can read.
node -e '
const fs = require("fs");
const f = "inbuxa-version.json";
const j = JSON.parse(fs.readFileSync(f, "utf8"));
j.version = process.env.VERSION;
fs.writeFileSync(f, JSON.stringify(j, null, 2) + "\n");
'
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
git add inbuxa-version.json
git commit -m "Version ${VERSION}"
git push origin HEAD:main
echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
- env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
set -euo pipefail
args=(--target "${{ steps.bump.outputs.sha }}"
--title "INBUXA Admin ${{ needs.check.outputs.version }}"
--generate-notes)
# Bound the notes to what is actually new. Without a start tag the
# generator reaches back to whatever it decides is previous, which on
# a repository carrying older tag shapes -- this one still has the
# inherited v1.0.x tags -- is not always the last release.
if [ -n "${{ needs.check.outputs.previous }}" ]; then
args+=(--notes-start-tag "${{ needs.check.outputs.previous }}")
fi
gh release create "${{ needs.check.outputs.tag }}" "${args[@]}"
# Called rather than left to the `release` trigger on purpose: see the note
# at the top of publish.yml. A release created with GITHUB_TOKEN raises no
# event, so without this the tag would exist and no image would follow it.
publish:
needs: [check, cut]
permissions:
contents: read
packages: write
uses: ./.github/workflows/publish.yml
with:
ref: ${{ needs.cut.outputs.sha }}
tag_latest: true
+10 -14
View File
@@ -12,19 +12,15 @@ dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.ignore
scripts/
*.md
!README.md
!CHANGELOG.md
/SPEC-*
.*
!.gitignore
!.prettierrc
!.env.development
!.github/
!.gitlab-ci.yml
!.vscode/
.vscode/*
!.vscode/extensions.json
+223
View File
@@ -0,0 +1,223 @@
# CI on the self-hosted GitLab, ported from .github/workflows/ when the GitHub
# account was suspended on 2026-09-20. The Actions files stay in the tree: they
# are the reference this was written from and work unchanged if the appeal
# succeeds.
#
# Every `image:` is pinned by digest, with its tag in the trailing comment --
# the replacement for the workflows' SHA-pinned actions, since GitLab has no
# action allowlist. Read the comment for the version; the digest is what runs.
#
# The runner is the inbuxa group runner on Web_Host, with the host docker
# socket bound in, as ihasmail's is. Jobs reach GitLab and its registry on the
# internal network, never through https://git.coffeylabs.org, which is
# Cloudflare-proxied and caps request bodies at 100 MB.
#
# Not ported:
# * cleanup.yml pruned GHCR with dataaxiom/ghcr-cleanup-action; on GitLab
# that belongs in the project's container registry cleanup policy, not in
# a pipeline.
stages: [build, publish, release]
default:
interruptible: true
build:
stage: build
image: node:22-bookworm-slim@sha256:48e4b67d85f87bd551df43704e24d252f56cc5f8e9718841aace50f19948f0f9 # 22-bookworm-slim
variables:
NPM_CONFIG_CACHE: "$CI_PROJECT_DIR/.npm"
cache:
key:
files: [package-lock.json]
paths: [.npm/]
script:
- npm ci --ignore-scripts
- npm run typecheck
- npm run lint
- npm test
- npm run build
rules:
- if: $RELEASE_WEEKLY == "1"
when: never
- if: $CI_PIPELINE_SOURCE == "merge_request_event"
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
# A release tag is built and tested again before its image is published.
- if: $CI_COMMIT_TAG
# ------------------------------------------------------------- publish ------
# Port of publish.yml, to the project's own registry now that GHCR went with
# the GitHub account: registry.coffeylabs.org/inbuxa/inbuxa-admin.
#
# Tag-driven. publish.yml was called from release.yml because a release cut
# with GITHUB_TOKEN raises no event; GitLab has no such rule, so the tag the
# weekly release creates starts a tag pipeline, and this builds from it.
#
# Only date tags publish (v2026.9.21, v2026.9.21.2). The repository still
# carries the inherited v1.0.x tags, and a tag of any other shape pushed by
# hand is not a release.
#
# The tag must agree with inbuxa-version.json at the commit it names -- the
# property release.yml was built around: the tree a tag points at reports the
# version the tag claims. A tag placed beside an unbumped file fails here
# rather than publishing an image that reports the wrong version.
#
# Both architectures build under QEMU on this amd64 host, where publish.yml
# had a native arm64 runner. That is slow -- tens of minutes for npm ci and
# the Vite build through instruction translation -- and tolerable for a weekly
# tag, which is why this is tag-only. If arm64 starts timing out, the fix is
# an arm64 runner, not dropping the platform.
publish:
stage: publish
image: docker:28-cli@sha256:625d9431a9f54c5a2bc90f24f0e1c3d55b1349fd857dd85035f98c2c9acbdd4d # 28-cli
needs: [build]
variables:
DOCKER_BUILDKIT: "1"
IMAGE: $CI_REGISTRY_IMAGE
before_script:
- apk add --no-cache jq >/dev/null
- |
set -eu
VERSION="$(jq -er .version inbuxa-version.json)"
if [ "$CI_COMMIT_TAG" != "v$VERSION" ]; then
echo "Tag $CI_COMMIT_TAG names a commit whose inbuxa-version.json says $VERSION." >&2
echo "Refusing to publish an image that would report the wrong version." >&2
exit 1
fi
echo "VERSION=$VERSION" > version.env
- echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" --password-stdin "$CI_REGISTRY"
- docker run --privileged --rm tonistiigi/binfmt --install arm64
# The registry hands out push tokens from https://git.coffeylabs.org/jwt/auth,
# and buildx fetches them here, in the job, not in its builder. On ci-net
# that name is the gitlab container itself (172.30.0.2), which serves
# plain HTTP to the runner and nothing on 443, so every push failed at the
# last step with "connection refused". The login above works because the
# host's daemon does it, and the host resolves the name publicly. So, for
# this job only, point the name at its public address the same way. Only
# the token request uses it; layers go to the registry's own DNS-only name.
- |
public="$(nslookup "$CI_SERVER_HOST" 1.1.1.1 2>/dev/null | awk '/^Address: / && $2 !~ /:/ { print $2; exit }')"
if [ -z "$public" ]; then echo "Could not resolve $CI_SERVER_HOST publicly" >&2; exit 1; fi
echo "$public $CI_SERVER_HOST" >> /etc/hosts
echo "$CI_SERVER_HOST -> $public for the registry token"
- docker buildx create --use --name ci-builder --driver docker-container || docker buildx use ci-builder
script:
- . ./version.env
# Attestations are off, as they were in publish.yml: they add manifests of
# their own to the index.
- |
docker buildx build \
--platform linux/amd64,linux/arm64 \
--provenance=false --sbom=false \
--tag "$IMAGE:$VERSION" \
--tag "$IMAGE:latest" \
--push .
- docker buildx imagetools inspect "$IMAGE:$VERSION"
after_script:
- docker logout "$CI_REGISTRY" || true
rules:
- if: $CI_COMMIT_TAG =~ /^v[0-9]{4}\.[0-9]+\.[0-9]+(\.[0-9]+)?$/
# ------------------------------------------------------- weekly release -----
# Port of release.yml: cut a release once a week, but only if there is
# something in it. The decision is the workflow's, unchanged -- count the
# commits on main since the newest published release, and skip the week if
# there are none. A release with nothing in it moves :latest to an identical
# build, spends a version number, and notifies everybody about nothing.
#
# The version is the date, YYYY.M.D unpadded, with a .N suffix from 2 for a
# second release on one day. It is committed to main in inbuxa-version.json
# and the tag names that commit, so the commit is the release.
#
# It runs from a pipeline schedule (Mondays 09:37 UTC, as release.yml did)
# that sets RELEASE_WEEKLY=1. GitLab keeps schedules on the project, not in
# this file, so the schedule and this job only work as a pair. Run it by hand
# with RELEASE_WEEKLY=1, adding DRY_RUN=1 to see the decision and stop.
#
# Everything that writes uses RELEASE_TOKEN, a project access token
# (Maintainer, `api` scope; protected, masked), never CI_JOB_TOKEN, which can
# neither commit nor raise a tag pipeline:
# * the bump is committed through the commits API, with last_commit_id set
# to the commit this job counted from. If main moved meanwhile the API
# refuses and the job fails; run it again. Otherwise the notes and the
# count would describe a different commit from the one released.
# * the release -- and with it the tag -- is created through the releases
# API. A tag made that way is an ordinary push, so it starts the tag
# pipeline and `publish` builds the image.
# The token's role must be allowed to push to main. The token expires; when
# it does this fails loudly at the first API call, and a new one goes in the
# same variable.
weekly-release:
stage: release
image: node:22-bookworm-slim@sha256:48e4b67d85f87bd551df43704e24d252f56cc5f8e9718841aace50f19948f0f9 # 22-bookworm-slim
# One at a time: two overlapping runs would race to write the same version
# and create the same tag.
resource_group: weekly-release
variables:
GIT_DEPTH: "0"
before_script:
- apt-get update -qq && apt-get install -y -qq --no-install-recommends git curl jq ca-certificates >/dev/null
# The build directory is shared between jobs, and a checkout owned by
# another user makes git refuse with "detected dubious ownership".
- git config --global --add safe.directory "$CI_PROJECT_DIR"
script:
- |
set -euo pipefail
API="http://gitlab/api/v4/projects/${CI_PROJECT_ID}"
auth=(--header "PRIVATE-TOKEN: ${RELEASE_TOKEN}")
git fetch -q --tags origin
sha="$(git rev-parse HEAD)"
# The newest published release, or empty on a project that has never
# had one -- in which case everything counts as new.
previous="$(curl -fsS "${auth[@]}" "${API}/releases?order_by=released_at&sort=desc&per_page=1" | jq -r '.[0].tag_name // ""')"
# A release can outlive its tag; falling back to the whole history
# over-counts, which cuts a release that was due anyway. Tag lookups use
# show-ref, which matches an exact ref: rev-parse --verify on this git
# can read some tag names as describe output and "find" a tag that
# isn't there (see ihasmail's port).
if [ -n "$previous" ] && git show-ref --verify --quiet "refs/tags/${previous}"; then
count="$(git rev-list --count "${previous}..HEAD")"; range="${previous}..HEAD"
else
count="$(git rev-list --count HEAD)"; range="HEAD"
fi
if [ "$count" -eq 0 ]; then
echo "Nothing to release: no commits since ${previous}."; exit 0
fi
today="$(date -u +%Y.%-m.%-d)"
version="$today"; n=2
while git show-ref --verify --quiet "refs/tags/v${version}"; do
version="${today}.${n}"; n=$((n + 1))
done
tag="v${version}"
echo "Releasing ${tag} -- ${count} commit(s) since ${previous:-the beginning}, from ${sha}."
if [ "${DRY_RUN:-0}" = "1" ]; then echo "DRY_RUN=1: stopping here."; exit 0; fi
# The bump, written with a JSON parser rather than sed: a version put
# into JSON by string substitution is one stray quote from a file
# nothing can read.
VERSION="$version" node -e '
const fs = require("fs");
const f = "inbuxa-version.json";
const j = JSON.parse(fs.readFileSync(f, "utf8"));
j.version = process.env.VERSION;
fs.writeFileSync(f, JSON.stringify(j, null, 2) + "\n");
'
jq -n --arg msg "Version ${version}" --arg sha "$sha" --rawfile content inbuxa-version.json \
'{branch:"main", commit_message:$msg, last_commit_id:$sha,
actions:[{action:"update", file_path:"inbuxa-version.json", content:$content}]}' > commit.json
bump="$(curl -fsS "${auth[@]}" --header "Content-Type: application/json" \
--data @commit.json "${API}/repository/commits" | jq -er .id)"
echo "committed the bump as ${bump}"
# Notes bounded to what is new: one line per change on main's
# first-parent history, which is what GitHub's generated notes listed.
notes="$(git log --first-parent --format='- %s' "$range")"
jq -n --arg tag "$tag" --arg ref "$bump" --arg name "INBUXA Admin ${version}" \
--arg desc "$(printf '%s commit(s) since %s.\n\n%s' "$count" "${previous:-the beginning}" "$notes")" \
'{tag_name:$tag, ref:$ref, name:$name, description:$desc}' > release.json
curl -fsS "${auth[@]}" --header "Content-Type: application/json" \
--data @release.json "${API}/releases" | jq -r '"created release " + .tag_name'
rules:
- if: $RELEASE_WEEKLY == "1" && $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+130 -1
View File
@@ -2,7 +2,136 @@
All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
## [0.1.0] - 2026-04-20
## [1.0.11] - 2026-09-15
### Added
- Sievepad integration.
### Changed
### Fixed
## [1.0.10] - 2026-09-04
### Added
### Changed
### Fixed
- Re-added map entries and object list items are seeded with their schema defaults, including a value for every non-nullable boolean.
## [1.0.9] - 2026-08-24
### Added
- Server configurable OAuth client ID.
### Changed
### Fixed
## [1.0.8] - 2026-07-31
### Added
- Remember the last visited page when switching sections (credits @LinkPhoenix).
### Changed
- Enum list filters with many options render as a searchable combobox (credits @LinkPhoenix).
- Object cells display the variant label as a badge instead of the raw type name (credits @LinkPhoenix).
- Empty date pickers open on the current date and time (credits @LinkPhoenix).
### Fixed
- Custom logos no longer flash when navigating between pages.
- Landing no longer flashes "Select a view" before redirecting to the default page.
## [1.0.7] - 2026-07-30
### Added
- `Ctrl+K` / `Cmd+K` command palette for global search (credits @LinkPhoenix).
- Calendar date picker for date and time fields (credits @LinkPhoenix).
- Dynamic document titles per page (credits @LinkPhoenix).
### Changed
- Code-split the admin shell and heavy feature pages to speed up the initial load (credits @LinkPhoenix).
- Center forms horizontally on wide screens (credits @LinkPhoenix).
### Fixed
- Redirect URLs without a view to the first accessible page of their section (credits @LinkPhoenix).
- Sidebar groups auto-open and scroll the active item into view after navigation (credits @LinkPhoenix).
- Keep the sidebar section synced with the URL on full page loads (credits @LinkPhoenix).
- Date and time fields no longer shift values by the UTC offset when editing (credits @LinkPhoenix).
- Clip the table header background inside the rounded card border (credits @LinkPhoenix).
- Keep the selected account across page reloads (#17).
- Refresh open views when switching accounts (#17).
- Custom logos no longer flash the default logo while loading.
## [1.0.6] - 2026-07-28
### Added
- WebUI version is now displayed when hovering over the logo.
### Changed
### Fixed
- Properly serialize `date` filters when applying them to the list filter.
## [1.0.5] - 2026-06-21
### Added
### Changed
### Fixed
- Redirect to `/login` when there is no refresh token.
- Include required JMAP capabilities in `using`.
- Default scopes omit `offline_access`.
## [1.0.4] - 2026-05-11
### Added
### Changed
### Fixed
- Align `base32` alphabet with the server.
## [1.0.3] - 2026-05-05
### Added
### Changed
### Fixed
- Broken "Delivery History" link on OSS/Community editions.
- Resolve object ids in map keys.
## [1.0.2] - 2026-04-30
### Added
- OIDC:
- Include `email` and `profile` scopes in OIDC authentication requests.
- TOTP:
- Add "Copy Secret" button to TOTP setup flow.
### Changed
### Fixed
- Display validation errors returned by the server.
## [1.0.1] - 2026-04-25
### Added
- OIDC:
- Logout users from IdP when logging out of the app.
- Include `openid` scope in OIDC authentication requests.
### Changed
### Fixed
- Mobile display issues.
- Editing a secret clears its masked value.
- Array label properties crashes app.
## [1.0.0] - 2026-04-20
### Added
- Initial release.
+128
View File
@@ -0,0 +1,128 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
**johnellisATlinuxDOTcom**.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
+29
View File
@@ -0,0 +1,29 @@
# Contributing
Patches, bug reports and questions are welcome. Open an issue first for
anything substantial; small fixes need no ceremony.
## What this is
A fork of Stalwart's web interface, taken under the AGPL-3.0-only half of its
dual licence, talking to INBUXA over JMAP and OAuth. Upstream's copyright
headers stay where they are, and a file this fork has changed says so beneath
them. New files carry Coffey Labs' own header and `AGPL-3.0-only`.
Changes to files that came from upstream are kept small, so the next import
merges cleanly and a reader can tell fork from base.
## Before you push
```
npm ci
npm run typecheck && npm run lint && npm test && npm run build
```
CI runs exactly that. Nothing here talks to a live server, so a failing test
is a real failure rather than a missing container.
## Commit messages
Say what changed and why, in prose. The why is the part that is hard to
recover later. No tool trailers.
+31
View File
@@ -0,0 +1,31 @@
# INBUXA Admin as an image: the built interface and a static server for it.
#
# The interface is static files and nothing else -- it talks to the mail server
# from the browser, never from here -- so this is nginx with a SPA fallback and
# no back end of its own.
#
# It is built here rather than copied from `dist/`, which is committed for the
# convenience of people serving the tree directly. An image built from a stale
# `dist/` would be a build nobody can reproduce from the commit it claims.
FROM docker.io/node:26-alpine AS build
WORKDIR /build
# The lockfile alone first, so a commit that changes no dependency reuses this
# layer instead of resolving the tree again.
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
# The version comes from inbuxa-version.json, which the release commits before
# this builds, so there is nothing to pass in here.
RUN npm run build
FROM docker.io/nginxinc/nginx-unprivileged:1.29-alpine
# Unprivileged nginx, which runs as uid 101 and cannot bind 80. 8080 is the
# port it listens on and the one to publish.
EXPOSE 8080
# Owned by the nginx user (uid 101 in this image), not root: the entrypoint
# below rewrites index.html, and cannot if the file is root's. The directory
# stays root's, which is why the entrypoint writes through the file rather
# than replacing it.
COPY --from=build --chown=101:101 /build/dist /usr/share/nginx/html
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY --chmod=0755 docker/entrypoint.sh /docker-entrypoint.d/40-api-base-url.sh
+235
View File
@@ -0,0 +1,235 @@
GNU AFFERO GENERAL PUBLIC LICENSE
Version 3, 19 November 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
Preamble
The GNU Affero General Public License is a free, copyleft license for software and other kinds of works, specifically designed to ensure cooperation with the community in the case of network server software.
The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, our General Public Licenses are intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free software for all its users.
When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things.
Developers that use our General Public Licenses protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License which gives you legal permission to copy, distribute and/or modify the software.
A secondary benefit of defending all users' freedom is that improvements made in alternate versions of the program, if they receive widespread use, become available for other developers to incorporate. Many developers of free software are heartened and encouraged by the resulting cooperation. However, in the case of software used on network servers, this result may fail to come about. The GNU General Public License permits making a modified version and letting the public access it on a server without ever releasing its source code to the public.
The GNU Affero General Public License is designed specifically to ensure that, in such cases, the modified source code becomes available to the community. It requires the operator of a network server to provide the source code of the modified version running there to the users of that server. Therefore, public use of a modified version, on a publicly accessible server, gives the public access to the source code of the modified version.
An older license, called the Affero General Public License and published by Affero, was designed to accomplish similar goals. This is a different license, not a version of the Affero GPL, but Affero has released a new version of the Affero GPL which permits relicensing under this license.
The precise terms and conditions for copying, distribution and modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU Affero General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this License. Each licensee is addressed as "you". "Licensees" and "recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work in a fashion requiring copyright permission, other than the making of an exact copy. The resulting work is called a "modified version" of the earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based on the Program.
To "propagate" a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except executing it on a computer or modifying a private copy. Propagation includes copying, distribution (with or without modification), making available to the public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other parties to make or receive copies. Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices" to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work for making modifications to it. "Object code" means any non-source form of a work.
A "Standard Interface" means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other than the work as a whole, that (a) is included in the normal form of packaging a Major Component, but which is not part of that Major Component, and (b) serves only to enable use of the work with that Major Component, or to implement a Standard Interface for which an implementation is available to the public in source code form. A "Major Component", in this context, means a major essential component (kernel, window system, and so on) of the specific operating system (if any) on which the executable work runs, or a compiler used to produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all the source code needed to generate, install, and (for an executable work) run the object code and to modify the work, including scripts to control those activities. However, it does not include the work's System Libraries, or general-purpose tools or generally available free programs which are used unmodified in performing those activities but which are not part of the work. For example, Corresponding Source includes interface definition files associated with source files for the work, and the source code for shared libraries and dynamically linked subprograms that the work is specifically designed to require, such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users can regenerate automatically from other parts of the Corresponding Source.
The Corresponding Source for a work in source code form is that same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures.
When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified it, and giving a relevant date.
b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to "keep intact all notices".
c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an "aggregate" if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways:
a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d.
A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any tangible personal property which is normally used for personal, family, or household purposes, or (2) anything designed or sold for incorporation into a dwelling. In determining whether a product is a consumer product, doubtful cases shall be resolved in favor of coverage. For a particular product received by a particular user, "normally used" refers to a typical or common use of that class of product, regardless of the status of the particular user or of the way in which the particular user actually uses, or expects or is expected to use, the product. A product is a consumer product regardless of whether the product has substantial commercial, industrial or non-consumer uses, unless such uses represent the only significant mode of use of the product.
"Installation Information" for a User Product means any methods, procedures, authorization keys, or other information required to install and execute modified versions of a covered work in that User Product from a modified version of its Corresponding Source. The information must suffice to ensure that the continued functioning of the modified object code is in no case prevented or interfered with solely because modification has been made.
If you convey an object code work under this section in, or with, or specifically for use in, a User Product, and the conveying occurs as part of a transaction in which the right of possession and use of the User Product is transferred to the recipient in perpetuity or for a fixed term (regardless of how the transaction is characterized), the Corresponding Source conveyed under this section must be accompanied by the Installation Information. But this requirement does not apply if neither you nor any third party retains the ability to install modified object code on the User Product (for example, the work has been installed in ROM).
The requirement to provide Installation Information does not include a requirement to continue to provide support service, warranty, or updates for a work that has been modified or installed by the recipient, or for the User Product in which it has been modified or installed. Access to a network may be denied when the modification itself materially and adversely affects the operation of the network or violates the rules and protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you add to a covered work, you may (if authorized by the copyright holders of that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or author attributions in that material or in the Appropriate Legal Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or requiring that modified versions of such material be marked in reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or authors of the material; or
e) Declining to grant rights under trademark law for use of some trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that material by anyone who conveys the material (or modified versions of it) with contractual assumptions of liability to the recipient, for any liability that these contractual assumptions directly impose on those licensors and authors.
All other non-permissive additional terms are considered "further restrictions" within the meaning of section 10. If the Program as you received it, or any part of it, contains a notice stating that it is governed by this License along with a term that is a further restriction, you may remove that term. If a license document contains a further restriction but permits relicensing or conveying under this License, you may add to a covered work material governed by the terms of that license document, provided that the further restriction does not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you must place, in the relevant source files, a statement of the additional terms that apply to those files, or a notice indicating where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11).
However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice.
Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, "control" includes the right to grant patent sublicenses in a manner consistent with the requirements of this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under the contributor's essential patent claims, to make, use, sell, offer for sale, import and otherwise run, modify and propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express agreement or commitment, however denominated, not to enforce a patent (such as an express permission to practice a patent or covenant not to sue for patent infringement). To "grant" such a patent license to a party means to make such an agreement or commitment not to enforce a patent against the party.
If you convey a covered work, knowingly relying on a patent license, and the Corresponding Source of the work is not available for anyone to copy, free of charge and under the terms of this License, through a publicly available network server or other readily accessible means, then you must either (1) cause the Corresponding Source to be so available, or (2) arrange to deprive yourself of the benefit of the patent license for this particular work, or (3) arrange, in a manner consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have actual knowledge that, but for the patent license, your conveying the covered work in a country, or your recipient's use of the covered work in a country, would infringe one or more identifiable patents in that country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or arrangement, you convey, or propagate by procuring conveyance of, a covered work, and grant a patent license to some of the parties receiving the covered work authorizing them to use, propagate, modify or convey a specific copy of the covered work, then the patent license you grant is automatically extended to all recipients of the covered work and works based on it.
A patent license is "discriminatory" if it does not include within the scope of its coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rights that are specifically granted under this License. You may not convey a covered work if you are a party to an arrangement with a third party that is in the business of distributing software, under which you make payment to the third party based on the extent of your activity of conveying the work, and under which the third party grants, to any of the parties who would receive the covered work from you, a discriminatory patent license (a) in connection with copies of the covered work conveyed by you (or copies made from those copies), or (b) primarily for and in connection with specific products or compilations that contain the covered work, unless you entered into that arrangement, or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program.
13. Remote Network Interaction; Use with the GNU General Public License.
Notwithstanding any other provision of this License, if you modify the Program, your modified version must prominently offer all users interacting with it remotely through a computer network (if your version supports such interaction) an opportunity to receive the Corresponding Source of your version by providing access to the Corresponding Source from a network server at no charge, through some standard or customary means of facilitating copying of software. This Corresponding Source shall include the Corresponding Source for any work covered by version 3 of the GNU General Public License that is incorporated pursuant to the following paragraph.
Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the work with which it is combined will remain governed by version 3 of the GNU General Public License.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of the GNU Affero General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU Affero General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU Affero General Public License, you may choose any version ever published by the Free Software Foundation.
If the Program specifies that a proxy can decide which future versions of the GNU Affero General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program.
Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest to attach them to the start of each source file to most effectively state the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If your software can interact with users remotely through a computer network, you should also make sure that it provides a way for users to get its source. For example, if your program is a web application, its interface could display a "Source" link that leads users to an archive of the code. There are many ways you could offer source, and different solutions will be better for different programs; see section 13 for the specific requirements.
You should also get your employer (if you work as a programmer) or school, if any, to sign a "copyright disclaimer" for the program, if necessary. For more information on this, and how to apply and follow the GNU AGPL, see <http://www.gnu.org/licenses/>.
+213
View File
@@ -0,0 +1,213 @@
# Stalwart Enterprise License 2.0 (SELv2) Agreement
*Last Update: March 29, 2026*
PLEASE CAREFULLY READ THIS STALWART ENTERPRISE LICENSE AGREEMENT ("AGREEMENT"). THIS AGREEMENT CONSTITUTES A LEGALLY BINDING AGREEMENT BETWEEN YOU AND STALWART LABS LLC AND GOVERNS YOUR USE OF THE SOFTWARE (DEFINED BELOW). IF YOU DO NOT AGREE WITH THIS AGREEMENT, YOU MAY NOT USE THE SOFTWARE. IF YOU ARE USING THE SOFTWARE ON BEHALF OF A LEGAL ENTITY, YOU REPRESENT AND WARRANT THAT YOU HAVE AUTHORITY TO AGREE TO THIS AGREEMENT ON BEHALF OF SUCH ENTITY. IF YOU DO NOT HAVE SUCH AUTHORITY, DO NOT USE THE SOFTWARE IN ANY MANNER.
This Agreement is entered into by and between Stalwart Labs LLC and you, or the legal entity on behalf of whom you are acting.
---
## 1. DEFINITIONS
1.1. "Software" refers to the Stalwart Server Enterprise Edition software, including all its versions, updates, modifications, accompanying documentation, and related materials. The Software is self-hosted by Licensee on its own infrastructure.
1.2. "Subscription" refers to the paid access to the Software provided by Licensor to Licensee, billed on a monthly or annual basis.
1.3. "Licensor" refers to Stalwart Labs LLC, the entity providing the Software.
1.4. "Licensee" refers to the individual or entity installing, accessing, or using the Software with a valid Subscription.
1.5. "License Key" refers to the unique code provided by Licensor upon purchasing a Subscription which activates the full features of the Software. Each License Key is bound to the domain name (including all subdomains) designated by Licensee at the time of purchase.
1.6. "Source Code" refers to the human-readable version of the Software's code, as opposed to the compiled machine-readable version.
1.7. "Mailbox" refers to each individual user account or group account provisioned within the Software. The total number of Mailboxes across all domains and tenants hosted by Licensee determines the applicable Subscription tier.
1.8. "Confidential Information" refers to any non-public information disclosed by either party to the other in connection with this Agreement, whether in written, oral, electronic, or other form, that is designated as confidential or that a reasonable person would understand to be confidential given the nature of the information and circumstances of disclosure.
## 2. GRANT OF LICENSE
2.1. Licensor grants Licensee a non-exclusive, non-transferable, non-sublicensable, limited license to download, install, and use the Software during the Subscription term, subject to the terms and conditions of this Agreement.
2.2. The use of the Software is conditioned upon Licensee maintaining an active and valid paid Subscription with Licensor. The paid Subscription covers all versions of the Software and all updates and modifications released during the Subscription term.
2.3. This license grants Licensee the right to use the Software for both personal and commercial purposes. Licensee may install and operate the Software on an unlimited number of servers within its organization, host an unlimited number of domains, and host data for an unlimited number of external organizations (tenants) using the Software's multi-tenancy features. The Subscription tier is determined solely by the total number of Mailboxes provisioned. However, Licensee is expressly prohibited from reselling, leasing, sublicensing, or otherwise redistributing the Software itself.
2.4. This license is further governed by the terms and conditions set forth in any licensing agreements separately executed between Licensor and Licensee. In the event of any conflict between the terms of this Agreement and the terms of a signed licensing agreement, the terms of the signed licensing agreement shall control.
2.5. You are not granted any other rights beyond what is expressly stated herein.
## 3. LICENSE KEYS
3.1. The Software shall not be used without a valid License Key issued by Licensor.
3.2. Licensee is required to use valid License Keys issued by Licensor to run the Software, including any modified versions. Any attempts to bypass the License Key requirement is a violation of this Agreement.
3.3. Distribution or sharing of License Keys to third parties, not associated with Licensee, is strictly prohibited.
3.4. License Keys are bound to the Subscription period. Should your Subscription expire or be cancelled, all License Keys will become invalid after fifteen (15) days from the Subscription expiration or cancellation date.
3.5. Any instance of the Software using such an expired key will revert to the Community Edition functionality after the aforementioned fifteen (15) day period.
## 4. SOURCE CODE USAGE
4.1. Licensee is permitted to view, copy, and modify the Software's Source Code, as made available by Licensor, solely for Licensee's internal business use and in compliance with this Agreement's terms.
4.2. Any modifications to the Source Code do not grant Licensee any ownership rights to the original Software or any modifications. All rights, title, and interest to the Software and its Source Code remain exclusively with Licensor.
4.3. Licensee is strictly prohibited from altering, removing, or in any way tampering with the License Key validation system within the Software. Any such unauthorized modifications will be considered a material breach of this Agreement and may result in legal action.
4.4. Notwithstanding the availability of the Software's Source Code for review and limited modification, the Software and its Source Code are not open source and remain proprietary to Licensor. The provision of access to the Source Code does not confer any rights typically associated with open source software, including but not limited to the right to freely sublicense, or create derivative works for public distribution. All rights not expressly granted herein are reserved by Licensor.
4.5. Notwithstanding the foregoing, you may copy the Source Code for development and testing purposes, without requiring a Subscription.
## 5. INTELLECTUAL PROPERTY RIGHTS
5.1. The Licensor retains all rights, title, and interest in and to the Software, including all intellectual property rights therein. This Agreement does not transfer any ownership rights to the Licensee.
5.2. The Licensee must not remove, alter, or obscure any proprietary notices (including copyright and trademark notices) on the Software.
## 6. SUBSCRIPTION TERMS, RENEWAL, AND CANCELLATION
6.1. Subscriptions are available on a monthly or annual basis. The applicable fees, Mailbox tier, and billing cycle will be as set forth at the time of purchase or as subsequently agreed in writing between the parties.
6.2. Where Licensee has provided a valid payment method (such as a credit card) on file, the Subscription will automatically renew at the end of each billing cycle at the then-current rate, unless Licensee removes the payment method or cancels the Subscription prior to the renewal date. No advance cancellation notice period is required; Licensee may cancel at any time by removing the payment method on file or by notifying Licensor.
6.3. Where Licensee pays by invoice (bank transfer), the Subscription will not automatically renew. Licensor will issue an invoice notification prior to the end of the billing cycle, and the Subscription will renew only upon receipt of payment.
6.4. Upon cancellation of a Subscription by Licensee prior to the end of a paid billing cycle, Licensee is entitled to a prorated refund for the unused portion of the then-current billing period. Refunds will be calculated from the effective date of cancellation through the end of the billing cycle and will be issued within thirty (30) days of the cancellation date.
6.5. Licensor reserves the right to modify Subscription fees upon renewal. Any fee changes will be communicated to Licensee at least thirty (30) days prior to the start of the next billing cycle.
## 7. SUPPORT AND SERVICE LEVELS
7.1. All Licensees with an active Subscription have access to standard community support resources, including documentation and community forums, as made available by Licensor.
7.2. Priority email support is available exclusively to Licensees whose Subscription covers one hundred fifty (150) or more Mailboxes. Priority email support inquiries will receive an initial response within forty-eight (48) hours of receipt during Licensor's standard business hours.
7.3. The forty-eight (48) hour response time set forth in Section 7.2 constitutes a service level commitment. In the event Licensor consistently fails to meet this commitment over a period of thirty (30) consecutive days, the affected Licensee's sole remedy shall be the right to terminate the Subscription and receive a prorated refund for the unused portion of the billing cycle.
7.4. The Software is self-hosted by Licensee on Licensee's own infrastructure. Licensor does not provide hosting services and makes no guarantees regarding uptime, availability, or performance of Licensee's self-hosted deployment.
## 8. TERMINATION
8.1. Licensor may terminate this Agreement immediately upon written notice if Licensee commits a material breach of any term of this Agreement and fails to cure such breach within thirty (30) days of receiving written notice specifying the breach.
8.2. Licensor may terminate this Agreement for convenience upon thirty (30) days' written notice to Licensee. In such event, Licensee shall receive a prorated refund for the unused portion of any prepaid Subscription fees.
8.3. In the event of a termination, Licensee will be provided with written notice, sent to the email address used during Subscription registration, outlining the reasons for the termination.
8.4. Upon termination, all rights granted to Licensee under this Agreement will cease, and Licensee must promptly cease all use of the Software and destroy or delete all copies in its possession, except that Licensee may retain copies of the Source Code obtained prior to termination solely for archival purposes, subject to the continuing obligations of confidentiality and intellectual property protection set forth herein.
## 9. CONFIDENTIALITY
9.1. Each party agrees to hold the other party's Confidential Information in strict confidence and not to disclose such information to any third party, except to employees, contractors, or agents who have a need to know and are bound by confidentiality obligations no less protective than those contained herein.
9.2. Confidential Information does not include information that: (a) is or becomes publicly available through no fault of the receiving party; (b) was rightfully in the receiving party's possession prior to disclosure; (c) is independently developed by the receiving party without use of the disclosing party's Confidential Information; or (d) is rightfully obtained from a third party without restriction on disclosure.
9.3. A receiving party may disclose Confidential Information to the extent required by applicable law, regulation, or court order, provided that the receiving party gives the disclosing party prompt written notice (where legally permissible) and cooperates with the disclosing party's efforts to seek protective treatment of such information.
9.4. The obligations of confidentiality set forth in this Section shall survive the termination or expiration of this Agreement for a period of three (3) years.
## 10. LIMITATION OF LIABILITY
10.1. In no event will the Licensor be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly, or any loss of data, use, goodwill, or other intangible losses, resulting from (i) your use or inability to use the Software; (ii) any unauthorized access to or use of your servers and/or any personal information stored therein.
10.2. Except for liability arising from death or personal injury caused by negligence, fraud, willful misconduct, or a party's indemnification obligations under this Agreement, Licensor's total aggregate liability for any and all claims under this Agreement shall be limited to the total Subscription fees paid by Licensee to Licensor in the twelve (12) months immediately preceding the event giving rise to the claim.
## 11. INDEMNIFICATION
11.1. Licensee agrees to indemnify, defend, and hold harmless Licensor, its officers, directors, employees, agents, licensors, suppliers, and any third-party information providers from and against all claims, losses, expenses, damages, and costs, including reasonable attorneys' fees, resulting from any violation of this Agreement or any activity related to Licensee's use or misuse of the Software (including negligent or wrongful conduct).
11.2. Licensor agrees to indemnify, defend, and hold harmless Licensee from and against any third-party claim that the Software, as provided by Licensor, infringes or misappropriates any patent, copyright, trademark, or trade secret of a third party, provided that Licensee: (a) gives Licensor prompt written notice of such claim; (b) grants Licensor sole control of the defense and settlement of such claim; and (c) provides reasonable cooperation at Licensor's expense.
11.3. If the Software becomes, or in Licensor's opinion is likely to become, the subject of an infringement claim, Licensor may at its option and expense: (a) procure for Licensee the right to continue using the Software; (b) modify or replace the Software to make it non-infringing while maintaining substantially equivalent functionality; or (c) if neither (a) nor (b) is commercially practicable, terminate this Agreement and provide Licensee with a prorated refund of any prepaid Subscription fees.
11.4. Licensor shall have no obligation under this Section for any claim arising from: (a) modifications to the Software made by Licensee; (b) use of the Software in combination with products, services, or technologies not provided by Licensor, where the infringement would not have occurred but for such combination; or (c) Licensee's continued use of a version of the Software after being notified of the availability of a non-infringing update.
## 12. DATA PROTECTION AND PRIVACY
12.1. The Software is self-hosted by Licensee, and Licensee retains sole responsibility for all data stored and processed within its deployment of the Software, including any personal data of its users or tenants.
12.2. To the extent that Licensor processes any personal data on behalf of Licensee (for example, in connection with support services or license management), such processing shall be conducted in accordance with applicable data protection laws, including but not limited to the General Data Protection Regulation (GDPR) where applicable, the California Consumer Privacy Act (CCPA) where applicable, and any other relevant data protection legislation.
12.3. Where required by applicable data protection law, the parties shall enter into a separate Data Processing Agreement ("DPA") that sets forth the terms and conditions governing Licensor's processing of personal data on behalf of Licensee.
12.4. In the event of a data breach affecting personal data processed by Licensor in connection with this Agreement, Licensor shall notify Licensee without undue delay and in any event within seventy-two (72) hours of becoming aware of the breach, and shall cooperate with Licensee in investigating and remediating the breach.
12.5. Additional details regarding Licensor's data handling practices are outlined in Licensor's Privacy Policy, which can be accessed on Licensor's website.
## 13. EXPORT COMPLIANCE
13.1. The Software may be subject to export control and sanctions laws of the United States and other jurisdictions. Licensee agrees to comply with all applicable export control laws, including without limitation the U.S. Export Administration Regulations (EAR) and the regulations administered by the U.S. Department of the Treasury's Office of Foreign Assets Control (OFAC).
13.2. Licensee represents and warrants that: (a) Licensee is not located in, organized under the laws of, or a resident of any country or territory subject to comprehensive U.S. sanctions (currently including Cuba, Iran, North Korea, Syria, and the Crimea, Donetsk, and Luhansk regions of Ukraine); (b) Licensee is not listed on any U.S. government restricted party list; and (c) Licensee will not export, re-export, or transfer the Software to any prohibited destination, entity, or individual without the required governmental authorizations.
## 14. ANTI-CORRUPTION
14.1. Each party represents and warrants that it has not and will not, in connection with this Agreement, directly or indirectly offer, pay, promise to pay, or authorize the payment of any money or anything of value to any government official, political party, or candidate for political office for the purpose of influencing any act or decision, or securing any improper advantage.
14.2. Each party shall comply with all applicable anti-corruption and anti-bribery laws, including without limitation the U.S. Foreign Corrupt Practices Act (FCPA) and the UK Bribery Act 2010.
## 15. GOVERNING LAW AND DISPUTE RESOLUTION
15.1. This Agreement shall be governed by and construed under the laws of the State of Wyoming, United States of America, without regard to its conflict of laws principles.
15.2. Any dispute, controversy, or claim arising out of or relating to this Agreement, or the breach, termination, or invalidity thereof, shall first be attempted to be resolved through good faith negotiation between the parties for a period of thirty (30) days following written notice of the dispute.
15.3. If the dispute is not resolved through negotiation within the thirty (30) day period, it shall be finally resolved by binding arbitration administered by the American Arbitration Association ("AAA") in accordance with its Commercial Arbitration Rules. The arbitration shall be conducted in Sheridan, Wyoming, before a single arbitrator. The language of the arbitration shall be English.
15.4. The arbitrator's award shall be final and binding and may be entered as a judgment in any court of competent jurisdiction. Each party shall bear its own costs and attorneys' fees in connection with the arbitration, unless the arbitrator determines otherwise.
15.5. Notwithstanding the foregoing, either party may seek injunctive or other equitable relief in any court of competent jurisdiction to protect its intellectual property rights or Confidential Information without first submitting to arbitration.
## 16. NOTICES
16.1. All notices required or permitted under this Agreement shall be in writing and shall be deemed effectively given: (a) upon personal delivery; (b) upon confirmed transmission by email; or (c) one (1) business day after deposit with a nationally recognized overnight courier service.
16.2. Notices to Licensor shall be sent to the address and email set forth in Section 21 (Contact Information) of this Agreement. Notices to Licensee shall be sent to the email address provided during Subscription registration or as subsequently updated by Licensee in writing.
## 17. ASSIGNMENT
17.1. Licensee may not transfer or assign this Agreement or any rights or obligations hereunder without the prior written consent of Licensor, except that Licensee may assign this Agreement without consent in connection with a merger, acquisition, corporate reorganization, or sale of all or substantially all of its assets, provided that the assignee agrees in writing to be bound by the terms of this Agreement.
17.2. Licensor may assign this Agreement without restriction. Any assignment in violation of this Section shall be null and void.
## 18. DISCLAIMERS AND WARRANTIES
18.1. The Software is provided "AS IS" and "AS AVAILABLE", without warranty of any kind, either express or implied, including, without limitation, warranties of merchantability, fitness for a particular purpose, and non-infringement.
18.2. Licensor does not warrant that the Software will be error-free, that access thereto will be uninterrupted, or that defects will be corrected.
18.3. Licensor warrants that, as of the date of delivery, the Software will perform substantially in accordance with the accompanying documentation for a period of ninety (90) days. Licensee's sole remedy for breach of this warranty shall be, at Licensor's option, repair or replacement of the non-conforming Software, or a refund of the Subscription fees paid for the period during which the Software was non-conforming.
## 19. FORCE MAJEURE
Neither party shall be in default or otherwise liable for any delay in or failure of its performance under this Agreement if such delay or failure arises by any reason of any event beyond the reasonable control of a party, including acts of God, the elements, earthquakes, floods, fires, epidemics, riots, failures or delays in transportation or communications, or any act or failure to act by the other party or such other party's officers, employees, agents, or contractors. The affected party shall give prompt notice to the other party and shall use commercially reasonable efforts to mitigate the effects of the force majeure event. If a force majeure event continues for more than ninety (90) days, either party may terminate this Agreement upon written notice, and Licensee shall receive a prorated refund of any prepaid Subscription fees.
## 20. SURVIVAL
The following Sections shall survive the termination or expiration of this Agreement: Section 1 (Definitions), Section 4.2 (Ownership of Modifications), Section 4.4 (Proprietary Nature of Software), Section 5 (Intellectual Property Rights), Section 9 (Confidentiality), Section 10 (Limitation of Liability), Section 11 (Indemnification), Section 12 (Data Protection and Privacy), Section 13 (Export Compliance), Section 15 (Governing Law and Dispute Resolution), and Section 20 (Survival).
## 21. SEVERABILITY
If any provision of this Agreement is held to be unenforceable or invalid for any reason, that provision shall be reformed to the extent necessary to make it enforceable and consistent with the intent of the parties, and the remaining provisions shall remain in full force and effect.
## 22. ENTIRE AGREEMENT
This Agreement constitutes the entire agreement between the Licensor and the Licensee with respect to the subject matter hereof and supersedes all prior or contemporaneous understandings regarding such subject matter. No amendment to or modification of this Agreement will be binding unless in writing and signed by the Licensor.
## 23. ACCEPTANCE
By downloading, installing, or using the Software, even without explicitly clicking on an "I Agree" button or a similar mechanism, you acknowledge that you have read, understood, and agreed to be bound by the terms and conditions of this Agreement.
## 24. CONTACT INFORMATION
If you have any questions about this Agreement, please contact Stalwart Labs LLC at:
Stalwart Labs LLC
1309 Coffeen Avenue STE 1200
Sheridan, Wyoming 82801
USA
[email protected]
+109
View File
@@ -0,0 +1,109 @@
# Third-party notices
INBUXA Admin is licensed under the AGPL-3.0; see LICENSES/. This file records
work by other people that ships inside it and the terms it comes under.
## Color palettes
Ten of the palettes offered under the user menu Theme are the work of their own
projects and are used under the MIT license. Only the published color values
are used — no code, and nothing from anyone else's reimplementation of them.
The values as fetched from each project are recorded in ihasmail's repository,
in `.palette-sources/palettes-upstream.md`, and the shades between them are
derived by ihasmail's `scripts/build-palettes.py`, which also lifts any tier that
would not meet the contrast ihasmail claims. INBUXA Admin takes ihasmail's
derived colors as they are (`scripts/import-palettes.py`).
### Dracula and Alucard
Copyright (c) 2016 Dracula Theme — https://github.com/dracula/dracula-theme
Licensed under the MIT license. "Dracula" is the dark variant and "Alucard" the
light one; both are published in that repository's own "Color Palette (OSS)"
section.
### Gruvbox
Copyright (c) 2018 Pavel Pertsev — https://github.com/morhetz/gruvbox
Licensed under the MIT license.
### Rosé Pine
Copyright (c) 2021 Rosé Pine — https://github.com/rose-pine/rose-pine-theme
Licensed under the MIT license. The light variant is "Dawn".
### Tokyo Night
Copyright (c) 2019 enkia — https://github.com/enkia/tokyo-night-vscode-theme
Licensed under the MIT license. The light variant is "Day".
### Catppuccin
Copyright (c) 2021 Catppuccin — https://github.com/catppuccin/palette
Licensed under the MIT license. "Mocha" is the dark variant and "Latte" the
light one; both are published in that repository's palette.json.
### Solarized
Copyright (c) 2011 Ethan Schoonover — https://github.com/altercation/solarized
Licensed under the MIT license. Light and dark are both original to it, and
share one set of accent values by design.
### Ayu
Copyright (c) Konstantin Pschera — https://github.com/ayu-theme/ayu-colors
Licensed under the MIT license. The two signature accent colors come from the
same author's ayu-theme/vscode-ayu, also MIT.
### Kanagawa
Copyright (c) 2021 Tommaso Laurenzi — https://github.com/rebelot/kanagawa.nvim
Licensed under the MIT license. "Wave" is the dark variant and "Lotus" the
light one. The theme takes its name from Hokusai's print.
### Everforest
Copyright (c) 2019 Sainnhe Park — https://github.com/sainnhe/everforest
Licensed under the MIT license. The medium-contrast variant of each mode is
the one used here.
### Primer
Copyright (c) GitHub, Inc. — https://github.com/primer/primitives
Licensed under the MIT license, which covers the color values. "GitHub" and
the Invertocat logo are trademarks of GitHub, Inc.; this palette is named
"Primer" after the design system and is neither affiliated with nor endorsed
by GitHub.
---
The MIT license, under which all ten are used:
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.
---
## Fonts
The interface's typefaces are bundled with it, from the Fontsource packages,
under the SIL Open Font License 1.1. The full license text ships with each
package (`LICENSE` in `@fontsource-variable/inter` and
`@fontsource-variable/space-grotesk`), and it applies to the font files in the
built app.
- **Inter**: Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter).
- **Space Grotesk**: Copyright (c) 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk).
+48 -127
View File
@@ -1,149 +1,70 @@
<p align="center">
<a href="https://stalw.art">
<img src="./img/logo-red.svg" height="150">
</a>
<img src="./img/brand/inbuxa-lockup-light.svg" alt="inbuxa" height="120">
</p>
<h3 align="center">
Web-based User Interface for Stalwart 🛡️
</h3>
<h3 align="center">INBUXA Admin</h3>
<br>
The administration interface for the INBUXA mail server: every server setting,
first-boot setup, and recovery, in the browser.
<p align="center">
<a href="https://github.com/stalwartlabs/webui/actions/workflows/build.yml"><img src="https://img.shields.io/github/actions/workflow/status/stalwartlabs/webui/build.yml?style=flat-square" alt="continuous integration"></a>
&nbsp;
<a href="https://www.gnu.org/licenses/agpl-3.0"><img src="https://img.shields.io/badge/License-AGPL_v3-blue.svg?label=license&style=flat-square" alt="License: AGPL v3"></a>
&nbsp;
<a href="https://stalw.art/docs/get-started/"><img src="https://img.shields.io/badge/read_the-docs-red?style=flat-square" alt="Documentation"></a>
</p>
<p align="center">
<a href="https://mastodon.social/@stalwartlabs"><img src="https://img.shields.io/mastodon/follow/109929667531941122?style=flat-square&logo=mastodon&color=%236364ff&label=Follow%20on%20Mastodon" alt="Mastodon"></a>
&nbsp;
<a href="https://twitter.com/stalwartlabs"><img src="https://img.shields.io/twitter/follow/stalwartlabs?style=flat-square&logo=x&label=Follow%20on%20Twitter" alt="Twitter"></a>
</p>
<p align="center">
<a href="https://discord.gg/jtgtCNj66U"><img src="https://img.shields.io/discord/923615863037390889?label=Join%20Discord&logo=discord&style=flat-square" alt="Discord"></a>
&nbsp;
<a href="https://matrix.to/#/#stalwart:matrix.org"><img src="https://img.shields.io/matrix/stalwartmail%3Amatrix.org?label=Join%20Matrix&logo=matrix&style=flat-square" alt="Matrix"></a>
</p>
It is schema-driven. After signing in it fetches the server's schema and
builds every form, list and menu from it, so it covers every setting the
server has without hardcoding any of them.
## Features
## Design
**Stalwart WebUI** is schema-driven single-page application for administering [Stalwart](https://stalw.art). After authentication the panel fetches a JSON schema from the server and dynamically generates all forms, lists, navigation, and layouts from that schema. Nothing is hardcoded.
- **One edition.** Every feature the server has is available here, with
nothing held back. See the INBUXA server's `docs/spec/`.
- **Runs anywhere, not on the mail server.** INBUXA Admin is its own
deployment, never installed onto the mail server. It's pointed at the server
either at build time (`VITE_API_BASE_URL`) or at deploy time:
`<meta name="api-base-url" content="https://mail.example.com">` in
`index.html`. Hosted like that, it signs in as the OAuth client
`inbuxa-admin`, which the server registers when it's started with
`INBUXA_ADMIN_URL` set to INBUXA Admin's address (for development,
`http://localhost:5173`).
- **INBUXA's look:** the logo and ihasmail's palette.
- **Two-factor setup** names INBUXA as the issuer, and no longer makes
authenticator apps fetch a logo from a third-party site.
Key features:
## Developing
- **Schema-driven UI**: All forms, lists, and navigation are generated from a JSON schema fetched from `/api/schema` after login. No object types, field names, or layouts are hardcoded.
- **JMAP protocol**: All data operations (queries, creates, updates, deletes, blob uploads) use JMAP (RFC 8620) with method chaining and result references.
- **Permission-aware**: Every button, link, field, and section respects the user's permissions. Elements the user cannot access are hidden.
## Screenshots
<img src="./img/screencast-setup.gif">
## Get Started
Stalwart WebUI is included with Stalwart Mail Server, to install Stalwart Mail Server on your server by following the instructions for your platform:
- [Linux / MacOS](https://stalw.art/docs/install/linux)
- [Windows](https://stalw.art/docs/install/windows)
- [Docker](https://stalw.art/docs/install/docker)
All documentation is available at [stalw.art/docs/get-started](https://stalw.art/docs/get-started).
## Getting started
Prerequisites:
- Node.js 18 or later
- A running Stalwart instance (for JMAP API calls)
Install dependencies:
```
npm install
```
### Environment variables
Configuration is done through Vite environment variables. Copy or edit `.env.development` in the project root:
```
VITE_API_BASE_URL=http://localhost:443
VITE_OAUTH_CLIENT_ID=stalwart-webui
VITE_ACCESS_TOKEN=
VITE_OAUTH_SCOPES=
```
| Variable | Description |
|---|---|
| `VITE_API_BASE_URL` | URL of the Stalwart server. Used for all API requests during development. In production builds (when empty or unset) requests are relative to the current origin. |
| `VITE_OAUTH_CLIENT_ID` | OAuth 2.0 client ID. Defaults to `stalwart-webui`. |
| `VITE_ACCESS_TOKEN` | When set, skips the OAuth flow entirely and uses this token for all requests. Useful for local development and testing. |
| `VITE_OAUTH_SCOPES` | Optional OAuth scopes. Omitted from the authorization request when empty. |
### Bypassing OAuth for development
Set `VITE_ACCESS_TOKEN` to a valid bearer token to skip the login page and go straight to the admin panel. You can obtain a token from the Stalwart server's token endpoint or use an API key:
```
VITE_ACCESS_TOKEN=your-bearer-token-here
```
### Running the dev server
```
npm run dev
```
This starts Vite's development server with hot module replacement, typically at `http://localhost:5173`.
## Testing
Run the unit tests (Vitest):
```
npm test
```
Run tests in watch mode:
```
npm run test:watch
```
## Building for production
```
```bash
npm ci
npm run dev # http://localhost:5173, against VITE_API_BASE_URL in .env.development
npm run typecheck && npx eslint src/ && npx vitest run
npm run build
```
This runs the TypeScript compiler followed by Vite's production build. Output
goes to the `dist/` directory.
## Keeping up with upstream
To preview the production build locally:
The upstream codebase's history contains no code under a proprietary license,
so this is an ordinary git fork. `upstream` is a fetch-only remote:
```
npm run preview
```bash
git fetch upstream --tags
git merge v1.0.12 # the next release tag
```
## Support
## Versions
If you are having problems running Stalwart Mail Server, you found a bug or just have a question,
do not hesitate to reach us on [Github Discussions](https://github.com/stalwartlabs/mail-server/discussions),
[Reddit](https://www.reddit.com/r/stalwartlabs), [Discord](https://discord.gg/aVQr3jF8jd) or [Matrix](https://matrix.to/#/#stalwart:matrix.org).
Additionally you may purchase a subscription to obtain priority support from Stalwart Labs LLC
INBUXA Admin has its own dated version (`inbuxa-version.json`), shown with the
upstream release it's based on: `INBUXA Admin 2026.9.18 (base 1.0.11)`.
`package.json` keeps upstream's version, so upstream's bumps merge cleanly.
## License
## Source code
This project is dual-licensed under the **GNU Affero General Public License v3.0** (AGPL-3.0; as published by the Free Software Foundation) and the **Stalwart Enterprise License v1 (SELv1)**:
Every build carries its own source. The interface links to it (the user menu
and the sign-in page), and the build writes it next to the app as
`source.tar.gz`: the exact tree the running version was built from.
- The [GNU Affero General Public License v3.0](./LICENSES/AGPL-3.0-only.txt) is a free software license that ensures your freedom to use, modify, and distribute the software, with the condition that any modified versions of the software must also be distributed under the same license.
- The [Stalwart Enterprise License v1 (SELv1)](./LICENSES/LicenseRef-SEL.txt) is a proprietary license designed for commercial use. It offers additional features and greater flexibility for businesses that do not wish to comply with the AGPL-3.0 license requirements.
## License and credits
Each file in this project contains a license notice at the top, indicating the applicable license(s). The license notice follows the [REUSE guidelines](https://reuse.software/) to ensure clarity and consistency. The full text of each license is available in the [LICENSES](./LICENSES/) directory.
## Copyright
Free software under the [GNU Affero General Public License, version 3](./LICENSES/AGPL-3.0-only.txt).
Copyright (C) 2024, Stalwart Labs LLC
INBUXA Admin is forked from the upstream AGPL-3.0 web administration codebase
originally developed by Stalwart Labs. Their copyright notices are kept on
every file inherited from it, and INBUXA's own notice is added to the files it
changes. Those files are offered upstream under the AGPL-3.0-only or a
proprietary license. INBUXA uses them under the AGPL-3.0 only. INBUXA isn't
affiliated with or endorsed by Stalwart Labs.
+37
View File
@@ -0,0 +1,37 @@
# Security policy
## Supported versions
INBUXA Admin is developed on `main`, and security fixes are applied there and
in the latest release. Older tags are not backported.
| Version | Supported |
| --- | --- |
| `main` and the latest release | :white_check_mark: |
| Older releases | :x: |
## Reporting a vulnerability
**Please don't open a public issue for a security problem.** An issue is
visible to everyone, including whoever would use it, before there is a fix.
Report it privately by email to:
**johnellisATlinuxDOTcom**
Include as much as you can of: what it lets someone do, how to reproduce it,
the version or commit affected, and whether it needs an authenticated session
or a particular role.
This is an administrative interface, so a few things are worth calling out as
in scope even though they are not bugs in the usual sense: anything that lets
a session act beyond the permissions its account holds, anything that leaks
another tenant's data, and anything that exposes a token or a secret to a
place it should not reach — the URL, the page, or storage that outlives the
session.
You'll get an acknowledgement within a few days. A report that turns out to
affect the mail server rather than this interface will be moved to
[inbuxa-server](https://git.coffeylabs.org/inbuxa/inbuxa-server), and one that affects
upstream Stalwart's web interface will be passed to Stalwart Labs with credit
to you.
+38
View File
@@ -0,0 +1,38 @@
#!/bin/sh
# Point this deployment at its mail server, at container start.
#
# INBUXA Admin reads `<meta name="api-base-url">` from index.html when it was
# not given VITE_API_BASE_URL at build time, which is what lets one image serve
# any installation. This writes that tag from API_BASE_URL.
#
# nginx runs the files in /docker-entrypoint.d before starting, so this happens
# once per container and the served index.html is already correct.
set -eu
[ -n "${API_BASE_URL:-}" ] || exit 0
html=/usr/share/nginx/html/index.html
[ -f "$html" ] || exit 0
# Escaped for sed's replacement, where & and the delimiter are special. A URL
# containing either is unlikely, but a silently mangled API address is the kind
# of failure that looks like the server being down.
esc=$(printf '%s' "$API_BASE_URL" | sed 's/[&|]/\\&/g')
tag="<meta name=\"api-base-url\" content=\"$esc\">"
# Written back through the existing file rather than with `sed -i`, which
# replaces it and so needs to create a temp file in the directory. That
# directory belongs to root in this image and nginx does not run as root, so
# in-place editing is the one thing that cannot work here. The file itself is
# ours, and truncating it is enough.
tmp=$(mktemp)
trap 'rm -f "$tmp"' EXIT
if grep -q '<meta name="api-base-url"' "$html"; then
sed "s|<meta name=\"api-base-url\"[^>]*>|$tag|" "$html" > "$tmp"
else
sed "s|<head>|<head>$tag|" "$html" > "$tmp"
fi
cat "$tmp" > "$html"
echo "api-base-url set to $API_BASE_URL"
+25
View File
@@ -0,0 +1,25 @@
server {
listen 8080;
server_name _;
root /usr/share/nginx/html;
index index.html;
# A single-page app: every path that is not a file on disk is the app's own
# route, and the app is what decides what it means. Without this, a reload
# anywhere but the root is a 404 from nginx.
location / {
try_files $uri $uri/ /index.html;
}
# Hashed filenames, so the content at a given name never changes. index.html
# is deliberately not in here: it is the file that names the current hashes,
# and a cached one pins a deployment to the build it replaced.
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location = /index.html {
add_header Cache-Control "no-cache";
}
}
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 204 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 204 KiB

-25
View File
@@ -1,25 +0,0 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 680.5 252.1;" xml:space="preserve" viewBox="99.5 84.68 481.62 82.75">
<style type="text/css">
.st0{fill:#100E42;}
.st1{fill:#DB2D54;}
.st2{fill:#FFFFFF;}
</style>
<g>
<g>
<path class="st1" d="M227.8,143.6c0.3,4.2,2.1,7.6,5.1,10.1c3.1,2.5,7.1,3.8,12.1,3.8c4.3,0,7.9-0.9,10.5-2.8c2.7-1.9,4-4.5,4-7.8 c0-2.4-0.7-4.3-2.2-5.7c-1.5-1.4-3.4-2.5-6-3.2c-2.5-0.7-6-1.5-10.6-2.3c-4.6-0.8-8.6-1.9-11.9-3.2c-3.3-1.3-6-3.3-8.1-6.1 c-2.1-2.7-3.1-6.3-3.1-10.7c0-4.1,1.1-7.7,3.2-10.9c2.1-3.2,5.1-5.7,9-7.4c3.8-1.8,8.2-2.6,13.2-2.6c5.1,0,9.6,1,13.7,2.9 c4,1.9,7.2,4.5,9.5,7.8c2.3,3.3,3.6,7.1,3.8,11.4h-11.5c-0.4-3.7-2-6.6-4.8-8.9c-2.8-2.2-6.3-3.4-10.6-3.4c-4.1,0-7.5,0.9-9.9,2.7 c-2.5,1.8-3.7,4.3-3.7,7.6c0,2.3,0.7,4.1,2.2,5.5c1.5,1.4,3.4,2.4,5.9,3.1c2.4,0.7,5.9,1.4,10.5,2.2c4.6,0.8,8.6,1.9,11.9,3.3 c3.3,1.4,6,3.4,8.2,6c2.1,2.6,3.2,6.1,3.2,10.5c0,4.2-1.1,8-3.4,11.3c-2.2,3.3-5.4,5.9-9.4,7.8c-4,1.9-8.6,2.8-13.7,2.8 c-5.6,0-10.6-1-14.9-3.1c-4.3-2-7.6-4.9-10-8.5c-2.4-3.6-3.7-7.8-3.7-12.5L227.8,143.6z"/>
<path class="st1" d="M278.5,102.1l11-2.1v14.6h12.6v9.7h-12.6v27.2c0,2,0.4,3.5,1.2,4.3c0.8,0.9,2.2,1.3,4.2,1.3h8.4v9.7h-10.6 c-5,0-8.6-1.2-10.8-3.5c-2.2-2.3-3.4-5.9-3.4-10.7V102.1z"/>
<path class="st1" d="M356.8,114.6v52.2h-9.7l-1.2-7.9c-1.8,2.6-4.2,4.7-7,6.2c-2.9,1.6-6.2,2.3-10,2.3c-4.8,0-9-1.1-12.7-3.2 c-3.7-2.1-6.7-5.2-8.8-9.3c-2.1-4-3.2-8.8-3.2-14.2c0-5.3,1.1-10,3.2-14c2.1-4,5.1-7.2,8.8-9.4c3.7-2.2,7.9-3.3,12.6-3.3 c3.9,0,7.2,0.7,10.1,2.2c2.9,1.5,5.2,3.5,6.9,6.1l1.3-7.6H356.8z M341.7,153.3c2.8-3.2,4.2-7.3,4.2-12.4c0-5.2-1.4-9.4-4.2-12.6 c-2.8-3.3-6.5-4.9-11-4.9c-4.6,0-8.2,1.6-11,4.8c-2.8,3.2-4.2,7.4-4.2,12.5c0,5.2,1.4,9.4,4.2,12.6c2.8,3.2,6.5,4.8,11,4.8 C335.2,158.1,338.9,156.5,341.7,153.3z"/>
<path class="st1" d="M365.5,97.5l11-2.1v71.3h-11V97.5z"/>
<path class="st1" d="M380.3,114.6h11.6l11.9,39.9l11.9-39.9h10.1l11.4,39.9l12.3-39.9h11.2l-17.3,52.2h-11.8l-11-35.5l-11.4,35.5 l-11.9,0.1L380.3,114.6z"/>
<path class="st1" d="M513.7,114.6v52.2H504l-1.2-7.9c-1.8,2.6-4.2,4.7-7,6.2c-2.9,1.6-6.2,2.3-10,2.3c-4.8,0-9-1.1-12.7-3.2 c-3.7-2.1-6.7-5.2-8.8-9.3c-2.1-4-3.2-8.8-3.2-14.2c0-5.3,1.1-10,3.2-14c2.1-4,5.1-7.2,8.8-9.4c3.7-2.2,7.9-3.3,12.6-3.3 c3.9,0,7.2,0.7,10.1,2.2c2.9,1.5,5.2,3.5,6.9,6.1l1.3-7.6H513.7z M498.6,153.3c2.8-3.2,4.2-7.3,4.2-12.4c0-5.2-1.4-9.4-4.2-12.6 c-2.8-3.3-6.5-4.9-11-4.9c-4.6,0-8.2,1.6-11,4.8c-2.8,3.2-4.2,7.4-4.2,12.5c0,5.2,1.4,9.4,4.2,12.6c2.8,3.2,6.5,4.8,11,4.8 C492.2,158.1,495.8,156.5,498.6,153.3z"/>
<path class="st1" d="M551.3,114.6v10.3h-4.9c-4.6,0-7.8,1.5-9.9,4.4c-2,3-3.1,6.7-3.1,11.3v26.2h-11v-52.2h9.8l1.2,7.8 c1.5-2.4,3.4-4.4,5.8-5.8c2.4-1.4,5.6-2.1,9.6-2.1H551.3z"/>
<path class="st1" d="M556.3,102.1l11-2.1v14.6h12.6v9.7h-12.6v27.2c0,2,0.4,3.5,1.2,4.3c0.8,0.9,2.2,1.3,4.2,1.3h8.4v9.7h-10.6 c-5,0-8.6-1.2-10.8-3.5s-3.4-5.9-3.4-10.7V102.1z"/>
</g>
<g>
<path class="st1" d="M149.1,84.7h-4.8l-44.8,25.9v8.3l44.8,25.9h4.8l44.8-25.9v-8.3L149.1,84.7z M182,114.7h-35.3V94.4L182,114.7z M146.7,135.1l-35.3-20.4l27-15.6v15.6v4.1v0.5l6.3,3.6h22.9L146.7,135.1z"/>
<polygon class="st1" points="99.5,129.9 99.5,140.9 144.3,166.8 149.1,166.8 193.9,140.9 193.9,129.9 146.7,157.2 "/>
<polygon class="st1" points="187.3,166.8 193.9,163 193.9,152 168.2,166.8 "/>
<polygon class="st1" points="99.5,163 106.1,166.8 125.2,166.8 99.5,152 "/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 260 KiB

+3
View File
@@ -0,0 +1,3 @@
{
"version": "2026.9.21.2"
}
+4 -2
View File
@@ -4,9 +4,11 @@
<head>
<meta charset="UTF-8" />
<base href="/" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="oauth-client-id" content="" />
<meta name="api-base-url" content="" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portal</title>
<title>INBUXA Admin</title>
</head>
<body>
+1523 -1533
View File
File diff suppressed because it is too large Load Diff
+46 -43
View File
@@ -1,8 +1,8 @@
{
"name": "stalwart-webui",
"name": "inbuxa-admin",
"private": true,
"version": "1.0.0",
"description": "Stalwart WebUI",
"version": "1.0.11",
"description": "INBUXA Admin, the administration interface for the INBUXA mail server",
"type": "module",
"scripts": {
"dev": "vite",
@@ -16,55 +16,58 @@
"format:check": "prettier --check src/"
},
"dependencies": {
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@daypicker/react": "^10.0.1",
"@fontsource-variable/inter": "^5.3.0",
"@fontsource-variable/space-grotesk": "^5.3.0",
"@radix-ui/react-alert-dialog": "^1.1.23",
"@radix-ui/react-checkbox": "^1.3.11",
"@radix-ui/react-collapsible": "^1.1.20",
"@radix-ui/react-dialog": "^1.1.23",
"@radix-ui/react-dropdown-menu": "^2.1.24",
"@radix-ui/react-label": "^2.1.15",
"@radix-ui/react-popover": "^1.1.23",
"@radix-ui/react-scroll-area": "^1.2.18",
"@radix-ui/react-select": "^2.3.7",
"@radix-ui/react-separator": "^1.1.15",
"@radix-ui/react-slot": "^1.3.3",
"@radix-ui/react-switch": "^1.3.7",
"@radix-ui/react-tabs": "^1.1.21",
"@radix-ui/react-tooltip": "^1.2.16",
"@types/qrcode": "^1.5.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"i18next": "^26.0.4",
"lucide-react": "^1.8.0",
"otpauth": "^9.5.0",
"i18next": "^26.3.6",
"lucide-react": "^1.28.0",
"otpauth": "^9.5.1",
"qrcode": "^1.5.4",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-i18next": "^17.0.2",
"react": "^19.2.8",
"react-dom": "^19.2.8",
"react-i18next": "^17.0.11",
"react-markdown": "^10.1.0",
"react-router-dom": "^7.14.0",
"recharts": "^3.8.1",
"tailwind-merge": "^3.5.0",
"zustand": "^5.0.12"
"react-router-dom": "^7.18.2",
"recharts": "^3.10.1",
"tailwind-merge": "^3.6.0",
"zustand": "^5.0.14"
},
"devDependencies": {
"@eslint/js": "^9.39.4",
"@tailwindcss/vite": "^4.2.2",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
"@eslint/js": "^10.0.1",
"@tailwindcss/vite": "^4.3.3",
"@types/node": "^26.1.2",
"@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^9.39.4",
"@vitejs/plugin-react": "^6.0.5",
"eslint": "^10.8.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.4.0",
"happy-dom": "^20.9.0",
"prettier": "^3.8.2",
"tailwindcss": "^4.2.2",
"typescript": "~6.0.2",
"typescript-eslint": "^8.58.0",
"vite": "^8.0.4",
"vitest": "^4.1.4"
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.3",
"globals": "^17.8.0",
"happy-dom": "^20.11.1",
"prettier": "^3.9.6",
"tailwindcss": "^4.3.3",
"typescript": "~6.0.3",
"typescript-eslint": "^8.65.0",
"vite": "^8.2.0",
"vitest": "^4.1.10"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

+5 -1
View File
@@ -4,14 +4,18 @@
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
import { LoadingFallback } from '@/components/common/LoadingFallback';
import { Toaster } from '@/components/ui/toaster';
export default function App() {
return (
<ErrorBoundary>
<Outlet />
<Suspense fallback={<LoadingFallback fullScreen />}>
<Outlet />
</Suspense>
<Toaster />
</ErrorBoundary>
);
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

+9 -18
View File
@@ -1,7 +1,10 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -19,7 +22,7 @@ import { toast } from '@/hooks/use-toast';
import { resolveObject, resolveSchema, resolveForm, buildCreateDefaults, deepMerge } from '@/lib/schemaResolver';
import { calculateJmapPatch } from '@/lib/jmapPatch';
import { jmapGet, jmapSet, getAccountId } from '@/services/jmap/client';
import { friendlySetError } from '@/lib/jmapErrors';
import { friendlySetError, validationErrorMessage } from '@/lib/jmapErrors';
import type { Field, Fields, Form, FormField } from '@/types/schema';
import type { JmapSetError, JmapSetResponse } from '@/types/jmap';
@@ -88,9 +91,9 @@ export function BootstrapWizard() {
const { obj, sch } = resolved;
const ctrl = new AbortController();
setLoading(true);
(async () => {
setLoading(true);
try {
const accountId = getAccountId(obj.objectName);
const responses = await jmapGet(obj.objectName, accountId, ['singleton'], fetchProperties, ctrl.signal);
@@ -181,19 +184,7 @@ export function BootstrapWizard() {
for (const ve of error.validationErrors) {
const top = ve.property?.split('/')[0] ?? '';
if (!top) continue;
const msg =
ve.type === 'Required'
? t('form.required', 'This field is required.')
: ve.type === 'MaxLength'
? t('form.maxLengthIs', 'Maximum length is {{max}}.', { max: ve.required })
: ve.type === 'MinLength'
? t('form.minLengthIs', 'Minimum length is {{min}}.', { min: ve.required })
: ve.type === 'MaxValue'
? t('form.maxValueIs', 'Maximum value is {{max}}.', { max: ve.required })
: ve.type === 'MinValue'
? t('form.minValueIs', 'Minimum value is {{min}}.', { min: ve.required })
: t('form.invalidValue', 'Invalid value.');
record(top, msg);
record(top, validationErrorMessage(ve));
}
}
@@ -345,7 +336,7 @@ export function BootstrapWizard() {
<WizardShell>
<div className="space-y-6">
<div>
<h2 className="text-2xl font-semibold tracking-tight">{t('bootstrap.welcome', 'Welcome to Stalwart')}</h2>
<h2 className="text-2xl font-semibold tracking-tight">{t('bootstrap.welcome', 'Welcome to INBUXA')}</h2>
<p className="text-sm text-muted-foreground mt-1">
{t('bootstrap.welcomeSubtitle', "Let's get your server set up.")}
</p>
@@ -480,7 +471,7 @@ function SuccessScreen({
'bootstrap.credentialsCreated',
'Your administrator account has been created. Write these down now: the password will not be shown again.',
)
: t('bootstrap.configuredSuccessfully', 'Stalwart has been configured successfully.')}
: t('bootstrap.configuredSuccessfully', 'INBUXA has been configured successfully.')}
</p>
</div>
</div>
@@ -512,7 +503,7 @@ function SuccessScreen({
<span className="font-medium">{t('bootstrap.nextStepLabel', 'Next step:')}</span>{' '}
{t(
'bootstrap.nextStepBody',
'restart Stalwart for the new configuration to take effect. Once restarted, sign in with the credentials above to continue administering your server.',
'restart INBUXA for the new configuration to take effect. Once restarted, sign in with the credentials above to continue administering your server.',
)}
</p>
</div>
+87
View File
@@ -0,0 +1,87 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
import { friendlyName, getActionInfo, getObjectKind, useGlobalSearch } from '@/hooks/useGlobalSearch';
import type { SearchIndexEntry } from '@/stores/schemaStore';
interface CommandPaletteProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
const { t } = useTranslation();
const closePalette = useCallback(() => onOpenChange(false), [onOpenChange]);
const { query, setQuery, debouncedQuery, groups, selectEntry, reset, schema } = useGlobalSearch(closePalette);
const groupLabels: Record<SearchIndexEntry['type'], string> = useMemo(
() => ({
link: t('globalSearch.pages', 'Pages'),
form: t('globalSearch.formSections', 'Form Sections'),
field: t('globalSearch.fields', 'Fields'),
}),
[t],
);
useEffect(() => {
if (!open) reset();
}, [open, reset]);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="top-[15%] translate-y-0 overflow-hidden p-0" showCloseButton={false}>
<DialogTitle className="sr-only">{t('globalSearch.title', 'Search')}</DialogTitle>
<Command
shouldFilter={false}
loop
className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
>
<CommandInput
placeholder={t('globalSearch.placeholder', 'Search pages, fields, settings...')}
value={query}
onValueChange={setQuery}
trailing={
<kbd className="pointer-events-none ml-2 inline-flex h-5 shrink-0 select-none items-center rounded-md border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
ESC
</kbd>
}
/>
<CommandList>
<CommandEmpty>
{debouncedQuery.trim()
? t('globalSearch.noResults', 'No results found.')
: t('globalSearch.typeToSearch', 'Type to search the admin panel.')}
</CommandEmpty>
{Array.from(groups.entries()).map(([type, entries]) => (
<CommandGroup key={type} heading={groupLabels[type]}>
{entries.map((entry, idx) => {
const objectKind = schema ? getObjectKind(schema, entry.viewName) : null;
const { label: actionLabel, Icon: ActionIcon } = getActionInfo(entry.type, objectKind, t);
const itemValue = `${type}-${idx}-${entry.viewName}`;
return (
<CommandItem key={itemValue} value={itemValue} onSelect={() => selectEntry(entry)}>
<ActionIcon className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
<div className="flex flex-1 flex-col overflow-hidden">
<span className="truncate font-medium">{friendlyName(entry.text)}</span>
<span className="truncate text-xs text-muted-foreground">{entry.breadcrumb}</span>
</div>
<span className="ml-auto shrink-0 pl-2 text-xs text-muted-foreground">{actionLabel}</span>
</CommandItem>
);
})}
</CommandGroup>
))}
</CommandList>
</Command>
</DialogContent>
</Dialog>
);
}
+20
View File
@@ -0,0 +1,20 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ReactNode } from 'react';
import inbuxaMark from '@/assets/inbuxa-mark.png';
/** Nothing to show yet: the cat, a line saying so, and what to do about it. */
export function EmptyState({ title, hint, action }: { title: ReactNode; hint?: ReactNode; action?: ReactNode }) {
return (
<div className="flex flex-col items-center gap-2 px-6 py-12 text-center">
<img src={inbuxaMark} alt="" className="mb-1 h-14 w-auto opacity-90 grayscale-[15%]" />
<p className="font-display text-base font-semibold text-foreground">{title}</p>
{hint && <p className="max-w-sm text-sm text-muted-foreground">{hint}</p>}
{action && <div className="mt-2">{action}</div>}
</div>
);
}
+12 -35
View File
@@ -1,47 +1,24 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useTranslation } from 'react-i18next';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
interface EnterpriseUpsellProps {
open: boolean;
onClose: () => void;
}
export function EnterpriseUpsell({ open, onClose }: EnterpriseUpsellProps) {
const { t } = useTranslation();
return (
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('enterprise.trialTitle')}</DialogTitle>
<DialogDescription>{t('enterprise.trialDescription')}</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={onClose}>
{t('common.close')}
</Button>
<Button asChild>
<a href="https://license.stalw.art/trial" target="_blank" rel="noopener noreferrer">
{t('enterprise.trialButton')}
</a>
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
/**
* INBUXA: nothing to sell. There is one edition, every feature is in it, and
* the edition is never anything but complete (see accountStore), so this
* never opens. It stays as an empty component so the places upstream calls
* it from merge without conflicts.
*/
export function EnterpriseUpsell({ open }: EnterpriseUpsellProps) {
void open;
return null;
}
-240
View File
@@ -1,240 +0,0 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Search, List, Settings, Plus } from 'lucide-react';
import { useSchemaStore, type SearchIndexEntry } from '@/stores/schemaStore';
import { useAccountStore } from '@/stores/accountStore';
import { resolveObject } from '@/lib/schemaResolver';
import type { Schema } from '@/types/schema';
const MAX_RESULTS = 15;
const TYPE_ORDER: Record<SearchIndexEntry['type'], number> = {
link: 0,
form: 1,
field: 2,
};
function getObjectKind(schema: Schema, viewName: string): 'singleton' | 'object' | null {
const resolved = resolveObject(schema, viewName);
if (!resolved) return null;
return resolved.objectType.type === 'singleton' ? 'singleton' : 'object';
}
function getActionInfo(
entryType: SearchIndexEntry['type'],
objectKind: 'singleton' | 'object' | null,
t: (key: string, fallback: string) => string,
): { label: string; Icon: typeof List } {
if (entryType === 'link') {
return objectKind === 'singleton'
? { label: t('globalSearch.settings', 'Settings'), Icon: Settings }
: { label: t('globalSearch.list', 'List'), Icon: List };
}
return objectKind === 'singleton'
? { label: t('globalSearch.settings', 'Settings'), Icon: Settings }
: { label: t('globalSearch.create', 'Create'), Icon: Plus };
}
function getNavigationPath(
entryType: SearchIndexEntry['type'],
objectKind: 'singleton' | 'object' | null,
section: string,
viewName: string,
): string {
const encodedView = viewName;
if (entryType === 'link') {
return objectKind === 'singleton' ? `/${section}/${encodedView}/singleton` : `/${section}/${encodedView}`;
}
return objectKind === 'singleton' ? `/${section}/${encodedView}/singleton` : `/${section}/${encodedView}/new`;
}
function friendlyName(viewName: string): string {
const stripped = viewName.replace(/^x:/, '');
const parts = stripped.split('/');
return parts[parts.length - 1];
}
export function GlobalSearch() {
const { t } = useTranslation();
const navigate = useNavigate();
const GROUP_LABELS: Record<SearchIndexEntry['type'], string> = {
link: t('globalSearch.pages', 'Pages'),
form: t('globalSearch.formSections', 'Form Sections'),
field: t('globalSearch.fields', 'Fields'),
};
const [query, setQuery] = useState('');
const [debouncedQuery, setDebouncedQuery] = useState('');
const [dropdownOpen, setDropdownOpen] = useState(false);
const [activeIndex, setActiveIndex] = useState(-1);
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const schema = useSchemaStore((s) => s.schema);
const searchIndex = useSchemaStore((s) => s.searchIndex);
const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
const handleQueryChange = useCallback((value: string) => {
setQuery(value);
setActiveIndex(-1);
if (timerRef.current) clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => setDebouncedQuery(value), 300);
}, []);
useEffect(() => {
return () => {
if (timerRef.current) clearTimeout(timerRef.current);
};
}, []);
useEffect(() => {
function handleClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setDropdownOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const results = useMemo(() => {
if (!debouncedQuery.trim() || !schema) return [];
const tokens = debouncedQuery
.toLowerCase()
.split(/\s+/)
.filter((s) => s.length > 0);
if (tokens.length === 0) return [];
const filtered = searchIndex.filter((entry) => {
const haystack = (entry.text + ' ' + (entry.keywords?.join(' ') ?? '')).toLowerCase();
for (const token of tokens) {
if (!haystack.includes(token)) return false;
}
const resolved = resolveObject(schema, entry.viewName);
if (!resolved) return false;
return hasObjectPermission(resolved.permissionPrefix, 'Get');
});
filtered.sort((a, b) => TYPE_ORDER[a.type] - TYPE_ORDER[b.type]);
return filtered.slice(0, MAX_RESULTS);
}, [debouncedQuery, searchIndex, schema, hasObjectPermission]);
const groups = useMemo(() => {
const map = new Map<SearchIndexEntry['type'], SearchIndexEntry[]>();
for (const entry of results) {
const arr = map.get(entry.type);
if (arr) arr.push(entry);
else map.set(entry.type, [entry]);
}
return map;
}, [results]);
const handleSelect = useCallback(
(entry: SearchIndexEntry) => {
if (!schema) return;
const objectKind = getObjectKind(schema, entry.viewName);
const path = getNavigationPath(entry.type, objectKind, entry.section, entry.viewName);
setDropdownOpen(false);
setQuery('');
setDebouncedQuery('');
navigate(path);
},
[schema, navigate],
);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (!dropdownOpen || results.length === 0) return;
if (e.key === 'ArrowDown') {
e.preventDefault();
setActiveIndex((i) => (i + 1) % results.length);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActiveIndex((i) => (i - 1 + results.length) % results.length);
} else if (e.key === 'Enter' && activeIndex >= 0) {
e.preventDefault();
handleSelect(results[activeIndex]);
} else if (e.key === 'Escape') {
setDropdownOpen(false);
}
},
[dropdownOpen, results, activeIndex, handleSelect],
);
const showDropdown = dropdownOpen && debouncedQuery.trim().length > 0;
return (
<div className="flex flex-1 items-center justify-center px-4" ref={containerRef}>
<div className="relative w-full max-w-md">
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<input
ref={inputRef}
type="text"
value={query}
onChange={(e) => {
handleQueryChange(e.target.value);
setDropdownOpen(true);
}}
onFocus={() => {
if (query.trim()) setDropdownOpen(true);
}}
onKeyDown={handleKeyDown}
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pl-9 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
/>
{showDropdown && (
<div className="absolute top-full left-0 z-50 mt-1 w-full rounded-md border bg-popover shadow-lg">
{results.length === 0 ? (
<div className="px-3 py-4 text-center text-sm text-muted-foreground">
{t('globalSearch.noResults', 'No results found.')}
</div>
) : (
<div className="max-h-80 overflow-y-auto py-1">
{Array.from(groups.entries()).map(([type, entries]) => (
<div key={type}>
<div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">{GROUP_LABELS[type]}</div>
{entries.map((entry) => {
const flatIdx = results.indexOf(entry);
const objectKind = schema ? getObjectKind(schema, entry.viewName) : null;
const { label: actionLabel, Icon: ActionIcon } = getActionInfo(entry.type, objectKind, t);
return (
<button
key={`${type}-${entry.viewName}-${flatIdx}`}
type="button"
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-accent ${
flatIdx === activeIndex ? 'bg-accent' : ''
}`}
onMouseDown={(e) => {
e.preventDefault();
handleSelect(entry);
}}
onMouseEnter={() => setActiveIndex(flatIdx)}
>
<ActionIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
<div className="flex flex-1 flex-col overflow-hidden">
<span className="truncate font-medium">{friendlyName(entry.text)}</span>
<span className="truncate text-xs text-muted-foreground">{entry.breadcrumb}</span>
</div>
<span className="shrink-0 text-xs text-muted-foreground">{actionLabel}</span>
</button>
);
})}
</div>
))}
</div>
)}
</div>
)}
</div>
</div>
);
}
+55
View File
@@ -0,0 +1,55 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { createElement } from 'react';
import * as LucideIcons from 'lucide-react';
import { cn } from '@/lib/utils';
import { toneFor, type Tone } from '@/lib/iconTones';
const TONE_CLASSES: Record<Tone, string> = {
teal: 'bg-teal-500/15 text-teal-700 dark:bg-teal-400/15 dark:text-teal-300',
orange: 'bg-orange-400/20 text-orange-700 dark:bg-orange-400/15 dark:text-orange-300',
sky: 'bg-sky-500/15 text-sky-700 dark:bg-sky-400/15 dark:text-sky-300',
violet: 'bg-violet-500/15 text-violet-700 dark:bg-violet-400/15 dark:text-violet-300',
rose: 'bg-rose-500/15 text-rose-700 dark:bg-rose-400/15 dark:text-rose-300',
amber: 'bg-amber-400/20 text-amber-700 dark:bg-amber-400/15 dark:text-amber-300',
emerald: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-400/15 dark:text-emerald-300',
indigo: 'bg-indigo-500/15 text-indigo-700 dark:bg-indigo-400/15 dark:text-indigo-300',
slate: 'bg-slate-500/15 text-slate-700 dark:bg-slate-400/15 dark:text-slate-300',
};
function iconComponent(name: string): LucideIcons.LucideIcon {
const pascal = name
.split('-')
.map((s) => (s ? s[0].toUpperCase() + s.slice(1) : s))
.join('');
return ((LucideIcons as Record<string, unknown>)[pascal] as LucideIcons.LucideIcon | undefined) ?? LucideIcons.Circle;
}
/**
* A section's icon on a small colored tile. The color comes from what the
* section is about (see iconTones), so the same kind of thing looks the same
* everywhere, and a glance at the color finds it.
*/
export function IconTile({
name,
size = 'md',
className,
}: {
name: string;
size?: 'sm' | 'md' | 'lg';
className?: string;
}) {
const box = size === 'sm' ? 'h-6 w-6 rounded-md' : size === 'lg' ? 'h-10 w-10 rounded-xl' : 'h-7 w-7 rounded-lg';
const glyph = size === 'sm' ? 'h-3.5 w-3.5' : size === 'lg' ? 'h-5 w-5' : 'h-4 w-4';
return (
<span
className={cn('inline-flex shrink-0 items-center justify-center', box, TONE_CLASSES[toneFor(name)], className)}
>
{createElement(iconComponent(name), { className: glyph, strokeWidth: 2, 'aria-hidden': true })}
</span>
);
}
+26
View File
@@ -0,0 +1,26 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';
import inbuxaMark from '@/assets/inbuxa-mark.png';
export function LoadingFallback({ fullScreen = false }: { fullScreen?: boolean }) {
const { t } = useTranslation();
return (
<div className={cn('flex flex-col items-center justify-center gap-3', fullScreen ? 'min-h-screen' : 'p-8')}>
<img src={inbuxaMark} alt="" className="h-12 w-auto animate-bounce [animation-duration:1.4s]" />
<p className="flex items-center gap-2 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin text-primary" />
{t('common.loading')}
</p>
</div>
);
}
+43 -46
View File
@@ -1,29 +1,58 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useState, useEffect } from 'react';
import { useEffect, useSyncExternalStore } from 'react';
import { useTranslation } from 'react-i18next';
import { getApiBaseUrl } from '@/services/api';
import { getLogoState, loadLogoOnce, subscribeToLogo } from '@/lib/logoCache';
import inbuxaMark from '@/assets/inbuxa-mark.png';
export function DefaultLogo() {
const { t } = useTranslation();
// The INBUXA compact lockup: the mark as an image, the wordmark as vector
// paths in the current text color, so it reads on light and dark themes.
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="95 84 500 90"
aria-label={t('logo.stalwartAlt', 'Stalwart Logo')}
viewBox="165 35 616 130"
aria-label={t('logo.inbuxaAlt', 'INBUXA')}
className="h-7 w-auto max-w-[320px]"
>
<image x="165.85" y="35.00" width="109.39" height="130.00" href={inbuxaMark} />
<path
className="fill-current"
d="M227.8 143.6c.3 4.2 2.1 7.6 5.1 10.1 3.1 2.5 7.1 3.8 12.1 3.8 4.3 0 7.9-.9 10.5-2.8 2.7-1.9 4-4.5 4-7.8 0-2.4-.7-4.3-2.2-5.7-1.5-1.4-3.4-2.5-6-3.2-2.5-.7-6-1.5-10.6-2.3-4.6-.8-8.6-1.9-11.9-3.2-3.3-1.3-6-3.3-8.1-6.1-2.1-2.7-3.1-6.3-3.1-10.7 0-4.1 1.1-7.7 3.2-10.9s5.1-5.7 9-7.4c3.8-1.8 8.2-2.6 13.2-2.6 5.1 0 9.6 1 13.7 2.9 4 1.9 7.2 4.5 9.5 7.8s3.6 7.1 3.8 11.4h-11.5c-.4-3.7-2-6.6-4.8-8.9-2.8-2.2-6.3-3.4-10.6-3.4-4.1 0-7.5.9-9.9 2.7-2.5 1.8-3.7 4.3-3.7 7.6 0 2.3.7 4.1 2.2 5.5 1.5 1.4 3.4 2.4 5.9 3.1 2.4.7 5.9 1.4 10.5 2.2 4.6.8 8.6 1.9 11.9 3.3 3.3 1.4 6 3.4 8.2 6 2.1 2.6 3.2 6.1 3.2 10.5 0 4.2-1.1 8-3.4 11.3-2.2 3.3-5.4 5.9-9.4 7.8-4 1.9-8.6 2.8-13.7 2.8-5.6 0-10.6-1-14.9-3.1-4.3-2-7.6-4.9-10-8.5-2.4-3.6-3.7-7.8-3.7-12.5l11.5.3zM278.5 102.1l11-2.1v14.6h12.6v9.7h-12.6v27.2c0 2 .4 3.5 1.2 4.3.8.9 2.2 1.3 4.2 1.3h8.4v9.7h-10.6c-5 0-8.6-1.2-10.8-3.5-2.2-2.3-3.4-5.9-3.4-10.7v-50.5zM356.8 114.6v52.2h-9.7l-1.2-7.9c-1.8 2.6-4.2 4.7-7 6.2-2.9 1.6-6.2 2.3-10 2.3-4.8 0-9-1.1-12.7-3.2-3.7-2.1-6.7-5.2-8.8-9.3-2.1-4-3.2-8.8-3.2-14.2 0-5.3 1.1-10 3.2-14s5.1-7.2 8.8-9.4c3.7-2.2 7.9-3.3 12.6-3.3 3.9 0 7.2.7 10.1 2.2 2.9 1.5 5.2 3.5 6.9 6.1l1.3-7.6h9.7zm-15.1 38.7c2.8-3.2 4.2-7.3 4.2-12.4 0-5.2-1.4-9.4-4.2-12.6-2.8-3.3-6.5-4.9-11-4.9-4.6 0-8.2 1.6-11 4.8-2.8 3.2-4.2 7.4-4.2 12.5 0 5.2 1.4 9.4 4.2 12.6 2.8 3.2 6.5 4.8 11 4.8s8.2-1.6 11-4.8zM365.5 97.5l11-2.1v71.3h-11V97.5zM380.3 114.6h11.6l11.9 39.9 11.9-39.9h10.1l11.4 39.9 12.3-39.9h11.2l-17.3 52.2h-11.8l-11-35.5-11.4 35.5-11.9.1-17-52.3zM513.7 114.6v52.2H504l-1.2-7.9c-1.8 2.6-4.2 4.7-7 6.2-2.9 1.6-6.2 2.3-10 2.3-4.8 0-9-1.1-12.7-3.2-3.7-2.1-6.7-5.2-8.8-9.3-2.1-4-3.2-8.8-3.2-14.2 0-5.3 1.1-10 3.2-14s5.1-7.2 8.8-9.4c3.7-2.2 7.9-3.3 12.6-3.3 3.9 0 7.2.7 10.1 2.2 2.9 1.5 5.2 3.5 6.9 6.1l1.3-7.6h9.7zm-15.1 38.7c2.8-3.2 4.2-7.3 4.2-12.4 0-5.2-1.4-9.4-4.2-12.6-2.8-3.3-6.5-4.9-11-4.9-4.6 0-8.2 1.6-11 4.8-2.8 3.2-4.2 7.4-4.2 12.5 0 5.2 1.4 9.4 4.2 12.6 2.8 3.2 6.5 4.8 11 4.8 4.6 0 8.2-1.6 11-4.8zM551.3 114.6v10.3h-4.9c-4.6 0-7.8 1.5-9.9 4.4-2 3-3.1 6.7-3.1 11.3v26.2h-11v-52.2h9.8l1.2 7.8c1.5-2.4 3.4-4.4 5.8-5.8 2.4-1.4 5.6-2.1 9.6-2.1h2.5zM556.3 102.1l11-2.1v14.6h12.6v9.7h-12.6v27.2c0 2 .4 3.5 1.2 4.3.8.9 2.2 1.3 4.2 1.3h8.4v9.7h-10.6c-5 0-8.6-1.2-10.8-3.5s-3.4-5.9-3.4-10.7v-50.5z"
d="M70 0V496H196V0ZM133 554Q99 554 75.5 576.0Q52 598 52 634Q52 670 75.5 692.0Q99 714 133 714Q168 714 191.0 692.0Q214 670 214 634Q214 598 191.0 576.0Q168 554 133 554Z"
transform="translate(303.25,151.90) scale(0.150000,-0.150000)"
/>
<path
fill="#db2d54"
d="M149.1 84.7h-4.8l-44.8 25.9v8.3l44.8 25.9h4.8l44.8-25.9v-8.3l-44.8-25.9zm32.9 30h-35.3V94.4l35.3 20.3zm-35.3 20.4-35.3-20.4 27-15.6v20.2l6.3 3.6h22.9l-20.9 12.2zM99.5 129.9v11l44.8 25.9h4.8l44.8-25.9v-11l-47.2 27.3zM187.3 166.8l6.6-3.8v-11l-25.7 14.8zM99.5 163l6.6 3.8h19.1L99.5 152z"
className="fill-current"
d="M70 0V496H194V431H212Q224 457 257.0 480.5Q290 504 357 504Q415 504 458.5 477.5Q502 451 526.0 404.5Q550 358 550 296V0H424V286Q424 342 396.5 370.0Q369 398 318 398Q260 398 228.0 359.5Q196 321 196 252V0Z"
transform="translate(340.15,151.90) scale(0.150000,-0.150000)"
/>
<path
className="fill-current"
d="M368 -14Q301 -14 265.0 9.0Q229 32 212 60H194V0H70V700H196V439H214Q225 457 243.5 473.0Q262 489 292.5 499.5Q323 510 368 510Q428 510 479.0 480.5Q530 451 561.0 394.0Q592 337 592 256V240Q592 159 561.0 102.0Q530 45 479.0 15.5Q428 -14 368 -14ZM330 96Q388 96 427.0 133.5Q466 171 466 243V253Q466 325 427.5 362.5Q389 400 330 400Q272 400 233.0 362.5Q194 325 194 253V243Q194 171 233.0 133.5Q272 96 330 96Z"
transform="translate(429.55,151.90) scale(0.150000,-0.150000)"
/>
<path
className="fill-current"
d="M259 -8Q201 -8 157.5 18.5Q114 45 90.0 92.0Q66 139 66 200V496H192V210Q192 154 219.5 126.0Q247 98 298 98Q356 98 388.0 136.5Q420 175 420 244V496H546V0H422V65H404Q392 40 359.0 16.0Q326 -8 259 -8Z"
transform="translate(522.25,151.90) scale(0.150000,-0.150000)"
/>
<path
className="fill-current"
d="M26 0 206 250 28 496H174L287 331H305L418 496H564L386 250L566 0H418L305 167H287L174 0Z"
transform="translate(611.65,151.90) scale(0.150000,-0.150000)"
/>
<path
className="fill-current"
d="M224 -14Q171 -14 129.0 4.5Q87 23 62.5 58.5Q38 94 38 145Q38 196 62.5 230.5Q87 265 130.5 282.5Q174 300 230 300H366V328Q366 363 344.0 385.5Q322 408 274 408Q227 408 204.0 386.5Q181 365 174 331L58 370Q70 408 96.5 439.5Q123 471 167.5 490.5Q212 510 276 510Q374 510 431.0 461.0Q488 412 488 319V134Q488 104 516 104H556V0H472Q435 0 411.0 18.0Q387 36 387 66V67H368Q364 55 350.0 35.5Q336 16 306.0 1.0Q276 -14 224 -14ZM246 88Q299 88 332.5 117.5Q366 147 366 196V206H239Q204 206 184.0 191.0Q164 176 164 149Q164 122 185.0 105.0Q206 88 246 88Z"
transform="translate(697.45,151.90) scale(0.150000,-0.150000)"
/>
</svg>
);
@@ -31,50 +60,18 @@ export function DefaultLogo() {
export default function Logo() {
const { t } = useTranslation();
const [logoUrl, setLogoUrl] = useState<string | null>(null);
const [failed, setFailed] = useState(false);
const logo = useSyncExternalStore(subscribeToLogo, getLogoState, getLogoState);
useEffect(() => {
const controller = new AbortController();
async function fetchLogo() {
try {
const response = await fetch(`${getApiBaseUrl()}/logo`, {
signal: controller.signal,
});
const contentType = response.headers.get('content-type') ?? '';
if (response.ok && contentType.startsWith('image/')) {
const blob = await response.blob();
if (!controller.signal.aborted) {
const url = URL.createObjectURL(blob);
setLogoUrl(url);
}
} else {
if (!controller.signal.aborted) setFailed(true);
}
} catch {
if (!controller.signal.aborted) setFailed(true);
}
}
fetchLogo();
return () => {
controller.abort();
};
loadLogoOnce();
}, []);
useEffect(() => {
return () => {
if (logoUrl) {
URL.revokeObjectURL(logoUrl);
}
};
}, [logoUrl]);
if (logo.status === 'custom') {
return <img src={logo.url} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
}
if (logoUrl && !failed) {
return <img src={logoUrl} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
if (logo.status === 'loading') {
return <span className="block h-7 w-[140px]" aria-hidden="true" />;
}
return <DefaultLogo />;
+11 -3
View File
@@ -48,8 +48,14 @@ export function ObjectPicker({ schema, objectName, value, onChange, onClear, pla
return (
<div className="flex items-center gap-2 flex-wrap">
{value && (
<Badge variant="secondary" className="gap-1 pr-1.5 text-sm">
{labelLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : (display ?? value)}
<Badge variant="secondary" className="gap-1 pr-1.5 text-sm max-w-xs">
{labelLoading ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : (
<span className="truncate" title={display ?? value}>
{display ?? value}
</span>
)}
{onClear && (
<button
type="button"
@@ -121,7 +127,9 @@ export function ObjectPicker({ schema, objectName, value, onChange, onClear, pla
setOpen(false);
}}
>
{opt.label}
<span className="truncate" title={opt.label}>
{opt.label}
</span>
</CommandItem>
))}
</CommandGroup>
+40
View File
@@ -0,0 +1,40 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ReactNode } from 'react';
import { IconTile } from '@/components/common/IconTile';
/**
* The top of every page: the section's tile, a title that says where you are,
* a line on what it's for, and the page's own actions on the right.
*/
export function PageHeader({
icon,
title,
subtitle,
leading,
actions,
}: {
icon?: string | null;
title: ReactNode;
subtitle?: ReactNode;
leading?: ReactNode;
actions?: ReactNode;
}) {
return (
<div className="flex flex-wrap items-start justify-between gap-4 pb-1">
<div className="flex min-w-0 items-center gap-3.5">
{leading}
{icon && <IconTile name={icon} size="lg" />}
<div className="min-w-0">
<h1 className="truncate text-2xl font-semibold leading-tight">{title}</h1>
{subtitle && <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>}
</div>
</div>
{actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
</div>
);
}
+21
View File
@@ -0,0 +1,21 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useTranslation } from 'react-i18next';
import { SOURCE_URL } from '@/lib/sourceDownload';
/**
* The AGPL's offer to everyone using this interface over the network: where
* the source is, with the running version named beside it.
*/
export function SourceLink({ className }: { className?: string }) {
const { t } = useTranslation();
return (
<a href={SOURCE_URL} target="_blank" rel="noopener noreferrer" className={className}>
{t('source.download', 'Source code ({{version}}), AGPL-3.0', { version: __APP_VERSION__ })}
</a>
);
}
@@ -4,8 +4,9 @@
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useBufferedValue } from '@/hooks/useBufferedValue';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
@@ -21,11 +22,7 @@ function BufferedExprInput({
React.InputHTMLAttributes<HTMLInputElement>,
'onChange' | 'value'
>) {
const [local, setLocal] = useState(value);
useEffect(() => {
setLocal(value);
}, [value]);
const [local, setLocal] = useBufferedValue(value);
const commit = () => {
if (local !== value) onCommit(local);
+87 -62
View File
@@ -1,10 +1,18 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { humanize } from '@/lib/humanize';
import { PageHeader } from '@/components/common/PageHeader';
import { HelpPanel } from '@/help/HelpPanel';
import { iconForView } from '@/lib/viewIcon';
import { useState, useEffect, useCallback, useMemo } from 'react';
import { flushSync } from 'react-dom';
import { useNavigate, useBlocker } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
@@ -46,10 +54,14 @@ import {
} from '@/lib/schemaResolver';
import { jmapGet, jmapSet, jmapRequest, getAccountId } from '@/services/jmap/client';
import { calculateJmapPatch } from '@/lib/jmapPatch';
import { friendlySetError } from '@/lib/jmapErrors';
import { friendlySetError, validationErrorMessage } from '@/lib/jmapErrors';
import { coerceLabel } from '@/lib/objectOptions';
import { SECRET_MASK } from '@/lib/jmapUtils';
import { toast } from '@/hooks/use-toast';
import { logFormChange } from '@/lib/debug';
import { FieldWidget } from '@/components/forms/FieldWidget';
import { DnsConnectCard } from '@/features/dns/DnsConnectCard';
import { isSieveScriptField } from '@/lib/sievepad';
import type { Field, Fields, Form, FormField, Schema } from '@/types/schema';
import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
@@ -115,6 +127,15 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
return { ...fields, properties: filtered };
}, [resolved, selectedVariant, schema]);
// INBUXA: whose fields these are, for their help ids: the variant's schema
// (x:UserAccount) when the object has variants, else the object (x:Domain).
const helpScope = useMemo(() => {
if (!resolved) return undefined;
const { sch, obj } = resolved;
if (sch.type === 'single') return obj.objectName;
return sch.variants.find((v) => v.name === selectedVariant)?.schemaName ?? obj.objectName;
}, [resolved, selectedVariant]);
const currentForm = useMemo((): Form | null => {
if (!schema || !resolved) return null;
const { obj, sch } = resolved;
@@ -164,11 +185,11 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
return Array.from(set);
}, [schema, resolved, viewName]);
useEffect(() => {
if (!schema || !resolved) return;
const { obj, sch } = resolved;
if (isCreate) {
const [prevCreateInitKey, setPrevCreateInitKey] = useState<typeof resolved | undefined>(undefined);
if (isCreate && schema && resolved) {
if (resolved !== prevCreateInitKey) {
setPrevCreateInitKey(resolved);
const { obj, sch } = resolved;
const staticFilters = resolved.list?.filtersStatic;
if (sch.type === 'multiple') {
const variantFromFilter = typeof staticFilters?.['@type'] === 'string' ? staticFilters['@type'] : undefined;
@@ -182,13 +203,19 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
setFormData(defaults);
setOriginalData(defaults);
}
return;
}
} else if (prevCreateInitKey !== undefined) {
setPrevCreateInitKey(undefined);
}
useEffect(() => {
if (!schema || !resolved || isCreate) return;
const { obj, sch } = resolved;
const ctrl = new AbortController();
setLoading(true);
(async () => {
setLoading(true);
try {
const accountId = getAccountId(obj.objectName);
const ids = isSingleton ? ['singleton'] : [objectId];
@@ -249,13 +276,14 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
const blocker = useBlocker(isDirty && !saving);
const [pendingNavAfterCreate, setPendingNavAfterCreate] = useState(false);
useEffect(() => {
if (!pendingNavAfterCreate) return;
setPendingNavAfterCreate(false);
const navigateAfterCreate = useCallback(() => {
flushSync(() => {
setOriginalData({ ...formData });
setServerCreatedProps(null);
});
const section = viewToSection[viewName] ?? '';
navigate(`/${section}/${viewName}`);
}, [pendingNavAfterCreate, viewName, viewToSection, navigate]);
}, [formData, viewToSection, viewName, navigate]);
const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
setFormData((prev) => ({ ...prev, [fieldName]: value }));
@@ -345,21 +373,10 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
if (error.validationErrors && error.validationErrors.length > 0) {
for (const ve of error.validationErrors) {
if (ve.property && currentFields?.properties[ve.property]) {
const msg =
ve.type === 'Required'
? t('form.required', 'This field is required.')
: ve.type === 'MaxLength'
? t('form.maxLengthIs', 'Maximum length is {{max}}.', { max: ve.required })
: ve.type === 'MinLength'
? t('form.minLengthIs', 'Minimum length is {{min}}.', { min: ve.required })
: ve.type === 'MaxValue'
? t('form.maxValueIs', 'Maximum value is {{max}}.', { max: ve.required })
: ve.type === 'MinValue'
? t('form.minValueIs', 'Minimum value is {{min}}.', { min: ve.required })
: t('form.invalidValue', 'Invalid value.');
newFieldErrors[ve.property] = msg;
newFieldErrors[ve.property] = validationErrorMessage(ve);
} else if (ve.property) {
setGeneralError((prev) => (prev ? `${prev}\n${ve.property}: ${ve.type}` : `${ve.property}: ${ve.type}`));
const detail = ve.value && ve.value.length > 0 ? ve.value : ve.type;
setGeneralError((prev) => (prev ? `${prev}\n${ve.property}: ${detail}` : `${ve.property}: ${detail}`));
}
}
}
@@ -467,7 +484,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
const isSecret =
fieldDef.type.type === 'string' &&
(fieldDef.type.format === 'secret' || fieldDef.type.format === 'secretText');
if (isSecret && formData[fieldName] === '*****') continue;
if (isSecret && formData[fieldName] === SECRET_MASK) continue;
createPayload[fieldName] = formData[fieldName];
}
}
@@ -530,7 +547,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
if (
fieldDef?.type.type === 'string' &&
(fieldDef.type.format === 'secret' || fieldDef.type.format === 'secretText') &&
patchValue === '*****'
patchValue === SECRET_MASK
) {
continue;
}
@@ -686,7 +703,8 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
if (!resolved || !schema) return '';
const { obj } = resolved;
if (isSingleton) return titleForm?.title ?? obj.objectType.description;
// With no form of its own, the object's description is a sentence, not a title: spell out its name instead.
if (isSingleton) return titleForm?.title ?? humanize(viewName);
const list = resolveList(schema, viewName, obj.objectName);
const name = list?.singularName ?? obj.objectType.description;
@@ -695,17 +713,18 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
const labelProp = list?.labelProperty;
if (labelProp) {
const raw = formData[labelProp];
if (typeof raw === 'string' && raw.length > 0) {
return t('form.editTitleWithValue', 'Edit {{name}}: {{value}}', { name, value: raw });
const value = coerceLabel(formData[labelProp], '');
if (value.length > 0) {
return t('form.editTitleWithValue', 'Edit {{name}}: {{value}}', { name, value });
}
}
return t('form.editTitle', 'Edit {{name}}', { name });
}, [resolved, schema, isCreate, isSingleton, formData, viewName, titleForm, t]);
const formSubtitle = useMemo(() => {
return titleForm?.subtitle;
}, [titleForm]);
if (titleForm?.subtitle) return titleForm.subtitle;
return isSingleton && !titleForm ? resolved?.obj.objectType.description : undefined;
}, [titleForm, isSingleton, resolved]);
if (!schema || !resolved) {
return (
@@ -741,18 +760,21 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
})();
const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
const scriptName = typeof formData.name === 'string' ? formData.name : '';
return (
<div className="space-y-6 max-w-4xl">
<div className="flex items-center gap-4">
<Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
<ArrowLeft className="h-5 w-5" />
</Button>
<div className="flex-1">
<h1 className="text-2xl font-semibold tracking-tight">{formTitle}</h1>
{formSubtitle && <p className="text-sm text-muted-foreground mt-1">{formSubtitle}</p>}
</div>
</div>
<div className="mx-auto max-w-4xl space-y-6">
<PageHeader
leading={
<Button type="button" variant="ghost" size="icon" className="rounded-xl" onClick={() => navigate(-1)}>
<ArrowLeft className="h-5 w-5" />
</Button>
}
icon={iconForView(schema, viewName)}
title={formTitle}
subtitle={formSubtitle}
actions={<HelpPanel viewName={viewName} title={String(formTitle ?? '')} />}
/>
{generalError && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 p-4">
@@ -769,6 +791,17 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
)}
<CardContent className={section.title ? '' : 'pt-6'}>
<div className="space-y-6">
{resolved.obj.objectName === 'x:Domain' &&
objectId &&
!readOnly &&
section.fields.some((sf) => sf.formField.name === 'dnsManagement') && (
<DnsConnectCard
domainId={objectId}
automatic={
(originalData.dnsManagement as { '@type'?: string } | undefined)?.['@type'] === 'Automatic'
}
/>
)}
{section.fields.map((sf) => {
const { formField, field, visible, enterpriseDisabled } = sf;
if (!visible) return null;
@@ -811,6 +844,10 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
readOnly={fieldReadOnly}
error={fieldError}
schema={schema}
sieveScriptName={
isSieveScriptField(resolved.obj.objectName, formField.name) ? scriptName : undefined
}
helpScope={helpScope}
/>
);
@@ -822,7 +859,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
<div className="opacity-60">{widget}</div>
</TooltipTrigger>
<TooltipContent>
<p>{t('enterprise.featureDisabled', 'This feature requires an Enterprise license.')}</p>
<p>{t('enterprise.featureDisabled', "This feature isn't available on this server.")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
@@ -937,9 +974,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
open={serverCreatedProps !== null && createdObjectId !== null}
onOpenChange={(open) => {
if (!open) {
setOriginalData({ ...formData });
setServerCreatedProps(null);
setPendingNavAfterCreate(true);
navigateAfterCreate();
}
}}
>
@@ -972,15 +1007,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
})()}
</div>
<DialogFooter>
<Button
onClick={() => {
setOriginalData({ ...formData });
setServerCreatedProps(null);
setPendingNavAfterCreate(true);
}}
>
{t('common.continue', 'Continue')}
</Button>
<Button onClick={navigateAfterCreate}>{t('common.continue', 'Continue')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
@@ -1010,7 +1037,7 @@ function buildSections(
if (!form) {
const allFields = Object.entries(fields!.properties)
.map(([name, field]) => buildRenderableField({ name, label: name }, field, isCreate, edition))
.map(([name, field]) => buildRenderableField({ name, label: humanize(name) }, field, isCreate, edition))
.filter((f): f is RenderableField => f !== null);
return [{ fields: allFields }];
}
@@ -1100,8 +1127,6 @@ function buildRenderableField(
return { formField, field, visible, enterpriseDisabled };
}
const SECRET_MASK_PLACEHOLDER = '*****';
function isOtpAuthValid(data: unknown): boolean {
if (data == null || typeof data !== 'object' || Array.isArray(data)) return true;
const obj = data as Record<string, unknown>;
@@ -1117,7 +1142,7 @@ function isOtpAuthValid(data: unknown): boolean {
const otpUrl = obj.otpUrl;
const otpCode = obj.otpCode;
if (otpUrl == null || otpUrl === '') return true;
if (otpCode == null || otpCode === '' || otpCode === SECRET_MASK_PLACEHOLDER) {
if (otpCode == null || otpCode === '' || otpCode === SECRET_MASK) {
return false;
}
return true;
+153 -122
View File
@@ -1,13 +1,19 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useState, useEffect, type KeyboardEvent } from 'react';
import { humanize } from '@/lib/humanize';
import { useState, useEffect, useMemo, type KeyboardEvent } from 'react';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import { useBufferedValue, useResetOnChange } from '@/hooks/useBufferedValue';
import { HelpTip } from '@/help/HelpTip';
import { fieldHelp } from '@/help/texts';
import { describeDefault, differsFromDefault } from '@/help/defaults';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
@@ -19,14 +25,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Combobox, type ComboboxOption } from '@/components/ui/combobox';
import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight } from 'lucide-react';
import { Calendar } from '@/components/ui/calendar';
import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as CalendarIcon } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ExpressionEditor } from '@/components/expression/ExpressionEditor';
import { OtpAuthField } from '@/components/forms/OtpAuthField';
import { SievepadButton } from '@/components/forms/SievepadButton';
import {
bytesToHuman,
humanToBytes,
@@ -37,10 +41,18 @@ import {
SIZE_UNITS,
DURATION_UNITS,
} from '@/lib/durationFormat';
import { resolveSchema, resolveVariantForm, resolveObject, buildEmbeddedDefaults } from '@/lib/schemaResolver';
import {
resolveSchema,
resolveVariantForm,
resolveObject,
buildEmbeddedDefaults,
buildNewObjectValue,
} from '@/lib/schemaResolver';
import { cn } from '@/lib/utils';
import { useAccountStore } from '@/stores/accountStore';
import { useEffectiveEdition } from '@/components/forms/FormEditionContext';
import { useObjectList, useObjectLabel, useNoPermissionMessage, type ObjectOption } from '@/lib/objectOptions';
import { SECRET_MASK } from '@/lib/jmapUtils';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
import { jmapGet, getAccountId } from '@/services/jmap/client';
@@ -54,6 +66,9 @@ export interface FieldWidgetProps {
readOnly: boolean;
error?: string;
schema: Schema;
sieveScriptName?: string;
/** INBUXA: the object or schema that owns this field, for its help id (`scope.field`). */
helpScope?: string;
}
function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optional' | null {
@@ -74,7 +89,17 @@ function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optio
export function FieldWidget(props: FieldWidgetProps) {
const { t } = useTranslation();
const { field, formField, value, onChange, readOnly, error, schema } = props;
const { field, formField, value, onChange, readOnly, error, schema, sieveScriptName, helpScope } = props;
const helpId = helpScope ? `${helpScope}.${formField.name}` : undefined;
// INBUXA: the option's default, for its tooltip, and whether it has been changed.
const defaultValue = helpScope ? schema.fields[helpScope]?.defaults?.[formField.name] : undefined;
const defaultWords = describeDefault(field, defaultValue, schema, {
on: t('field.on', 'On'),
off: t('field.off', 'Off'),
none: t('field.none', 'None'),
});
const defaultNote = defaultWords ? t('field.default', 'Default: {{value}}', { value: defaultWords }) : null;
const changed = defaultWords !== null && differsFromDefault(value, defaultValue);
const ft = field.type;
const edition = useEffectiveEdition();
@@ -127,7 +152,7 @@ export function FieldWidget(props: FieldWidgetProps) {
/>
);
case 'blobId':
return <BlobField value={value} onChange={onChange} readOnly={readOnly} />;
return <BlobField value={value} onChange={onChange} readOnly={readOnly} sieveScriptName={sieveScriptName} />;
case 'objectId':
return (
<ObjectIdField
@@ -224,13 +249,20 @@ export function FieldWidget(props: FieldWidgetProps) {
</span>
)}
</Label>
<HelpTip id={helpId} text={fieldHelp(helpId, field.description)} footnote={defaultNote} />
{changed && (
<span
className="rounded-full bg-primary/10 px-1.5 py-px text-[10px] font-medium text-primary"
title={defaultNote ?? undefined}
>
{t('field.changed', 'changed')}
</span>
)}
</div>
{field.description && (
<div className="text-xs text-muted-foreground prose prose-sm max-w-none [&_p]:m-0">
<ReactMarkdown>{field.description.replace(/\\n/g, '\n')}</ReactMarkdown>
</div>
)}
{widget}
{sieveScriptName !== undefined && ft.type === 'string' && (
<SievepadButton scriptName={sieveScriptName} source={typeof value === 'string' ? value : ''} />
)}
{error && <p className="text-xs text-destructive">{error}</p>}
</div>
);
@@ -242,11 +274,7 @@ interface BufferedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
}
function BufferedInput({ value, onCommit, onBlur, onKeyDown, ...rest }: BufferedInputProps) {
const [local, setLocal] = useState(value);
useEffect(() => {
setLocal(value);
}, [value]);
const [local, setLocal] = useBufferedValue(value);
const commit = () => {
if (local !== value) onCommit(local);
@@ -277,11 +305,7 @@ interface BufferedTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTe
}
function BufferedTextarea({ value, onCommit, onBlur, ...rest }: BufferedTextareaProps) {
const [local, setLocal] = useState(value);
useEffect(() => {
setLocal(value);
}, [value]);
const [local, setLocal] = useBufferedValue(value);
return (
<Textarea
@@ -457,15 +481,12 @@ interface SecretInputProps {
multiline: boolean;
}
const SECRET_MASK = '****';
function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLength, multiline }: SecretInputProps) {
const [visible, setVisible] = useState(false);
const [localValue, setLocalValue] = useState(() => (value === SECRET_MASK || value === '' ? '' : value));
const [isMasked, setIsMasked] = useState(() => value === SECRET_MASK);
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
useResetOnChange(value, () => {
if (value === SECRET_MASK || value === '') {
setLocalValue('');
setIsMasked(value === SECRET_MASK);
@@ -473,8 +494,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
setLocalValue(value);
setIsMasked(false);
}
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
});
const handleLocalChange = (v: string) => {
setLocalValue(v);
@@ -482,6 +502,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
};
const commit = () => {
if (isMasked && localValue === '') return;
if (localValue !== value) onChange(localValue);
};
@@ -513,6 +534,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
minLength={minLength}
maxLength={maxLength}
rows={4}
autoComplete="off"
data-1p-ignore
data-lpignore="true"
data-bwignore
className={visible ? '' : 'tracking-widest'}
style={visible ? undefined : ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)}
/>
@@ -535,6 +560,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
placeholder={displayPlaceholder}
minLength={minLength}
maxLength={maxLength}
autoComplete="off"
data-1p-ignore
data-lpignore="true"
data-bwignore
className="flex-1"
/>
{toggleBtn}
@@ -607,13 +636,7 @@ function BufferedNumberInput({
disabled,
onCommit,
}: BufferedNumberInputProps) {
const [local, setLocal] = useState<string>(value != null ? String(value) : '');
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
setLocal(value != null ? String(value) : '');
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
const [local, setLocal] = useBufferedValue(value, (v) => (v != null ? String(v) : ''));
const commit = () => {
if (local === '') {
@@ -666,13 +689,11 @@ function SizeInputEditable({ value, onChange, nullable }: Omit<SizeInputProps, '
const [unit, setUnit] = useState(initHuman.unit);
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
useResetOnChange(value, () => {
const h = bytesToHuman(typeof value === 'number' ? value : 0);
setUnit(h.unit);
setLocalStr(value == null ? '' : String(h.value));
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
});
const commit = () => {
if (localStr === '') {
@@ -771,13 +792,11 @@ function DurationInputEditable({ value, onChange, nullable }: Omit<DurationInput
const [unit, setUnit] = useState(initHuman.unit);
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
useResetOnChange(value, () => {
const h = msToHuman(typeof value === 'number' ? value : 0);
setUnit(h.unit);
setLocalStr(value == null ? '' : String(h.value));
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
});
const commit = () => {
if (localStr === '') {
@@ -842,66 +861,69 @@ interface DateTimeFieldProps {
nullable?: boolean;
}
const DATE_TIME_FORMAT = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' });
function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldProps) {
const { t } = useTranslation();
const strValue = typeof value === 'string' ? value : '';
const toLocal = (iso: string): string => {
if (!iso) return '';
try {
const d = new Date(iso);
if (isNaN(d.getTime())) return '';
return d.toISOString().slice(0, 16);
} catch {
return '';
}
};
const toIso = (local: string): string | null => {
if (!local) return nullable ? null : '';
return new Date(local).toISOString();
};
const [local, setLocal] = useState(() => toLocal(strValue));
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
setLocal(toLocal(strValue));
const selected = useMemo(() => {
const d = strValue ? new Date(strValue) : null;
return d && !isNaN(d.getTime()) ? d : null;
}, [strValue]);
/* eslint-enable react-hooks/set-state-in-effect */
const commit = () => {
const iso = toIso(local);
if (iso !== strValue) onChange(iso);
const localTime = (selected ?? new Date()).toTimeString().slice(0, 5);
const commit = (day: Date, time: string) => {
const [hours, minutes] = time.split(':').map(Number);
const next = new Date(day);
next.setHours(hours || 0, minutes || 0, 0, 0);
onChange(next.toISOString());
};
if (readOnly) {
if (!strValue) {
return <span className="text-sm text-muted-foreground italic">{t('field.notSet', 'Not set')}</span>;
}
let formatted = strValue;
try {
const d = new Date(strValue);
if (!isNaN(d.getTime())) {
formatted = new Intl.DateTimeFormat(undefined, {
dateStyle: 'medium',
timeStyle: 'short',
}).format(d);
}
// eslint-disable-next-line no-empty
} catch {}
return <span className="text-sm">{formatted}</span>;
return <span className="text-sm">{selected ? DATE_TIME_FORMAT.format(selected) : strValue}</span>;
}
return (
<div className="flex items-center gap-2">
<Input
type="datetime-local"
value={local}
onChange={(e) => setLocal(e.target.value)}
onBlur={commit}
className="flex-1"
/>
<Popover>
<PopoverTrigger asChild>
<Button
type="button"
variant="outline"
className={cn('flex-1 justify-start text-left font-normal', !selected && 'text-muted-foreground')}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{selected ? DATE_TIME_FORMAT.format(selected) : t('field.pickDate', 'Pick a date')}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={selected ?? undefined}
defaultMonth={selected ?? undefined}
autoFocus
onSelect={(day) => {
if (day) commit(day, localTime);
}}
/>
<div className="border-t p-3">
<Input
type="time"
value={localTime}
disabled={!selected}
onChange={(e) => {
if (selected && e.target.value) commit(selected, e.target.value);
}}
aria-label={t('field.time', 'Time')}
/>
</div>
</PopoverContent>
</Popover>
{nullable && strValue && (
<Button
type="button"
@@ -991,9 +1013,10 @@ interface BlobFieldProps {
value: unknown;
onChange: (value: unknown) => void;
readOnly: boolean;
sieveScriptName?: string;
}
function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
function BlobField({ value, onChange, readOnly, sieveScriptName }: BlobFieldProps) {
const { t } = useTranslation();
const blobId = typeof value === 'string' ? value : null;
const [content, setContent] = useState<string>('');
@@ -1005,9 +1028,9 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
if (!blobId || loaded) return;
let cancelled = false;
setLoading(true);
(async () => {
setLoading(true);
try {
const accountId = getAccountId('x:Blob');
const responses = await jmapGet('Blob', accountId, [blobId], ['data:asText']);
@@ -1059,6 +1082,7 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
rows={8}
className="font-mono text-xs"
/>
{sieveScriptName !== undefined && <SievepadButton scriptName={sieveScriptName} source={content} />}
{modified && (
<p className="text-xs text-muted-foreground">
{t('field.contentModified', 'Content modified (will be saved as a new blob)')}
@@ -1253,12 +1277,8 @@ function RateField({ value, onChange, readOnly, nullable }: RateFieldProps) {
const [localCount, setLocalCount] = useState(String(count));
const [localPeriod, setLocalPeriod] = useState(String(human.value));
useEffect(() => {
setLocalCount(String(count));
}, [count]);
useEffect(() => {
setLocalPeriod(String(human.value));
}, [human.value]);
useResetOnChange(count, () => setLocalCount(String(count)));
useResetOnChange(human.value, () => setLocalPeriod(String(human.value)));
const commitCount = () => {
const n = parseInt(localCount, 10);
@@ -1409,6 +1429,7 @@ function EmbeddedObjectField({
if (resolvedSchema.type === 'single') {
const fields = resolvedSchema.fields;
const helpScopeHere = resolvedSchema.schemaName ?? objectName;
const form = resolveVariantForm(schema, objectName, objectName, resolvedSchema.schemaName);
const formFields = form?.sections.flatMap((s) => s.fields) ?? [];
@@ -1427,6 +1448,7 @@ function EmbeddedObjectField({
onChange={(v) => handleFieldChange(ff.name, v)}
readOnly={readOnly}
schema={schema}
helpScope={helpScopeHere}
/>
);
})}
@@ -1437,11 +1459,12 @@ function EmbeddedObjectField({
<FieldWidget
key={name}
field={fieldDef}
formField={{ name, label: name }}
formField={{ name, label: humanize(name) }}
value={objValue[name]}
onChange={(v) => handleFieldChange(name, v)}
readOnly={readOnly}
schema={schema}
helpScope={helpScopeHere}
/>
))}
</div>
@@ -1451,6 +1474,7 @@ function EmbeddedObjectField({
const currentType = (objValue['@type'] as string) ?? resolvedSchema.variants[0]?.name ?? '';
const currentVariant = resolvedSchema.variants.find((v) => v.name === currentType);
const variantFields = currentVariant?.fields;
const helpScopeHere = currentVariant?.schemaName ?? objectName;
const variantForm = resolveVariantForm(schema, objectName, objectName, currentVariant?.schemaName);
const variantFormFields = variantForm?.sections.flatMap((s) => s.fields) ?? [];
@@ -1491,6 +1515,7 @@ function EmbeddedObjectField({
onChange={(v) => handleFieldChange(ff.name, v)}
readOnly={readOnly}
schema={schema}
helpScope={helpScopeHere}
/>
);
})}
@@ -1502,11 +1527,12 @@ function EmbeddedObjectField({
<FieldWidget
key={name}
field={fieldDef}
formField={{ name, label: name }}
formField={{ name, label: humanize(name) }}
value={objValue[name]}
onChange={(v) => handleFieldChange(name, v)}
readOnly={readOnly}
schema={schema}
helpScope={helpScopeHere}
/>
))}
</div>
@@ -1549,16 +1575,7 @@ function ObjectListField({
const addItem = () => {
const nextIndex = entries.length > 0 ? Math.max(...entries.map(([k]) => parseInt(k))) + 1 : 0;
let defaults: Record<string, unknown> = {};
if (resolvedSchema.type === 'single' && resolvedSchema.fields.defaults) {
defaults = { ...resolvedSchema.fields.defaults };
} else if (resolvedSchema.type === 'multiple' && resolvedSchema.variants[0]) {
defaults = { '@type': resolvedSchema.variants[0].name };
if (resolvedSchema.variants[0].fields?.defaults) {
defaults = { ...defaults, ...resolvedSchema.variants[0].fields.defaults };
}
}
onChange({ ...mapValue, [String(nextIndex)]: defaults });
onChange({ ...mapValue, [String(nextIndex)]: buildNewObjectValue(schema, objectName) });
};
const removeItem = (key: string) => {
@@ -1979,6 +1996,29 @@ function ObjectIdMultiSelectPill({
);
}
function MapEntryKeyLabel({ keyClass, keyValue, schema }: { keyClass: ScalarType; keyValue: string; schema: Schema }) {
if (keyClass.type === 'enum') {
const variants = schema.enums[keyClass.enumName] ?? [];
const variant = variants.find((v) => v.name === keyValue);
return <>{variant?.label ?? keyValue}</>;
}
if (keyClass.type === 'objectId') {
return <ObjectIdKeyLabel objectName={keyClass.objectName} keyValue={keyValue} schema={schema} />;
}
return <>{keyValue}</>;
}
function ObjectIdKeyLabel({ objectName, keyValue, schema }: { objectName: string; keyValue: string; schema: Schema }) {
const list = useObjectList(objectName, schema);
const fromList = list.options.find((o) => o.id === keyValue)?.label;
const { label: cheapLabel, loading } = useObjectLabel(objectName, fromList ? null : keyValue, schema);
const display = fromList ?? cheapLabel;
if (loading && !display) {
return <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />;
}
return <>{display ?? keyValue}</>;
}
interface MapFieldProps {
keyClass: ScalarType;
valueClass: MapValueType;
@@ -2008,7 +2048,7 @@ function MapField({ keyClass, valueClass, value, onChange, readOnly, schema, min
if (valueClass.type === 'number') {
defaultValue = 0;
} else if (valueClass.type === 'object') {
defaultValue = {};
defaultValue = buildNewObjectValue(schema, valueClass.objectName);
}
onChange({ ...mapValue, [key]: defaultValue });
@@ -2038,15 +2078,6 @@ function MapField({ keyClass, valueClass, value, onChange, readOnly, schema, min
}
};
const getKeyLabel = (key: string): string => {
if (keyClass.type === 'enum') {
const variants = schema.enums[keyClass.enumName] ?? [];
const variant = variants.find((v) => v.name === key);
if (variant) return variant.label;
}
return key;
};
const existingKeys = new Set(Object.keys(mapValue));
return (
@@ -2063,7 +2094,7 @@ function MapField({ keyClass, valueClass, value, onChange, readOnly, schema, min
className="flex flex-1 items-center gap-2 p-3 text-sm font-medium hover:bg-accent/50 rounded-t-md transition-colors [&[data-state=closed]>svg]:rotate-0 [&[data-state=open]>svg]:rotate-90"
>
<ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200" />
{getKeyLabel(key)}
<MapEntryKeyLabel keyClass={keyClass} keyValue={key} schema={schema} />
</button>
</CollapsibleTrigger>
{!readOnly && (
+56 -9
View File
@@ -1,18 +1,23 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import * as OTPAuth from 'otpauth';
import QRCode from 'qrcode';
import { Loader2, ShieldCheck, ShieldOff } from 'lucide-react';
import { Check, Copy, Loader2, ShieldCheck, ShieldOff } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { toast } from '@/hooks/use-toast';
import { SECRET_MASK } from '@/lib/jmapUtils';
interface OtpAuthValue {
otpUrl?: string | null;
@@ -25,19 +30,15 @@ interface OtpAuthFieldProps {
readOnly: boolean;
}
const SECRET_MASK = '*****';
const STALWART_IMAGE_URL = 'https://stalw.art/img/favicon-32x32.png';
function buildOtpAuthUrl(totp: OTPAuth.TOTP): string {
const base = totp.toString();
const sep = base.includes('?') ? '&' : '?';
return `${base}${sep}image=${encodeURIComponent(STALWART_IMAGE_URL)}`;
// No `image` parameter: it made authenticator apps fetch a logo from a
// third-party site each time someone set up two-factor.
return totp.toString();
}
function generateTotp(): { totp: OTPAuth.TOTP; url: string } {
const totp = new OTPAuth.TOTP({
issuer: 'Stalwart',
issuer: 'INBUXA',
label: 'account',
algorithm: 'SHA1',
digits: 6,
@@ -57,6 +58,27 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
const [setupCode, setSetupCode] = useState('');
const [setupError, setSetupError] = useState<string | null>(null);
const [secretCopied, setSecretCopied] = useState(false);
const setupSecret = useMemo(() => {
if (!setupTotp) return null;
return setupTotp.secret.base32.replace(/(.{4})/g, '$1 ').trim();
}, [setupTotp]);
const copySecret = async () => {
if (!setupTotp) return;
try {
await navigator.clipboard.writeText(setupTotp.secret.base32);
setSecretCopied(true);
setTimeout(() => setSecretCopied(false), 1500);
} catch {
toast({
title: t('otp.copyFailed', 'Copy failed'),
description: t('otp.clipboardBlocked', 'Your browser blocked clipboard access.'),
variant: 'destructive',
});
}
};
useEffect(() => {
if (!setupUrl) return;
@@ -97,6 +119,7 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
setSetupTotp(null);
setSetupUrl(null);
setSetupCode('');
setSecretCopied(false);
};
const cancelSetup = () => {
@@ -104,6 +127,7 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
setSetupUrl(null);
setSetupCode('');
setSetupError(null);
setSecretCopied(false);
};
const otpCodeValue = useMemo(
@@ -156,6 +180,29 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
</div>
)}
</div>
{setupSecret && (
<div className="space-y-1.5">
<Label className="text-sm font-medium">{t('otp.manualEntryLabel', 'Or enter this code manually')}</Label>
<p className="text-xs text-muted-foreground">
{t(
'otp.manualEntryDescription',
'If you cannot scan the QR code, enter this secret into your authenticator app instead.',
)}
</p>
<div className="flex gap-2">
<code className="flex-1 rounded bg-muted p-2 text-sm font-mono break-all select-all">{setupSecret}</code>
<Button
type="button"
variant="outline"
size="sm"
onClick={copySecret}
aria-label={t('otp.copySecret', 'Copy secret')}
>
{secretCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</div>
)}
<div className="space-y-1.5">
<Label className="text-sm font-medium">{t('otp.confirmationCodeLabel', 'Confirmation code')}</Label>
<Input
+97
View File
@@ -0,0 +1,97 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Bug } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { toast } from '@/hooks/use-toast';
import { dismissSievepadWarning, isSievepadWarningDismissed, openInSievepad } from '@/lib/sievepad';
interface SievepadButtonProps {
scriptName: string;
source: string;
}
export function SievepadButton({ scriptName, source }: SievepadButtonProps) {
const { t } = useTranslation();
const [warningOpen, setWarningOpen] = useState(false);
const [dontShowAgain, setDontShowAgain] = useState(false);
const open = () => {
openInSievepad(scriptName || t('sievepad.defaultName', 'Sieve script'), source).catch(() => {
toast({ title: t('sievepad.failed', 'Failed to open Sievepad.'), variant: 'destructive' });
});
};
const handleClick = () => {
if (isSievepadWarningDismissed()) {
open();
} else {
setDontShowAgain(false);
setWarningOpen(true);
}
};
const handleContinue = () => {
if (dontShowAgain) dismissSievepadWarning();
setWarningOpen(false);
open();
};
return (
<>
<div className="flex justify-end">
<Button type="button" variant="outline" size="sm" onClick={handleClick} disabled={!source.trim()}>
<Bug className="h-4 w-4" />
{t('sievepad.debug', 'Debug')}
</Button>
</div>
<Dialog open={warningOpen} onOpenChange={setWarningOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('sievepad.warningTitle', 'Debug in Sievepad')}</DialogTitle>
<DialogDescription>
{t(
'sievepad.warningDescription',
'A new tab will open sievepad.com with a copy of this script. Sievepad compiles and runs the script entirely in your browser: nothing is uploaded to or stored on any server.',
)}
</DialogDescription>
</DialogHeader>
<div className="flex items-center gap-2">
<Checkbox
id="sievepad-dont-show-again"
checked={dontShowAgain}
onCheckedChange={(checked) => setDontShowAgain(checked === true)}
/>
<Label htmlFor="sievepad-dont-show-again" className="text-sm font-normal">
{t('sievepad.dontShowAgain', "Don't show this again")}
</Label>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setWarningOpen(false)}>
{t('common.cancel')}
</Button>
<Button type="button" onClick={handleContinue}>
{t('common.continue')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}
+92 -13
View File
@@ -1,10 +1,13 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useEffect } from 'react';
import { lazy, Suspense, useEffect, type ComponentType, type ReactNode } from 'react';
import { useSchemaStore } from '@/stores/schemaStore';
import { useCacheStore } from '@/stores/cacheStore';
import { useAccountStore } from '@/stores/accountStore';
@@ -12,11 +15,46 @@ import { resolveObject } from '@/lib/schemaResolver';
import { DynamicList } from '@/components/lists/DynamicList';
import { DynamicForm } from '@/components/forms/DynamicForm';
import { DynamicViewPage } from '@/components/views/DynamicViewPage';
import { DashboardView } from '@/features/dashboard/components/DashboardView';
import { DeliveryTracePage } from '@/features/troubleshoot/DeliveryTracePage';
import { LiveTracingPage } from '@/features/tracing/components/LiveTracingPage';
import { TraceDetailView } from '@/features/tracing/components/TraceDetailView';
import { ActionPage } from '@/features/actions/ActionPage';
import { LoadingFallback } from '@/components/common/LoadingFallback';
import { LegacyProtocolsBanner } from '@/features/hardening/LegacyProtocolsBanner';
import type { Schema } from '@/types/schema';
function lazyFeature<M, P>(load: () => Promise<M>, select: (module: M) => ComponentType<P>) {
return lazy(() => load().then((module) => ({ default: select(module) })));
}
const DashboardView = lazyFeature(
() => import('@/features/dashboard/components/DashboardView'),
(m) => m.DashboardView,
);
const DeliveryTracePage = lazyFeature(
() => import('@/features/troubleshoot/DeliveryTracePage'),
(m) => m.DeliveryTracePage,
);
const LiveTracingPage = lazyFeature(
() => import('@/features/tracing/components/LiveTracingPage'),
(m) => m.LiveTracingPage,
);
const TraceDetailView = lazyFeature(
() => import('@/features/tracing/components/TraceDetailView'),
(m) => m.TraceDetailView,
);
const ConnectDnsPage = lazyFeature(
() => import('@/features/dns/ConnectDnsPage'),
(m) => m.ConnectDnsPage,
);
const ActionPage = lazyFeature(
() => import('@/features/actions/ActionPage'),
(m) => m.ActionPage,
);
const LegacyProtocolsPage = lazyFeature(
() => import('@/features/hardening/LegacyProtocolsPage'),
(m) => m.LegacyProtocolsPage,
);
const TenantLegacyProtocols = lazyFeature(
() => import('@/features/hardening/TenantLegacyProtocols'),
(m) => m.TenantLegacyProtocols,
);
interface MainContentProps {
viewName?: string;
@@ -32,10 +70,12 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
invalidateAllObjectLists();
}, [viewName, invalidateAllObjectLists]);
return <Suspense fallback={<LoadingFallback />}>{renderView(schema, viewName, id, section)}</Suspense>;
}
function renderView(schema: Schema | null, viewName?: string, id?: string, section?: string): ReactNode {
if (!viewName) {
return (
<div className="flex items-center justify-center p-8 text-muted-foreground">Select a view from the sidebar.</div>
);
return <LoadingFallback />;
}
if (viewName.startsWith('Dashboard/')) {
@@ -43,6 +83,19 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
return <DashboardView dashboardId={dashboardId} section={section ?? ''} />;
}
// INBUXA: guided jobs. Always reached by choosing "Guide me", never by default.
if (viewName.startsWith('Wizard/')) {
const [, wizard, param] = viewName.split('/');
if (wizard === 'dns' && param) {
return <ConnectDnsPage domainId={param} />;
}
return (
<div className="rounded-lg border border-dashed p-12 text-center text-muted-foreground">
Unknown guide: {wizard}
</div>
);
}
if (viewName.startsWith('CustomComponent/')) {
const componentName = viewName.slice('CustomComponent/'.length);
if (componentName === 'Dashboard') {
@@ -55,6 +108,10 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
if (componentName === 'LiveTracing') {
return <LiveTracingPage />;
}
// INBUXA: Settings Security Hardening (legacy-protocols spec).
if (componentName === 'LegacyProtocols') {
return <LegacyProtocolsPage />;
}
return (
<div className="rounded-lg border border-dashed p-12 text-center text-muted-foreground">
Unknown component: {componentName}
@@ -76,6 +133,15 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
}
if (resolved.objectType.type === 'singleton') {
// INBUXA: the Security settings carry the legacy protocols banner (LP-18).
if (resolved.objectName === 'x:Security') {
return (
<div className="space-y-4">
<LegacyProtocolsBanner />
<DynamicForm viewName={viewName} objectId="singleton" />
</div>
);
}
return <DynamicForm viewName={viewName} objectId="singleton" />;
}
@@ -84,14 +150,27 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
}
if (id) {
if (resolved.objectName === 'x:Trace' && id !== 'new') {
if (resolved.objectName === 'x:Trace') {
return <TraceDetailView viewName={viewName} objectId={id} />;
}
const canUpdate = useAccountStore.getState().hasObjectPermission(resolved.permissionPrefix, 'Update');
if (!canUpdate) {
return <DynamicViewPage viewName={viewName} objectId={id} />;
const page = canUpdate ? (
<DynamicForm viewName={viewName} objectId={id} />
) : (
<DynamicViewPage viewName={viewName} objectId={id} />
);
// INBUXA: a tenant's page carries its legacy protocols switch (LP-9). A
// tenant admin reads its tenant without changing it (MT-12), and may
// still turn the switch, so it shows on the read-only page too.
if (resolved.objectName === 'x:Tenant') {
return (
<div className="space-y-4">
<TenantLegacyProtocols tenantId={id} />
{page}
</div>
);
}
return <DynamicForm viewName={viewName} objectId={id} />;
return page;
}
return <DynamicList viewName={viewName} />;
+2 -2
View File
@@ -8,10 +8,10 @@ import { Navigate, useLocation } from 'react-router-dom';
import { useAuthStore } from '@/stores/authStore';
export function ProtectedRoute({ children }: { children: React.ReactNode }) {
const accessToken = useAuthStore((s) => s.accessToken);
const authenticated = useAuthStore((s) => s.isAuthenticated());
const bypassToken = import.meta.env.VITE_ACCESS_TOKEN;
const location = useLocation();
if (!accessToken && !bypassToken) {
if (!authenticated && !bypassToken) {
const originalPath = location.pathname + location.search;
return <Navigate to="/login" replace state={{ from: originalPath }} />;
}
+336
View File
@@ -0,0 +1,336 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* INBUXA: tier two of the modern shell. Tier one is the layout switcher in the
* top bar (Management / Settings / Account, straight from `schema.layouts`);
* this bar carries the active layout's own top-level items, each container
* opening its children in a menu. No sidebar, so a list or a form gets the
* whole window width.
*
* The item count comes from the server's schema, so it is never known ahead of
* time: the bar measures its items once, then keeps whatever fits and folds the
* rest into "More". A layout too deep for a menu bar at all keeps the sidebar —
* AdminPanel decides that, not this component.
*/
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import * as LucideIcons from 'lucide-react';
const { ChevronDown, Lock, MoreHorizontal } = LucideIcons;
import { cn } from '@/lib/utils';
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useAccountStore } from '@/stores/accountStore';
import {
checkIsEnterprise,
checkLinkVisible,
pathMatchesView,
resolveViewPath,
subtreeContainsActive,
subtreeHasVisibleLink,
topItemKey,
topItemVisible,
visibleLinks,
} from '@/lib/navTree';
import type { Layout, LayoutItem, LayoutSubItem } from '@/types/schema';
/** Room kept for the "More" trigger when not everything fits. */
const MORE_WIDTH = 92;
function howManyFit(widths: number[], available: number): number {
let total = 0;
for (const w of widths) {
total += w;
if (total > available) {
let withMore = 0;
for (let j = 0; j < widths.length; j++) {
withMore += widths[j];
if (withMore + MORE_WIDTH > available) return j;
}
return widths.length;
}
}
return widths.length;
}
const TRIGGER_CLASS =
'relative flex h-12 shrink-0 items-center gap-1.5 whitespace-nowrap px-3 text-[13px] font-normal text-muted-foreground transition-colors hover:text-foreground';
const TRIGGER_ACTIVE =
"font-medium text-foreground after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:rounded-full after:bg-primary after:content-['']";
interface MenuBodyProps {
items: LayoutSubItem[];
sectionName: string;
currentPath: string;
edition: string;
onPick: (viewName: string, locked: boolean) => void;
}
/**
* A container's children. Direct links stay as items; a nested group becomes a
* label over its own links, so "Emails" reads Queued / History: Inbound,
* Outbound / Delivery tests rather than one flat list.
*/
function MenuBody({ items, sectionName, currentPath, edition, onPick }: MenuBodyProps) {
return (
<>
{items.map((sub, i) => {
if (sub.type === 'link') {
if (!checkLinkVisible(sub.viewName)) return null;
const enterprise = checkIsEnterprise(sub.viewName);
if (enterprise && edition === 'oss') return null;
const locked = enterprise && edition === 'community';
return (
<DropdownMenuItem
key={sub.viewName}
className={cn(
pathMatchesView(currentPath, sectionName, sub.viewName) && 'bg-accent text-accent-foreground',
)}
onClick={() => onPick(sub.viewName, locked)}
>
<span className="truncate">{sub.name || 'Overview'}</span>
{locked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
</DropdownMenuItem>
);
}
if (!subtreeHasVisibleLink(sub.items, edition)) return null;
const links = visibleLinks(sub.items, edition);
return (
<DropdownMenuGroup key={`${sub.name}-${i}`}>
<DropdownMenuLabel className="pt-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
{sub.name}
</DropdownMenuLabel>
{links.map((l) => (
<DropdownMenuItem
key={l.viewName}
className={cn(
pathMatchesView(currentPath, sectionName, l.viewName) && 'bg-accent text-accent-foreground',
)}
onClick={() => onPick(l.viewName, checkIsEnterprise(l.viewName) && edition === 'community')}
>
<span className="truncate">{l.name}</span>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
);
})}
</>
);
}
interface ItemProps {
item: LayoutItem;
sectionName: string;
currentPath: string;
edition: string;
onPick: (viewName: string, locked: boolean) => void;
measureRef?: (el: HTMLElement | null) => void;
}
function SectionNavItem({ item, sectionName, currentPath, edition, onPick, measureRef }: ItemProps) {
if ('link' in item) {
const { name, viewName } = item.link;
const enterprise = checkIsEnterprise(viewName);
const locked = enterprise && edition === 'community';
const isActive = pathMatchesView(currentPath, sectionName, viewName);
return (
<button
type="button"
ref={measureRef}
aria-current={isActive ? 'page' : undefined}
className={cn(TRIGGER_CLASS, isActive && TRIGGER_ACTIVE)}
onClick={() => onPick(viewName, locked)}
>
{name}
{locked && <Lock className="h-3 w-3" />}
</button>
);
}
const { name, items } = item.container;
const containsActive = subtreeContainsActive(items, currentPath, sectionName);
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
ref={measureRef}
className={cn(TRIGGER_CLASS, 'data-[state=open]:text-foreground', containsActive && TRIGGER_ACTIVE)}
>
{name}
<ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-70 transition-transform duration-200 data-[state=open]:rotate-180" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" sideOffset={0} className="w-60">
<MenuBody items={items} sectionName={sectionName} currentPath={currentPath} edition={edition} onPick={onPick} />
</DropdownMenuContent>
</DropdownMenu>
);
}
export function SectionNav({ layout }: { layout: Layout }) {
const { t } = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const edition = useAccountStore((s) => s.edition);
const [upsellOpen, setUpsellOpen] = useState(false);
const items = useMemo(() => layout.items.filter((item) => topItemVisible(item, edition)), [layout, edition]);
const scrollerRef = useRef<HTMLDivElement>(null);
const measured = useRef<number[]>([]);
const [available, setAvailable] = useState(0);
/**
* A different layout means different labels, so a measurement is only good
* for the layout it was taken on: keeping the key beside the widths retires
* the old ones without a reset pass.
*/
const measureKey = `${layout.name}|${edition}`;
const [measurement, setMeasurement] = useState<{ key: string; widths: number[] } | null>(null);
const widths = measurement?.key === measureKey ? measurement.widths : null;
/**
* Attached only while a measurement is wanted. A ref closure is new on every
* render, so React would re-run it — and force a reflow reading offsetWidth —
* on each one; leaving it off once the widths are known keeps the bar free of
* that on ordinary navigation.
*/
const measureRefFor = useCallback(
(index: number) => (el: HTMLElement | null) => {
if (el) measured.current[index] = el.offsetWidth;
},
[],
);
useLayoutEffect(() => {
if (widths !== null) return;
const seen = measured.current.slice(0, items.length);
if (seen.length !== items.length || seen.some((w) => !w)) return;
setMeasurement({ key: measureKey, widths: seen });
}, [widths, items.length, measureKey, location.pathname]);
useEffect(() => {
const el = scrollerRef.current;
if (!el) return;
setAvailable(el.clientWidth);
if (typeof ResizeObserver === 'undefined') return;
const ro = new ResizeObserver(() => setAvailable(el.clientWidth));
ro.observe(el);
return () => ro.disconnect();
}, []);
const onPick = useCallback(
(viewName: string, locked: boolean) => {
if (locked) {
setUpsellOpen(true);
return;
}
navigate(resolveViewPath(layout.name, viewName));
},
[navigate, layout.name],
);
// Before the first measurement every item renders, clipped by the scroller.
const shown = widths === null || available === 0 ? items.length : howManyFit(widths, available);
const overflowed = items.slice(shown);
return (
<nav
aria-label={layout.name}
className="sticky top-14 z-30 hidden h-12 items-stretch border-b bg-background px-4 md:flex"
>
<div ref={scrollerRef} className="flex min-w-0 flex-1 items-stretch overflow-hidden">
{items.slice(0, shown).map((item, i) => (
<SectionNavItem
key={topItemKey(item)}
item={item}
sectionName={layout.name}
currentPath={location.pathname}
edition={edition}
onPick={onPick}
measureRef={widths === null ? measureRefFor(i) : undefined}
/>
))}
</div>
{overflowed.length > 0 && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
className={cn(
TRIGGER_CLASS,
'data-[state=open]:text-foreground',
overflowed.some((item) =>
'link' in item
? pathMatchesView(location.pathname, layout.name, item.link.viewName)
: subtreeContainsActive(item.container.items, location.pathname, layout.name),
) && TRIGGER_ACTIVE,
)}
>
<MoreHorizontal className="h-4 w-4" />
{t('nav.more', 'More')}
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={0} className="w-60">
{overflowed.map((item, i) => {
if ('link' in item) {
const { name, viewName } = item.link;
const enterprise = checkIsEnterprise(viewName);
return (
<DropdownMenuItem
key={viewName}
className={cn(
pathMatchesView(location.pathname, layout.name, viewName) && 'bg-accent text-accent-foreground',
)}
onClick={() => onPick(viewName, enterprise && edition === 'community')}
>
<span className="truncate">{name}</span>
</DropdownMenuItem>
);
}
const { name, items: subItems } = item.container;
return (
<DropdownMenuGroup key={name}>
{i > 0 && <DropdownMenuSeparator />}
<DropdownMenuLabel className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
{name}
</DropdownMenuLabel>
{visibleLinks(subItems, edition).map((l) => (
<DropdownMenuItem
key={l.viewName}
className={cn(
pathMatchesView(location.pathname, layout.name, l.viewName) &&
'bg-accent text-accent-foreground',
)}
onClick={() => onPick(l.viewName, checkIsEnterprise(l.viewName) && edition === 'community')}
>
<span className="truncate">{l.name}</span>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
);
})}
</DropdownMenuContent>
</DropdownMenu>
)}
<EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
</nav>
);
}
+276 -164
View File
@@ -1,100 +1,64 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import * as LucideIcons from 'lucide-react';
const { ChevronDown, Lock } = LucideIcons;
const { ChevronDown, Lock, PanelLeftClose, PanelLeftOpen } = LucideIcons;
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { IconTile } from '@/components/common/IconTile';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { useUIStore } from '@/stores/uiStore';
import { useAccountStore } from '@/stores/accountStore';
import { useSchemaStore } from '@/stores/schemaStore';
import { visibleLayouts } from '@/lib/layout';
import {
visibleLayouts,
findFirstVisibleLinkInLayout,
findFirstAccessibleLinkInLayout,
isLinkEnterprise,
isLinkVisible,
} from '@/lib/layout';
checkIsEnterprise,
checkLinkVisible,
pathMatchesView,
resolveViewPath,
subtreeContainsActive,
subtreeHasVisibleLink,
visibleLinks,
} from '@/lib/navTree';
import type { Layout, LayoutItem, LayoutSubItem } from '@/types/schema';
function LucideIcon({ name, className }: { name: string; className?: string }) {
const formatted = name
.split('-')
.map((s) => s[0].toUpperCase() + s.slice(1))
.join('');
const IconComp = (LucideIcons as Record<string, unknown>)[formatted] as LucideIcons.LucideIcon | undefined;
if (!IconComp) return <LucideIcons.Circle className={className} />;
return <IconComp className={className} />;
interface AutoOpenCollapsibleProps {
containsActive: boolean;
children: React.ReactNode;
}
function resolveViewPath(sectionName: string, viewName: string): string {
return `/${sectionName}/${viewName}`;
}
function pathMatchesView(currentPath: string, sectionName: string, viewName: string): boolean {
const base = `/${sectionName}/${viewName}`;
if (currentPath === base || currentPath.startsWith(`${base}/`)) return true;
if (viewName === 'CustomComponent/Dashboard') {
const dashBase = `/${sectionName}/Dashboard/`;
return currentPath.startsWith(dashBase);
function AutoOpenCollapsible({ containsActive, children }: AutoOpenCollapsibleProps) {
const [open, setOpen] = useState(containsActive);
const [prevContainsActive, setPrevContainsActive] = useState(containsActive);
if (containsActive !== prevContainsActive) {
setPrevContainsActive(containsActive);
if (containsActive) setOpen(true);
}
return false;
}
function subtreeContainsActive(items: LayoutSubItem[], currentPath: string, sectionName: string): boolean {
for (const item of items) {
if (item.type === 'link') {
if (pathMatchesView(currentPath, sectionName, item.viewName)) return true;
} else if (item.type === 'container') {
if (subtreeContainsActive(item.items, currentPath, sectionName)) return true;
}
}
return false;
}
function subtreeHasVisibleLink(items: LayoutSubItem[], edition: string): boolean {
for (const item of items) {
if (item.type === 'link') {
if (!checkLinkVisible(item.viewName)) continue;
const enterprise = checkIsEnterprise(item.viewName);
if (enterprise && edition === 'oss') continue;
return true;
} else if (item.type === 'container') {
if (subtreeHasVisibleLink(item.items, edition)) return true;
}
}
return false;
}
function checkLinkVisible(viewName: string): boolean {
const schema = useSchemaStore.getState().schema;
if (!schema) return true;
const accountStore = useAccountStore.getState();
return isLinkVisible(
schema,
viewName,
accountStore.edition,
(prefix: string) => accountStore.hasObjectPermission(prefix, 'Get'),
(perm: string) => accountStore.hasPermission(perm),
return (
<Collapsible open={open} onOpenChange={setOpen}>
{children}
</Collapsible>
);
}
function checkIsEnterprise(viewName: string): boolean {
const schema = useSchemaStore.getState().schema;
if (!schema) return false;
const edition = useAccountStore.getState().edition;
return isLinkEnterprise(schema, viewName, edition);
}
type ActiveItemRef = (el: HTMLButtonElement | null) => void;
interface SidebarSubItemProps {
item: LayoutSubItem;
@@ -104,9 +68,19 @@ interface SidebarSubItemProps {
navigate: ReturnType<typeof useNavigate>;
edition: string;
onUpsell: () => void;
activeItemRef: ActiveItemRef;
}
function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, edition, onUpsell }: SidebarSubItemProps) {
function SidebarSubItem({
item,
depth,
sectionName,
currentPath,
navigate,
edition,
onUpsell,
activeItemRef,
}: SidebarSubItemProps) {
if (item.type === 'link') {
if (!checkLinkVisible(item.viewName)) return null;
@@ -121,12 +95,12 @@ function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, editi
return (
<Button
variant="ghost"
ref={isActive ? activeItemRef : undefined}
className={cn(
'w-full justify-start gap-2 font-normal',
isActive && 'bg-accent text-accent-foreground',
depth > 0 && 'text-sm',
'relative h-8 w-full justify-start gap-2 rounded-lg px-3 text-[13px] font-normal text-muted-foreground hover:bg-muted hover:text-foreground',
isActive && 'bg-accent font-medium text-accent-foreground hover:bg-accent hover:text-accent-foreground',
)}
style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
style={depth > 1 ? { paddingLeft: `${(depth - 1) * 12 + 12}px` } : undefined}
onClick={() => {
if (isLocked) {
onUpsell();
@@ -146,12 +120,12 @@ function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, editi
const containsActive = subtreeContainsActive(item.items, currentPath, sectionName);
return (
<Collapsible defaultOpen={containsActive}>
<AutoOpenCollapsible containsActive={containsActive}>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
className="w-full justify-start gap-2 font-normal text-sm"
style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
className="h-8 w-full justify-start gap-1.5 rounded-lg px-3 text-[13px] font-normal text-muted-foreground hover:bg-muted hover:text-foreground"
style={depth > 1 ? { paddingLeft: `${(depth - 1) * 12 + 12}px` } : undefined}
>
<ChevronDown className="h-3 w-3 shrink-0 transition-transform duration-200 [[data-state=closed]>&]:rotate-[-90deg]" />
<span className="truncate">{item.name}</span>
@@ -168,10 +142,11 @@ function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, editi
navigate={navigate}
edition={edition}
onUpsell={onUpsell}
activeItemRef={activeItemRef}
/>
))}
</CollapsibleContent>
</Collapsible>
</AutoOpenCollapsible>
);
}
@@ -185,9 +160,18 @@ interface SidebarTopItemProps {
navigate: ReturnType<typeof useNavigate>;
edition: string;
onUpsell: () => void;
activeItemRef: ActiveItemRef;
}
function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onUpsell }: SidebarTopItemProps) {
function SidebarTopItem({
item,
sectionName,
currentPath,
navigate,
edition,
onUpsell,
activeItemRef,
}: SidebarTopItemProps) {
if ('link' in item) {
const { name, icon, viewName } = item.link;
@@ -204,7 +188,11 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
return (
<Button
variant="ghost"
className={cn('w-full justify-start gap-2 font-normal', isActive && 'bg-accent text-accent-foreground')}
ref={isActive ? activeItemRef : undefined}
className={cn(
'h-10 w-full justify-start gap-3 rounded-xl px-2 font-medium text-foreground/85 hover:bg-muted hover:text-foreground',
isActive && 'bg-accent text-accent-foreground hover:bg-accent',
)}
onClick={() => {
if (isLocked) {
onUpsell();
@@ -213,7 +201,7 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
}
}}
>
<LucideIcon name={icon} className="h-4 w-4 shrink-0" />
<IconTile name={icon} />
<span className="truncate">{name}</span>
{isLocked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
</Button>
@@ -227,15 +215,21 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
const containsActive = subtreeContainsActive(items, currentPath, sectionName);
return (
<Collapsible defaultOpen={containsActive}>
<AutoOpenCollapsible containsActive={containsActive}>
<CollapsibleTrigger asChild>
<Button variant="ghost" className="w-full justify-start gap-2 font-normal">
<LucideIcon name={icon} className="h-4 w-4 shrink-0" />
<Button
variant="ghost"
className={cn(
'h-10 w-full justify-start gap-3 rounded-xl px-2 font-medium text-foreground/85 hover:bg-muted hover:text-foreground',
containsActive && 'text-foreground',
)}
>
<IconTile name={icon} />
<span className="truncate">{name}</span>
<ChevronDown className="ml-auto h-3 w-3 shrink-0 transition-transform duration-200 [[data-state=closed]>&]:rotate-[-90deg]" />
<ChevronDown className="ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200 [[data-state=closed]>&]:rotate-[-90deg]" />
</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<CollapsibleContent className="ml-[1.35rem] mt-0.5 mb-1 space-y-0.5 border-l border-border pl-2.5">
{items.map((sub) => (
<SidebarSubItem
key={sub.type === 'link' ? sub.viewName : sub.name}
@@ -246,109 +240,227 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
navigate={navigate}
edition={edition}
onUpsell={onUpsell}
activeItemRef={activeItemRef}
/>
))}
</CollapsibleContent>
</Collapsible>
</AutoOpenCollapsible>
);
}
return null;
}
export function Sidebar() {
/** INBUXA: one entry of the collapsed sidebar: its tile, a label on hover, a menu for a group. */
function RailItem({
item,
sectionName,
currentPath,
navigate,
edition,
}: {
item: LayoutItem;
sectionName: string;
currentPath: string;
navigate: ReturnType<typeof useNavigate>;
edition: string;
}) {
const base = 'mx-auto flex h-11 w-11 items-center justify-center rounded-xl transition-colors hover:bg-muted';
if ('link' in item) {
const { name, icon, viewName } = item.link;
if (!checkLinkVisible(viewName)) return null;
const isActive = pathMatchesView(currentPath, sectionName, viewName);
return (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
aria-label={name}
aria-current={isActive ? 'page' : undefined}
className={cn(base, isActive && 'bg-accent')}
onClick={() => navigate(resolveViewPath(sectionName, viewName))}
>
<IconTile name={icon} />
</button>
</TooltipTrigger>
<TooltipContent side="right">{name}</TooltipContent>
</Tooltip>
);
}
const { name, icon, items } = item.container;
if (!subtreeHasVisibleLink(items, edition)) return null;
const links = visibleLinks(items, edition);
const containsActive = subtreeContainsActive(items, currentPath, sectionName);
return (
<DropdownMenu>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<button type="button" aria-label={name} className={cn(base, containsActive && 'bg-accent')}>
<IconTile name={icon} />
</button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent side="right">{name}</TooltipContent>
</Tooltip>
<DropdownMenuContent side="right" align="start" className="w-56">
<DropdownMenuLabel className="flex items-center gap-2">
<IconTile name={icon} size="sm" />
{name}
</DropdownMenuLabel>
{links.map((l) => (
<DropdownMenuItem
key={l.viewName}
className={cn(pathMatchesView(currentPath, sectionName, l.viewName) && 'bg-accent text-accent-foreground')}
onClick={() => navigate(resolveViewPath(sectionName, l.viewName))}
>
{l.name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
}
interface SidebarProps {
/**
* INBUXA: in the modern shell the section bar does the navigating on a wide
* screen, but a phone has no room for it — the sidebar stays as the
* slide-over behind the hamburger, and nothing else.
*/
mobileOnly?: boolean;
}
export function Sidebar({ mobileOnly = false }: SidebarProps = {}) {
const navigate = useNavigate();
const location = useLocation();
const activeSection = useUIStore((s) => s.activeSection);
const setActiveSection = useUIStore((s) => s.setActiveSection);
const sidebarOpen = useUIStore((s) => s.sidebarOpen);
const setSidebarOpen = useUIStore((s) => s.setSidebarOpen);
const sidebarCollapsed = useUIStore((s) => s.sidebarCollapsed);
const toggleSidebarCollapsed = useUIStore((s) => s.toggleSidebarCollapsed);
const schema = useSchemaStore((s) => s.schema);
const edition = useAccountStore((s) => s.edition);
const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
const permissions = useAccountStore((s) => s.permissions);
const hasPermission = useAccountStore((s) => s.hasPermission);
const [upsellOpen, setUpsellOpen] = useState(false);
const activeItem = useRef<HTMLButtonElement | null>(null);
const activeItemRef = useCallback<ActiveItemRef>((el) => {
activeItem.current = el;
}, []);
const layouts = useMemo(
() =>
schema ? visibleLayouts(schema, edition, (prefix) => hasObjectPermission(prefix, 'Get'), hasPermission) : [],
[schema, edition, hasObjectPermission, hasPermission],
);
const layouts = useMemo(() => {
if (!schema) return [];
const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
return visibleLayouts(schema, edition, canGet, hasPermission);
}, [schema, edition, permissions, hasPermission]);
useEffect(() => {
if (!schema) return;
if (layouts.length === 0) return;
if (!layouts.find((l) => l.name === activeSection)) {
setActiveSection(layouts[0].name);
if (typeof window === 'undefined') return;
if (window.matchMedia('(max-width: 767px)').matches) {
setSidebarOpen(false);
}
}, [schema, layouts, activeSection, setActiveSection]);
}, [location.pathname, setSidebarOpen]);
useEffect(() => {
activeItem.current?.scrollIntoView({ block: 'nearest' });
}, [location.pathname, activeSection]);
if (!sidebarOpen || !schema) return null;
const layout: Layout | undefined = layouts.find((l) => l.name === activeSection);
if (!layout) return null;
const handleSectionClick = (target: Layout) => {
setActiveSection(target.name);
const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
const first =
findFirstAccessibleLinkInLayout(schema, target, edition, canGet, hasPermission) ??
findFirstVisibleLinkInLayout(schema, target, edition, canGet, hasPermission);
if (first) navigate(`/${target.name}/${first}`);
};
// Folding to a rail is for wide screens; a phone keeps the slide-over, and so
// does the modern shell, where the rail would sit under the section bar.
const collapsed =
!mobileOnly && sidebarCollapsed && typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches;
if (collapsed) {
return (
<TooltipProvider delayDuration={150}>
<aside className="fixed top-14 left-0 bottom-0 z-30 flex w-[4.5rem] flex-col border-r bg-background">
<div className="flex justify-center border-b py-2">
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
aria-label="Expand sidebar"
onClick={toggleSidebarCollapsed}
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground"
>
<PanelLeftOpen className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent side="right">Expand sidebar</TooltipContent>
</Tooltip>
</div>
<nav className="flex flex-1 flex-col gap-1 overflow-y-auto py-3 [scrollbar-width:none]">
{layout.items.map((item) => (
<RailItem
key={'link' in item ? item.link.viewName : item.container.name}
item={item}
sectionName={layout.name}
currentPath={location.pathname}
navigate={navigate}
edition={edition}
/>
))}
</nav>
</aside>
</TooltipProvider>
);
}
return (
<aside className="fixed top-14 left-0 bottom-0 z-30 hidden w-64 flex-col border-r bg-background md:flex">
<ScrollArea className="flex-1 py-2">
<nav className="flex flex-col gap-0.5 px-2">
{layout.items.map((item) => (
<SidebarTopItem
key={'link' in item ? item.link.viewName : item.container.name}
item={item}
sectionName={layout.name}
currentPath={location.pathname}
navigate={navigate}
edition={edition}
onUpsell={() => setUpsellOpen(true)}
/>
))}
</nav>
</ScrollArea>
<>
<div
aria-hidden="true"
className="fixed inset-0 top-14 z-20 bg-black/40 md:hidden"
onClick={() => setSidebarOpen(false)}
/>
<aside
className={cn(
'fixed top-14 left-0 bottom-0 z-30 flex w-64 flex-col border-r bg-background',
mobileOnly && 'md:hidden',
)}
>
<div className="flex items-center justify-between px-4 pt-3 pb-1">
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
{layout.name}
</span>
<button
type="button"
aria-label="Collapse sidebar"
title="Collapse sidebar"
onClick={toggleSidebarCollapsed}
className={cn(
'hidden h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground md:flex',
mobileOnly && 'md:hidden',
)}
>
<PanelLeftClose className="h-4 w-4" />
</button>
</div>
<div className="flex-1 overflow-y-auto py-2 [scrollbar-width:thin]">
<nav className="flex flex-col gap-0.5 px-2">
{layout.items.map((item) => (
<SidebarTopItem
key={'link' in item ? item.link.viewName : item.container.name}
item={item}
sectionName={layout.name}
currentPath={location.pathname}
navigate={navigate}
edition={edition}
onUpsell={() => setUpsellOpen(true)}
activeItemRef={activeItemRef}
/>
))}
</nav>
</div>
{layouts.length > 1 && (
<TooltipProvider>
<div className="flex items-center justify-around border-t bg-background px-2 py-2">
{layouts.map((target) => {
const Icon = (LucideIcons as Record<string, unknown>)[
target.icon
.split('-')
.map((s) => s[0].toUpperCase() + s.slice(1))
.join('')
] as LucideIcons.LucideIcon | undefined;
const isActive = target.name === activeSection;
return (
<Tooltip key={target.name}>
<TooltipTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
aria-label={target.name}
aria-current={isActive ? 'page' : undefined}
onClick={() => handleSectionClick(target)}
className={cn('h-9 w-9', isActive && 'bg-accent text-accent-foreground')}
>
{Icon ? <Icon className="h-4 w-4" /> : <LucideIcons.Circle className="h-4 w-4" />}
</Button>
</TooltipTrigger>
<TooltipContent side="top">{target.name}</TooltipContent>
</Tooltip>
);
})}
</div>
</TooltipProvider>
)}
<EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
</aside>
<EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
</aside>
</>
);
}
+182 -22
View File
@@ -1,33 +1,49 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import * as LucideIcons from 'lucide-react';
const { Sun, Moon, User, LogOut, Check, Menu, Sparkles } = LucideIcons;
const { Sun, Moon, User, LogOut, Check, Menu, Search, FileCode, Palette, LayoutTemplate } = LucideIcons;
import { Button } from '@/components/ui/button';
import { GlobalSearch } from '@/components/common/GlobalSearch';
import { CommandPalette } from '@/components/common/CommandPalette';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { isPaletteId, PALETTES } from '@/lib/palettes';
import Logo from '@/components/common/Logo';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
import { findFirstAccessibleLinkInLayout, findFirstVisibleLinkInLayout, visibleLayouts } from '@/lib/layout';
import { useUIStore } from '@/stores/uiStore';
import { SOURCE_URL } from '@/lib/sourceDownload';
import { visibleLayouts } from '@/lib/layout';
import { sectionLandingLink } from '@/lib/lastVisited';
import { cn } from '@/lib/utils';
import { isAdminLayout, useUIStore } from '@/stores/uiStore';
import { useAuthStore } from '@/stores/authStore';
import { useState } from 'react';
import { buildEndSessionUrl, getPostLogoutRedirectUri } from '@/services/auth/oauth';
import { createElement, useEffect, useState } from 'react';
import { useAccountStore } from '@/stores/accountStore';
import { useSchemaStore } from '@/stores/schemaStore';
const IS_MAC = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
function getIcon(name: string): LucideIcons.LucideIcon {
const formatted = name
.split('-')
@@ -41,8 +57,13 @@ export function TopBar() {
const navigate = useNavigate();
const theme = useUIStore((s) => s.theme);
const toggleTheme = useUIStore((s) => s.toggleTheme);
const palette = useUIStore((s) => s.palette);
const setPalette = useUIStore((s) => s.setPalette);
const adminLayout = useUIStore((s) => s.adminLayout);
const setAdminLayout = useUIStore((s) => s.setAdminLayout);
const toggleSidebar = useUIStore((s) => s.toggleSidebar);
const setActiveSection = useUIStore((s) => s.setActiveSection);
const activeSection = useUIStore((s) => s.activeSection);
const accounts = useAuthStore((s) => s.accounts);
const activeAccountId = useAuthStore((s) => s.activeAccountId);
const switchAccount = useAuthStore((s) => s.switchAccount);
@@ -52,6 +73,18 @@ export function TopBar() {
const hasPermission = useAccountStore((s) => s.hasPermission);
const schema = useSchemaStore((s) => s.schema);
const [upsellOpen, setUpsellOpen] = useState(false);
const [paletteOpen, setPaletteOpen] = useState(false);
useEffect(() => {
function handleGlobalKeyDown(e: KeyboardEvent) {
if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'k') {
e.preventDefault();
setPaletteOpen((open) => !open);
}
}
document.addEventListener('keydown', handleGlobalKeyDown);
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
}, []);
const navigableLayouts = schema
? visibleLayouts(schema, edition, (prefix) => hasObjectPermission(prefix, 'Get'), hasPermission)
@@ -63,15 +96,89 @@ export function TopBar() {
<Menu className="h-4 w-4" />
</Button>
<Link to="/" className="flex shrink-0 items-center">
<Logo />
</Link>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link to="/" className="flex shrink-0 items-center">
<Logo />
</Link>
</TooltipTrigger>
<TooltipContent side="bottom">
{t('version.label', 'INBUXA Admin {{version}}', { version: __APP_VERSION__ })}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<GlobalSearch />
<div className="hidden min-w-0 flex-1 items-center justify-center px-4 md:flex">
<button
type="button"
onClick={() => setPaletteOpen(true)}
className="flex h-9 w-full max-w-md items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm text-muted-foreground shadow-sm transition-colors hover:bg-accent"
>
<Search className="h-4 w-4" />
<span className="flex-1 text-left">{t('globalSearch.placeholder', 'Search pages, fields, settings...')}</span>
<kbd className="pointer-events-none flex h-5 select-none items-center rounded border bg-muted px-1.5 font-mono text-[10px] font-medium">
{IS_MAC ? '⌘K' : 'Ctrl K'}
</kbd>
</button>
</div>
<div className="flex items-center gap-2">
<div className="ml-auto flex items-center gap-2 md:ml-0">
{edition !== 'enterprise' && <EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />}
<Button
variant="ghost"
size="icon"
className="md:hidden"
onClick={() => setPaletteOpen(true)}
aria-label={t('search', 'Search')}
>
<Search className="h-4 w-4" />
</Button>
<CommandPalette open={paletteOpen} onOpenChange={setPaletteOpen} />
{/* INBUXA: the three areas, one click away, where the eye already looks. */}
{schema && navigableLayouts.length > 1 && (
<TooltipProvider delayDuration={150}>
<div
className="hidden items-center gap-0.5 rounded-xl bg-muted p-1 sm:flex"
role="tablist"
aria-label={t('sections', 'Sections')}
>
{navigableLayouts.map((layout) => {
const isActive = layout.name === activeSection;
return (
<Tooltip key={layout.name}>
<TooltipTrigger asChild>
<button
type="button"
role="tab"
aria-selected={isActive}
aria-label={layout.name}
onClick={() => {
setActiveSection(layout.name);
const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
const firstLink = sectionLandingLink(schema, layout, edition, canGet, hasPermission);
if (firstLink) navigate(`/${layout.name}/${firstLink}`);
}}
className={cn(
'flex h-8 items-center justify-center gap-1.5 rounded-lg px-2.5 text-[13px] font-medium text-muted-foreground transition-colors hover:text-foreground lg:px-3',
isActive && 'bg-card text-primary shadow-soft',
)}
>
{createElement(getIcon(layout.icon), { className: 'h-4 w-4 shrink-0' })}
<span className="hidden lg:inline">{layout.name}</span>
</button>
</TooltipTrigger>
<TooltipContent side="bottom">{layout.name}</TooltipContent>
</Tooltip>
);
})}
</div>
</TooltipProvider>
)}
<Button variant="ghost" size="icon" onClick={toggleTheme} aria-label={t('toggleTheme', 'Toggle theme')}>
{theme === 'light' ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
</Button>
@@ -95,9 +202,7 @@ export function TopBar() {
onClick={() => {
setActiveSection(layout.name);
const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
const firstLink =
findFirstAccessibleLinkInLayout(schema, layout, edition, canGet, hasPermission) ??
findFirstVisibleLinkInLayout(schema, layout, edition, canGet, hasPermission);
const firstLink = sectionLandingLink(schema, layout, edition, canGet, hasPermission);
if (firstLink) {
navigate(`/${layout.name}/${firstLink}`);
}
@@ -128,20 +233,75 @@ export function TopBar() {
</>
)}
{edition !== 'enterprise' && (
<>
<DropdownMenuItem onClick={() => setUpsellOpen(true)}>
<Sparkles className="mr-2 h-4 w-4" />
{t('tryEnterprise', 'Try Enterprise')}
</DropdownMenuItem>
{/* INBUXA: the shell is the reader's choice, the way the palette is. */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<LayoutTemplate className="mr-2 h-4 w-4" />
{t('nav.layoutMenu', 'Layout')}
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-56">
<DropdownMenuRadioGroup
value={adminLayout}
onValueChange={(v) => isAdminLayout(v) && setAdminLayout(v)}
>
<DropdownMenuRadioItem value="modern" className="gap-2">
{t('nav.layoutModern', 'Modern')}
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="legacy" className="gap-2">
{t('nav.layoutLegacy', 'Legacy')}
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
</>
)}
<p className="px-2 py-1.5 text-[11px] leading-snug text-muted-foreground">
{adminLayout === 'modern'
? t('nav.layoutModernHint', 'Sections across the top; the page gets the full width.')
: t('nav.layoutLegacyHint', 'The sidebar, as the old web UI had it.')}
</p>
</DropdownMenuSubContent>
</DropdownMenuSub>
{/* INBUXA: the same palettes as INBUXA webmail. */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Palette className="mr-2 h-4 w-4" />
{t('theme.menu', 'Theme')}
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-52">
<DropdownMenuRadioGroup value={palette} onValueChange={(v) => isPaletteId(v) && setPalette(v)}>
{PALETTES.map((p) => (
<DropdownMenuRadioItem key={p.id} value={p.id} className="gap-2">
<span
aria-hidden="true"
className="h-3.5 w-3.5 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/15"
style={{ background: theme === 'dark' ? p.swatch[1] : p.swatch[0] }}
/>
<span className="notranslate" translate="no">
{p.id === 'default' ? t('theme.classic', 'Classic') : p.name}
</span>
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<a href={SOURCE_URL} target="_blank" rel="noopener noreferrer">
<FileCode className="mr-2 h-4 w-4" />
{t('source.menu', 'Source code (AGPL-3.0)')}
</a>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
const endSessionEndpoint = useAuthStore.getState().endSessionEndpoint;
logout();
navigate('/login');
if (endSessionEndpoint) {
window.location.href = buildEndSessionUrl(endSessionEndpoint, getPostLogoutRedirectUri());
} else {
navigate('/login');
}
}}
>
<LogOut className="mr-2 h-4 w-4" />
+128 -75
View File
@@ -1,9 +1,17 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { EmptyState } from '@/components/common/EmptyState';
import { PageHeader } from '@/components/common/PageHeader';
import { HelpPanel } from '@/help/HelpPanel';
import { ObjectHoverCard } from '@/features/hovercards/ObjectHoverCard';
import { iconForView } from '@/lib/viewIcon';
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
@@ -17,6 +25,7 @@ import {
ArrowUpDown,
Filter,
Loader2,
Lock,
Search,
RotateCcw,
} from 'lucide-react';
@@ -24,6 +33,7 @@ import {
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
import { Combobox } from '@/components/ui/combobox';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { formatSize as fmtSize, formatDuration as fmtDuration } from '@/lib/durationFormat';
@@ -46,8 +56,12 @@ import {
} from '@/components/ui/alert-dialog';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
import { ObjectPicker } from '@/components/common/ObjectPicker';
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
import { toast } from '@/hooks/use-toast';
import { friendlySetError } from '@/lib/jmapErrors';
import { coerceLabel } from '@/lib/objectOptions';
import { buildJmapFilter } from '@/lib/listFilter';
import { useResetOnChange } from '@/hooks/useBufferedValue';
import { useSchemaStore } from '@/stores/schemaStore';
import { useAuthStore } from '@/stores/authStore';
@@ -60,6 +74,8 @@ import type { Schema, Field, MassAction, ItemAction, Filter as FilterDef } from
import type { JmapSetResponse, JmapSetError } from '@/types/jmap';
import type { ResolvedSchema } from '@/lib/schemaResolver';
const ENUM_FILTER_COMBOBOX_THRESHOLD = 15;
const PAGE_SIZE = 25;
const MAX_REPORTED_ERRORS = 3;
@@ -257,7 +273,11 @@ function renderCellValue(
case 'objectId': {
const id = String(value);
const display = getDisplayName(ft.objectName, id);
return display ?? id;
return (
<ObjectHoverCard objectName={ft.objectName} id={id}>
{display ?? id}
</ObjectHoverCard>
);
}
case 'set': {
@@ -280,9 +300,11 @@ function renderCellValue(
case 'object': {
if (value && typeof value === 'object' && !Array.isArray(value)) {
const obj = value as Record<string, unknown>;
if ('@type' in obj && typeof obj['@type'] === 'string') {
return obj['@type'];
const typeName = (value as Record<string, unknown>)['@type'];
if (typeof typeName === 'string') {
const objSchema = schema.schemas[ft.objectName];
const variant = objSchema?.type === 'multiple' ? objSchema.variants.find((v) => v.name === typeName) : null;
return <Badge variant="secondary">{variant?.label ?? typeName}</Badge>;
}
}
return <span className="text-muted-foreground">-</span>;
@@ -301,6 +323,24 @@ interface SortState {
ascending: boolean;
}
function readUrlFilters(): Record<string, string> {
const params = new URLSearchParams(window.location.search);
const filters: Record<string, string> = {};
params.forEach((value, key) => {
if (key.startsWith('f.')) {
filters[key.slice(2)] = value;
}
});
return filters;
}
function readUrlSort(): SortState | null {
const params = new URLSearchParams(window.location.search);
const sortParam = params.get('sort');
const sortDir = params.get('sortDir');
return sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null;
}
interface ConfirmAction {
label: string;
onConfirm: () => void;
@@ -318,6 +358,8 @@ export function DynamicList({ viewName }: DynamicListProps) {
const schema = useSchemaStore((s) => s.schema);
const viewToSection = useSchemaStore((s) => s.viewToSection);
const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
const edition = useAccountStore((s) => s.edition);
const [upsellOpen, setUpsellOpen] = useState(false);
const resolved = useMemo(() => {
if (!schema) return null;
@@ -346,15 +388,15 @@ export function DynamicList({ viewName }: DynamicListProps) {
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [selectAllMode, setSelectAllMode] = useState(false);
const [filtersOpen, setFiltersOpen] = useState(false);
const [filterValues, setFilterValues] = useState<Record<string, string>>({});
const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>({});
const [filtersOpen, setFiltersOpen] = useState(() => Object.keys(readUrlFilters()).length > 0);
const [filterValues, setFilterValues] = useState<Record<string, string>>(readUrlFilters);
const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>(readUrlFilters);
const [sort, setSort] = useState<SortState | null>(null);
const [sort, setSort] = useState<SortState | null>(readUrlSort);
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
useEffect(() => {
useResetOnChange(viewName, () => {
setItems([]);
setTotal(null);
setAnchorStack([]);
@@ -363,44 +405,22 @@ export function DynamicList({ viewName }: DynamicListProps) {
setSelectAllMode(false);
setError(null);
const params = new URLSearchParams(window.location.search);
const initialFilters: Record<string, string> = {};
params.forEach((value, key) => {
if (key.startsWith('f.')) {
initialFilters[key.slice(2)] = value;
}
});
const initialFilters = readUrlFilters();
setFilterValues(initialFilters);
setAppliedFilters(initialFilters);
setFiltersOpen(Object.keys(initialFilters).length > 0);
setSort(readUrlSort());
});
const sortParam = params.get('sort');
const sortDir = params.get('sortDir');
setSort(sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null);
}, [viewName]);
const objectName = resolved?.obj.objectName;
const buildFilter = useCallback((): Record<string, unknown> => {
const filter: Record<string, unknown> = {};
const list = resolved?.list;
if (list?.filtersStatic) {
Object.assign(filter, list.filtersStatic);
}
const opSuffix: Record<string, string> = {
eq: '',
gt: 'IsGreaterThan',
gte: 'IsGreaterThanOrEqual',
lt: 'IsLessThan',
lte: 'IsLessThanOrEqual',
};
for (const [key, val] of Object.entries(appliedFilters)) {
if (val === '' || val == null) continue;
if (key.endsWith('Op')) continue;
const op = appliedFilters[`${key}Op`];
const suffix = op ? (opSuffix[op] ?? '') : '';
filter[`${key}${suffix}`] = val;
}
return filter;
}, [appliedFilters, resolved?.list]);
return buildJmapFilter({
appliedFilters,
filters: resolved?.list?.filters,
filtersStatic: resolved?.list?.filtersStatic,
isXPrefixed: objectName?.startsWith('x:') ?? false,
});
}, [appliedFilters, resolved?.list, objectName]);
const buildSort = useCallback((): Record<string, unknown>[] | undefined => {
if (!sort) return undefined;
@@ -472,6 +492,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
useEffect(() => {
if (!resolved?.list) return;
// eslint-disable-next-line react-hooks/set-state-in-effect
setAnchorStack([]);
setCurrentAnchor(null);
fetchData(null);
@@ -515,7 +536,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
for (const obj of list) {
const id = obj.id as string;
if (!id) continue;
entries[id] = (obj[displayProp] as string) ?? id;
entries[id] = coerceLabel(obj[displayProp], id);
}
if (Object.keys(entries).length > 0) {
setDisplayNames(refType, entries);
@@ -865,6 +886,20 @@ export function DynamicList({ viewName }: DynamicListProps) {
case 'enum': {
const enumVariants = schema!.enums[filterDef.enumName] ?? [];
if (enumVariants.length > ENUM_FILTER_COMBOBOX_THRESHOLD) {
return wrapper(
<Combobox
options={[
{ value: '__all__', label: t('filters.all', 'All') },
...enumVariants.map((v) => ({ value: v.name, label: v.label })),
]}
value={value || '__all__'}
onValueChange={(v) => handleFilterSelectChange(filterDef.field, v)}
searchPlaceholder={t('common.searchPlaceholder', 'Search...')}
emptyText={t('field.noMatches', 'No matches')}
/>,
);
}
return wrapper(
<Select value={value || '__all__'} onValueChange={(v) => handleFilterSelectChange(filterDef.field, v)}>
<SelectTrigger>
@@ -1019,17 +1054,20 @@ export function DynamicList({ viewName }: DynamicListProps) {
function renderItemActions(item: Record<string, unknown>): React.ReactNode {
if (!hasItemActions || !list.itemActions) return null;
const filteredActions = list.itemActions.filter((action) => {
if (action.type === 'separator') return true;
if (action.type === 'delete') return canDelete;
if (action.type === 'setProperty') return canUpdate;
const filteredActions = list.itemActions.flatMap((action): { action: ItemAction; locked: boolean }[] => {
if (action.type === 'separator') return [{ action, locked: false }];
if (action.type === 'delete') return canDelete ? [{ action, locked: false }] : [];
if (action.type === 'setProperty') return canUpdate ? [{ action, locked: false }] : [];
if (action.type === 'view' || action.type === 'query') {
const targetObj = resolveObject(schema!, action.objectName);
if (targetObj && !hasObjectPermission(targetObj.permissionPrefix, 'Get')) {
return false;
if (!targetObj) return [];
if (targetObj.enterprise) {
if (edition === 'oss') return [];
if (edition === 'community') return [{ action, locked: true }];
}
if (!hasObjectPermission(targetObj.permissionPrefix, 'Get')) return [];
}
return true;
return [{ action, locked: false }];
});
if (filteredActions.length === 0) return null;
@@ -1042,7 +1080,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{filteredActions.map((action, idx) => {
{filteredActions.map(({ action, locked }, idx) => {
if (action.type === 'separator') {
return <DropdownMenuSeparator key={`sep-${idx}`} />;
}
@@ -1056,7 +1094,9 @@ export function DynamicList({ viewName }: DynamicListProps) {
className={isDestructive ? 'text-destructive' : undefined}
onClick={(e) => {
e.stopPropagation();
if (needsConfirmation) {
if (locked) {
setUpsellOpen(true);
} else if (needsConfirmation) {
setConfirmAction({
label: action.label,
onConfirm: () => executeItemAction(action, item),
@@ -1067,6 +1107,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
}}
>
{action.label}
{locked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
</DropdownMenuItem>
);
})}
@@ -1076,13 +1117,11 @@ export function DynamicList({ viewName }: DynamicListProps) {
}
return (
<div className="relative space-y-4">
<div className="flex items-start justify-between gap-4">
<div>
<h1 className="text-2xl font-bold tracking-tight">{list.title}</h1>
{list.subtitle && <p className="text-sm text-muted-foreground mt-1">{list.subtitle}</p>}
</div>
<div className="relative space-y-5">
<div className="flex flex-wrap items-start justify-between gap-4">
<PageHeader icon={iconForView(schema, viewName)} title={list.title} subtitle={list.subtitle} />
<div className="flex items-center gap-2">
<HelpPanel viewName={viewName} title={list.title} />
{hasMassActions && selectedIds.size > 0 && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -1204,11 +1243,11 @@ export function DynamicList({ viewName }: DynamicListProps) {
</div>
)}
<div className="rounded-lg border bg-background shadow-sm">
<div className="overflow-x-auto">
<div className="rounded-xl border bg-card shadow-soft">
<div className="overflow-x-auto rounded-[calc(var(--radius-xl)-1px)]">
<table className="w-full text-sm">
<thead>
<tr className="border-b bg-muted">
<tr className="border-b bg-muted/60 text-xs uppercase tracking-wide text-muted-foreground">
{hasMassActions && (
<th className="w-10 px-3 py-3">
<Checkbox
@@ -1247,9 +1286,12 @@ export function DynamicList({ viewName }: DynamicListProps) {
<tr>
<td
colSpan={list.columns.length + (hasMassActions ? 1 : 0) + (hasItemActions ? 1 : 0)}
className="px-3 py-12 text-center text-muted-foreground"
className="px-3"
>
{t('list.noResults', 'No results found')}
<EmptyState
title={t('list.emptyTitle', 'Nothing here yet')}
hint={t('list.noResults', 'No results found')}
/>
</td>
</tr>
) : (
@@ -1270,18 +1312,27 @@ export function DynamicList({ viewName }: DynamicListProps) {
/>
</td>
)}
{list.columns.map((col) => (
<td key={col.name} className="px-3 py-2">
{renderCellValue(
item[col.name],
fields[col.name],
col.name,
schema!,
resolved.obj.objectName,
getDisplayName,
)}
</td>
))}
{list.columns.map((col, colIndex) => {
const cell = renderCellValue(
item[col.name],
fields[col.name],
col.name,
schema!,
resolved.obj.objectName,
getDisplayName,
);
return (
<td key={col.name} className="px-3 py-2">
{colIndex === 0 && item[col.name] != null ? (
<ObjectHoverCard objectName={resolved.obj.objectName} id={itemId}>
{cell}
</ObjectHoverCard>
) : (
cell
)}
</td>
);
})}
{hasItemActions && <td className="px-3 py-2 text-right">{renderItemActions(item)}</td>}
</tr>
);
@@ -1351,6 +1402,8 @@ export function DynamicList({ viewName }: DynamicListProps) {
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
</div>
);
}
+8 -5
View File
@@ -1,7 +1,10 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import * as React from 'react';
@@ -11,21 +14,21 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
outline: 'border border-input bg-card shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
sm: 'h-8 rounded-lg px-3 text-xs',
lg: 'h-10 rounded-xl px-8',
icon: 'h-9 w-9',
},
},
+156
View File
@@ -0,0 +1,156 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import * as React from 'react';
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
import { DayPicker, getDefaultClassNames, type DayButton } from '@daypicker/react';
import { cn } from '@/lib/utils';
import { Button, buttonVariants } from '@/components/ui/button';
function Calendar({
className,
classNames,
showOutsideDays = true,
captionLayout = 'label',
buttonVariant = 'ghost',
formatters,
components,
...props
}: React.ComponentProps<typeof DayPicker> & {
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
}) {
const defaultClassNames = getDefaultClassNames();
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn(
'group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=popover-content]_&]:bg-transparent',
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className,
)}
captionLayout={captionLayout}
formatters={{
formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
...formatters,
}}
classNames={{
root: cn('w-fit', defaultClassNames.root),
months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
defaultClassNames.button_previous,
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
defaultClassNames.button_next,
),
month_caption: cn(
'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
defaultClassNames.month_caption,
),
dropdowns: cn(
'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
defaultClassNames.dropdowns,
),
dropdown_root: cn(
'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
defaultClassNames.dropdown_root,
),
dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
caption_label: cn(
'font-medium select-none',
captionLayout === 'label'
? 'text-sm'
: 'flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
defaultClassNames.caption_label,
),
month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
weekdays: cn('flex', defaultClassNames.weekdays),
weekday: cn(
'flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none',
defaultClassNames.weekday,
),
week: cn('mt-2 flex w-full', defaultClassNames.week),
week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
day: cn(
'group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md',
props.showWeekNumber
? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
: '[&:first-child[data-selected=true]_button]:rounded-l-md',
defaultClassNames.day,
),
range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
range_middle: cn('rounded-none', defaultClassNames.range_middle),
range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
today: cn(
'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
defaultClassNames.today,
),
outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
hidden: cn('invisible', defaultClassNames.hidden),
...classNames,
}}
components={{
Root: ({ className, rootRef, ...props }) => (
<div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
),
Chevron: ({ className, orientation, ...props }) => {
const Icon = orientation === 'left' ? ChevronLeft : orientation === 'right' ? ChevronRight : ChevronDown;
return <Icon className={cn('size-4', className)} {...props} />;
},
DayButton: CalendarDayButton,
WeekNumber: ({ children, ...props }) => (
<td {...props}>
<div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
</td>
),
...components,
}}
{...props}
/>
);
}
function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
const defaultClassNames = getDefaultClassNames();
const ref = React.useRef<HTMLButtonElement>(null);
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus();
}, [modifiers.focused]);
return (
<Button
ref={ref}
variant="ghost"
size="icon"
data-day={day.date.toLocaleDateString()}
data-selected-single={
modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
}
data-range-start={modifiers.range_start}
data-range-end={modifiers.range_end}
data-range-middle={modifiers.range_middle}
className={cn(
'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70',
defaultClassNames.day,
className,
)}
{...props}
/>
);
}
export { Calendar, CalendarDayButton };
+5 -2
View File
@@ -1,7 +1,10 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import * as React from 'react';
@@ -9,7 +12,7 @@ import * as React from 'react';
import { cn } from '@/lib/utils';
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
<div ref={ref} className={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...props} />
<div ref={ref} className={cn('rounded-2xl border bg-card text-card-foreground shadow-soft', className)} {...props} />
));
Card.displayName = 'Card';
@@ -22,7 +25,7 @@ CardHeader.displayName = 'CardHeader';
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
<div ref={ref} className={cn('font-display font-semibold leading-none', className)} {...props} />
),
);
CardTitle.displayName = 'CardTitle';
+8 -5
View File
@@ -1,7 +1,10 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import * as React from 'react';
@@ -10,11 +13,11 @@ import type { TooltipPayload } from 'recharts/types/state/tooltipSlice';
import { cn } from '@/lib/utils';
export const CHART_COLORS = [
'hsl(var(--chart-1))',
'hsl(var(--chart-2))',
'hsl(var(--chart-3))',
'hsl(var(--chart-4))',
'hsl(var(--chart-5))',
'var(--chart-1)',
'var(--chart-2)',
'var(--chart-3)',
'var(--chart-4)',
'var(--chart-5)',
] as const;
export function getChartColor(index: number): string {
+3 -2
View File
@@ -41,8 +41,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
const CommandInput = React.forwardRef<
React.ComponentRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & { trailing?: React.ReactNode }
>(({ className, trailing, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
@@ -53,6 +53,7 @@ const CommandInput = React.forwardRef<
)}
{...props}
/>
{trailing}
</div>
));
CommandInput.displayName = CommandPrimitive.Input.displayName;
+8 -6
View File
@@ -35,8 +35,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ComponentRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
>(({ className, children, showCloseButton = true, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
@@ -48,10 +48,12 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
{showCloseButton && (
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
));
+4 -1
View File
@@ -1,7 +1,10 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import * as React from 'react';
@@ -14,7 +17,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
<input
type={type}
className={cn(
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'flex h-9 w-full rounded-lg border border-input bg-background/60 px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className,
)}
ref={ref}
+1 -1
View File
@@ -15,7 +15,7 @@ const ToastViewport = React.forwardRef<HTMLOListElement, React.HTMLAttributes<HT
<ol
ref={ref}
className={cn(
'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
'pointer-events-none fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
className,
)}
{...props}
+30 -11
View File
@@ -6,15 +6,16 @@
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import { Check, X, HelpCircle, ChevronRight } from 'lucide-react';
import { Check, X, HelpCircle, ChevronRight, Loader2 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { jmapMapToArray } from '@/lib/jmapUtils';
import { jmapMapToArray, SECRET_MASK } from '@/lib/jmapUtils';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { resolveSchema, resolveVariantForm, resolveForm } from '@/lib/schemaResolver';
import { useObjectList, useObjectLabel } from '@/lib/objectOptions';
import { formatSize, formatDuration } from '@/lib/durationFormat';
import type { Schema, Field, FieldType, FormField, Form, Fields, EnumVariant } from '@/types/schema';
import type { Schema, Field, FieldType, FormField, Form, Fields, EnumVariant, ScalarType } from '@/types/schema';
export interface DynamicViewProps {
schema: Schema;
@@ -212,7 +213,7 @@ function StringValue({ value, format }: { value: unknown; format: string }) {
return <pre className="whitespace-pre-wrap break-all rounded bg-muted/50 p-2 text-xs font-mono">{str}</pre>;
}
if (format === 'secret' || format === 'secretText') {
return <span className="text-muted-foreground">*****</span>;
return <span className="text-muted-foreground">{SECRET_MASK}</span>;
}
return <span className="break-all">{str}</span>;
}
@@ -401,7 +402,7 @@ function MapValue({
schema,
}: {
value: unknown;
keyClass: { type: string; enumName?: string };
keyClass: ScalarType;
valueClass: { type: string; objectName?: string };
schema: Schema;
}) {
@@ -417,12 +418,7 @@ function MapValue({
return (
<div className="space-y-2">
{entries.map(([k, v]) => {
let keyLabel = k;
if (keyClass.type === 'enum' && keyClass.enumName) {
const variants = schema.enums[keyClass.enumName] ?? [];
const variant = variants.find((e: EnumVariant) => e.name === k);
if (variant) keyLabel = variant.label;
}
const keyLabel = <MapKeyLabel keyClass={keyClass} keyValue={k} schema={schema} />;
if (valueClass.type === 'object' && valueClass.objectName) {
return (
@@ -446,6 +442,29 @@ function MapValue({
);
}
function MapKeyLabel({ keyClass, keyValue, schema }: { keyClass: ScalarType; keyValue: string; schema: Schema }) {
if (keyClass.type === 'enum') {
const variants = schema.enums[keyClass.enumName] ?? [];
const variant = variants.find((e: EnumVariant) => e.name === keyValue);
return <>{variant?.label ?? keyValue}</>;
}
if (keyClass.type === 'objectId') {
return <ObjectIdKeyLabel objectName={keyClass.objectName} keyValue={keyValue} schema={schema} />;
}
return <>{keyValue}</>;
}
function ObjectIdKeyLabel({ objectName, keyValue, schema }: { objectName: string; keyValue: string; schema: Schema }) {
const list = useObjectList(objectName, schema);
const fromList = list.options.find((o) => o.id === keyValue)?.label;
const { label: cheapLabel, loading } = useObjectLabel(objectName, fromList ? null : keyValue, schema);
const display = fromList ?? cheapLabel;
if (loading && !display) {
return <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />;
}
return <>{display ?? keyValue}</>;
}
function FieldTooltip({ description }: { description: string }) {
return (
<TooltipProvider>
+3 -1
View File
@@ -11,6 +11,7 @@ import { ArrowLeft, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useSchemaStore } from '@/stores/schemaStore';
import { resolveObject, resolveList } from '@/lib/schemaResolver';
import { coerceLabel } from '@/lib/objectOptions';
import { jmapGet, getAccountId } from '@/services/jmap/client';
import { DynamicView } from './DynamicView';
@@ -89,7 +90,8 @@ export function DynamicViewPage({ viewName, objectId }: DynamicViewPageProps) {
const list = resolveList(schema, viewName, resolved.objectName);
const labelProp = list?.labelProperty ?? list?.columns?.[0]?.name;
const displayName = labelProp && typeof data[labelProp] === 'string' ? (data[labelProp] as string) : undefined;
const rawLabel = labelProp ? coerceLabel(data[labelProp], '') : '';
const displayName = rawLabel.length > 0 ? rawLabel : undefined;
const singularName = list?.singularName ?? resolved.objectName.replace(/^x:/, '');
const title = displayName
? `${singularName.charAt(0).toUpperCase() + singularName.slice(1)}: ${displayName}`
+92
View File
@@ -0,0 +1,92 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useTranslation } from 'react-i18next';
import { ListChecks, SlidersHorizontal } from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
/**
* "Guided or manual?" Every job that has a wizard asks this each time it
* starts. Nothing is remembered: the wizard is always opt-in.
*/
export function LaunchChoice({
open,
onOpenChange,
title,
guidedHint,
manualHint,
onGuided,
onManual,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
guidedHint: string;
manualHint?: string;
onGuided: () => void;
onManual: () => void;
}) {
const { t } = useTranslation();
const option = (
icon: typeof ListChecks,
heading: string,
hint: string,
onClick: () => void,
accent: boolean,
autoFocus: boolean,
) => {
const Icon = icon;
return (
<button
type="button"
autoFocus={autoFocus}
onClick={() => {
onOpenChange(false);
onClick();
}}
className={cn(
'group flex flex-col items-start gap-3 rounded-xl border p-5 text-left transition-all',
'hover:-translate-y-0.5 hover:border-primary/60 hover:shadow-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
accent ? 'border-primary/40 bg-primary/5' : 'border-border bg-card',
)}
>
<span
className={cn(
'flex h-10 w-10 items-center justify-center rounded-xl',
accent ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground',
)}
>
<Icon className="h-5 w-5" />
</span>
<span className="font-medium">{heading}</span>
<span className="text-sm text-muted-foreground">{hint}</span>
</button>
);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{t('wizard.chooseHow', 'How would you like to do this?')}</DialogDescription>
</DialogHeader>
<div className="grid gap-3 sm:grid-cols-2">
{option(ListChecks, t('wizard.guided', 'Guide me'), guidedHint, onGuided, true, true)}
{option(
SlidersHorizontal,
t('wizard.manual', "I'll do it myself"),
manualHint ?? t('wizard.manualHint', 'The full form, with every option at once.'),
onManual,
false,
false,
)}
</div>
</DialogContent>
</Dialog>
);
}
+148
View File
@@ -0,0 +1,148 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { ArrowLeft, ArrowRight, Check, Loader2, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { PageHeader } from '@/components/common/PageHeader';
import { cn } from '@/lib/utils';
export interface WizardStep {
id: string;
title: string;
}
/**
* The frame every guided job shares: where you are in it, the step itself,
* a side panel saying what this step does (and how to undo it, for the big
* jobs), and the way forward or back. The steps own their content and decide
* when "Next" is allowed; the shell never does anything on its own.
*/
export function WizardShell({
icon,
title,
subtitle,
steps,
current,
children,
aside,
canNext = true,
busy = false,
nextLabel,
onBack,
onNext,
onCancel,
hideFooter = false,
}: {
icon: string;
title: ReactNode;
subtitle?: ReactNode;
steps: WizardStep[];
current: number;
children: ReactNode;
aside?: ReactNode;
canNext?: boolean;
busy?: boolean;
nextLabel?: string;
onBack?: () => void;
onNext?: () => void;
onCancel: () => void;
hideFooter?: boolean;
}) {
const { t } = useTranslation();
return (
<div className="mx-auto max-w-5xl space-y-6">
<PageHeader
icon={icon}
title={title}
subtitle={subtitle}
actions={
<Button variant="ghost" onClick={onCancel}>
<X className="h-4 w-4" />
{t('wizard.close', 'Close')}
</Button>
}
/>
<ol className="flex flex-wrap items-center gap-x-2 gap-y-3" aria-label={t('wizard.progress', 'Progress')}>
{steps.map((s, i) => {
const done = i < current;
const here = i === current;
return (
<li key={s.id} className="flex items-center gap-2" aria-current={here ? 'step' : undefined}>
<span
className={cn(
'flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors',
done && 'bg-primary text-primary-foreground',
here && 'bg-primary/15 text-primary ring-2 ring-primary',
!done && !here && 'bg-muted text-muted-foreground',
)}
>
{done ? <Check className="h-3.5 w-3.5" /> : i + 1}
</span>
<span className={cn('text-sm', here ? 'font-medium text-foreground' : 'text-muted-foreground')}>
{s.title}
</span>
{i < steps.length - 1 && <span className="mx-1 hidden h-px w-8 bg-border sm:block" aria-hidden />}
</li>
);
})}
</ol>
<div className={cn('grid items-start gap-6', aside && 'lg:grid-cols-[minmax(0,1fr)_18rem]')}>
<Card>
<CardContent className="space-y-6 pt-6">{children}</CardContent>
</Card>
{aside && <aside className="space-y-4 text-sm">{aside}</aside>}
</div>
{!hideFooter && (
<div className="flex items-center justify-between">
{onBack ? (
<Button variant="ghost" onClick={onBack} disabled={busy}>
<ArrowLeft className="h-4 w-4" />
{t('wizard.back', 'Back')}
</Button>
) : (
<span />
)}
{onNext && (
<Button onClick={onNext} disabled={!canNext || busy}>
{busy && <Loader2 className="h-4 w-4 animate-spin" />}
{nextLabel ?? t('wizard.next', 'Next')}
{!busy && <ArrowRight className="h-4 w-4" />}
</Button>
)}
</div>
)}
</div>
);
}
/** A side-panel note: what this step does, or how to undo it. */
export function WizardNote({
title,
children,
tone = 'plain',
}: {
title: string;
children: ReactNode;
tone?: 'plain' | 'undo';
}) {
return (
<div
className={cn(
'rounded-xl border p-4',
tone === 'undo' ? 'border-emerald-500/30 bg-emerald-500/5' : 'border-border bg-card',
)}
>
<p className="mb-1.5 font-medium">{title}</p>
<div className="space-y-2 text-muted-foreground">{children}</div>
</div>
);
}
+2 -1
View File
@@ -13,6 +13,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useSchemaStore } from '@/stores/schemaStore';
import { useAccountStore } from '@/stores/accountStore';
import { resolveObject, resolveSchema, resolveVariantForm } from '@/lib/schemaResolver';
import { SECRET_MASK } from '@/lib/jmapUtils';
import { jmapSet, getAccountId } from '@/services/jmap/client';
import { FieldWidget } from '@/components/forms/FieldWidget';
import { DynamicView } from '@/components/views/DynamicView';
@@ -104,7 +105,7 @@ export function ActionPage({ viewName }: ActionPageProps) {
if (name in formData) {
const isSecret =
def.type.type === 'string' && (def.type.format === 'secret' || def.type.format === 'secretText');
if (isSecret && formData[name] === '*****') continue;
if (isSecret && formData[name] === SECRET_MASK) continue;
payload[name] = formData[name];
}
}
@@ -1,7 +1,10 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useMemo, useRef, useState, useEffect } from 'react';
@@ -51,6 +54,7 @@ function ChartSizedContainer({
);
}
import { Info } from 'lucide-react';
import { GoLink } from './GoLink';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tooltip as UiTooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { getChartColor } from '@/components/ui/chart';
@@ -242,6 +246,7 @@ export function DashboardChart({ chart, historySamples, historyWindow, period }:
</UiTooltip>
</TooltipProvider>
)}
<GoLink metrics={chart.series.flatMap((x) => x.metrics)} />
</div>
</CardHeader>
<CardContent>
@@ -1,15 +1,21 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { useTranslation } from 'react-i18next';
import { Greeting } from './Greeting';
import { useEffect, useMemo, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { AlertCircle } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useSchemaStore } from '@/stores/schemaStore';
import type { Dashboard } from '../types/schema';
import { LegacyProtocolsBanner } from '@/features/hardening/LegacyProtocolsBanner';
import { useDashboardStore } from '../stores/dashboardStore';
import { useLiveMetricsStore } from '../stores/liveMetricsStore';
import { useHistoryMetricsStore } from '../stores/historyMetricsStore';
@@ -17,6 +23,18 @@ import { collectHistoryMetricIds, collectLiveMetricIds, periodKey, periodWindow,
import { StatCard } from './StatCard';
import { DashboardChart } from './DashboardChart';
import { PeriodSelector } from './PeriodSelector';
import { StatusLine } from './StatusLine';
import { StorageTreemap } from './StorageTreemap';
import { QueueWaiting } from './QueueWaiting';
import { WeeklyHeatmap } from './WeeklyHeatmap';
import { useServerFacts, type ServerFacts } from '../serverFacts';
/** INBUXA: live-metric cards the server's own objects can stand in for. */
const FALLBACKS: Record<string, keyof ServerFacts> = {
'user.count': 'users',
'domain.count': 'domains',
'queue.count': 'queued',
};
interface DashboardViewProps {
dashboardId: string;
@@ -24,6 +42,7 @@ interface DashboardViewProps {
}
export function DashboardView({ dashboardId, section }: DashboardViewProps) {
const { t } = useTranslation();
const navigate = useNavigate();
const schema = useSchemaStore((s) => s.schema);
const period = useDashboardStore((s) => s.period);
@@ -35,6 +54,7 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
const unsubscribeLive = useLiveMetricsStore((s) => s.unsubscribe);
const liveStatus = useLiveMetricsStore((s) => s.status);
const liveError = useLiveMetricsStore((s) => s.error);
const { facts } = useServerFacts();
const dashboards = useMemo<Dashboard[]>(() => schema?.dashboards ?? [], [schema]);
const dashboard = dashboards.find((d) => d.id === dashboardId);
@@ -102,6 +122,9 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
return (
<div className="space-y-6">
<Greeting />
<StatusLine facts={facts} />
<LegacyProtocolsBanner />
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
{dashboards.length > 1 && (
<Tabs value={dashboardId} onValueChange={(id) => navigate(`/${section}/Dashboard/${id}`)}>
@@ -114,15 +137,22 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
</TabsList>
</Tabs>
)}
{dashboards.length === 1 && <h1 className="text-xl font-semibold">{dashboard.label}</h1>}
{dashboards.length === 1 && <h2 className="text-lg font-semibold">{dashboard.label}</h2>}
<PeriodSelector onRefresh={handleRefresh} loading={isLoading} />
</div>
{liveStatus === 'error' && liveError && (
<div className="flex items-center gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
<AlertCircle className="h-4 w-4 shrink-0" />
{liveError}
<div className="flex items-center gap-3 rounded-xl border border-highlight/40 bg-highlight-soft px-4 py-3 text-sm text-foreground">
<AlertCircle className="h-4 w-4 shrink-0 text-highlight" />
<span>
{/404/.test(liveError)
? t(
'dashboard.liveUnavailable',
"Live numbers aren't available on this server yet. The rest of the dashboard still works.",
)
: liveError}
</span>
</div>
)}
@@ -134,11 +164,25 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
card={card}
historySamples={historySamples}
historyWindow={historyWindow}
fallback={
card.metrics.length === 1 && FALLBACKS[card.metrics[0]]
? (facts?.[FALLBACKS[card.metrics[0]]] as number | undefined)
: undefined
}
/>
))}
</div>
)}
{dashboard.id === 'overview' && facts && (facts.storage || facts.waiting) && (
<div className="grid gap-4 lg:grid-cols-2">
{facts.waiting && <QueueWaiting waiting={facts.waiting} />}
{facts.storage && <StorageTreemap storage={facts.storage} />}
</div>
)}
{dashboard.id === 'overview' && <WeeklyHeatmap samples={historySamples} />}
{dashboard.charts && dashboard.charts.length > 0 && (
<div className="space-y-4">
{dashboard.charts.map((chart, i) => (
@@ -0,0 +1,26 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowUpRight } from 'lucide-react';
import { hrefFor, useDashLink } from '../links';
/** "Open the queue ↗": the way from a chart to the page it's about. */
export function GoLink({ metrics }: { metrics: string[] }) {
const { t } = useTranslation();
const link = useDashLink(metrics);
if (!link) return null;
return (
<Link
to={hrefFor(link)}
className="ml-auto inline-flex shrink-0 items-center gap-1 text-sm font-medium text-primary hover:underline"
>
{t(`dashLink.${link.viewName}`, link.label)}
<ArrowUpRight className="h-3.5 w-3.5" />
</Link>
);
}
@@ -0,0 +1,84 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '@/stores/authStore';
import { getAccountId, jmapQueryAndGet } from '@/services/jmap/client';
import inbuxaMark from '@/assets/inbuxa-mark.png';
function partOfDay(hour: number): 'morning' | 'afternoon' | 'evening' {
if (hour < 12) return 'morning';
if (hour < 18) return 'afternoon';
return 'evening';
}
/**
* The name to greet: the account's full name where it has one, otherwise the
* name it signs in with. Looked up by the local part and matched on the whole
* address, so an account of the same name on another domain can't answer.
*/
function useFullName(username: string | null): string | null {
const [fullName, setFullName] = useState<string | null>(null);
useEffect(() => {
if (!username) return;
let live = true;
const localPart = username.split('@')[0];
jmapQueryAndGet('x:Account', getAccountId('x:Account'), { filter: { name: localPart } }, [
'description',
'emailAddress',
])
.then((responses) => {
const list =
(responses[1]?.[1] as { list?: { description?: string | null; emailAddress?: string }[] }).list ?? [];
const own = list.find((a) => a.emailAddress?.toLowerCase() === username.toLowerCase());
const name = own?.description?.trim();
if (live && name) setFullName(name);
})
.catch(() => {
/* the sign-in name stands */
});
return () => {
live = false;
};
}, [username]);
return fullName;
}
/** The dashboard's hello: to whoever is signed in, with a nod to the time of day. */
export function Greeting() {
const { t } = useTranslation();
const username = useAuthStore((s) => s.username);
const fullName = useFullName(username);
const name = fullName ?? username?.split('@')[0] ?? '';
const part = partOfDay(new Date().getHours());
const hello =
part === 'morning'
? t('greeting.morning', 'Good morning')
: part === 'afternoon'
? t('greeting.afternoon', 'Good afternoon')
: t('greeting.evening', 'Good evening');
return (
<div className="flex items-center gap-4 rounded-2xl border bg-gradient-to-br from-accent/70 via-card to-card px-5 py-4 shadow-soft">
<img src={inbuxaMark} alt="" className="h-12 w-auto drop-shadow-sm" />
<div className="min-w-0">
<h1 className="truncate text-2xl font-semibold">
{hello}
{name && `, ${name}`}
</h1>
<p className="truncate text-sm text-muted-foreground">
{username && (
<>
{t('greeting.signedInAs', 'Signed in as {{username}}', { username })}
{' · '}
</>
)}
{t('greeting.subtitle', "Here's how your mail server is doing.")}
</p>
</div>
</div>
);
}
@@ -0,0 +1,96 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowUpRight, PartyPopper } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { WaitingDomain } from '../serverFacts';
const MAX_ROWS = 8;
/**
* Where outgoing mail is waiting, by the domain it's going to: a bar per
* destination, split into waiting its turn, retrying after a refusal, and
* given up on. A stuck provider stands out at a glance. A click opens the
* queue filtered to that destination.
*/
export function QueueWaiting({ waiting }: { waiting: WaitingDomain[] }) {
const { t } = useTranslation();
const rows = waiting.slice(0, MAX_ROWS);
const max = Math.max(1, ...rows.map((r) => r.scheduled + r.retrying + r.failed));
const legend = [
{ cls: 'bg-[var(--chart-1)]', label: t('queue.scheduled', 'Waiting its turn') },
{ cls: 'bg-amber-500', label: t('queue.retrying', 'Retrying') },
{ cls: 'bg-rose-500', label: t('queue.failed', 'Gave up') },
];
return (
<Card>
<CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
<div>
<CardTitle className="text-base">{t('queue.title', 'Where mail is waiting')}</CardTitle>
<p className="mt-0.5 text-sm text-muted-foreground">
{t('queue.subtitle', 'Outgoing recipients still in the queue, by destination')}
</p>
</div>
<Link
to="/Management/x:QueuedMessage"
className="inline-flex shrink-0 items-center gap-1 text-sm font-medium text-primary hover:underline"
>
{t('queue.open', 'Open the queue')}
<ArrowUpRight className="h-3.5 w-3.5" />
</Link>
</CardHeader>
<CardContent>
{rows.length === 0 ? (
<div className="flex h-[228px] flex-col items-center justify-center gap-2 rounded-xl border border-dashed text-sm text-muted-foreground">
<PartyPopper className="h-6 w-6 text-emerald-500" />
{t('queue.empty', 'Nothing waiting. Everything has gone out.')}
</div>
) : (
<div className="space-y-2.5">
{rows.map((r) => {
const total = r.scheduled + r.retrying + r.failed;
const seg = (n: number) => `${(n / max) * 100}%`;
return (
<Link
key={r.domain}
to={`/Management/x:QueuedMessage?f.to=${encodeURIComponent(r.domain)}`}
className="group grid grid-cols-[minmax(0,9rem)_minmax(0,1fr)_2.5rem] items-center gap-3 text-sm"
title={t('queue.rowTitle', '{{domain}}: {{s}} waiting, {{r}} retrying, {{f}} gave up', {
domain: r.domain,
s: r.scheduled,
r: r.retrying,
f: r.failed,
})}
>
<span className="truncate font-mono text-xs group-hover:text-primary">{r.domain}</span>
<span className="flex h-3 overflow-hidden rounded-full bg-muted">
<span className="h-full bg-[var(--chart-1)] transition-all" style={{ width: seg(r.scheduled) }} />
<span className="h-full bg-amber-500 transition-all" style={{ width: seg(r.retrying) }} />
<span className="h-full bg-rose-500 transition-all" style={{ width: seg(r.failed) }} />
</span>
<span className="text-right tabular-nums text-muted-foreground">{total}</span>
</Link>
);
})}
<div className="flex flex-wrap gap-4 pt-2 text-xs text-muted-foreground">
{legend.map((l) => (
<span key={l.label} className="inline-flex items-center gap-1.5">
<span className={`h-2.5 w-2.5 rounded-full ${l.cls}`} />
{l.label}
</span>
))}
{waiting.length > MAX_ROWS &&
t('queue.more', '+{{count}} more destinations', { count: waiting.length - MAX_ROWS })}
</div>
</div>
)}
</CardContent>
</Card>
);
}
+44 -28
View File
@@ -1,12 +1,18 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*
* Modified by Coffey Labs in 2026 for INBUXA.
*/
import { IconTile } from '@/components/common/IconTile';
import { useMemo } from 'react';
import * as LucideIcons from 'lucide-react';
import { Info } from 'lucide-react';
import { ArrowUpRight, Info } from 'lucide-react';
import { Link } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { hrefFor, useDashLink } from '../links';
import { LineChart, Line } from 'recharts';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
@@ -17,42 +23,31 @@ import { cardValue, formatValue, sparklineData, computeDelta } from '../helpers'
import { useLiveMetricsStore } from '../stores/liveMetricsStore';
import { getChartColor } from '@/components/ui/chart';
const warnedIcons = new Set<string>();
function LucideIcon({ name, className }: { name: string; className?: string }) {
const formatted = name
.split('-')
.map((s) => s[0].toUpperCase() + s.slice(1))
.join('');
const IconComp = (LucideIcons as Record<string, unknown>)[formatted] as LucideIcons.LucideIcon | undefined;
if (!IconComp) {
if (import.meta.env.DEV && !warnedIcons.has(name)) {
warnedIcons.add(name);
console.warn(`Unknown icon name: "${name}"`);
}
return <LucideIcons.HelpCircle className={className} />;
}
return <IconComp className={className} />;
}
interface StatCardProps {
card: CardSchema;
historySamples: Metric[];
historyWindow: { from: Date; to: Date };
/** INBUXA: a value counted from the server's objects, used when live metrics aren't available. */
fallback?: number;
}
export function StatCard({ card, historySamples, historyWindow }: StatCardProps) {
export function StatCard({ card, historySamples, historyWindow, fallback }: StatCardProps) {
const liveSnapshot = useLiveMetricsStore((s) => s.snapshot);
const liveStatus = useLiveMetricsStore((s) => s.status);
const link = useDashLink(card.metrics);
const value = useMemo(() => {
if (card.source === 'live' && fallback !== undefined && liveStatus !== 'open') return fallback;
if (card.source === 'live') {
const liveSamples = card.metrics.map((id) => liveSnapshot.get(id)).filter((m): m is Metric => m !== undefined);
return cardValue(card, liveSamples);
}
return cardValue(card, historySamples);
}, [card, liveSnapshot, historySamples]);
}, [card, liveSnapshot, historySamples, fallback, liveStatus]);
const formattedValue = formatValue(value, card.format);
// INBUXA: a live number the server can't report yet reads as unknown, not as zero.
const unknown = card.source === 'live' && liveStatus !== 'open' && fallback === undefined;
const formattedValue = unknown ? '—' : formatValue(value, card.format);
const { from, to } = historyWindow;
@@ -69,12 +64,21 @@ export function StatCard({ card, historySamples, historyWindow }: StatCardProps)
return computeDelta(card, historySamples, from, to);
}, [card, historySamples, from, to]);
return (
<Card>
<CardContent className="p-4">
const body = (
<Card
className={cn(
'h-full transition-all hover:shadow-md',
link &&
'group-hover:-translate-y-0.5 group-hover:border-primary/50 group-focus-visible:ring-2 group-focus-visible:ring-ring',
)}
>
<CardContent className="p-5">
<div className="flex items-center gap-2">
<LucideIcon name={card.icon} className="h-4 w-4 text-muted-foreground" />
<IconTile name={card.icon} size="sm" />
<span className="text-sm font-medium text-muted-foreground">{card.title}</span>
{link && (
<ArrowUpRight className="ml-auto h-4 w-4 shrink-0 text-muted-foreground/0 transition-colors group-hover:text-primary" />
)}
{card.description && (
<TooltipProvider>
<Tooltip>
@@ -89,7 +93,7 @@ export function StatCard({ card, historySamples, historyWindow }: StatCardProps)
)}
</div>
<div className="mt-2 text-2xl font-bold">{formattedValue}</div>
<div className="mt-3 font-display text-3xl font-semibold tracking-tight">{formattedValue}</div>
{(delta || sparkline) && (
<div className="mt-1 flex items-center gap-2">
@@ -119,4 +123,16 @@ export function StatCard({ card, historySamples, historyWindow }: StatCardProps)
</CardContent>
</Card>
);
return link ? (
<Link
to={hrefFor(link)}
className="group block focus-visible:outline-none"
aria-label={`${card.title}: ${link.label}`}
>
{body}
</Link>
) : (
body
);
}
@@ -0,0 +1,77 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Fragment, type ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { CircleAlert } from 'lucide-react';
import { usePermissions } from '@/hooks/usePermissions';
import type { ServerFacts } from '../serverFacts';
import { hrefFor, type DashLink } from '../links';
interface Phrase {
text: string;
link: DashLink;
}
/**
* What needs a look, in one sentence: failed tasks, messages retrying,
* recipients given up on. Nothing shows while all is well. Every phrase is
* a link to where you'd deal with it.
*/
export function StatusLine({ facts }: { facts: ServerFacts | null }) {
const { t } = useTranslation();
const { canViewObject } = usePermissions();
if (!facts) return null;
const n = (key: string, count: number, one: string, other: string) =>
t(key, { count, defaultValue_one: one, defaultValue_other: other });
const attention: Phrase[] = [];
if (facts.failedTasks)
attention.push({
text: n('status.failedTasks', facts.failedTasks, '{{count}} failed task', '{{count}} failed tasks'),
link: { viewName: 'x:Task/TaskFailed', section: 'Management', label: '' },
});
if (facts.retrying)
attention.push({
text: n('status.retrying', facts.retrying, '{{count}} message retrying', '{{count}} messages retrying'),
link: { viewName: 'x:QueuedMessage', section: 'Management', label: '' },
});
const bounced = facts.waiting?.reduce((s, w) => s + w.failed, 0) ?? 0;
if (bounced)
attention.push({
text: n('status.bounced', bounced, '{{count}} recipient failed', '{{count}} recipients failed'),
link: { viewName: 'x:QueuedMessage', section: 'Management', label: '' },
});
// Quiet when all is well: the line only appears when something needs a look.
const visible = attention.filter((p) => canViewObject(p.link.viewName));
if (visible.length === 0) return null;
const lead = n('status.needsLook', visible.length, 'One thing needs a look:', '{{count}} things need a look:');
const list: ReactNode[] = visible.map((p, i) => (
<Fragment key={p.text}>
{i > 0 && (i === visible.length - 1 ? t('status.and', ' and ') : ', ')}
<Link
to={hrefFor(p.link)}
className="font-medium text-foreground underline decoration-primary/40 decoration-2 underline-offset-4 transition-colors hover:decoration-primary"
>
{p.text}
</Link>
</Fragment>
));
return (
<div className="flex items-center gap-3 rounded-2xl border border-highlight/40 bg-highlight-soft px-5 py-3.5 text-[15px]">
<CircleAlert className="h-5 w-5 shrink-0 text-highlight" />
<p className="text-muted-foreground">
<span className="font-medium text-foreground">{lead}</span> {list}.
</p>
</div>
);
}
@@ -0,0 +1,153 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useEffect, useMemo, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowUpRight, HardDrive } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { formatValue } from '../helpers';
import { squarify } from '../treemap';
import type { StorageUse } from '../serverFacts';
const MAX_TILES = 24;
const HEIGHT = 260;
/** How full an account is, as a tile color: calm until it nears its quota. */
function fillClass(u: StorageUse): string {
if (!u.quota) return 'bg-[var(--chart-1)]/75 hover:bg-[var(--chart-1)]';
const pct = u.used / u.quota;
if (pct >= 0.9) return 'bg-rose-500/80 hover:bg-rose-500';
if (pct >= 0.75) return 'bg-amber-500/80 hover:bg-amber-500';
return 'bg-[var(--chart-1)]/75 hover:bg-[var(--chart-1)]';
}
/**
* Who uses the storage, as a map: every person is a tile sized by the space
* their mail, files and calendars take, and colored by how close they are to
* their quota. The biggest users are the biggest tiles; a click opens them.
*/
export function StorageTreemap({ storage }: { storage: StorageUse[] }) {
const { t } = useTranslation();
const box = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(0);
useEffect(() => {
const el = box.current;
if (!el) return;
const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
ro.observe(el);
return () => ro.disconnect();
}, []);
const { tiles, total, others } = useMemo(() => {
const sorted = [...storage].filter((s) => s.used > 0).sort((a, b) => b.used - a.used);
const top = sorted.slice(0, MAX_TILES);
const rest = sorted.slice(MAX_TILES);
const restUse = rest.reduce((s, r) => s + r.used, 0);
const items: StorageUse[] = restUse
? [
...top,
{ id: '', name: t('storage.others', '{{count}} others', { count: rest.length }), used: restUse, quota: null },
]
: top;
return {
tiles: squarify(items, (i) => i.used, width, HEIGHT),
total: sorted.reduce((s, r) => s + r.used, 0),
others: rest.length,
};
}, [storage, width, t]);
const nearFull = storage.filter((s) => s.quota && s.used / s.quota >= 0.9).length;
return (
<Card>
<CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-3">
<div>
<CardTitle className="text-base">{t('storage.title', 'Who uses the space')}</CardTitle>
<p className="mt-0.5 text-sm text-muted-foreground">
{total > 0
? t('storage.subtitle', '{{total}} across {{count}} people', {
total: formatValue(total, 'bytes'),
count: storage.length,
})
: t('storage.empty', 'No one has stored anything yet.')}
{nearFull > 0 && (
<span className="ml-2 font-medium text-rose-600 dark:text-rose-400">
{t('storage.nearFull', {
count: nearFull,
defaultValue_one: '{{count}} nearly full',
defaultValue_other: '{{count}} nearly full',
})}
</span>
)}
</p>
</div>
<Link
to="/Management/x:Account/User"
className="inline-flex shrink-0 items-center gap-1 text-sm font-medium text-primary hover:underline"
>
{t('storage.seePeople', 'See people')}
<ArrowUpRight className="h-3.5 w-3.5" />
</Link>
</CardHeader>
<CardContent>
<div ref={box} className="relative w-full overflow-hidden rounded-xl" style={{ height: HEIGHT }}>
{total === 0 && (
<div className="flex h-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed text-sm text-muted-foreground">
<HardDrive className="h-6 w-6" />
{t('storage.emptyHint', 'Tiles appear here as people store mail and files.')}
</div>
)}
{tiles.map(({ item, x, y, w, h }) => {
const pct = item.quota ? Math.round((item.used / item.quota) * 100) : null;
const label = `${item.name}: ${formatValue(item.used, 'bytes')}${pct !== null ? ` (${pct}%)` : ''}`;
const roomy = w > 90 && h > 44;
const style = { left: x + 1, top: y + 1, width: Math.max(0, w - 2), height: Math.max(0, h - 2) };
const body = (
<>
{roomy && (
<>
<span className="block truncate text-xs font-medium">{item.name}</span>
<span className="block text-[11px] opacity-80">
{formatValue(item.used, 'bytes')}
{pct !== null && ` · ${pct}%`}
</span>
</>
)}
</>
);
const cls = cn(
'absolute overflow-hidden rounded-md p-2 text-left text-white transition-colors',
item.id ? fillClass(item) : 'bg-muted-foreground/40',
);
return item.id ? (
<Link
key={item.id}
to={`/Management/x:Account/User/${item.id}`}
title={label}
className={cls}
style={style}
>
{body}
</Link>
) : (
<div key="others" title={label} className={cls} style={style}>
{body}
</div>
);
})}
</div>
{others > 0 && (
<p className="mt-2 text-xs text-muted-foreground">
{t('storage.topOnly', 'The {{count}} biggest are shown on their own.', { count: MAX_TILES })}
</p>
)}
</CardContent>
</Card>
);
}
@@ -0,0 +1,70 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { Metric } from '../types/metrics';
import { weeklyGrid } from '../rhythm';
/**
* The server's weekly rhythm: one square per hour of the week, darker the
* more mail moved through it. Busy mornings, quiet weekends and a 3 a.m.
* spike that shouldn't be there all show at a glance. Hidden until
* monitoring has recorded something.
*/
export function WeeklyHeatmap({ samples }: { samples: Metric[] }) {
const { t, i18n } = useTranslation();
const grid = useMemo(() => weeklyGrid(samples), [samples]);
const max = Math.max(...grid.flat());
const days = useMemo(() => {
const fmt = new Intl.DateTimeFormat(i18n.language, { weekday: 'short' });
// 2024-01-01 was a Monday.
return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(2024, 0, 1 + i)));
}, [i18n.language]);
if (max <= 0) return null;
return (
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-base">{t('rhythm.title', 'Your mails weekly rhythm')}</CardTitle>
<p className="text-sm text-muted-foreground">
{t('rhythm.subtitle', 'Messages handled by hour and day, over the period above')}
</p>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<div className="grid min-w-[560px] grid-cols-[2.5rem_repeat(24,minmax(0,1fr))] gap-1">
{grid.map((row, d) => (
<div key={d} className="contents">
<span className="self-center text-xs text-muted-foreground">{days[d]}</span>
{row.map((v, h) => (
<span
key={h}
title={t('rhythm.cell', '{{day}} {{hour}}:00, {{count}} messages', {
day: days[d],
hour: String(h).padStart(2, '0'),
count: v,
})}
className="aspect-square rounded-[3px] bg-[var(--chart-1)] transition-transform hover:scale-125"
style={{ opacity: v === 0 ? 0.08 : 0.2 + 0.8 * (v / max) }}
/>
))}
</div>
))}
<span />
{Array.from({ length: 24 }, (_, h) => (
<span key={h} className="text-center text-[10px] text-muted-foreground">
{h % 6 === 0 ? h : ''}
</span>
))}
</div>
</div>
</CardContent>
</Card>
);
}
+70
View File
@@ -0,0 +1,70 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { describe, expect, it } from 'vitest';
import { hrefFor, linkForMetrics } from './links';
import { summarizeQueue } from './serverFacts';
import { weeklyGrid } from './rhythm';
describe('linkForMetrics', () => {
it('sends each number to where you act on it', () => {
expect(linkForMetrics(['queue.count'])?.viewName).toBe('x:QueuedMessage');
expect(linkForMetrics(['user.count'])?.viewName).toBe('x:Account/User');
expect(linkForMetrics(['queue.message-queued'])?.viewName).toBe('x:Trace/InboundDelivery');
expect(linkForMetrics(['queue.authenticated-message-queued'])?.viewName).toBe('x:Trace/OutboundDelivery');
expect(linkForMetrics(['security.scan-ban'])).toMatchObject({ viewName: 'x:BlockedIp', section: 'Settings' });
expect(linkForMetrics(['incoming-report.tls-report-with-warnings'])?.viewName).toBe('x:TlsExternalReport');
});
it('takes the first metric that has a home', () => {
expect(linkForMetrics(['no.such', 'domain.count'])?.viewName).toBe('x:Domain');
expect(linkForMetrics(['no.such'])).toBeNull();
});
it('carries filters the list page understands', () => {
expect(hrefFor({ viewName: 'x:QueuedMessage', section: 'Management', label: '', filters: { to: 'a.com' } })).toBe(
'/Management/x:QueuedMessage?f.to=a.com',
);
});
});
describe('summarizeQueue', () => {
it('groups outstanding recipients by destination, busiest first', () => {
const { waiting, retrying } = summarizeQueue([
{
recipients: {
'[email protected]': { status: { '@type': 'TemporaryFailure' } },
'[email protected]': { status: { '@type': 'Scheduled' } },
'[email protected]': { status: { '@type': 'Completed' } },
},
},
{ recipients: { '[email protected]': { status: { '@type': 'PermanentFailure' } } } },
{ recipients: { '[email protected]': {} } },
]);
expect(waiting).toEqual([
{ domain: 'gmail.com', scheduled: 2, retrying: 1, failed: 0 },
{ domain: 'example.org', scheduled: 0, retrying: 0, failed: 1 },
]);
expect(retrying).toBe(1);
});
});
describe('weeklyGrid', () => {
it('buckets samples by local weekday (Monday first) and hour', () => {
const at = (d: Date, count: number, metric = 'queue.message-queued') => ({
'@type': 'Counter' as const,
metric,
count,
timestamp: d.toISOString(),
});
const monday9 = new Date(2024, 0, 1, 9, 30);
const sunday23 = new Date(2024, 0, 7, 23, 5);
const grid = weeklyGrid([at(monday9, 3), at(monday9, 2), at(sunday23, 1), at(monday9, 50, 'other.metric')]);
expect(grid[0][9]).toBe(5);
expect(grid[6][23]).toBe(1);
expect(grid.flat().reduce((a, b) => a + b, 0)).toBe(6);
});
});
+72
View File
@@ -0,0 +1,72 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* Where each number on the dashboard leads: the page where you can act on
* what it counts. Matched on the metric's name, most specific first; a card
* or chart takes the link of its first metric that has one.
*/
import { usePermissions } from '@/hooks/usePermissions';
export interface DashLink {
/** A view name from the server's layout, e.g. x:QueuedMessage. */
viewName: string;
/** The layout section the view lives in. */
section: 'Management' | 'Settings';
/** Filters applied on arrival, as the list page's own f.* URL filters. */
filters?: Record<string, string>;
/** What the link says, in a few words: "Open the queue". */
label: string;
}
const RULES: [RegExp, DashLink][] = [
[/^user\.count$/, { viewName: 'x:Account/User', section: 'Management', label: 'See people' }],
[/^domain\.count$/, { viewName: 'x:Domain', section: 'Management', label: 'See domains' }],
[/^queue\.count$/, { viewName: 'x:QueuedMessage', section: 'Management', label: 'Open the queue' }],
[
/^queue\.message-queued$/,
{ viewName: 'x:Trace/InboundDelivery', section: 'Management', label: 'See deliveries in' },
],
[/^queue\./, { viewName: 'x:Trace/OutboundDelivery', section: 'Management', label: 'See deliveries out' }],
[/^delivery\./, { viewName: 'x:Trace/OutboundDelivery', section: 'Management', label: 'See deliveries out' }],
[
/^smtp\.connection-start$/,
{ viewName: 'x:Trace/InboundDelivery', section: 'Management', label: 'See deliveries in' },
],
[/^security\.|^auth\.failed$/, { viewName: 'x:BlockedIp', section: 'Settings', label: 'See blocked IPs' }],
[/^message-ingest\.(spam|ham)$/, { viewName: 'x:SpamSettings', section: 'Settings', label: 'Spam filter' }],
[
/^incoming-report\.dmarc/,
{ viewName: 'x:DmarcExternalReport', section: 'Management', label: 'Open DMARC reports' },
],
[/^incoming-report\.tls/, { viewName: 'x:TlsExternalReport', section: 'Management', label: 'Open TLS reports' }],
[/^server\.memory$|^store\./, { viewName: 'x:Log', section: 'Management', label: 'See the logs' }],
[/^message-ingest\.|^dns\./, { viewName: 'x:Log', section: 'Management', label: 'See the logs' }],
];
export function linkForMetrics(metrics: string[]): DashLink | null {
for (const m of metrics) {
const hit = RULES.find(([re]) => re.test(m));
if (hit) return hit[1];
}
return null;
}
/** The address of a link, with its filters as the list page reads them. */
export function hrefFor(link: DashLink): string {
const q = new URLSearchParams();
for (const [k, v] of Object.entries(link.filters ?? {})) q.set(`f.${k}`, v);
const qs = q.toString();
return `/${link.section}/${link.viewName}${qs ? `?${qs}` : ''}`;
}
/** The page a set of metrics leads to, if the viewer may open it. */
export function useDashLink(metrics: string[]): DashLink | null {
const { canViewObject } = usePermissions();
const link = linkForMetrics(metrics);
return link && canViewObject(link.viewName) ? link : null;
}
+28
View File
@@ -0,0 +1,28 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { Metric } from './types/metrics';
/** Received plus sent: every message the server handled. */
export const RHYTHM_METRICS = [
'queue.message-queued',
'queue.authenticated-message-queued',
'queue.dsn-queued',
'queue.report-queued',
];
/** Sum the samples into a 7×24 grid, Monday first, in the viewer's time zone. */
export function weeklyGrid(samples: Metric[], metrics: string[] = RHYTHM_METRICS): number[][] {
const want = new Set(metrics);
const grid = Array.from({ length: 7 }, () => new Array<number>(24).fill(0));
for (const s of samples) {
if (!want.has(s.metric) || !s.timestamp) continue;
const d = new Date(s.timestamp);
if (Number.isNaN(d.getTime())) continue;
grid[(d.getDay() + 6) % 7][d.getHours()] += s.count;
}
return grid;
}
+191
View File
@@ -0,0 +1,191 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* What the dashboard can know from the server's ordinary objects, with no
* metrics at all: how many people, domains, queued messages, blocked
* addresses, failed tasks and reports there are, who uses how much storage,
* and where queued mail is stuck. One JMAP request, refreshed every minute.
* A query the viewer isn't allowed to run just leaves that fact out.
*/
import { useCallback, useEffect, useState } from 'react';
import { getAccountId, jmapRequest } from '@/services/jmap/client';
import type { JmapMethodCall } from '@/types/jmap';
export interface StorageUse {
id: string;
name: string;
used: number;
/** The account's disk quota in bytes, when it has one. */
quota: number | null;
}
export type RecipientState = 'Scheduled' | 'TemporaryFailure' | 'PermanentFailure' | 'Completed';
export interface WaitingDomain {
domain: string;
scheduled: number;
retrying: number;
failed: number;
}
export interface ServerFacts {
users?: number;
groups?: number;
domains?: number;
queued?: number;
blockedIps?: number;
failedTasks?: number;
dmarcReports?: number;
tlsReports?: number;
storage?: StorageUse[];
waiting?: WaitingDomain[];
/** Messages with at least one recipient in temporary failure. */
retrying?: number;
}
const COUNTS: [keyof ServerFacts, string, Record<string, unknown>?][] = [
['users', 'x:Account', { '@type': 'User' }],
['groups', 'x:Account', { '@type': 'Group' }],
['domains', 'x:Domain'],
['queued', 'x:QueuedMessage'],
['blockedIps', 'x:BlockedIp'],
['failedTasks', 'x:Task', { status: 'Failed' }],
['dmarcReports', 'x:DmarcExternalReport'],
['tlsReports', 'x:TlsExternalReport'],
];
const DETAIL_LIMIT = 250;
function quotaOf(quotas: unknown): number | null {
if (!quotas || typeof quotas !== 'object') return null;
const q = quotas as Record<string, unknown>;
const disk = q.maxDiskQuota ?? q.diskQuota ?? q.disk;
return typeof disk === 'number' && disk > 0 ? disk : null;
}
interface QueuedRow {
recipients?: Record<string, { status?: { '@type'?: string } }>;
}
export function summarizeQueue(list: QueuedRow[]): { waiting: WaitingDomain[]; retrying: number } {
const byDomain = new Map<string, WaitingDomain>();
let retrying = 0;
for (const m of list) {
let anyRetry = false;
for (const [addr, r] of Object.entries(m.recipients ?? {})) {
const state = (r.status?.['@type'] ?? 'Scheduled') as RecipientState;
if (state === 'Completed') continue;
const domain = addr.split('@')[1]?.toLowerCase() ?? addr;
const row = byDomain.get(domain) ?? { domain, scheduled: 0, retrying: 0, failed: 0 };
if (state === 'TemporaryFailure') {
row.retrying++;
anyRetry = true;
} else if (state === 'PermanentFailure') row.failed++;
else row.scheduled++;
byDomain.set(domain, row);
}
if (anyRetry) retrying++;
}
const waiting = [...byDomain.values()].sort(
(a, b) => b.scheduled + b.retrying + b.failed - (a.scheduled + a.retrying + a.failed),
);
return { waiting, retrying };
}
async function fetchFacts(): Promise<ServerFacts> {
const calls: JmapMethodCall[] = [];
const accountFor = (obj: string) => {
try {
return getAccountId(obj);
} catch {
return null;
}
};
COUNTS.forEach(([key, obj, filter]) => {
const accountId = accountFor(obj);
if (!accountId) return;
calls.push([`${obj}/query`, { accountId, filter, limit: 1, calculateTotal: true }, `c:${key}`]);
});
const accountAcct = accountFor('x:Account');
if (accountAcct) {
calls.push([
'x:Account/query',
{ accountId: accountAcct, filter: { '@type': 'User' }, limit: DETAIL_LIMIT },
'q:storage',
]);
calls.push([
'x:Account/get',
{
accountId: accountAcct,
'#ids': { resultOf: 'q:storage', name: 'x:Account/query', path: '/ids' },
properties: ['emailAddress', 'name', 'usedDiskQuota', 'quotas'],
},
'g:storage',
]);
}
const queueAcct = accountFor('x:QueuedMessage');
if (queueAcct) {
calls.push(['x:QueuedMessage/query', { accountId: queueAcct, limit: DETAIL_LIMIT }, 'q:queue']);
calls.push([
'x:QueuedMessage/get',
{
accountId: queueAcct,
'#ids': { resultOf: 'q:queue', name: 'x:QueuedMessage/query', path: '/ids' },
properties: ['recipients'],
},
'g:queue',
]);
}
const responses = await jmapRequest(calls);
const facts: ServerFacts = {};
for (const [name, body, tag] of responses) {
if (name === 'error') continue;
const b = body as Record<string, unknown>;
if (tag.startsWith('c:') && typeof b.total === 'number') {
(facts as Record<string, unknown>)[tag.slice(2)] = b.total;
} else if (tag === 'g:storage') {
facts.storage = ((b.list as Record<string, unknown>[]) ?? []).map((a) => ({
id: String(a.id),
name: String(a.emailAddress ?? a.name ?? a.id),
used: typeof a.usedDiskQuota === 'number' ? a.usedDiskQuota : 0,
quota: quotaOf(a.quotas),
}));
} else if (tag === 'g:queue') {
Object.assign(facts, summarizeQueue((b.list as QueuedRow[]) ?? []));
}
}
return facts;
}
const REFRESH_MS = 60_000;
export function useServerFacts() {
const [facts, setFacts] = useState<ServerFacts | null>(null);
const [error, setError] = useState<string | null>(null);
const refresh = useCallback(() => {
fetchFacts()
.then((f) => {
setFacts(f);
setError(null);
})
.catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)));
}, []);
useEffect(() => {
// Fetching syncs with the server; state lands from the promise, not here.
const first = setTimeout(refresh, 0);
const timer = setInterval(refresh, REFRESH_MS);
return () => {
clearTimeout(first);
clearInterval(timer);
};
}, [refresh]);
return { facts, error, refresh };
}
+36
View File
@@ -0,0 +1,36 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { describe, expect, it } from 'vitest';
import { squarify } from './treemap';
describe('squarify', () => {
it('fills the box, with areas in proportion to the values', () => {
const tiles = squarify([6, 6, 4, 3, 2, 2, 1], (v) => v, 600, 400);
expect(tiles).toHaveLength(7);
const area = tiles.reduce((s, t) => s + t.w * t.h, 0);
expect(area).toBeCloseTo(600 * 400, 3);
for (const t of tiles) {
expect(t.w * t.h).toBeCloseTo((t.item / 24) * 600 * 400, 3);
expect(t.x).toBeGreaterThanOrEqual(-1e-9);
expect(t.y).toBeGreaterThanOrEqual(-1e-9);
expect(t.x + t.w).toBeLessThanOrEqual(600 + 1e-6);
expect(t.y + t.h).toBeLessThanOrEqual(400 + 1e-6);
}
});
it('keeps tiles reasonably square', () => {
const tiles = squarify([6, 6, 4, 3, 2, 2, 1], (v) => v, 600, 400);
const worst = Math.max(...tiles.map((t) => Math.max(t.w / t.h, t.h / t.w)));
expect(worst).toBeLessThan(4);
});
it('gives nothing for nothing', () => {
expect(squarify([0, 0], (v) => v, 100, 100)).toEqual([]);
expect(squarify([], (v: number) => v, 100, 100)).toEqual([]);
expect(squarify([1], (v) => v, 0, 100)).toEqual([]);
});
});
+82
View File
@@ -0,0 +1,82 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
export interface Tile<T> {
item: T;
x: number;
y: number;
w: number;
h: number;
}
/**
* Squarified treemap (Bruls, Huizing and van Wijk): lay the items out in a
* w×h box, each with area proportional to its value, keeping tiles as close
* to square as the values allow. Items with no value get no tile.
*/
export function squarify<T>(items: T[], value: (item: T) => number, w: number, h: number): Tile<T>[] {
const nodes = items
.map((item) => ({ item, v: Math.max(0, value(item)) }))
.filter((n) => n.v > 0)
.sort((a, b) => b.v - a.v);
const total = nodes.reduce((s, n) => s + n.v, 0);
if (total === 0 || w <= 0 || h <= 0) return [];
const scale = (w * h) / total;
const areas = nodes.map((n) => ({ item: n.item, a: n.v * scale }));
const out: Tile<T>[] = [];
let x = 0;
let y = 0;
let rw = w;
let rh = h;
const worst = (row: { a: number }[], side: number) => {
const sum = row.reduce((s, r) => s + r.a, 0);
const max = Math.max(...row.map((r) => r.a));
const min = Math.min(...row.map((r) => r.a));
return Math.max((side * side * max) / (sum * sum), (sum * sum) / (side * side * min));
};
const place = (row: { item: T; a: number }[]) => {
const sum = row.reduce((s, r) => s + r.a, 0);
if (rw >= rh) {
// A column on the left.
const cw = sum / rh;
let cy = y;
for (const r of row) {
const th = r.a / cw;
out.push({ item: r.item, x, y: cy, w: cw, h: th });
cy += th;
}
x += cw;
rw -= cw;
} else {
// A row along the top.
const ch = sum / rw;
let cx = x;
for (const r of row) {
const tw = r.a / ch;
out.push({ item: r.item, x: cx, y, w: tw, h: ch });
cx += tw;
}
y += ch;
rh -= ch;
}
};
let row: { item: T; a: number }[] = [];
for (const node of areas) {
const side = Math.min(rw, rh);
if (row.length === 0 || worst([...row, node], side) <= worst(row, side)) {
row.push(node);
} else {
place(row);
row = [node];
}
}
if (row.length) place(row);
return out;
}
File diff suppressed because it is too large Load Diff
+204
View File
@@ -0,0 +1,204 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AlertTriangle, Check, Copy, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { WizardNote, WizardShell } from '@/components/wizard/WizardShell';
import { cn } from '@/lib/utils';
import { RECORD_GROUPS } from './records';
import { RESOLVER_NAME } from './liveCheck';
import { useRecordChecks } from './useRecordChecks';
import { ProgressRing, StateIcon } from './parts';
import type { DomainInfo } from './ConnectDnsPage';
import { hostLabel, pasteParts, type ZoneRecord } from './zone';
function CopyButton({ text, label }: { text: string; label: string }) {
const { t } = useTranslation();
const [done, setDone] = useState(false);
return (
<TooltipProvider delayDuration={200}>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
aria-label={label}
onClick={() => {
void navigator.clipboard.writeText(text).then(() => {
setDone(true);
setTimeout(() => setDone(false), 1500);
});
}}
className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
>
{done ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />}
</button>
</TooltipTrigger>
<TooltipContent>{done ? t('dnsCopy.copied', 'Copied') : label}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
/**
* The by-hand path, for hosts the server can't drive: every record set out
* the way a host's DNS panel asks for it, a copy button on each part, and a
* live tick as each one appears in public DNS.
*/
export function CopyStep({
common,
domain,
zoneName,
records,
onBack,
onDone,
}: {
common: Omit<Parameters<typeof WizardShell>[0], 'children'>;
domain: DomainInfo;
zoneName: string;
records: ZoneRecord[];
onBack: () => void;
onDone: () => void;
}) {
const { t } = useTranslation();
const { states, checking, lastChecked, check, liveCount, allLive } = useRecordChecks(records, domain.id, false);
const pct = records.length ? Math.round((liveCount / records.length) * 100) : 0;
const zoneText = records.map((r) => `${r.name}. IN ${r.type} ${r.value}`).join('\n');
return (
<WizardShell
{...common}
subtitle={t('dnsCopy.subtitle', 'Add these at your DNS host. Each one ticks green as the internet sees it.')}
onBack={onBack}
onNext={onDone}
nextLabel={allLive ? t('dnsWizard.done', 'Done') : t('dnsCopy.later', 'Ill finish later')}
aside={
<>
<WizardNote title={t('dnsCopy.howTitle', 'How to add them')}>
<p>
{t(
'dnsCopy.how1',
'In your DNS hosts panel, add a record for each row: pick the type, paste the name and the value.',
)}
</p>
<p>
{t(
'dnsCopy.how2',
'The name is shown the way most panels want it: “@” means {{zone}} itself. If yours asks for full names, add .{{zone}} to the end.',
{ zone: zoneName },
)}
</p>
<p>
{t(
'dnsCopy.how3',
'Set the TTL to Auto or one hour. If a record with the same name and type exists, replace it.',
)}
</p>
</WizardNote>
<WizardNote title={t('dnsWizard.howChecked', 'How this is checked')}>
<p>
{t(
'dnsWizard.howCheckedBody',
'Every few seconds this page asks {{resolver}} for each record, so a green tick means the whole internet can see it.',
{ resolver: RESOLVER_NAME },
)}
</p>
</WizardNote>
</>
}
>
<div className="flex flex-wrap items-center gap-6">
<ProgressRing pct={pct} done={allLive} />
<div className="min-w-0 flex-1 space-y-1">
<h2 className="text-lg font-semibold">
{allLive
? t('dnsWizard.allLive', 'All set. {{domain}} is live.', { domain: domain.name })
: t('dnsWizard.progress', '{{live}} of {{total}} records are live', {
live: liveCount,
total: records.length,
})}
</h2>
<div className="flex flex-wrap items-center gap-3 pt-1 text-xs text-muted-foreground">
<Button variant="outline" size="sm" onClick={() => void check()} disabled={checking}>
<RefreshCw className={cn('h-3.5 w-3.5', checking && 'animate-spin')} />
{t('dnsWizard.checkNow', 'Check now')}
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => void navigator.clipboard.writeText(zoneText)}
title={t('dnsCopy.zoneHint', 'For hosts that can import a zone file')}
>
<Copy className="h-3.5 w-3.5" />
{t('dnsCopy.copyZone', 'Copy all as a zone file')}
</Button>
{lastChecked &&
t('dnsWizard.lastChecked', 'Last checked {{time}}', { time: lastChecked.toLocaleTimeString() })}
</div>
</div>
</div>
{RECORD_GROUPS.map((g) => {
const rows = records.filter((r) => g.kinds.some((k) => k.kind === r.kind));
if (rows.length === 0) return null;
return (
<section key={g.id} className="space-y-2">
<div>
<h3 className="font-medium">{g.title}</h3>
<p className="text-sm text-muted-foreground">{g.why}</p>
</div>
<div className="divide-y rounded-xl border">
{rows.map((r, i) => {
const host = hostLabel(r.name, zoneName);
const { value, priority } = pasteParts(r);
return (
<div
key={`${r.name}-${r.type}-${i}`}
className="grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-3 gap-y-1 px-4 py-3 text-sm sm:grid-cols-[1.25rem_4.5rem_minmax(0,12rem)_minmax(0,1fr)] sm:items-center"
>
<StateIcon state={states.get(r)} />
<span className="flex flex-col font-mono text-xs font-semibold leading-tight">
{r.type}
{priority && (
<span className="font-sans text-[11px] font-normal text-muted-foreground">
{t('dnsCopy.priority', 'priority {{p}}', { p: priority })}
</span>
)}
</span>
<span className="col-start-2 flex min-w-0 items-center gap-1 sm:col-start-auto">
<span className="truncate font-mono text-xs" title={r.name}>
{host}
</span>
<CopyButton text={host} label={t('dnsCopy.copyName', 'Copy name')} />
</span>
<span className="col-start-2 flex min-w-0 items-center gap-1 sm:col-start-auto">
<span className="truncate font-mono text-xs text-muted-foreground" title={value}>
{value}
</span>
<CopyButton text={value} label={t('dnsCopy.copyValue', 'Copy value')} />
</span>
</div>
);
})}
</div>
</section>
);
})}
{records.some((r) => states.get(r) === 'different') && (
<p className="text-xs text-muted-foreground">
<AlertTriangle className="mr-1 inline h-3.5 w-3.5 text-highlight" />
{t(
'dnsWizard.differentHelp',
'An amber mark means that name has a different value right now, often an old record that hasnt expired from caches yet.',
)}
</p>
)}
</WizardShell>
);
}
+63
View File
@@ -0,0 +1,63 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { CheckCircle2, Wand2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { LaunchChoice } from '@/components/wizard/LaunchChoice';
import { useSchemaStore } from '@/stores/schemaStore';
/**
* At the top of a domain's DNS section: an invitation to have the server
* publish the records itself. It asks "guided or manual?" every time; manual
* closes the question and leaves you at the DNS Management field just below.
*/
export function DnsConnectCard({ domainId, automatic }: { domainId: string; automatic: boolean }) {
const { t } = useTranslation();
const navigate = useNavigate();
const section = useSchemaStore((s) => s.viewToSection['x:Domain']) ?? 'Management';
const [open, setOpen] = useState(false);
return (
<div className="flex flex-wrap items-center gap-4 rounded-xl border border-primary/30 bg-primary/5 p-4">
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/15 text-primary">
{automatic ? <CheckCircle2 className="h-5 w-5" /> : <Wand2 className="h-5 w-5" />}
</span>
<div className="min-w-0 flex-1">
<p className="font-medium">
{automatic
? t('dnsCard.autoTitle', 'The server keeps this domains DNS up to date')
: t('dnsCard.title', 'Let the server publish your DNS records')}
</p>
<p className="text-sm text-muted-foreground">
{automatic
? t('dnsCard.autoHint', 'See which records are live, or change what it publishes.')
: t(
'dnsCard.hint',
'Connect your DNS host, such as Cloudflare, and skip copying records by hand. Optional.',
)}
</p>
</div>
<Button type="button" variant={automatic ? 'outline' : 'default'} onClick={() => setOpen(true)}>
{automatic ? t('dnsCard.review', 'Check records') : t('dnsCard.start', 'Set it up')}
</Button>
<LaunchChoice
open={open}
onOpenChange={setOpen}
title={t('dnsCard.chooseTitle', 'Automatic DNS')}
guidedHint={t(
'dnsCard.guidedHint',
'Pick your DNS host, paste a key, choose records, and watch them go live. About two minutes.',
)}
manualHint={t('dnsCard.manualHint', 'Use the DNS Management setting below, with every option at once.')}
onGuided={() => navigate(`/${section}/Wizard/dns/${domainId}`)}
onManual={() => undefined}
/>
</div>
);
}
+28
View File
@@ -0,0 +1,28 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { describe, expect, it } from 'vitest';
import { providerForNameservers } from './detect';
describe('providerForNameservers', () => {
it('knows the big hosts', () => {
expect(providerForNameservers(['dean.ns.cloudflare.com', 'gina.ns.cloudflare.com.'])).toBe('Cloudflare');
expect(providerForNameservers(['ns-421.awsdns-52.com', 'ns-1707.awsdns-21.co.uk'])).toBe('Route53');
expect(providerForNameservers(['ns-cloud-a1.googledomains.com'])).toBe('GoogleCloudDns');
expect(providerForNameservers(['ns1-01.azure-dns.com', 'ns2-01.azure-dns.net'])).toBe('AzureDns');
expect(providerForNameservers(['ns1.digitalocean.com'])).toBe('DigitalOcean');
expect(providerForNameservers(['hydrogen.ns.hetzner.com', 'helium.ns.hetzner.de'])).toBe('Hetzner');
expect(providerForNameservers(['ns01.domaincontrol.com'])).toBe('Godaddy');
expect(providerForNameservers(['dns1.gandi.net', 'e.gandi-ns.fr'])).toBe('GandiV5');
});
it('refuses to guess for split or unknown hosting', () => {
expect(providerForNameservers(['dns1.p08.nsone.net', 'ns-421.awsdns-52.com'])).toBeNull();
expect(providerForNameservers(['ns1.example-hosting.net'])).toBeNull();
expect(providerForNameservers(['dean.ns.cloudflare.com', 'ns1.example-hosting.net'])).toBeNull();
expect(providerForNameservers([])).toBeNull();
});
});
+93
View File
@@ -0,0 +1,93 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* Where is a domain's DNS hosted? Found the way any resolver would: the SOA
* record names the zone that holds the domain (which may be a parent zone),
* and the zone's NS records name the host. The host is then matched against
* nameserver patterns we know for the providers the server can drive.
*/
import { dohQuery } from './liveCheck';
export interface DnsHosting {
/** The zone holding the domain, e.g. example.com for mail.example.com. */
zone: string;
nameservers: string[];
/** The server's provider type, when the host is one it can update. */
variant: string | null;
}
/**
* Nameserver suffixes by provider type. Only hosts whose nameservers are
* unambiguous are listed: a wrong guess costs the user more than no guess.
*/
const NAMESERVERS: [RegExp, string][] = [
[/\.ns\.cloudflare\.com$/, 'Cloudflare'],
[/\.awsdns-\d+\.(com|net|org|co\.uk)$/, 'Route53'],
[/^ns-cloud-[a-z]\d+\.googledomains\.com$/, 'GoogleCloudDns'],
[/\.azure-dns\.(com|net|org|info)$/, 'AzureDns'],
[/^ns\d\.digitalocean\.com$/, 'DigitalOcean'],
[/\.ns\.hetzner\.(com|de)$/, 'Hetzner'],
[/\.(ovh\.net|ovh\.ca|anycast\.me)$/, 'Ovh'],
[/\.domaincontrol\.com$/, 'Godaddy'],
[/\.porkbun\.com$/, 'Porkbun'],
[/^ns\d\.desec\.(io|org)$/, 'DeSEC'],
[/\.linode\.com$/, 'Linode'],
[/\.vultr\.com$/, 'Vultr'],
[/\.gandi\.net$|\.gandi-ns\.(fr|com|net)$/, 'GandiV5'],
[/\.registrar-servers\.com$/, 'Namecheap'],
[/\.dnsimple(-edge)?\.(com|net|org|info)$/, 'Dnsimple'],
[/\.bunny\.net$/, 'Bunny'],
[/\.nsone\.net$/, 'Ns1'],
[/\.ui-dns\.(com|de|org|biz)$/, 'Ionos'],
[/\.dnsmadeeasy\.com$/, 'DnsMadeEasy'],
[/\.cloudns\.net$/, 'ClouDns'],
[/^ns\d\.he\.net$/, 'Hurricane'],
[/\.vercel-dns\.com$/, 'Vercel'],
[/\.name\.com$/, 'NameDotCom'],
[/\.inwx\.(de|net|eu)$/, 'Inwx'],
[/\.transip\.(nl|net|eu)$/, 'Transip'],
[/\.scw\.cloud$/, 'Scaleway'],
[/\.infomaniak\.ch$/, 'Infomaniak'],
[/\.dns-parking\.com$/, 'Hostinger'],
[/\.akam\.net$/, 'EdgeDns'],
[/\.exoscale\.(ch|net|io|com)$/, 'Exoscale'],
[/\.netcup\.net$/, 'Netcup'],
[/\.joker\.com$/, 'Joker'],
[/\.glesys\.se$/, 'Glesys'],
[/\.dreamhost\.com$/, 'Dreamhost'],
[/\.easydns\.(com|net|org|info)$/, 'EasyDns'],
[/\.ultradns\.(com|net|org|biz|info|co\.uk)$/, 'UltraDns'],
[/\.mythic-beasts\.com$/, 'MythicBeasts'],
[/\.luadns\.net$/, 'LuaDns'],
[/\.spaceship\.net$/, 'Spaceship'],
[/\.hosting\.de$/, 'HostingDe'],
];
/** The provider type for a set of nameservers, if they all point to one we know. */
export function providerForNameservers(nameservers: string[]): string | null {
const hits = new Set<string>();
for (const ns of nameservers) {
const host = ns.toLowerCase().replace(/\.$/, '');
const match = NAMESERVERS.find(([re]) => re.test(host));
if (!match) return null;
hits.add(match[1]);
}
return hits.size === 1 ? [...hits][0] : null;
}
/** Find the zone and host for a domain; null when it isn't in public DNS yet. */
export async function detectHosting(domain: string, signal?: AbortSignal): Promise<DnsHosting | null> {
const soa = await dohQuery(domain, 'SOA', signal);
const zoneRecord = [...soa.answer, ...soa.authority].find((a) => a.type === 6);
const zone = zoneRecord?.name.replace(/\.$/, '').toLowerCase();
// NXDOMAIN answers carry the TLD's SOA: that's "not registered", not a zone.
if (!zone || !zone.includes('.') || soa.status === 3) return null;
const ns = await dohQuery(zone, 'NS', signal);
const nameservers = ns.answer.filter((a) => a.type === 2).map((a) => a.data.replace(/\.$/, '').toLowerCase());
if (nameservers.length === 0) return null;
return { zone, nameservers, variant: providerForNameservers(nameservers) };
}
+90
View File
@@ -0,0 +1,90 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* Is a record live in public DNS yet? Asked from the browser over DNS-over-HTTPS,
* so the answer is what the rest of the internet sees, not what the mail
* server believes it wrote. The resolver sees the names being checked, which
* are public DNS names anyway; the page says which resolver it uses.
*/
import { normalizeValue, type ZoneRecord } from './zone';
export const RESOLVER_NAME = 'Cloudflare public DNS (1.1.1.1)';
const RESOLVER = 'https://cloudflare-dns.com/dns-query';
/** Resource record type numbers, for reading the JSON answer. */
const TYPE_NUMBERS: Record<string, number> = {
A: 1,
CNAME: 5,
MX: 15,
TXT: 16,
AAAA: 28,
SRV: 33,
TLSA: 52,
CAA: 257,
};
export type LiveState = 'live' | 'different' | 'missing' | 'error';
export interface DohRecord {
name: string;
type: number;
data: string;
}
export interface DohResult {
/** 0 is an answer, 3 is NXDOMAIN (the name doesn't exist). */
status: number;
answer: DohRecord[];
authority: DohRecord[];
}
/** One DNS-over-HTTPS question, answered in the resolver's JSON form. */
export async function dohQuery(name: string, type: string, signal?: AbortSignal): Promise<DohResult> {
const url = `${RESOLVER}?name=${encodeURIComponent(name)}&type=${encodeURIComponent(type)}`;
const res = await fetch(url, { headers: { Accept: 'application/dns-json' }, signal, cache: 'no-store' });
if (!res.ok) throw new Error(`resolver answered ${res.status}`);
const body = (await res.json()) as { Status: number; Answer?: DohRecord[]; Authority?: DohRecord[] };
return { status: body.Status, answer: body.Answer ?? [], authority: body.Authority ?? [] };
}
async function lookup(name: string, type: string, signal?: AbortSignal): Promise<string[]> {
const { status, answer } = await dohQuery(name, type, signal);
// NXDOMAIN (3) and "no data" both simply mean: not there yet.
if (status !== 0 && status !== 3) throw new Error(`resolver status ${status}`);
const want = TYPE_NUMBERS[type];
return answer.filter((a) => want === undefined || a.type === want).map((a) => a.data);
}
/**
* Check a batch of records. Records sharing a name and type are looked up
* once. A record is `live` when its exact value is published, `different`
* when that name has other values of the type (another provider's SPF, say),
* and `missing` when there is nothing.
*/
export async function checkRecords(records: ZoneRecord[], signal?: AbortSignal): Promise<Map<ZoneRecord, LiveState>> {
const groups = new Map<string, ZoneRecord[]>();
for (const r of records) {
const key = `${r.name.toLowerCase()}|${r.type}`;
groups.set(key, [...(groups.get(key) ?? []), r]);
}
const out = new Map<ZoneRecord, LiveState>();
await Promise.all(
[...groups.values()].map(async (group) => {
const { name, type } = group[0];
try {
const found = (await lookup(name, type, signal)).map((d) => normalizeValue(type, d));
for (const r of group) {
const want = normalizeValue(type, r.value);
out.set(r, found.includes(want) ? 'live' : found.length > 0 ? 'different' : 'missing');
}
} catch {
for (const r of group) out.set(r, 'error');
}
}),
);
return out;
}
+57
View File
@@ -0,0 +1,57 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { AlertTriangle, CheckCircle2, CircleDashed, Loader2, XCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { LiveState } from './liveCheck';
/** One record's state in public DNS, as an icon. */
export function StateIcon({ state }: { state?: LiveState }) {
switch (state) {
case 'live':
return <CheckCircle2 className="h-4 w-4 text-emerald-500 animate-in zoom-in" />;
case 'different':
return <AlertTriangle className="h-4 w-4 text-highlight" />;
case 'error':
return <XCircle className="h-4 w-4 text-destructive" />;
case 'missing':
return <CircleDashed className="h-4 w-4 text-muted-foreground" />;
default:
return <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />;
}
}
/** How many of the records are live, as a ring that fills. */
export function ProgressRing({ pct, done }: { pct: number; done: boolean }) {
const r = 30;
const c = 2 * Math.PI * r;
return (
<svg viewBox="0 0 72 72" className="h-20 w-20 shrink-0 -rotate-90" role="img" aria-label={`${pct}%`}>
<circle cx="36" cy="36" r={r} fill="none" strokeWidth="7" className="stroke-muted" />
<circle
cx="36"
cy="36"
r={r}
fill="none"
strokeWidth="7"
strokeLinecap="round"
strokeDasharray={c}
strokeDashoffset={c - (c * pct) / 100}
className={cn('transition-[stroke-dashoffset] duration-700', done ? 'stroke-emerald-500' : 'stroke-primary')}
/>
<text
x="36"
y="36"
dominantBaseline="central"
textAnchor="middle"
className="rotate-90 fill-foreground text-[15px] font-semibold"
style={{ transformOrigin: '36px 36px' }}
>
{pct}%
</text>
</svg>
);
}
+155
View File
@@ -0,0 +1,155 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* The DNS providers the guided setup leads with, and how to get each one's
* credentials. The server supports many more; they're all offered under
* "Another provider", with their fields taken from the server's schema.
*
* `variant` is the server's name for the provider type. The steps are ours:
* keep them short, and aim for the narrowest credential that works.
*/
export interface ProviderGuide {
variant: string;
name: string;
/** One line on the tile. */
blurb: string;
/** How to make a credential, in order. */
steps: string[];
/** Where to start, on the provider's own site. */
link?: string;
/** The fields named the way the steps above name them. */
fields?: Record<string, { label: string; hint?: string }>;
}
export const FEATURED: ProviderGuide[] = [
{
variant: 'Cloudflare',
name: 'Cloudflare',
blurb: 'An API token limited to this one zone.',
steps: [
'In the Cloudflare dashboard, open My Profile → API Tokens and choose Create Token.',
'Use the "Edit zone DNS" template.',
'Under Zone Resources, pick Include → Specific zone → your domain, so the token can touch nothing else.',
'Create the token and paste it below. Cloudflare shows it only once.',
],
link: 'https://dash.cloudflare.com/profile/api-tokens',
fields: { secret: { label: 'API token', hint: 'The token from step 4.' } },
},
{
variant: 'Route53',
name: 'Amazon Route 53',
blurb: 'An IAM access key allowed to change one hosted zone.',
steps: [
'In IAM, create a user or role for the mail server.',
'Give it a policy that allows route53:ChangeResourceRecordSets and route53:ListResourceRecordSets on your hosted zone only, plus route53:ListHostedZonesByName.',
'Create an access key for it and paste the key ID and secret below.',
],
link: 'https://console.aws.amazon.com/iam/',
},
{
variant: 'GoogleCloudDns',
name: 'Google Cloud DNS',
blurb: 'A service account with the DNS Administrator role.',
steps: [
'In IAM & Admin → Service Accounts, create an account for the mail server.',
'Grant it the DNS Administrator role on the project that holds your zone.',
'Create a JSON key for it and paste the details below.',
],
link: 'https://console.cloud.google.com/iam-admin/serviceaccounts',
},
{
variant: 'AzureDns',
name: 'Azure DNS',
blurb: 'An app registration with DNS Zone Contributor on your zone.',
steps: [
'Register an application in Microsoft Entra ID and create a client secret.',
'On your DNS zone, open Access control (IAM) and give the app the DNS Zone Contributor role.',
'Paste the tenant, client and subscription IDs and the secret below.',
],
link: 'https://portal.azure.com/',
},
{
variant: 'DigitalOcean',
name: 'DigitalOcean',
blurb: 'A personal access token with domain access.',
steps: [
'Open API → Tokens and generate a new token.',
'Give it the "domain" scopes (read and update) only.',
'Paste the token below.',
],
link: 'https://cloud.digitalocean.com/account/api/tokens',
fields: { secret: { label: 'Access token' } },
},
{
variant: 'Hetzner',
name: 'Hetzner DNS',
blurb: 'A DNS API token.',
steps: ['In the Hetzner DNS console, open API tokens and create one.', 'Paste the token below.'],
link: 'https://dns.hetzner.com/settings/api-token',
fields: { secret: { label: 'API token' } },
},
{
variant: 'Ovh',
name: 'OVHcloud',
blurb: 'An application key and consumer key for the DNS API.',
steps: [
'Create API keys for your region, allowing GET, POST, PUT and DELETE on /domain/zone/*.',
'Paste the application key, application secret and consumer key below.',
],
link: 'https://api.ovh.com/createToken/',
},
{
variant: 'Godaddy',
name: 'GoDaddy',
blurb: 'A production API key and secret.',
steps: [
'In the GoDaddy developer portal, create a Production API key.',
'Paste the key and secret below. GoDaddy only allows API access on some account types.',
],
link: 'https://developer.godaddy.com/keys',
},
{
variant: 'Porkbun',
name: 'Porkbun',
blurb: 'An API key pair, with API access turned on for the domain.',
steps: [
'Open Account → API Access and create an API key.',
'In Domain Management, turn on API Access for this domain.',
'Paste the API key and secret below.',
],
link: 'https://porkbun.com/account/api',
},
{
variant: 'DeSEC',
name: 'deSEC',
blurb: 'A token, ideally limited to this domain.',
steps: [
'In deSEC, open Token Management and create a token.',
'Restrict it to this domain if you can, and paste it below.',
],
link: 'https://desec.io/tokens',
fields: { secret: { label: 'Token' } },
},
];
/** Provider types the guided setup doesn't offer: retired ones. */
export const HIDDEN_VARIANTS = new Set(['Deprecated1']);
/**
* Fields the guided setup leaves at the server's defaults: timing and
* bookkeeping. They stay editable on the DNS provider's own page.
*/
export const ADVANCED_FIELDS = new Set([
'description',
'memberTenantId',
'pollingInterval',
'propagationDelay',
'propagationTimeout',
'timeout',
'ttl',
]);
+73
View File
@@ -0,0 +1,73 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { RecordKind } from './zone';
export interface RecordGroup {
id: string;
title: string;
why: string;
kinds: { kind: RecordKind; label: string; caution?: string }[];
}
/**
* The record types, grouped by what they do for you rather than by
* their DNS type. The labels say what switching one on achieves.
*/
export const RECORD_GROUPS: RecordGroup[] = [
{
id: 'deliver',
title: 'Receive mail',
why: 'Tells the rest of the internet where mail for this domain goes.',
kinds: [{ kind: 'mx', label: 'Mail exchanger (MX)' }],
},
{
id: 'trust',
title: 'Prove mail is really yours',
why: 'Without these, big providers send your mail to spam or refuse it.',
kinds: [
{ kind: 'spf', label: 'Allowed senders (SPF)' },
{ kind: 'dkim', label: 'Signing keys (DKIM)' },
{ kind: 'dmarc', label: 'What to do with fakes (DMARC)' },
],
},
{
id: 'secure',
title: 'Keep mail encrypted on the way',
why: 'Asks other servers to only deliver to you over a verified, encrypted connection, and to report when they cant.',
kinds: [
{ kind: 'mtaSts', label: 'Require encryption (MTA-STS)' },
{ kind: 'tlsRpt', label: 'Encryption failure reports (TLS-RPT)' },
{
kind: 'tlsa',
label: 'Certificate pinning (DANE / TLSA)',
caution: 'Only useful when the zone is signed with DNSSEC. Leave off unless you know it is.',
},
],
},
{
id: 'apps',
title: 'Let mail apps set themselves up',
why: 'People type their address and password; Thunderbird, Apple Mail, Outlook and phones find the rest.',
kinds: [
{ kind: 'srv', label: 'Service records (SRV)' },
{ kind: 'autoConfig', label: 'Autoconfig' },
{ kind: 'autoConfigLegacy', label: 'Thunderbird autoconfig' },
{ kind: 'autoDiscover', label: 'Outlook autodiscover' },
],
},
{
id: 'certs',
title: 'Limit who can issue certificates',
why: 'Names the certificate authorities allowed to issue for this domain.',
kinds: [{ kind: 'caa', label: 'Certificate authorities (CAA)' }],
},
];
/** The guided default: everything but TLSA, which needs DNSSEC to mean anything. */
export const DEFAULT_KINDS: RecordKind[] = RECORD_GROUPS.flatMap((g) => g.kinds.map((k) => k.kind)).filter(
(k) => k !== 'tlsa',
);
+79
View File
@@ -0,0 +1,79 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useCallback, useEffect, useRef, useState } from 'react';
import { getAccountId, jmapQueryAndGet } from '@/services/jmap/client';
import { checkRecords, type LiveState } from './liveCheck';
import type { ZoneRecord } from './zone';
export interface DnsTask {
id: string;
'@type': string;
domainId?: string;
status?: { '@type': string; failureReason?: string };
}
const POLL_MS = 8000;
const GIVE_UP_MS = 10 * 60_000;
/**
* Keep checking a set of records in public DNS, every few seconds for ten
* minutes, and (for automatic DNS) the server's publishing task for the
* domain. `task` is undefined until first read, null when none is queued.
*/
export function useRecordChecks(records: ZoneRecord[], domainId: string, watchTask: boolean) {
const [states, setStates] = useState<Map<ZoneRecord, LiveState>>(new Map());
const [task, setTask] = useState<DnsTask | null | undefined>(undefined);
const [checking, setChecking] = useState(false);
const [lastChecked, setLastChecked] = useState<Date | null>(null);
const started = useRef<number | null>(null);
const check = useCallback(async () => {
setChecking(true);
if (watchTask) {
try {
const [, getRes] = await jmapQueryAndGet('x:Task', getAccountId('x:Task'), {}, ['@type', 'domainId', 'status']);
const list = ((getRes?.[1] as { list?: DnsTask[] })?.list ?? []).filter(
(x) => x['@type'] === 'DnsManagement' && x.domainId === domainId,
);
setTask(list[0] ?? null);
} catch {
setTask(null);
}
}
setStates(await checkRecords(records));
setLastChecked(new Date());
setChecking(false);
}, [domainId, records, watchTask]);
useEffect(() => {
// Checking DNS and the task list syncs with outside systems, so state
// lands from their callbacks, never synchronously in the effect.
const first = setTimeout(() => {
started.current = Date.now();
void check();
}, 0);
const timer = setInterval(() => {
if (started.current !== null && Date.now() - started.current > GIVE_UP_MS) return;
void check();
}, POLL_MS);
return () => {
clearTimeout(first);
clearInterval(timer);
};
}, [check]);
const liveCount = records.filter((r) => states.get(r) === 'live').length;
return {
states,
task,
checking,
lastChecked,
check,
liveCount,
allLive: records.length > 0 && liveCount === records.length,
};
}
+122
View File
@@ -0,0 +1,122 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { describe, expect, it } from 'vitest';
import { hostLabel, normalizeValue, parseZone, pasteParts, summarizeFailure } from './zone';
const ZONE = `mail.example.com. IN TXT "v=spf1 a -all"
example.com. IN TXT "v=spf1 mx -all"
example.com. IN MX 10 mail.example.com.
_dmarc.example.com. IN TXT "v=DMARC1; p=reject; rua=mailto:[email protected]"
s1._domainkey.example.com. 300 IN TXT "v=DKIM1; k=ed25519; p=abc"
_jmap._tcp.example.com. IN SRV 0 1 443 mail.example.com.
mta-sts.example.com. IN CNAME mail.example.com.
_mta-sts.example.com. IN TXT "v=STSv1; id=1"
_smtp._tls.example.com. IN TXT "v=TLSRPTv1; rua=mailto:[email protected]"
ua-auto-config.example.com. IN CNAME mail.example.com.
autoconfig.example.com. IN CNAME mail.example.com.
autodiscover.example.com. IN CNAME mail.example.com.
example.com. IN CAA 0 issue "letsencrypt.org"
_25._tcp.mail.example.com. IN TLSA 3 1 1 abcdef
; a comment
www.example.com. IN A 192.0.2.1`;
describe('parseZone', () => {
const records = parseZone(ZONE);
const kind = (name: string, type: string) => records.find((r) => r.name === name && r.type === type)?.kind;
it('sorts every record the server owns into its group', () => {
expect(kind('example.com', 'MX')).toBe('mx');
expect(kind('mail.example.com', 'TXT')).toBe('spf');
expect(kind('example.com', 'TXT')).toBe('spf');
expect(kind('_dmarc.example.com', 'TXT')).toBe('dmarc');
expect(kind('s1._domainkey.example.com', 'TXT')).toBe('dkim');
expect(kind('_jmap._tcp.example.com', 'SRV')).toBe('srv');
expect(kind('mta-sts.example.com', 'CNAME')).toBe('mtaSts');
expect(kind('_mta-sts.example.com', 'TXT')).toBe('mtaSts');
expect(kind('_smtp._tls.example.com', 'TXT')).toBe('tlsRpt');
expect(kind('ua-auto-config.example.com', 'CNAME')).toBe('autoConfig');
expect(kind('autoconfig.example.com', 'CNAME')).toBe('autoConfigLegacy');
expect(kind('autodiscover.example.com', 'CNAME')).toBe('autoDiscover');
expect(kind('example.com', 'CAA')).toBe('caa');
expect(kind('_25._tcp.mail.example.com', 'TLSA')).toBe('tlsa');
});
it('skips comments and records it cannot place', () => {
expect(records.some((r) => r.name === 'www.example.com')).toBe(false);
expect(records).toHaveLength(14);
});
it('reads past an optional TTL', () => {
expect(records.find((r) => r.kind === 'dkim')?.value).toBe('"v=DKIM1; k=ed25519; p=abc"');
});
it('copes with nothing', () => {
expect(parseZone(undefined)).toEqual([]);
expect(parseZone('')).toEqual([]);
});
});
describe('normalizeValue', () => {
it('joins TXT strings a resolver split up', () => {
expect(normalizeValue('TXT', '"v=DKIM1; p=ab" "cd"')).toBe('v=DKIM1; p=abcd');
expect(normalizeValue('TXT', '"v=spf1 mx -all"')).toBe(normalizeValue('TXT', '"v=spf1 mx -all"'));
});
it('ignores case and trailing dots on names', () => {
expect(normalizeValue('MX', '10 Mail.Example.com.')).toBe('10 mail.example.com');
expect(normalizeValue('CNAME', 'mail.example.com.')).toBe(normalizeValue('CNAME', 'mail.example.com'));
});
it('drops the quotes in CAA values', () => {
expect(normalizeValue('CAA', '0 issue "letsencrypt.org"')).toBe('0 issue letsencrypt.org');
});
});
describe('hostLabel', () => {
it('names records relative to their zone', () => {
expect(hostLabel('example.com', 'example.com')).toBe('@');
expect(hostLabel('_dmarc.example.com', 'example.com')).toBe('_dmarc');
expect(hostLabel('_dmarc.mail.example.com.', 'Example.com')).toBe('_dmarc.mail');
expect(hostLabel('other.org', 'example.com')).toBe('other.org');
});
});
describe('pasteParts', () => {
const rec = (type: string, value: string) => ({ name: 'example.com', type, value, kind: 'mx' as const });
it('unquotes and joins TXT', () => {
expect(pasteParts(rec('TXT', '"v=DKIM1; p=ab" "cd"')).value).toBe('v=DKIM1; p=abcd');
});
it('splits the MX priority out', () => {
expect(pasteParts(rec('MX', '10 mail.example.com.'))).toEqual({ value: 'mail.example.com', priority: '10' });
});
it('drops the trailing dot elsewhere', () => {
expect(pasteParts(rec('CNAME', 'mail.example.com.')).value).toBe('mail.example.com');
});
});
describe('summarizeFailure', () => {
const cf =
'{"success":false,"errors":[{"code":6003,"message":"Invalid request headers","error_chain":[{"code":6111,"message":"Invalid format for Authorization header"}]}],"messages":[],"result":null}';
const reason = [
`Failed to set DNS RRSet for _smtp._tls.dev.test./TXT: Failed to set DNS RRSet: API error: BadRequest ${cf}`,
`Failed to set DNS RRSet for dev.test./MX: Failed to set DNS RRSet: API error: BadRequest ${cf}`,
].join('; ');
it('keeps each provider message once, the cause first, and counts the records', () => {
expect(summarizeFailure(reason)).toEqual({
messages: ['Invalid format for Authorization header', 'Invalid request headers'],
records: 2,
});
});
it('falls back to the first error when there is no provider JSON', () => {
expect(summarizeFailure('Failed to build DNS updater: bad zone').messages).toEqual([
'Failed to build DNS updater: bad zone',
]);
expect(summarizeFailure(undefined)).toEqual({ messages: [], records: 0 });
});
});
+153
View File
@@ -0,0 +1,153 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* The records a domain needs, read from the zone text the server builds for
* it (the domain's `dnsZoneFile`), and sorted into the groups the server's
* `publishRecords` setting switches on and off.
*/
export type RecordKind =
| 'mx'
| 'spf'
| 'dkim'
| 'dmarc'
| 'mtaSts'
| 'tlsRpt'
| 'srv'
| 'autoConfig'
| 'autoConfigLegacy'
| 'autoDiscover'
| 'caa'
| 'tlsa';
export interface ZoneRecord {
/** Owner name, without the trailing dot. */
name: string;
type: string;
/** The record data as the zone text has it. */
value: string;
kind: RecordKind;
}
/** Split a zone line into fields, keeping quoted strings whole. */
function fields(line: string): string[] {
const out: string[] = [];
const re = /"((?:[^"\\]|\\.)*)"|(\S+)/g;
let m: RegExpExecArray | null;
while ((m = re.exec(line))) out.push(m[1] !== undefined ? `"${m[1]}"` : m[2]);
return out;
}
const CLASSES = new Set(['IN', 'CH', 'HS']);
function kindOf(name: string, type: string, value: string): RecordKind | null {
const n = name.toLowerCase();
switch (type) {
case 'MX':
return 'mx';
case 'SRV':
return 'srv';
case 'CAA':
return 'caa';
case 'TLSA':
return 'tlsa';
}
if (n.includes('._domainkey.')) return 'dkim';
if (n.startsWith('_dmarc.')) return 'dmarc';
if (n.startsWith('mta-sts.') || n.startsWith('_mta-sts.')) return 'mtaSts';
if (n.startsWith('_smtp._tls.')) return 'tlsRpt';
if (n.startsWith('ua-auto-config.') || n.startsWith('_ua-auto-config.')) return 'autoConfig';
if (n.startsWith('autoconfig.')) return 'autoConfigLegacy';
if (n.startsWith('autodiscover.')) return 'autoDiscover';
if (type === 'TXT' && /^"?v=spf1\b/i.test(value)) return 'spf';
return null;
}
/** Parse the zone text. Lines it can't place are left out, not guessed at. */
export function parseZone(text: string | null | undefined): ZoneRecord[] {
const out: ZoneRecord[] = [];
for (const raw of (text ?? '').split('\n')) {
const line = raw.trim();
if (!line || line.startsWith(';')) continue;
const f = fields(line);
if (f.length < 3) continue;
const name = f[0].replace(/\.$/, '');
let i = 1;
// Optional TTL and class, in either order.
for (let k = 0; k < 2 && i < f.length; k++) {
if (/^\d+$/.test(f[i]) || CLASSES.has(f[i].toUpperCase())) i++;
}
const type = (f[i] ?? '').toUpperCase();
const value = f.slice(i + 1).join(' ');
if (!type || !value) continue;
const kind = kindOf(name, type, value);
if (kind) out.push({ name, type, value, kind });
}
return out;
}
/**
* One value in a comparable form: TXT strings joined (resolvers split long
* ones), quotes, case and trailing dots dropped, spaces collapsed.
*/
export function normalizeValue(type: string, value: string): string {
let v = value.trim();
if (type === 'TXT') {
const parts = [...v.matchAll(/"((?:[^"\\]|\\.)*)"/g)].map((m) => m[1]);
v = parts.length > 0 ? parts.join('') : v;
return v.replace(/\\"/g, '"').replace(/\s+/g, ' ').trim();
}
v = v.replace(/"/g, '').replace(/\s+/g, ' ').toLowerCase();
return v
.split(' ')
.map((p) => p.replace(/\.$/, ''))
.join(' ');
}
/** The name as DNS host panels ask for it: relative to the zone, "@" for the zone itself. */
export function hostLabel(name: string, zone: string): string {
const n = name.toLowerCase().replace(/\.$/, '');
const z = zone.toLowerCase().replace(/\.$/, '');
if (n === z) return '@';
return n.endsWith(`.${z}`) ? n.slice(0, -(z.length + 1)) : n;
}
/**
* The record's value the way host panels want it pasted: TXT without the
* quotes (long ones joined back together), and MX with its priority apart,
* since nearly every panel has a separate box for it.
*/
export function pasteParts(r: ZoneRecord): { value: string; priority?: string } {
const v = r.value.trim();
if (r.type === 'TXT') {
const parts = [...v.matchAll(/"((?:[^"\\]|\\.)*)"/g)].map((m) => m[1]);
return { value: parts.length ? parts.join('') : v };
}
if (r.type === 'MX') {
const [priority, ...rest] = v.split(/\s+/);
return { value: rest.join(' ').replace(/\.$/, ''), priority };
}
return { value: v.replace(/\.$/, '') };
}
/**
* A publishing failure, boiled down. The server reports each record's error
* in full, so one bad credential repeats the same provider message a dozen
* times; keep each distinct message once, innermost cause first.
*/
export function summarizeFailure(reason: string | undefined): { messages: string[]; records: number } {
const text = reason ?? '';
const records = (text.match(/Failed to set DNS RRSet for /g) ?? []).length;
const found = [...text.matchAll(/"message"\s*:\s*"((?:[^"\\]|\\.)*)"/g)].map((m) => m[1]);
// Nested error chains list the cause last; show the most specific first.
const messages = [...new Set(found.reverse())];
if (messages.length === 0 && text) {
const first = text.split(/;\s*/)[0].replace(/^Failed to set DNS RRSet for \S+: /, '');
messages.push(first.length > 200 ? `${first.slice(0, 200)}` : first);
}
return { messages, records };
}
@@ -0,0 +1,78 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* INBUXA: the banner while legacy mail protocols are off (LP-18), on the
* Security settings and the dashboard. It says nothing when the switch is on,
* when the reader may not see the policy, or when the server has no policy.
*/
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ShieldCheck } from 'lucide-react';
import { useAccountStore } from '@/stores/accountStore';
import { fetchProtocolPolicy, fetchTenantPolicy } from './protocolPolicy';
export const LEGACY_PROTOCOLS_VIEW = 'CustomComponent/LegacyProtocols';
export function LegacyProtocolsBanner() {
const { t } = useTranslation();
const canGetServer = useAccountStore((s) => s.hasObjectPermission('sysNetworkListener', 'Get'));
const canGetTenant = useAccountStore((s) => s.hasObjectPermission('sysDomain', 'Get'));
const [off, setOff] = useState<null | 'server' | 'tenant'>(null);
useEffect(() => {
if (!canGetServer && !canGetTenant) return;
const controller = new AbortController();
const signal = controller.signal;
(async () => {
// The server's switch first. Inside a tenant it can't be read, and the
// tenant's own is the one to report (LP-18 at tenant scope).
try {
if (canGetServer) {
const policy = await fetchProtocolPolicy(signal);
if (!signal.aborted) setOff(policy.legacyProtocols === 'disabled' ? 'server' : null);
return;
}
} catch {
// Fall through to the tenant's.
}
try {
if (canGetTenant) {
const policy = await fetchTenantPolicy(null, signal);
if (!signal.aborted) setOff(policy.legacyProtocols === 'disabled' ? 'tenant' : null);
}
} catch {
// A banner is not worth an error: an older server simply has no switch.
}
})();
return () => controller.abort();
}, [canGetServer, canGetTenant]);
if (!off) return null;
return (
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 rounded-xl border border-emerald-500/30 bg-emerald-500/5 px-4 py-3 text-sm">
<ShieldCheck className="h-4 w-4 shrink-0 text-emerald-600" />
<span>
{t('legacyProtocols.bannerLead', 'Legacy mail protocols are')}{' '}
<strong>{t('legacyProtocols.bannerOff', 'off')}</strong>{' '}
{off === 'server'
? t('legacyProtocols.bannerTail', 'on this server. Only INBUXA webmail and JMAP apps can sign in.')
: t(
'legacyProtocols.bannerTailTenant',
'for your organization. Only INBUXA webmail and JMAP apps can sign in.',
)}
</span>
{off === 'server' && (
<Link to={`/Settings/${LEGACY_PROTOCOLS_VIEW}`} className="font-medium text-primary hover:underline">
{t('legacyProtocols.review', 'Review')}
</Link>
)}
</div>
);
}
@@ -0,0 +1,284 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* INBUXA: Settings Security Hardening, the server-wide legacy mail
* protocols switch (legacy-protocols spec, LP-16, LP-17, LP-20, LP-21).
*
* Nobody should turn this on by accident or without understanding it, so the
* statement is shown in full before the switch moves, and turning it on takes
* a typed phrase. Turning it back on is one click: undoing a restriction must
* never be the hard part.
*/
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AlertTriangle, Loader2, Lock, RotateCcw, ShieldCheck, ShieldOff } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { LoadingFallback } from '@/components/common/LoadingFallback';
import { useAccountStore } from '@/stores/accountStore';
import { toast } from '@/hooks/use-toast';
import { cn } from '@/lib/utils';
import {
describeListener,
fetchProtocolPolicy,
PolicyUnavailable,
protocolRows,
updateProtocolPolicy,
type ProtocolPolicy,
type ProtocolRow,
} from './protocolPolicy';
import { ConfirmTurnOff, ImpactPanel, Statement } from './parts';
type Load = { kind: 'loading' } | { kind: 'ready'; policy: ProtocolPolicy } | { kind: 'error'; message: string };
export function LegacyProtocolsPage() {
const { t } = useTranslation();
const canUpdate = useAccountStore((s) => s.hasObjectPermission('sysNetworkListener', 'Update'));
const [load, setLoad] = useState<Load>({ kind: 'loading' });
const [confirming, setConfirming] = useState(false);
const [busy, setBusy] = useState(false);
const loaded = useCallback(
(fetching: Promise<ProtocolPolicy>, signal?: AbortSignal) =>
fetching
.then((policy) => {
if (!signal?.aborted) setLoad({ kind: 'ready', policy });
})
.catch((e: unknown) => {
if (signal?.aborted) return;
setLoad({
kind: 'error',
message:
e instanceof PolicyUnavailable
? t('legacyProtocols.unavailable', 'This server does not offer the legacy protocols switch.')
: e instanceof Error
? e.message
: String(e),
});
}),
[t],
);
const refresh = useCallback(() => loaded(fetchProtocolPolicy()), [loaded]);
useEffect(() => {
const controller = new AbortController();
void loaded(fetchProtocolPolicy(controller.signal), controller.signal);
return () => controller.abort();
}, [loaded]);
const turn = useCallback(
async (legacyProtocols: 'enabled' | 'disabled') => {
setBusy(true);
try {
// Only legacyProtocols is sent. The server may still report closeSubmission
// overruled by the SMTP lock (LP-21), which the selector already shows.
await updateProtocolPolicy({ legacyProtocols });
setConfirming(false);
await refresh();
} catch (e) {
toast({
variant: 'destructive',
title: t('legacyProtocols.failed', 'The switch did not change'),
description: e instanceof Error ? e.message : String(e),
});
} finally {
setBusy(false);
}
},
[refresh, t],
);
if (load.kind === 'loading') return <LoadingFallback />;
if (load.kind === 'error') {
return (
<div className="mx-auto max-w-3xl rounded-lg border border-dashed p-12 text-center text-muted-foreground">
{load.message}
</div>
);
}
const { policy } = load;
const off = policy.legacyProtocols === 'disabled';
// What closes: what already did while the switch is off, what would otherwise.
const listeners = off ? policy.savedListeners : policy.wouldClose;
// Enabled with listeners still saved: some could not be put back (LP-5).
const stranded = off ? [] : policy.savedListeners;
return (
<div className="mx-auto max-w-3xl space-y-6">
<header className="space-y-1">
<h1 className="text-2xl font-semibold">{t('legacyProtocols.title', 'Legacy mail protocols')}</h1>
<p className="text-muted-foreground">
{t(
'legacyProtocols.subtitle',
'Turn off IMAP, POP3, ManageSieve and sending from mail apps, so that only INBUXA webmail and JMAP apps can reach this server.',
)}
</p>
</header>
<StatusCard policy={policy} off={off} busy={busy} canUpdate={canUpdate} onTurnOn={() => turn('enabled')} />
{stranded.length > 0 && (
<div className="rounded-xl border border-destructive/40 bg-destructive/5 p-4">
<div className="flex items-start gap-3">
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
<div className="space-y-2">
<p className="font-medium">
{t('legacyProtocols.strandedTitle', 'Some listeners could not be reopened')}
</p>
<p className="text-sm text-muted-foreground">
{t(
'legacyProtocols.strandedBody',
'Their ports may be taken by something else, or need a restart to bind. They are kept, and can be tried again:',
)}{' '}
{stranded.map(describeListener).join(', ')}
</p>
{canUpdate && (
<Button size="sm" variant="outline" disabled={busy} onClick={() => turn('enabled')}>
<RotateCcw className="mr-2 h-4 w-4" />
{t('legacyProtocols.tryAgain', 'Try again')}
</Button>
)}
</div>
</div>
</div>
)}
<ProtocolTable rows={protocolRows(policy, listeners)} off={off} />
{!off && policy.recentLegacyUse && <ImpactPanel recent={policy.recentLegacyUse} />}
{(off || confirming) && <Statement scope={{ kind: 'server', listeners }} />}
{!off && canUpdate && !confirming && (
<Button variant="destructive" onClick={() => setConfirming(true)}>
<ShieldOff className="mr-2 h-4 w-4" />
{t('legacyProtocols.turnOff', 'Turn off legacy protocols…')}
</Button>
)}
{!off && confirming && (
<ConfirmTurnOff
busy={busy}
onConfirm={() => void turn('disabled')}
onCancel={() => {
setConfirming(false);
}}
/>
)}
</div>
);
}
function StatusCard({
policy,
off,
busy,
canUpdate,
onTurnOn,
}: {
policy: ProtocolPolicy;
off: boolean;
busy: boolean;
canUpdate: boolean;
onTurnOn: () => void;
}) {
const { t } = useTranslation();
const Icon = off ? ShieldCheck : ShieldOff;
return (
<div
className={cn(
'flex flex-col gap-4 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between',
off ? 'border-emerald-500/30 bg-emerald-500/5' : 'bg-card',
)}
>
<div className="flex items-start gap-3">
<Icon className={cn('mt-0.5 h-5 w-5 shrink-0', off ? 'text-emerald-600' : 'text-muted-foreground')} />
<div>
<p className="font-medium">
{off
? t('legacyProtocols.statusOff', 'Legacy mail protocols are off on this server.')
: t('legacyProtocols.statusOn', 'Legacy mail protocols are on.')}
</p>
<p className="text-sm text-muted-foreground">
{off
? t('legacyProtocols.statusOffBody', 'Only INBUXA webmail and JMAP apps can sign in.')
: t('legacyProtocols.statusOnBody', 'Mail apps can use IMAP, POP3 and ManageSieve.')}
{policy.changedAt !== null && (
<>
{' '}
{t('legacyProtocols.changedAt', 'Last changed {{when}}.', {
when: new Date(policy.changedAt).toLocaleString(),
})}
</>
)}
</p>
</div>
</div>
{off && canUpdate && (
<Button variant="outline" disabled={busy} onClick={onTurnOn} className="shrink-0">
{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{t('legacyProtocols.turnOn', 'Turn legacy protocols back on')}
</Button>
)}
</div>
);
}
function ProtocolTable({ rows, off }: { rows: ProtocolRow[]; off: boolean }) {
const { t } = useTranslation();
const stateText = (row: ProtocolRow) => {
switch (row.state) {
case 'locked':
return t('legacyProtocols.rowLocked', 'Locked open');
case 'refused':
return t('legacyProtocols.rowRefused', 'Port open, sign-in refused');
case 'closes':
if (row.ports.length === 0) return t('legacyProtocols.rowNoListener', 'No listener');
return off ? t('legacyProtocols.rowClosed', 'Closed') : t('legacyProtocols.rowWouldClose', 'Closes');
}
};
return (
<div className="overflow-hidden rounded-xl border">
<table className="w-full text-sm">
<thead className="bg-muted/50 text-left text-muted-foreground">
<tr>
<th className="px-4 py-2 font-medium">{t('legacyProtocols.colProtocol', 'Protocol')}</th>
<th className="px-4 py-2 font-medium">{t('legacyProtocols.colPorts', 'Ports')}</th>
<th className="px-4 py-2 font-medium">
{off ? t('legacyProtocols.colNow', 'Now') : t('legacyProtocols.colWhenOff', 'When turned off')}
</th>
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.key} className="border-t">
<td className="px-4 py-2 font-medium">{row.label}</td>
<td className="px-4 py-2 tabular-nums text-muted-foreground">
{row.ports.length > 0 ? row.ports.join(', ') : '—'}
</td>
<td className="px-4 py-2">
<span
className={cn('inline-flex items-center gap-1.5', row.state === 'locked' && 'text-muted-foreground')}
>
{row.state === 'locked' && <Lock className="h-3.5 w-3.5" />}
{stateText(row)}
</span>
</td>
</tr>
))}
</tbody>
</table>
<p className="border-t bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
{t(
'legacyProtocols.lockNote',
'Incoming mail (SMTP) and INBUXA webmail (JMAP) are locked open: closing them would stop mail arriving and lock everyone out, including you.',
)}
</p>
</div>
);
}
@@ -0,0 +1,138 @@
/*
* SPDX-FileCopyrightText: 2026 Coffey Labs
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/**
* INBUXA: one tenant's legacy mail protocols switch, on the tenant's page
* (legacy-protocols spec, LP-9 to LP-18 at tenant scope).
*
* It closes no port -- other tenants share them (LP-13) -- so the statement
* names no listener and carries no firewall note. It refuses sign-in over
* legacy protocols on the tenant's domains. Turning it off takes the typed
* phrase; turning it back on is one click, which the server refuses while
* it has legacy protocols off itself (LP-9), and says so.
*/
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Loader2, ShieldCheck, ShieldOff } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useAccountStore } from '@/stores/accountStore';
import { toast } from '@/hooks/use-toast';
import { cn } from '@/lib/utils';
import { getAccountId, jmapGet } from '@/services/jmap/client';
import { fetchTenantPolicy, PolicyUnavailable, updateTenantPolicy, type TenantPolicy } from './protocolPolicy';
import { ConfirmTurnOff, ImpactPanel, Statement } from './parts';
export function TenantLegacyProtocols({ tenantId }: { tenantId: string }) {
const { t } = useTranslation();
const canGet = useAccountStore((s) => s.hasObjectPermission('sysDomain', 'Get'));
const canUpdate = useAccountStore((s) => s.hasObjectPermission('sysDomain', 'Update'));
const [policy, setPolicy] = useState<TenantPolicy | null>(null);
const [organization, setOrganization] = useState('');
const [confirming, setConfirming] = useState(false);
const [busy, setBusy] = useState(false);
const loaded = useCallback(
(fetching: Promise<TenantPolicy>, signal?: AbortSignal) =>
fetching
.then((p) => {
if (!signal?.aborted) setPolicy(p);
})
.catch((e: unknown) => {
// An older server has no tenant switch: show nothing rather than an error.
if (!signal?.aborted && !(e instanceof PolicyUnavailable)) console.error(e);
}),
[],
);
useEffect(() => {
if (!canGet) return;
const controller = new AbortController();
void loaded(fetchTenantPolicy(tenantId, controller.signal), controller.signal);
// The organization's name, for the statement.
jmapGet('x:Tenant', getAccountId('x:Tenant'), [tenantId], ['name'], controller.signal)
.then((responses) => {
const list = (responses[0]?.[1] as { list?: { name?: string }[] } | undefined)?.list;
if (!controller.signal.aborted && list?.[0]?.name) setOrganization(list[0].name);
})
.catch(() => {});
return () => controller.abort();
}, [tenantId, canGet, loaded]);
const turn = useCallback(
async (value: 'enabled' | 'disabled') => {
setBusy(true);
try {
await updateTenantPolicy(tenantId, value);
setConfirming(false);
await loaded(fetchTenantPolicy(tenantId));
} catch (e) {
toast({
variant: 'destructive',
title: t('legacyProtocols.failed', 'The switch did not change'),
description: e instanceof Error ? e.message : String(e),
});
} finally {
setBusy(false);
}
},
[tenantId, loaded, t],
);
if (!policy) return null;
const off = policy.legacyProtocols === 'disabled';
const name = organization || t('legacyProtocols.thisOrganization', 'this organization');
return (
// Aligned with the tenant form beneath it.
<section className="mx-auto max-w-4xl space-y-4 rounded-xl border p-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-start gap-3">
{off ? (
<ShieldCheck className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" />
) : (
<ShieldOff className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground" />
)}
<div>
<p className="font-medium">{t('legacyProtocols.title', 'Legacy mail protocols')}</p>
<p className={cn('text-sm', off ? 'text-foreground' : 'text-muted-foreground')}>
{off
? t(
'legacyProtocols.tenantOff',
'Off for {{organization}}. Only INBUXA webmail and JMAP apps can sign in to its domains.',
{ organization: name },
)
: t(
'legacyProtocols.tenantOn',
'On for {{organization}}. Mail apps can use IMAP, POP3 and ManageSieve on its domains.',
{ organization: name },
)}
</p>
</div>
</div>
{canUpdate && off && (
<Button variant="outline" disabled={busy} onClick={() => void turn('enabled')} className="shrink-0">
{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{t('legacyProtocols.turnOn', 'Turn legacy protocols back on')}
</Button>
)}
{canUpdate && !off && !confirming && (
<Button variant="destructive" onClick={() => setConfirming(true)} className="shrink-0">
{t('legacyProtocols.turnOff', 'Turn off legacy protocols…')}
</Button>
)}
</div>
{!off && confirming && (
<>
{policy.recentLegacyUse && <ImpactPanel recent={policy.recentLegacyUse} />}
<Statement scope={{ kind: 'tenant', organization: name }} />
<ConfirmTurnOff busy={busy} onConfirm={() => void turn('disabled')} onCancel={() => setConfirming(false)} />
</>
)}
</section>
);
}

Some files were not shown because too many files have changed in this diff Show More