Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7d5f2273ae | ||
|
|
de58de765a | ||
|
|
1be7b5c60b | ||
|
|
2cd73c6705 | ||
|
|
7a455e7b6a | ||
|
|
ff38c7a5e8 | ||
|
|
0454528e8a | ||
|
|
9967f9cd7f | ||
|
|
2611815a7e | ||
|
|
4859607bab | ||
|
|
11d85cd759 | ||
|
|
e020f9f02c | ||
|
|
2aff8c8a10 | ||
|
|
8001a6e71b | ||
|
|
25e33767af | ||
|
|
baa8181c19 | ||
|
|
b6b54d2ac0 | ||
|
|
8a95814eee | ||
|
|
0ff997d111 | ||
|
|
a157fed8f2 | ||
|
|
4720470a3d | ||
|
|
fa42a74697 | ||
|
|
9c44a28197 | ||
|
|
3a33f3d514 | ||
|
|
93a76098cc | ||
|
|
8ae4156aee | ||
|
|
e04975915e | ||
|
|
3d3dcb0227 | ||
|
|
824427ef46 | ||
|
|
7ab0b8099c | ||
|
|
5bf09ceed5 | ||
|
|
5641560a91 | ||
|
|
2e02532279 | ||
|
|
91531b4784 | ||
|
|
96e7b9842f | ||
|
|
3fec79545c | ||
|
|
2d2b551d46 | ||
|
|
e4ad5e2c1e | ||
|
|
92bcb58f76 | ||
|
|
14d708ecf8 | ||
|
|
2399f5ce97 | ||
|
|
e387e7976f | ||
|
|
1d72ef3aa1 | ||
|
|
dc462b137f | ||
|
|
b0b8e4e090 | ||
|
|
af11f5119c | ||
|
|
8cab61a9c5 | ||
|
|
189e270785 | ||
|
|
f18f3012aa | ||
|
|
5eea77346a | ||
|
|
e080a6e061 | ||
|
|
574de03e42 | ||
|
|
a7fda8bd6b | ||
|
|
001a1f3a15 | ||
|
|
782dde0573 | ||
|
|
cbe77f9e4a | ||
|
|
e9b9efa084 | ||
|
|
dee0f7fbe3 | ||
|
|
ba6b4472d2 | ||
|
|
612fd796f3 | ||
|
|
a3376b0a7d | ||
|
|
2344c96651 | ||
|
|
68f0ca3629 | ||
|
|
47fcf1fe08 | ||
|
|
27ba55fbf6 | ||
|
|
35e0ef74b9 | ||
|
|
cfb3a308cd |
@@ -1,5 +1,4 @@
|
|||||||
VITE_API_BASE_URL=http://localhost:8080
|
VITE_API_BASE_URL=http://localhost:8080
|
||||||
VITE_OAUTH_CLIENT_ID=stalwart-webui
|
|
||||||
#VITE_ACCESS_TOKEN=OPEN_SESAME
|
#VITE_ACCESS_TOKEN=OPEN_SESAME
|
||||||
VITE_OAUTH_SCOPES=
|
VITE_OAUTH_SCOPES=
|
||||||
|
|
||||||
|
|||||||
@@ -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: docker
|
||||||
|
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
|
||||||
@@ -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: docker
|
||||||
|
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'
|
||||||
@@ -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
|
||||||
@@ -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:
|
||||||
|
- "*"
|
||||||
@@ -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
|
||||||
@@ -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 }}
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -12,19 +12,15 @@ dist
|
|||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
.ignore
|
.ignore
|
||||||
scripts/
|
scripts/
|
||||||
*.md
|
|
||||||
!README.md
|
.*
|
||||||
!CHANGELOG.md
|
!.gitignore
|
||||||
/SPEC-*
|
!.prettierrc
|
||||||
|
!.env.development
|
||||||
|
!.github/
|
||||||
|
!.gitlab-ci.yml
|
||||||
|
!.vscode/
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -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/).
|
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
|
### Added
|
||||||
- Initial release.
|
- Initial release.
|
||||||
|
|||||||
@@ -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.
|
||||||
@@ -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.
|
||||||
@@ -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
|
||||||
@@ -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/>.
|
||||||
@@ -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]
|
||||||
@@ -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).
|
||||||
@@ -1,149 +1,70 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://stalw.art">
|
<img src="./img/brand/inbuxa-lockup-light.svg" alt="inbuxa" height="120">
|
||||||
<img src="./img/logo-red.svg" height="150">
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3 align="center">
|
<h3 align="center">INBUXA Admin</h3>
|
||||||
Web-based User Interface for Stalwart 🛡️
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<br>
|
The administration interface for the INBUXA mail server: every server setting,
|
||||||
|
first-boot setup, and recovery, in the browser.
|
||||||
|
|
||||||
<p align="center">
|
It is schema-driven. After signing in it fetches the server's schema and
|
||||||
<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>
|
builds every form, list and menu from it, so it covers every setting the
|
||||||
|
server has without hardcoding any of them.
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
## 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.
|
```bash
|
||||||
- **JMAP protocol**: All data operations (queries, creates, updates, deletes, blob uploads) use JMAP (RFC 8620) with method chaining and result references.
|
npm ci
|
||||||
- **Permission-aware**: Every button, link, field, and section respects the user's permissions. Elements the user cannot access are hidden.
|
npm run dev # http://localhost:5173, against VITE_API_BASE_URL in .env.development
|
||||||
|
npm run typecheck && npx eslint src/ && npx vitest run
|
||||||
## 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
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
This runs the TypeScript compiler followed by Vite's production build. Output
|
## Keeping up with upstream
|
||||||
goes to the `dist/` directory.
|
|
||||||
|
|
||||||
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:
|
||||||
|
|
||||||
```
|
```bash
|
||||||
npm run preview
|
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,
|
INBUXA Admin has its own dated version (`inbuxa-version.json`), shown with the
|
||||||
do not hesitate to reach us on [Github Discussions](https://github.com/stalwartlabs/mail-server/discussions),
|
upstream release it's based on: `INBUXA Admin 2026.9.18 (base 1.0.11)`.
|
||||||
[Reddit](https://www.reddit.com/r/stalwartlabs), [Discord](https://discord.gg/aVQr3jF8jd) or [Matrix](https://matrix.to/#/#stalwart:matrix.org).
|
`package.json` keeps upstream's version, so upstream's bumps merge cleanly.
|
||||||
Additionally you may purchase a subscription to obtain priority support from Stalwart Labs LLC
|
|
||||||
|
|
||||||
## 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.
|
## License and credits
|
||||||
- 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.
|
|
||||||
|
|
||||||
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.
|
Free software under the [GNU Affero General Public License, version 3](./LICENSES/AGPL-3.0-only.txt).
|
||||||
|
|
||||||
## Copyright
|
|
||||||
|
|
||||||
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.
|
||||||
|
|||||||
@@ -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://github.com/inbuxa/inbuxa-server), and one that affects
|
||||||
|
upstream Stalwart's web interface will be passed to Stalwart Labs with credit
|
||||||
|
to you.
|
||||||
@@ -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"
|
||||||
@@ -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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 204 KiB |
@@ -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 |
|
Before Width: | Height: | Size: 260 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"version": "2026.9.21.2"
|
||||||
|
}
|
||||||
@@ -4,9 +4,11 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<base href="/" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Portal</title>
|
<title>INBUXA Admin</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "stalwart-webui",
|
"name": "inbuxa-admin",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.0",
|
"version": "1.0.11",
|
||||||
"description": "Stalwart WebUI",
|
"description": "INBUXA Admin, the administration interface for the INBUXA mail server",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@@ -16,55 +16,58 @@
|
|||||||
"format:check": "prettier --check src/"
|
"format:check": "prettier --check src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
"@daypicker/react": "^10.0.1",
|
||||||
"@radix-ui/react-checkbox": "^1.3.3",
|
"@fontsource-variable/inter": "^5.3.0",
|
||||||
"@radix-ui/react-collapsible": "^1.1.12",
|
"@fontsource-variable/space-grotesk": "^5.3.0",
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-alert-dialog": "^1.1.23",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
"@radix-ui/react-checkbox": "^1.3.11",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-collapsible": "^1.1.20",
|
||||||
"@radix-ui/react-popover": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.23",
|
||||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
"@radix-ui/react-dropdown-menu": "^2.1.24",
|
||||||
"@radix-ui/react-select": "^2.2.6",
|
"@radix-ui/react-label": "^2.1.15",
|
||||||
"@radix-ui/react-separator": "^1.1.8",
|
"@radix-ui/react-popover": "^1.1.23",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-scroll-area": "^1.2.18",
|
||||||
"@radix-ui/react-switch": "^1.2.6",
|
"@radix-ui/react-select": "^2.3.7",
|
||||||
"@radix-ui/react-tabs": "^1.1.13",
|
"@radix-ui/react-separator": "^1.1.15",
|
||||||
"@radix-ui/react-tooltip": "^1.2.8",
|
"@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",
|
"@types/qrcode": "^1.5.6",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"cmdk": "^1.1.1",
|
"cmdk": "^1.1.1",
|
||||||
"i18next": "^26.0.4",
|
"i18next": "^26.3.6",
|
||||||
"lucide-react": "^1.8.0",
|
"lucide-react": "^1.28.0",
|
||||||
"otpauth": "^9.5.0",
|
"otpauth": "^9.5.1",
|
||||||
"qrcode": "^1.5.4",
|
"qrcode": "^1.5.4",
|
||||||
"react": "^19.2.4",
|
"react": "^19.2.8",
|
||||||
"react-dom": "^19.2.4",
|
"react-dom": "^19.2.8",
|
||||||
"react-i18next": "^17.0.2",
|
"react-i18next": "^17.0.11",
|
||||||
"react-markdown": "^10.1.0",
|
"react-markdown": "^10.1.0",
|
||||||
"react-router-dom": "^7.14.0",
|
"react-router-dom": "^7.18.2",
|
||||||
"recharts": "^3.8.1",
|
"recharts": "^3.10.1",
|
||||||
"tailwind-merge": "^3.5.0",
|
"tailwind-merge": "^3.6.0",
|
||||||
"zustand": "^5.0.12"
|
"zustand": "^5.0.14"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.39.4",
|
"@eslint/js": "^10.0.1",
|
||||||
"@tailwindcss/vite": "^4.2.2",
|
"@tailwindcss/vite": "^4.3.3",
|
||||||
"@types/node": "^24.12.2",
|
"@types/node": "^26.1.2",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.17",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@vitejs/plugin-react": "^6.0.5",
|
||||||
"eslint": "^9.39.4",
|
"eslint": "^10.8.0",
|
||||||
"eslint-config-prettier": "^10.1.8",
|
"eslint-config-prettier": "^10.1.8",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
"eslint-plugin-react-refresh": "^0.5.2",
|
"eslint-plugin-react-refresh": "^0.5.3",
|
||||||
"globals": "^17.4.0",
|
"globals": "^17.8.0",
|
||||||
"happy-dom": "^20.9.0",
|
"happy-dom": "^20.11.1",
|
||||||
"prettier": "^3.8.2",
|
"prettier": "^3.9.6",
|
||||||
"tailwindcss": "^4.2.2",
|
"tailwindcss": "^4.3.3",
|
||||||
"typescript": "~6.0.2",
|
"typescript": "~6.0.3",
|
||||||
"typescript-eslint": "^8.58.0",
|
"typescript-eslint": "^8.65.0",
|
||||||
"vite": "^8.0.4",
|
"vite": "^8.2.0",
|
||||||
"vitest": "^4.1.4"
|
"vitest": "^4.1.10"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
|
After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 15 KiB |
@@ -4,14 +4,18 @@
|
|||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { Suspense } from 'react';
|
||||||
import { Outlet } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
|
import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
|
||||||
|
import { LoadingFallback } from '@/components/common/LoadingFallback';
|
||||||
import { Toaster } from '@/components/ui/toaster';
|
import { Toaster } from '@/components/ui/toaster';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
<Outlet />
|
<Suspense fallback={<LoadingFallback fullScreen />}>
|
||||||
|
<Outlet />
|
||||||
|
</Suspense>
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
);
|
);
|
||||||
|
|||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -1,7 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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';
|
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 { resolveObject, resolveSchema, resolveForm, buildCreateDefaults, deepMerge } from '@/lib/schemaResolver';
|
||||||
import { calculateJmapPatch } from '@/lib/jmapPatch';
|
import { calculateJmapPatch } from '@/lib/jmapPatch';
|
||||||
import { jmapGet, jmapSet, getAccountId } from '@/services/jmap/client';
|
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 { Field, Fields, Form, FormField } from '@/types/schema';
|
||||||
import type { JmapSetError, JmapSetResponse } from '@/types/jmap';
|
import type { JmapSetError, JmapSetResponse } from '@/types/jmap';
|
||||||
@@ -88,9 +91,9 @@ export function BootstrapWizard() {
|
|||||||
const { obj, sch } = resolved;
|
const { obj, sch } = resolved;
|
||||||
|
|
||||||
const ctrl = new AbortController();
|
const ctrl = new AbortController();
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const accountId = getAccountId(obj.objectName);
|
const accountId = getAccountId(obj.objectName);
|
||||||
const responses = await jmapGet(obj.objectName, accountId, ['singleton'], fetchProperties, ctrl.signal);
|
const responses = await jmapGet(obj.objectName, accountId, ['singleton'], fetchProperties, ctrl.signal);
|
||||||
@@ -181,19 +184,7 @@ export function BootstrapWizard() {
|
|||||||
for (const ve of error.validationErrors) {
|
for (const ve of error.validationErrors) {
|
||||||
const top = ve.property?.split('/')[0] ?? '';
|
const top = ve.property?.split('/')[0] ?? '';
|
||||||
if (!top) continue;
|
if (!top) continue;
|
||||||
const msg =
|
record(top, validationErrorMessage(ve));
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -345,7 +336,7 @@ export function BootstrapWizard() {
|
|||||||
<WizardShell>
|
<WizardShell>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<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">
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
{t('bootstrap.welcomeSubtitle', "Let's get your server set up.")}
|
{t('bootstrap.welcomeSubtitle', "Let's get your server set up.")}
|
||||||
</p>
|
</p>
|
||||||
@@ -480,7 +471,7 @@ function SuccessScreen({
|
|||||||
'bootstrap.credentialsCreated',
|
'bootstrap.credentialsCreated',
|
||||||
'Your administrator account has been created. Write these down now: the password will not be shown again.',
|
'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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -512,7 +503,7 @@ function SuccessScreen({
|
|||||||
<span className="font-medium">{t('bootstrap.nextStepLabel', 'Next step:')}</span>{' '}
|
<span className="font-medium">{t('bootstrap.nextStepLabel', 'Next step:')}</span>{' '}
|
||||||
{t(
|
{t(
|
||||||
'bootstrap.nextStepBody',
|
'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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,47 +1,24 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 {
|
interface EnterpriseUpsellProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function EnterpriseUpsell({ open, onClose }: EnterpriseUpsellProps) {
|
/**
|
||||||
const { t } = useTranslation();
|
* 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
|
||||||
return (
|
* never opens. It stays as an empty component so the places upstream calls
|
||||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
* it from merge without conflicts.
|
||||||
<DialogContent>
|
*/
|
||||||
<DialogHeader>
|
export function EnterpriseUpsell({ open }: EnterpriseUpsellProps) {
|
||||||
<DialogTitle>{t('enterprise.trialTitle')}</DialogTitle>
|
void open;
|
||||||
<DialogDescription>{t('enterprise.trialDescription')}</DialogDescription>
|
return null;
|
||||||
</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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,29 +1,58 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { 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() {
|
export function DefaultLogo() {
|
||||||
const { t } = useTranslation();
|
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 (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="95 84 500 90"
|
viewBox="165 35 616 130"
|
||||||
aria-label={t('logo.stalwartAlt', 'Stalwart Logo')}
|
aria-label={t('logo.inbuxaAlt', 'INBUXA')}
|
||||||
className="h-7 w-auto max-w-[320px]"
|
className="h-7 w-auto max-w-[320px]"
|
||||||
>
|
>
|
||||||
|
<image x="165.85" y="35.00" width="109.39" height="130.00" href={inbuxaMark} />
|
||||||
<path
|
<path
|
||||||
className="fill-current"
|
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
|
<path
|
||||||
fill="#db2d54"
|
className="fill-current"
|
||||||
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"
|
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>
|
</svg>
|
||||||
);
|
);
|
||||||
@@ -31,50 +60,18 @@ export function DefaultLogo() {
|
|||||||
|
|
||||||
export default function Logo() {
|
export default function Logo() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [logoUrl, setLogoUrl] = useState<string | null>(null);
|
const logo = useSyncExternalStore(subscribeToLogo, getLogoState, getLogoState);
|
||||||
const [failed, setFailed] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const controller = new AbortController();
|
loadLogoOnce();
|
||||||
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
if (logo.status === 'custom') {
|
||||||
return () => {
|
return <img src={logo.url} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
|
||||||
if (logoUrl) {
|
}
|
||||||
URL.revokeObjectURL(logoUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [logoUrl]);
|
|
||||||
|
|
||||||
if (logoUrl && !failed) {
|
if (logo.status === 'loading') {
|
||||||
return <img src={logoUrl} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
|
return <span className="block h-7 w-[140px]" aria-hidden="true" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <DefaultLogo />;
|
return <DefaultLogo />;
|
||||||
|
|||||||
@@ -48,8 +48,14 @@ export function ObjectPicker({ schema, objectName, value, onChange, onClear, pla
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
{value && (
|
{value && (
|
||||||
<Badge variant="secondary" className="gap-1 pr-1.5 text-sm">
|
<Badge variant="secondary" className="gap-1 pr-1.5 text-sm max-w-xs">
|
||||||
{labelLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : (display ?? value)}
|
{labelLoading ? (
|
||||||
|
<Loader2 className="h-3 w-3 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<span className="truncate" title={display ?? value}>
|
||||||
|
{display ?? value}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
{onClear && (
|
{onClear && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -121,7 +127,9 @@ export function ObjectPicker({ schema, objectName, value, onChange, onClear, pla
|
|||||||
setOpen(false);
|
setOpen(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{opt.label}
|
<span className="truncate" title={opt.label}>
|
||||||
|
{opt.label}
|
||||||
|
</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
))}
|
))}
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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
|
* 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 { useTranslation } from 'react-i18next';
|
||||||
|
import { useBufferedValue } from '@/hooks/useBufferedValue';
|
||||||
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -21,11 +22,7 @@ function BufferedExprInput({
|
|||||||
React.InputHTMLAttributes<HTMLInputElement>,
|
React.InputHTMLAttributes<HTMLInputElement>,
|
||||||
'onChange' | 'value'
|
'onChange' | 'value'
|
||||||
>) {
|
>) {
|
||||||
const [local, setLocal] = useState(value);
|
const [local, setLocal] = useBufferedValue(value);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLocal(value);
|
|
||||||
}, [value]);
|
|
||||||
|
|
||||||
const commit = () => {
|
const commit = () => {
|
||||||
if (local !== value) onCommit(local);
|
if (local !== value) onCommit(local);
|
||||||
|
|||||||
@@ -1,10 +1,18 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { useState, useEffect, useCallback, useMemo } from 'react';
|
||||||
|
import { flushSync } from 'react-dom';
|
||||||
import { useNavigate, useBlocker } from 'react-router-dom';
|
import { useNavigate, useBlocker } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -46,10 +54,14 @@ import {
|
|||||||
} from '@/lib/schemaResolver';
|
} from '@/lib/schemaResolver';
|
||||||
import { jmapGet, jmapSet, jmapRequest, getAccountId } from '@/services/jmap/client';
|
import { jmapGet, jmapSet, jmapRequest, getAccountId } from '@/services/jmap/client';
|
||||||
import { calculateJmapPatch } from '@/lib/jmapPatch';
|
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 { toast } from '@/hooks/use-toast';
|
||||||
import { logFormChange } from '@/lib/debug';
|
import { logFormChange } from '@/lib/debug';
|
||||||
import { FieldWidget } from '@/components/forms/FieldWidget';
|
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 { Field, Fields, Form, FormField, Schema } from '@/types/schema';
|
||||||
import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
|
import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
|
||||||
@@ -115,6 +127,15 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
return { ...fields, properties: filtered };
|
return { ...fields, properties: filtered };
|
||||||
}, [resolved, selectedVariant, schema]);
|
}, [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 => {
|
const currentForm = useMemo((): Form | null => {
|
||||||
if (!schema || !resolved) return null;
|
if (!schema || !resolved) return null;
|
||||||
const { obj, sch } = resolved;
|
const { obj, sch } = resolved;
|
||||||
@@ -164,11 +185,11 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
return Array.from(set);
|
return Array.from(set);
|
||||||
}, [schema, resolved, viewName]);
|
}, [schema, resolved, viewName]);
|
||||||
|
|
||||||
useEffect(() => {
|
const [prevCreateInitKey, setPrevCreateInitKey] = useState<typeof resolved | undefined>(undefined);
|
||||||
if (!schema || !resolved) return;
|
if (isCreate && schema && resolved) {
|
||||||
const { obj, sch } = resolved;
|
if (resolved !== prevCreateInitKey) {
|
||||||
|
setPrevCreateInitKey(resolved);
|
||||||
if (isCreate) {
|
const { obj, sch } = resolved;
|
||||||
const staticFilters = resolved.list?.filtersStatic;
|
const staticFilters = resolved.list?.filtersStatic;
|
||||||
if (sch.type === 'multiple') {
|
if (sch.type === 'multiple') {
|
||||||
const variantFromFilter = typeof staticFilters?.['@type'] === 'string' ? staticFilters['@type'] : undefined;
|
const variantFromFilter = typeof staticFilters?.['@type'] === 'string' ? staticFilters['@type'] : undefined;
|
||||||
@@ -182,13 +203,19 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
setFormData(defaults);
|
setFormData(defaults);
|
||||||
setOriginalData(defaults);
|
setOriginalData(defaults);
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
} else if (prevCreateInitKey !== undefined) {
|
||||||
|
setPrevCreateInitKey(undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!schema || !resolved || isCreate) return;
|
||||||
|
const { obj, sch } = resolved;
|
||||||
|
|
||||||
const ctrl = new AbortController();
|
const ctrl = new AbortController();
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const accountId = getAccountId(obj.objectName);
|
const accountId = getAccountId(obj.objectName);
|
||||||
const ids = isSingleton ? ['singleton'] : [objectId];
|
const ids = isSingleton ? ['singleton'] : [objectId];
|
||||||
@@ -249,13 +276,14 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
|
|
||||||
const blocker = useBlocker(isDirty && !saving);
|
const blocker = useBlocker(isDirty && !saving);
|
||||||
|
|
||||||
const [pendingNavAfterCreate, setPendingNavAfterCreate] = useState(false);
|
const navigateAfterCreate = useCallback(() => {
|
||||||
useEffect(() => {
|
flushSync(() => {
|
||||||
if (!pendingNavAfterCreate) return;
|
setOriginalData({ ...formData });
|
||||||
setPendingNavAfterCreate(false);
|
setServerCreatedProps(null);
|
||||||
|
});
|
||||||
const section = viewToSection[viewName] ?? '';
|
const section = viewToSection[viewName] ?? '';
|
||||||
navigate(`/${section}/${viewName}`);
|
navigate(`/${section}/${viewName}`);
|
||||||
}, [pendingNavAfterCreate, viewName, viewToSection, navigate]);
|
}, [formData, viewToSection, viewName, navigate]);
|
||||||
|
|
||||||
const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
|
const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
|
||||||
setFormData((prev) => ({ ...prev, [fieldName]: value }));
|
setFormData((prev) => ({ ...prev, [fieldName]: value }));
|
||||||
@@ -345,21 +373,10 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
if (error.validationErrors && error.validationErrors.length > 0) {
|
if (error.validationErrors && error.validationErrors.length > 0) {
|
||||||
for (const ve of error.validationErrors) {
|
for (const ve of error.validationErrors) {
|
||||||
if (ve.property && currentFields?.properties[ve.property]) {
|
if (ve.property && currentFields?.properties[ve.property]) {
|
||||||
const msg =
|
newFieldErrors[ve.property] = validationErrorMessage(ve);
|
||||||
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;
|
|
||||||
} else if (ve.property) {
|
} 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 =
|
const isSecret =
|
||||||
fieldDef.type.type === 'string' &&
|
fieldDef.type.type === 'string' &&
|
||||||
(fieldDef.type.format === 'secret' || fieldDef.type.format === 'secretText');
|
(fieldDef.type.format === 'secret' || fieldDef.type.format === 'secretText');
|
||||||
if (isSecret && formData[fieldName] === '*****') continue;
|
if (isSecret && formData[fieldName] === SECRET_MASK) continue;
|
||||||
createPayload[fieldName] = formData[fieldName];
|
createPayload[fieldName] = formData[fieldName];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -530,7 +547,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
if (
|
if (
|
||||||
fieldDef?.type.type === 'string' &&
|
fieldDef?.type.type === 'string' &&
|
||||||
(fieldDef.type.format === 'secret' || fieldDef.type.format === 'secretText') &&
|
(fieldDef.type.format === 'secret' || fieldDef.type.format === 'secretText') &&
|
||||||
patchValue === '*****'
|
patchValue === SECRET_MASK
|
||||||
) {
|
) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
@@ -686,7 +703,8 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
if (!resolved || !schema) return '';
|
if (!resolved || !schema) return '';
|
||||||
const { obj } = resolved;
|
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 list = resolveList(schema, viewName, obj.objectName);
|
||||||
const name = list?.singularName ?? obj.objectType.description;
|
const name = list?.singularName ?? obj.objectType.description;
|
||||||
@@ -695,17 +713,18 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
|
|
||||||
const labelProp = list?.labelProperty;
|
const labelProp = list?.labelProperty;
|
||||||
if (labelProp) {
|
if (labelProp) {
|
||||||
const raw = formData[labelProp];
|
const value = coerceLabel(formData[labelProp], '');
|
||||||
if (typeof raw === 'string' && raw.length > 0) {
|
if (value.length > 0) {
|
||||||
return t('form.editTitleWithValue', 'Edit {{name}}: {{value}}', { name, value: raw });
|
return t('form.editTitleWithValue', 'Edit {{name}}: {{value}}', { name, value });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return t('form.editTitle', 'Edit {{name}}', { name });
|
return t('form.editTitle', 'Edit {{name}}', { name });
|
||||||
}, [resolved, schema, isCreate, isSingleton, formData, viewName, titleForm, t]);
|
}, [resolved, schema, isCreate, isSingleton, formData, viewName, titleForm, t]);
|
||||||
|
|
||||||
const formSubtitle = useMemo(() => {
|
const formSubtitle = useMemo(() => {
|
||||||
return titleForm?.subtitle;
|
if (titleForm?.subtitle) return titleForm.subtitle;
|
||||||
}, [titleForm]);
|
return isSingleton && !titleForm ? resolved?.obj.objectType.description : undefined;
|
||||||
|
}, [titleForm, isSingleton, resolved]);
|
||||||
|
|
||||||
if (!schema || !resolved) {
|
if (!schema || !resolved) {
|
||||||
return (
|
return (
|
||||||
@@ -741,18 +760,21 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
|
const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
|
||||||
|
const scriptName = typeof formData.name === 'string' ? formData.name : '';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6 max-w-4xl">
|
<div className="mx-auto max-w-4xl space-y-6">
|
||||||
<div className="flex items-center gap-4">
|
<PageHeader
|
||||||
<Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
|
leading={
|
||||||
<ArrowLeft className="h-5 w-5" />
|
<Button type="button" variant="ghost" size="icon" className="rounded-xl" onClick={() => navigate(-1)}>
|
||||||
</Button>
|
<ArrowLeft className="h-5 w-5" />
|
||||||
<div className="flex-1">
|
</Button>
|
||||||
<h1 className="text-2xl font-semibold tracking-tight">{formTitle}</h1>
|
}
|
||||||
{formSubtitle && <p className="text-sm text-muted-foreground mt-1">{formSubtitle}</p>}
|
icon={iconForView(schema, viewName)}
|
||||||
</div>
|
title={formTitle}
|
||||||
</div>
|
subtitle={formSubtitle}
|
||||||
|
actions={<HelpPanel viewName={viewName} title={String(formTitle ?? '')} />}
|
||||||
|
/>
|
||||||
|
|
||||||
{generalError && (
|
{generalError && (
|
||||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 p-4">
|
<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'}>
|
<CardContent className={section.title ? '' : 'pt-6'}>
|
||||||
<div className="space-y-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) => {
|
{section.fields.map((sf) => {
|
||||||
const { formField, field, visible, enterpriseDisabled } = sf;
|
const { formField, field, visible, enterpriseDisabled } = sf;
|
||||||
if (!visible) return null;
|
if (!visible) return null;
|
||||||
@@ -811,6 +844,10 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
readOnly={fieldReadOnly}
|
readOnly={fieldReadOnly}
|
||||||
error={fieldError}
|
error={fieldError}
|
||||||
schema={schema}
|
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>
|
<div className="opacity-60">{widget}</div>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<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>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
@@ -937,9 +974,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
open={serverCreatedProps !== null && createdObjectId !== null}
|
open={serverCreatedProps !== null && createdObjectId !== null}
|
||||||
onOpenChange={(open) => {
|
onOpenChange={(open) => {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
setOriginalData({ ...formData });
|
navigateAfterCreate();
|
||||||
setServerCreatedProps(null);
|
|
||||||
setPendingNavAfterCreate(true);
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -972,15 +1007,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
|||||||
})()}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button
|
<Button onClick={navigateAfterCreate}>{t('common.continue', 'Continue')}</Button>
|
||||||
onClick={() => {
|
|
||||||
setOriginalData({ ...formData });
|
|
||||||
setServerCreatedProps(null);
|
|
||||||
setPendingNavAfterCreate(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('common.continue', 'Continue')}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
@@ -1010,7 +1037,7 @@ function buildSections(
|
|||||||
|
|
||||||
if (!form) {
|
if (!form) {
|
||||||
const allFields = Object.entries(fields!.properties)
|
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);
|
.filter((f): f is RenderableField => f !== null);
|
||||||
return [{ fields: allFields }];
|
return [{ fields: allFields }];
|
||||||
}
|
}
|
||||||
@@ -1100,8 +1127,6 @@ function buildRenderableField(
|
|||||||
return { formField, field, visible, enterpriseDisabled };
|
return { formField, field, visible, enterpriseDisabled };
|
||||||
}
|
}
|
||||||
|
|
||||||
const SECRET_MASK_PLACEHOLDER = '*****';
|
|
||||||
|
|
||||||
function isOtpAuthValid(data: unknown): boolean {
|
function isOtpAuthValid(data: unknown): boolean {
|
||||||
if (data == null || typeof data !== 'object' || Array.isArray(data)) return true;
|
if (data == null || typeof data !== 'object' || Array.isArray(data)) return true;
|
||||||
const obj = data as Record<string, unknown>;
|
const obj = data as Record<string, unknown>;
|
||||||
@@ -1117,7 +1142,7 @@ function isOtpAuthValid(data: unknown): boolean {
|
|||||||
const otpUrl = obj.otpUrl;
|
const otpUrl = obj.otpUrl;
|
||||||
const otpCode = obj.otpCode;
|
const otpCode = obj.otpCode;
|
||||||
if (otpUrl == null || otpUrl === '') return true;
|
if (otpUrl == null || otpUrl === '') return true;
|
||||||
if (otpCode == null || otpCode === '' || otpCode === SECRET_MASK_PLACEHOLDER) {
|
if (otpCode == null || otpCode === '' || otpCode === SECRET_MASK) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
|||||||
@@ -1,13 +1,19 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { 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 { Input } from '@/components/ui/input';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Button } from '@/components/ui/button';
|
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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
import { Combobox, type ComboboxOption } from '@/components/ui/combobox';
|
import { Combobox, type ComboboxOption } from '@/components/ui/combobox';
|
||||||
|
import { Calendar } from '@/components/ui/calendar';
|
||||||
import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight } from 'lucide-react';
|
import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as CalendarIcon } from 'lucide-react';
|
||||||
|
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||||
|
|
||||||
import { ExpressionEditor } from '@/components/expression/ExpressionEditor';
|
import { ExpressionEditor } from '@/components/expression/ExpressionEditor';
|
||||||
import { OtpAuthField } from '@/components/forms/OtpAuthField';
|
import { OtpAuthField } from '@/components/forms/OtpAuthField';
|
||||||
|
import { SievepadButton } from '@/components/forms/SievepadButton';
|
||||||
import {
|
import {
|
||||||
bytesToHuman,
|
bytesToHuman,
|
||||||
humanToBytes,
|
humanToBytes,
|
||||||
@@ -37,10 +41,18 @@ import {
|
|||||||
SIZE_UNITS,
|
SIZE_UNITS,
|
||||||
DURATION_UNITS,
|
DURATION_UNITS,
|
||||||
} from '@/lib/durationFormat';
|
} 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 { useAccountStore } from '@/stores/accountStore';
|
||||||
import { useEffectiveEdition } from '@/components/forms/FormEditionContext';
|
import { useEffectiveEdition } from '@/components/forms/FormEditionContext';
|
||||||
import { useObjectList, useObjectLabel, useNoPermissionMessage, type ObjectOption } from '@/lib/objectOptions';
|
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 { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
|
||||||
import { jmapGet, getAccountId } from '@/services/jmap/client';
|
import { jmapGet, getAccountId } from '@/services/jmap/client';
|
||||||
|
|
||||||
@@ -54,6 +66,9 @@ export interface FieldWidgetProps {
|
|||||||
readOnly: boolean;
|
readOnly: boolean;
|
||||||
error?: string;
|
error?: string;
|
||||||
schema: Schema;
|
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 {
|
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) {
|
export function FieldWidget(props: FieldWidgetProps) {
|
||||||
const { t } = useTranslation();
|
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 ft = field.type;
|
||||||
const edition = useEffectiveEdition();
|
const edition = useEffectiveEdition();
|
||||||
|
|
||||||
@@ -127,7 +152,7 @@ export function FieldWidget(props: FieldWidgetProps) {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
case 'blobId':
|
case 'blobId':
|
||||||
return <BlobField value={value} onChange={onChange} readOnly={readOnly} />;
|
return <BlobField value={value} onChange={onChange} readOnly={readOnly} sieveScriptName={sieveScriptName} />;
|
||||||
case 'objectId':
|
case 'objectId':
|
||||||
return (
|
return (
|
||||||
<ObjectIdField
|
<ObjectIdField
|
||||||
@@ -224,13 +249,20 @@ export function FieldWidget(props: FieldWidgetProps) {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</Label>
|
</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>
|
</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}
|
{widget}
|
||||||
|
{sieveScriptName !== undefined && ft.type === 'string' && (
|
||||||
|
<SievepadButton scriptName={sieveScriptName} source={typeof value === 'string' ? value : ''} />
|
||||||
|
)}
|
||||||
{error && <p className="text-xs text-destructive">{error}</p>}
|
{error && <p className="text-xs text-destructive">{error}</p>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -242,11 +274,7 @@ interface BufferedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
|
|||||||
}
|
}
|
||||||
|
|
||||||
function BufferedInput({ value, onCommit, onBlur, onKeyDown, ...rest }: BufferedInputProps) {
|
function BufferedInput({ value, onCommit, onBlur, onKeyDown, ...rest }: BufferedInputProps) {
|
||||||
const [local, setLocal] = useState(value);
|
const [local, setLocal] = useBufferedValue(value);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLocal(value);
|
|
||||||
}, [value]);
|
|
||||||
|
|
||||||
const commit = () => {
|
const commit = () => {
|
||||||
if (local !== value) onCommit(local);
|
if (local !== value) onCommit(local);
|
||||||
@@ -277,11 +305,7 @@ interface BufferedTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTe
|
|||||||
}
|
}
|
||||||
|
|
||||||
function BufferedTextarea({ value, onCommit, onBlur, ...rest }: BufferedTextareaProps) {
|
function BufferedTextarea({ value, onCommit, onBlur, ...rest }: BufferedTextareaProps) {
|
||||||
const [local, setLocal] = useState(value);
|
const [local, setLocal] = useBufferedValue(value);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLocal(value);
|
|
||||||
}, [value]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Textarea
|
<Textarea
|
||||||
@@ -457,15 +481,12 @@ interface SecretInputProps {
|
|||||||
multiline: boolean;
|
multiline: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SECRET_MASK = '****';
|
|
||||||
|
|
||||||
function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLength, multiline }: SecretInputProps) {
|
function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLength, multiline }: SecretInputProps) {
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const [localValue, setLocalValue] = useState(() => (value === SECRET_MASK || value === '' ? '' : value));
|
const [localValue, setLocalValue] = useState(() => (value === SECRET_MASK || value === '' ? '' : value));
|
||||||
const [isMasked, setIsMasked] = useState(() => value === SECRET_MASK);
|
const [isMasked, setIsMasked] = useState(() => value === SECRET_MASK);
|
||||||
|
|
||||||
/* eslint-disable react-hooks/set-state-in-effect */
|
useResetOnChange(value, () => {
|
||||||
useEffect(() => {
|
|
||||||
if (value === SECRET_MASK || value === '') {
|
if (value === SECRET_MASK || value === '') {
|
||||||
setLocalValue('');
|
setLocalValue('');
|
||||||
setIsMasked(value === SECRET_MASK);
|
setIsMasked(value === SECRET_MASK);
|
||||||
@@ -473,8 +494,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
|
|||||||
setLocalValue(value);
|
setLocalValue(value);
|
||||||
setIsMasked(false);
|
setIsMasked(false);
|
||||||
}
|
}
|
||||||
}, [value]);
|
});
|
||||||
/* eslint-enable react-hooks/set-state-in-effect */
|
|
||||||
|
|
||||||
const handleLocalChange = (v: string) => {
|
const handleLocalChange = (v: string) => {
|
||||||
setLocalValue(v);
|
setLocalValue(v);
|
||||||
@@ -482,6 +502,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
|
|||||||
};
|
};
|
||||||
|
|
||||||
const commit = () => {
|
const commit = () => {
|
||||||
|
if (isMasked && localValue === '') return;
|
||||||
if (localValue !== value) onChange(localValue);
|
if (localValue !== value) onChange(localValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -513,6 +534,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
|
|||||||
minLength={minLength}
|
minLength={minLength}
|
||||||
maxLength={maxLength}
|
maxLength={maxLength}
|
||||||
rows={4}
|
rows={4}
|
||||||
|
autoComplete="off"
|
||||||
|
data-1p-ignore
|
||||||
|
data-lpignore="true"
|
||||||
|
data-bwignore
|
||||||
className={visible ? '' : 'tracking-widest'}
|
className={visible ? '' : 'tracking-widest'}
|
||||||
style={visible ? undefined : ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)}
|
style={visible ? undefined : ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)}
|
||||||
/>
|
/>
|
||||||
@@ -535,6 +560,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
|
|||||||
placeholder={displayPlaceholder}
|
placeholder={displayPlaceholder}
|
||||||
minLength={minLength}
|
minLength={minLength}
|
||||||
maxLength={maxLength}
|
maxLength={maxLength}
|
||||||
|
autoComplete="off"
|
||||||
|
data-1p-ignore
|
||||||
|
data-lpignore="true"
|
||||||
|
data-bwignore
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
/>
|
/>
|
||||||
{toggleBtn}
|
{toggleBtn}
|
||||||
@@ -607,13 +636,7 @@ function BufferedNumberInput({
|
|||||||
disabled,
|
disabled,
|
||||||
onCommit,
|
onCommit,
|
||||||
}: BufferedNumberInputProps) {
|
}: BufferedNumberInputProps) {
|
||||||
const [local, setLocal] = useState<string>(value != null ? String(value) : '');
|
const [local, setLocal] = useBufferedValue(value, (v) => (v != null ? String(v) : ''));
|
||||||
|
|
||||||
/* eslint-disable react-hooks/set-state-in-effect */
|
|
||||||
useEffect(() => {
|
|
||||||
setLocal(value != null ? String(value) : '');
|
|
||||||
}, [value]);
|
|
||||||
/* eslint-enable react-hooks/set-state-in-effect */
|
|
||||||
|
|
||||||
const commit = () => {
|
const commit = () => {
|
||||||
if (local === '') {
|
if (local === '') {
|
||||||
@@ -666,13 +689,11 @@ function SizeInputEditable({ value, onChange, nullable }: Omit<SizeInputProps, '
|
|||||||
const [unit, setUnit] = useState(initHuman.unit);
|
const [unit, setUnit] = useState(initHuman.unit);
|
||||||
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
|
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
|
||||||
|
|
||||||
/* eslint-disable react-hooks/set-state-in-effect */
|
useResetOnChange(value, () => {
|
||||||
useEffect(() => {
|
|
||||||
const h = bytesToHuman(typeof value === 'number' ? value : 0);
|
const h = bytesToHuman(typeof value === 'number' ? value : 0);
|
||||||
setUnit(h.unit);
|
setUnit(h.unit);
|
||||||
setLocalStr(value == null ? '' : String(h.value));
|
setLocalStr(value == null ? '' : String(h.value));
|
||||||
}, [value]);
|
});
|
||||||
/* eslint-enable react-hooks/set-state-in-effect */
|
|
||||||
|
|
||||||
const commit = () => {
|
const commit = () => {
|
||||||
if (localStr === '') {
|
if (localStr === '') {
|
||||||
@@ -771,13 +792,11 @@ function DurationInputEditable({ value, onChange, nullable }: Omit<DurationInput
|
|||||||
const [unit, setUnit] = useState(initHuman.unit);
|
const [unit, setUnit] = useState(initHuman.unit);
|
||||||
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
|
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
|
||||||
|
|
||||||
/* eslint-disable react-hooks/set-state-in-effect */
|
useResetOnChange(value, () => {
|
||||||
useEffect(() => {
|
|
||||||
const h = msToHuman(typeof value === 'number' ? value : 0);
|
const h = msToHuman(typeof value === 'number' ? value : 0);
|
||||||
setUnit(h.unit);
|
setUnit(h.unit);
|
||||||
setLocalStr(value == null ? '' : String(h.value));
|
setLocalStr(value == null ? '' : String(h.value));
|
||||||
}, [value]);
|
});
|
||||||
/* eslint-enable react-hooks/set-state-in-effect */
|
|
||||||
|
|
||||||
const commit = () => {
|
const commit = () => {
|
||||||
if (localStr === '') {
|
if (localStr === '') {
|
||||||
@@ -842,66 +861,69 @@ interface DateTimeFieldProps {
|
|||||||
nullable?: boolean;
|
nullable?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const DATE_TIME_FORMAT = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' });
|
||||||
|
|
||||||
function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldProps) {
|
function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldProps) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const strValue = typeof value === 'string' ? value : '';
|
const strValue = typeof value === 'string' ? value : '';
|
||||||
|
|
||||||
const toLocal = (iso: string): string => {
|
const selected = useMemo(() => {
|
||||||
if (!iso) return '';
|
const d = strValue ? new Date(strValue) : null;
|
||||||
try {
|
return d && !isNaN(d.getTime()) ? d : null;
|
||||||
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));
|
|
||||||
}, [strValue]);
|
}, [strValue]);
|
||||||
/* eslint-enable react-hooks/set-state-in-effect */
|
|
||||||
|
|
||||||
const commit = () => {
|
const localTime = (selected ?? new Date()).toTimeString().slice(0, 5);
|
||||||
const iso = toIso(local);
|
|
||||||
if (iso !== strValue) onChange(iso);
|
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 (readOnly) {
|
||||||
if (!strValue) {
|
if (!strValue) {
|
||||||
return <span className="text-sm text-muted-foreground italic">{t('field.notSet', 'Not set')}</span>;
|
return <span className="text-sm text-muted-foreground italic">{t('field.notSet', 'Not set')}</span>;
|
||||||
}
|
}
|
||||||
let formatted = strValue;
|
return <span className="text-sm">{selected ? DATE_TIME_FORMAT.format(selected) : strValue}</span>;
|
||||||
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 (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Input
|
<Popover>
|
||||||
type="datetime-local"
|
<PopoverTrigger asChild>
|
||||||
value={local}
|
<Button
|
||||||
onChange={(e) => setLocal(e.target.value)}
|
type="button"
|
||||||
onBlur={commit}
|
variant="outline"
|
||||||
className="flex-1"
|
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 && (
|
{nullable && strValue && (
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -991,9 +1013,10 @@ interface BlobFieldProps {
|
|||||||
value: unknown;
|
value: unknown;
|
||||||
onChange: (value: unknown) => void;
|
onChange: (value: unknown) => void;
|
||||||
readOnly: boolean;
|
readOnly: boolean;
|
||||||
|
sieveScriptName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
|
function BlobField({ value, onChange, readOnly, sieveScriptName }: BlobFieldProps) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const blobId = typeof value === 'string' ? value : null;
|
const blobId = typeof value === 'string' ? value : null;
|
||||||
const [content, setContent] = useState<string>('');
|
const [content, setContent] = useState<string>('');
|
||||||
@@ -1005,9 +1028,9 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
|
|||||||
if (!blobId || loaded) return;
|
if (!blobId || loaded) return;
|
||||||
|
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const accountId = getAccountId('x:Blob');
|
const accountId = getAccountId('x:Blob');
|
||||||
const responses = await jmapGet('Blob', accountId, [blobId], ['data:asText']);
|
const responses = await jmapGet('Blob', accountId, [blobId], ['data:asText']);
|
||||||
@@ -1059,6 +1082,7 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
|
|||||||
rows={8}
|
rows={8}
|
||||||
className="font-mono text-xs"
|
className="font-mono text-xs"
|
||||||
/>
|
/>
|
||||||
|
{sieveScriptName !== undefined && <SievepadButton scriptName={sieveScriptName} source={content} />}
|
||||||
{modified && (
|
{modified && (
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
{t('field.contentModified', 'Content modified (will be saved as a new blob)')}
|
{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 [localCount, setLocalCount] = useState(String(count));
|
||||||
const [localPeriod, setLocalPeriod] = useState(String(human.value));
|
const [localPeriod, setLocalPeriod] = useState(String(human.value));
|
||||||
|
|
||||||
useEffect(() => {
|
useResetOnChange(count, () => setLocalCount(String(count)));
|
||||||
setLocalCount(String(count));
|
useResetOnChange(human.value, () => setLocalPeriod(String(human.value)));
|
||||||
}, [count]);
|
|
||||||
useEffect(() => {
|
|
||||||
setLocalPeriod(String(human.value));
|
|
||||||
}, [human.value]);
|
|
||||||
|
|
||||||
const commitCount = () => {
|
const commitCount = () => {
|
||||||
const n = parseInt(localCount, 10);
|
const n = parseInt(localCount, 10);
|
||||||
@@ -1409,6 +1429,7 @@ function EmbeddedObjectField({
|
|||||||
|
|
||||||
if (resolvedSchema.type === 'single') {
|
if (resolvedSchema.type === 'single') {
|
||||||
const fields = resolvedSchema.fields;
|
const fields = resolvedSchema.fields;
|
||||||
|
const helpScopeHere = resolvedSchema.schemaName ?? objectName;
|
||||||
const form = resolveVariantForm(schema, objectName, objectName, resolvedSchema.schemaName);
|
const form = resolveVariantForm(schema, objectName, objectName, resolvedSchema.schemaName);
|
||||||
const formFields = form?.sections.flatMap((s) => s.fields) ?? [];
|
const formFields = form?.sections.flatMap((s) => s.fields) ?? [];
|
||||||
|
|
||||||
@@ -1427,6 +1448,7 @@ function EmbeddedObjectField({
|
|||||||
onChange={(v) => handleFieldChange(ff.name, v)}
|
onChange={(v) => handleFieldChange(ff.name, v)}
|
||||||
readOnly={readOnly}
|
readOnly={readOnly}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
|
helpScope={helpScopeHere}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -1437,11 +1459,12 @@ function EmbeddedObjectField({
|
|||||||
<FieldWidget
|
<FieldWidget
|
||||||
key={name}
|
key={name}
|
||||||
field={fieldDef}
|
field={fieldDef}
|
||||||
formField={{ name, label: name }}
|
formField={{ name, label: humanize(name) }}
|
||||||
value={objValue[name]}
|
value={objValue[name]}
|
||||||
onChange={(v) => handleFieldChange(name, v)}
|
onChange={(v) => handleFieldChange(name, v)}
|
||||||
readOnly={readOnly}
|
readOnly={readOnly}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
|
helpScope={helpScopeHere}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -1451,6 +1474,7 @@ function EmbeddedObjectField({
|
|||||||
const currentType = (objValue['@type'] as string) ?? resolvedSchema.variants[0]?.name ?? '';
|
const currentType = (objValue['@type'] as string) ?? resolvedSchema.variants[0]?.name ?? '';
|
||||||
const currentVariant = resolvedSchema.variants.find((v) => v.name === currentType);
|
const currentVariant = resolvedSchema.variants.find((v) => v.name === currentType);
|
||||||
const variantFields = currentVariant?.fields;
|
const variantFields = currentVariant?.fields;
|
||||||
|
const helpScopeHere = currentVariant?.schemaName ?? objectName;
|
||||||
const variantForm = resolveVariantForm(schema, objectName, objectName, currentVariant?.schemaName);
|
const variantForm = resolveVariantForm(schema, objectName, objectName, currentVariant?.schemaName);
|
||||||
const variantFormFields = variantForm?.sections.flatMap((s) => s.fields) ?? [];
|
const variantFormFields = variantForm?.sections.flatMap((s) => s.fields) ?? [];
|
||||||
|
|
||||||
@@ -1491,6 +1515,7 @@ function EmbeddedObjectField({
|
|||||||
onChange={(v) => handleFieldChange(ff.name, v)}
|
onChange={(v) => handleFieldChange(ff.name, v)}
|
||||||
readOnly={readOnly}
|
readOnly={readOnly}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
|
helpScope={helpScopeHere}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -1502,11 +1527,12 @@ function EmbeddedObjectField({
|
|||||||
<FieldWidget
|
<FieldWidget
|
||||||
key={name}
|
key={name}
|
||||||
field={fieldDef}
|
field={fieldDef}
|
||||||
formField={{ name, label: name }}
|
formField={{ name, label: humanize(name) }}
|
||||||
value={objValue[name]}
|
value={objValue[name]}
|
||||||
onChange={(v) => handleFieldChange(name, v)}
|
onChange={(v) => handleFieldChange(name, v)}
|
||||||
readOnly={readOnly}
|
readOnly={readOnly}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
|
helpScope={helpScopeHere}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -1549,16 +1575,7 @@ function ObjectListField({
|
|||||||
|
|
||||||
const addItem = () => {
|
const addItem = () => {
|
||||||
const nextIndex = entries.length > 0 ? Math.max(...entries.map(([k]) => parseInt(k))) + 1 : 0;
|
const nextIndex = entries.length > 0 ? Math.max(...entries.map(([k]) => parseInt(k))) + 1 : 0;
|
||||||
let defaults: Record<string, unknown> = {};
|
onChange({ ...mapValue, [String(nextIndex)]: buildNewObjectValue(schema, objectName) });
|
||||||
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 });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeItem = (key: string) => {
|
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 {
|
interface MapFieldProps {
|
||||||
keyClass: ScalarType;
|
keyClass: ScalarType;
|
||||||
valueClass: MapValueType;
|
valueClass: MapValueType;
|
||||||
@@ -2008,7 +2048,7 @@ function MapField({ keyClass, valueClass, value, onChange, readOnly, schema, min
|
|||||||
if (valueClass.type === 'number') {
|
if (valueClass.type === 'number') {
|
||||||
defaultValue = 0;
|
defaultValue = 0;
|
||||||
} else if (valueClass.type === 'object') {
|
} else if (valueClass.type === 'object') {
|
||||||
defaultValue = {};
|
defaultValue = buildNewObjectValue(schema, valueClass.objectName);
|
||||||
}
|
}
|
||||||
|
|
||||||
onChange({ ...mapValue, [key]: defaultValue });
|
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));
|
const existingKeys = new Set(Object.keys(mapValue));
|
||||||
|
|
||||||
return (
|
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"
|
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" />
|
<ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200" />
|
||||||
{getKeyLabel(key)}
|
<MapEntryKeyLabel keyClass={keyClass} keyValue={key} schema={schema} />
|
||||||
</button>
|
</button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
{!readOnly && (
|
{!readOnly && (
|
||||||
|
|||||||
@@ -1,18 +1,23 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { useEffect, useMemo, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import * as OTPAuth from 'otpauth';
|
import * as OTPAuth from 'otpauth';
|
||||||
import QRCode from 'qrcode';
|
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 { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { toast } from '@/hooks/use-toast';
|
||||||
|
import { SECRET_MASK } from '@/lib/jmapUtils';
|
||||||
|
|
||||||
interface OtpAuthValue {
|
interface OtpAuthValue {
|
||||||
otpUrl?: string | null;
|
otpUrl?: string | null;
|
||||||
@@ -25,19 +30,15 @@ interface OtpAuthFieldProps {
|
|||||||
readOnly: boolean;
|
readOnly: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SECRET_MASK = '*****';
|
|
||||||
|
|
||||||
const STALWART_IMAGE_URL = 'https://stalw.art/img/favicon-32x32.png';
|
|
||||||
|
|
||||||
function buildOtpAuthUrl(totp: OTPAuth.TOTP): string {
|
function buildOtpAuthUrl(totp: OTPAuth.TOTP): string {
|
||||||
const base = totp.toString();
|
// No `image` parameter: it made authenticator apps fetch a logo from a
|
||||||
const sep = base.includes('?') ? '&' : '?';
|
// third-party site each time someone set up two-factor.
|
||||||
return `${base}${sep}image=${encodeURIComponent(STALWART_IMAGE_URL)}`;
|
return totp.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateTotp(): { totp: OTPAuth.TOTP; url: string } {
|
function generateTotp(): { totp: OTPAuth.TOTP; url: string } {
|
||||||
const totp = new OTPAuth.TOTP({
|
const totp = new OTPAuth.TOTP({
|
||||||
issuer: 'Stalwart',
|
issuer: 'INBUXA',
|
||||||
label: 'account',
|
label: 'account',
|
||||||
algorithm: 'SHA1',
|
algorithm: 'SHA1',
|
||||||
digits: 6,
|
digits: 6,
|
||||||
@@ -57,6 +58,27 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
|
|||||||
const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
|
const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
|
||||||
const [setupCode, setSetupCode] = useState('');
|
const [setupCode, setSetupCode] = useState('');
|
||||||
const [setupError, setSetupError] = useState<string | null>(null);
|
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(() => {
|
useEffect(() => {
|
||||||
if (!setupUrl) return;
|
if (!setupUrl) return;
|
||||||
@@ -97,6 +119,7 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
|
|||||||
setSetupTotp(null);
|
setSetupTotp(null);
|
||||||
setSetupUrl(null);
|
setSetupUrl(null);
|
||||||
setSetupCode('');
|
setSetupCode('');
|
||||||
|
setSecretCopied(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const cancelSetup = () => {
|
const cancelSetup = () => {
|
||||||
@@ -104,6 +127,7 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
|
|||||||
setSetupUrl(null);
|
setSetupUrl(null);
|
||||||
setSetupCode('');
|
setSetupCode('');
|
||||||
setSetupError(null);
|
setSetupError(null);
|
||||||
|
setSecretCopied(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const otpCodeValue = useMemo(
|
const otpCodeValue = useMemo(
|
||||||
@@ -156,6 +180,29 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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">
|
<div className="space-y-1.5">
|
||||||
<Label className="text-sm font-medium">{t('otp.confirmationCodeLabel', 'Confirmation code')}</Label>
|
<Label className="text-sm font-medium">{t('otp.confirmationCodeLabel', 'Confirmation code')}</Label>
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,10 +1,13 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { useSchemaStore } from '@/stores/schemaStore';
|
||||||
import { useCacheStore } from '@/stores/cacheStore';
|
import { useCacheStore } from '@/stores/cacheStore';
|
||||||
import { useAccountStore } from '@/stores/accountStore';
|
import { useAccountStore } from '@/stores/accountStore';
|
||||||
@@ -12,11 +15,46 @@ import { resolveObject } from '@/lib/schemaResolver';
|
|||||||
import { DynamicList } from '@/components/lists/DynamicList';
|
import { DynamicList } from '@/components/lists/DynamicList';
|
||||||
import { DynamicForm } from '@/components/forms/DynamicForm';
|
import { DynamicForm } from '@/components/forms/DynamicForm';
|
||||||
import { DynamicViewPage } from '@/components/views/DynamicViewPage';
|
import { DynamicViewPage } from '@/components/views/DynamicViewPage';
|
||||||
import { DashboardView } from '@/features/dashboard/components/DashboardView';
|
import { LoadingFallback } from '@/components/common/LoadingFallback';
|
||||||
import { DeliveryTracePage } from '@/features/troubleshoot/DeliveryTracePage';
|
import { LegacyProtocolsBanner } from '@/features/hardening/LegacyProtocolsBanner';
|
||||||
import { LiveTracingPage } from '@/features/tracing/components/LiveTracingPage';
|
import type { Schema } from '@/types/schema';
|
||||||
import { TraceDetailView } from '@/features/tracing/components/TraceDetailView';
|
|
||||||
import { ActionPage } from '@/features/actions/ActionPage';
|
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 {
|
interface MainContentProps {
|
||||||
viewName?: string;
|
viewName?: string;
|
||||||
@@ -32,10 +70,12 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
|
|||||||
invalidateAllObjectLists();
|
invalidateAllObjectLists();
|
||||||
}, [viewName, 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) {
|
if (!viewName) {
|
||||||
return (
|
return <LoadingFallback />;
|
||||||
<div className="flex items-center justify-center p-8 text-muted-foreground">Select a view from the sidebar.</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (viewName.startsWith('Dashboard/')) {
|
if (viewName.startsWith('Dashboard/')) {
|
||||||
@@ -43,6 +83,19 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
|
|||||||
return <DashboardView dashboardId={dashboardId} section={section ?? ''} />;
|
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/')) {
|
if (viewName.startsWith('CustomComponent/')) {
|
||||||
const componentName = viewName.slice('CustomComponent/'.length);
|
const componentName = viewName.slice('CustomComponent/'.length);
|
||||||
if (componentName === 'Dashboard') {
|
if (componentName === 'Dashboard') {
|
||||||
@@ -55,6 +108,10 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
|
|||||||
if (componentName === 'LiveTracing') {
|
if (componentName === 'LiveTracing') {
|
||||||
return <LiveTracingPage />;
|
return <LiveTracingPage />;
|
||||||
}
|
}
|
||||||
|
// INBUXA: Settings › Security › Hardening (legacy-protocols spec).
|
||||||
|
if (componentName === 'LegacyProtocols') {
|
||||||
|
return <LegacyProtocolsPage />;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className="rounded-lg border border-dashed p-12 text-center text-muted-foreground">
|
<div className="rounded-lg border border-dashed p-12 text-center text-muted-foreground">
|
||||||
Unknown component: {componentName}
|
Unknown component: {componentName}
|
||||||
@@ -76,6 +133,15 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (resolved.objectType.type === 'singleton') {
|
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" />;
|
return <DynamicForm viewName={viewName} objectId="singleton" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -84,14 +150,27 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (id) {
|
if (id) {
|
||||||
if (resolved.objectName === 'x:Trace' && id !== 'new') {
|
if (resolved.objectName === 'x:Trace') {
|
||||||
return <TraceDetailView viewName={viewName} objectId={id} />;
|
return <TraceDetailView viewName={viewName} objectId={id} />;
|
||||||
}
|
}
|
||||||
const canUpdate = useAccountStore.getState().hasObjectPermission(resolved.permissionPrefix, 'Update');
|
const canUpdate = useAccountStore.getState().hasObjectPermission(resolved.permissionPrefix, 'Update');
|
||||||
if (!canUpdate) {
|
const page = canUpdate ? (
|
||||||
return <DynamicViewPage viewName={viewName} objectId={id} />;
|
<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} />;
|
return <DynamicList viewName={viewName} />;
|
||||||
|
|||||||
@@ -8,10 +8,10 @@ import { Navigate, useLocation } from 'react-router-dom';
|
|||||||
import { useAuthStore } from '@/stores/authStore';
|
import { useAuthStore } from '@/stores/authStore';
|
||||||
|
|
||||||
export function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
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 bypassToken = import.meta.env.VITE_ACCESS_TOKEN;
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
if (!accessToken && !bypassToken) {
|
if (!authenticated && !bypassToken) {
|
||||||
const originalPath = location.pathname + location.search;
|
const originalPath = location.pathname + location.search;
|
||||||
return <Navigate to="/login" replace state={{ from: originalPath }} />;
|
return <Navigate to="/login" replace state={{ from: originalPath }} />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,100 +1,64 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { useLocation, useNavigate } from 'react-router-dom';
|
||||||
import * as LucideIcons from 'lucide-react';
|
import * as LucideIcons from 'lucide-react';
|
||||||
const { ChevronDown, Lock } = LucideIcons;
|
const { ChevronDown, Lock, PanelLeftClose, PanelLeftOpen } = LucideIcons;
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
|
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 { 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 { useUIStore } from '@/stores/uiStore';
|
||||||
import { useAccountStore } from '@/stores/accountStore';
|
import { useAccountStore } from '@/stores/accountStore';
|
||||||
import { useSchemaStore } from '@/stores/schemaStore';
|
import { useSchemaStore } from '@/stores/schemaStore';
|
||||||
|
import { visibleLayouts } from '@/lib/layout';
|
||||||
import {
|
import {
|
||||||
visibleLayouts,
|
checkIsEnterprise,
|
||||||
findFirstVisibleLinkInLayout,
|
checkLinkVisible,
|
||||||
findFirstAccessibleLinkInLayout,
|
pathMatchesView,
|
||||||
isLinkEnterprise,
|
resolveViewPath,
|
||||||
isLinkVisible,
|
subtreeContainsActive,
|
||||||
} from '@/lib/layout';
|
subtreeHasVisibleLink,
|
||||||
|
visibleLinks,
|
||||||
|
} from '@/lib/navTree';
|
||||||
import type { Layout, LayoutItem, LayoutSubItem } from '@/types/schema';
|
import type { Layout, LayoutItem, LayoutSubItem } from '@/types/schema';
|
||||||
|
|
||||||
function LucideIcon({ name, className }: { name: string; className?: string }) {
|
interface AutoOpenCollapsibleProps {
|
||||||
const formatted = name
|
containsActive: boolean;
|
||||||
.split('-')
|
children: React.ReactNode;
|
||||||
.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} />;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function resolveViewPath(sectionName: string, viewName: string): string {
|
function AutoOpenCollapsible({ containsActive, children }: AutoOpenCollapsibleProps) {
|
||||||
return `/${sectionName}/${viewName}`;
|
const [open, setOpen] = useState(containsActive);
|
||||||
}
|
const [prevContainsActive, setPrevContainsActive] = useState(containsActive);
|
||||||
|
if (containsActive !== prevContainsActive) {
|
||||||
function pathMatchesView(currentPath: string, sectionName: string, viewName: string): boolean {
|
setPrevContainsActive(containsActive);
|
||||||
const base = `/${sectionName}/${viewName}`;
|
if (containsActive) setOpen(true);
|
||||||
if (currentPath === base || currentPath.startsWith(`${base}/`)) return true;
|
|
||||||
if (viewName === 'CustomComponent/Dashboard') {
|
|
||||||
const dashBase = `/${sectionName}/Dashboard/`;
|
|
||||||
return currentPath.startsWith(dashBase);
|
|
||||||
}
|
}
|
||||||
return false;
|
return (
|
||||||
}
|
<Collapsible open={open} onOpenChange={setOpen}>
|
||||||
|
{children}
|
||||||
function subtreeContainsActive(items: LayoutSubItem[], currentPath: string, sectionName: string): boolean {
|
</Collapsible>
|
||||||
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),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkIsEnterprise(viewName: string): boolean {
|
type ActiveItemRef = (el: HTMLButtonElement | null) => void;
|
||||||
const schema = useSchemaStore.getState().schema;
|
|
||||||
if (!schema) return false;
|
|
||||||
const edition = useAccountStore.getState().edition;
|
|
||||||
return isLinkEnterprise(schema, viewName, edition);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SidebarSubItemProps {
|
interface SidebarSubItemProps {
|
||||||
item: LayoutSubItem;
|
item: LayoutSubItem;
|
||||||
@@ -104,9 +68,19 @@ interface SidebarSubItemProps {
|
|||||||
navigate: ReturnType<typeof useNavigate>;
|
navigate: ReturnType<typeof useNavigate>;
|
||||||
edition: string;
|
edition: string;
|
||||||
onUpsell: () => void;
|
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 (item.type === 'link') {
|
||||||
if (!checkLinkVisible(item.viewName)) return null;
|
if (!checkLinkVisible(item.viewName)) return null;
|
||||||
|
|
||||||
@@ -121,12 +95,12 @@ function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, editi
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
ref={isActive ? activeItemRef : undefined}
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-full justify-start gap-2 font-normal',
|
'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 text-accent-foreground',
|
isActive && 'bg-accent font-medium text-accent-foreground hover:bg-accent hover:text-accent-foreground',
|
||||||
depth > 0 && 'text-sm',
|
|
||||||
)}
|
)}
|
||||||
style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
|
style={depth > 1 ? { paddingLeft: `${(depth - 1) * 12 + 12}px` } : undefined}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (isLocked) {
|
if (isLocked) {
|
||||||
onUpsell();
|
onUpsell();
|
||||||
@@ -146,12 +120,12 @@ function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, editi
|
|||||||
|
|
||||||
const containsActive = subtreeContainsActive(item.items, currentPath, sectionName);
|
const containsActive = subtreeContainsActive(item.items, currentPath, sectionName);
|
||||||
return (
|
return (
|
||||||
<Collapsible defaultOpen={containsActive}>
|
<AutoOpenCollapsible containsActive={containsActive}>
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="w-full justify-start gap-2 font-normal text-sm"
|
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={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
|
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]" />
|
<ChevronDown className="h-3 w-3 shrink-0 transition-transform duration-200 [[data-state=closed]>&]:rotate-[-90deg]" />
|
||||||
<span className="truncate">{item.name}</span>
|
<span className="truncate">{item.name}</span>
|
||||||
@@ -168,10 +142,11 @@ function SidebarSubItem({ item, depth, sectionName, currentPath, navigate, editi
|
|||||||
navigate={navigate}
|
navigate={navigate}
|
||||||
edition={edition}
|
edition={edition}
|
||||||
onUpsell={onUpsell}
|
onUpsell={onUpsell}
|
||||||
|
activeItemRef={activeItemRef}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</AutoOpenCollapsible>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -185,9 +160,18 @@ interface SidebarTopItemProps {
|
|||||||
navigate: ReturnType<typeof useNavigate>;
|
navigate: ReturnType<typeof useNavigate>;
|
||||||
edition: string;
|
edition: string;
|
||||||
onUpsell: () => void;
|
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) {
|
if ('link' in item) {
|
||||||
const { name, icon, viewName } = item.link;
|
const { name, icon, viewName } = item.link;
|
||||||
|
|
||||||
@@ -204,7 +188,11 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
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={() => {
|
onClick={() => {
|
||||||
if (isLocked) {
|
if (isLocked) {
|
||||||
onUpsell();
|
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>
|
<span className="truncate">{name}</span>
|
||||||
{isLocked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
|
{isLocked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -227,15 +215,21 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
|
|||||||
const containsActive = subtreeContainsActive(items, currentPath, sectionName);
|
const containsActive = subtreeContainsActive(items, currentPath, sectionName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Collapsible defaultOpen={containsActive}>
|
<AutoOpenCollapsible containsActive={containsActive}>
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<Button variant="ghost" className="w-full justify-start gap-2 font-normal">
|
<Button
|
||||||
<LucideIcon name={icon} className="h-4 w-4 shrink-0" />
|
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>
|
<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>
|
</Button>
|
||||||
</CollapsibleTrigger>
|
</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) => (
|
{items.map((sub) => (
|
||||||
<SidebarSubItem
|
<SidebarSubItem
|
||||||
key={sub.type === 'link' ? sub.viewName : sub.name}
|
key={sub.type === 'link' ? sub.viewName : sub.name}
|
||||||
@@ -246,109 +240,227 @@ function SidebarTopItem({ item, sectionName, currentPath, navigate, edition, onU
|
|||||||
navigate={navigate}
|
navigate={navigate}
|
||||||
edition={edition}
|
edition={edition}
|
||||||
onUpsell={onUpsell}
|
onUpsell={onUpsell}
|
||||||
|
activeItemRef={activeItemRef}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</AutoOpenCollapsible>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
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 navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const activeSection = useUIStore((s) => s.activeSection);
|
const activeSection = useUIStore((s) => s.activeSection);
|
||||||
const setActiveSection = useUIStore((s) => s.setActiveSection);
|
|
||||||
const sidebarOpen = useUIStore((s) => s.sidebarOpen);
|
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 schema = useSchemaStore((s) => s.schema);
|
||||||
const edition = useAccountStore((s) => s.edition);
|
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 hasPermission = useAccountStore((s) => s.hasPermission);
|
||||||
const [upsellOpen, setUpsellOpen] = useState(false);
|
const [upsellOpen, setUpsellOpen] = useState(false);
|
||||||
|
const activeItem = useRef<HTMLButtonElement | null>(null);
|
||||||
|
const activeItemRef = useCallback<ActiveItemRef>((el) => {
|
||||||
|
activeItem.current = el;
|
||||||
|
}, []);
|
||||||
|
|
||||||
const layouts = useMemo(
|
const layouts = useMemo(() => {
|
||||||
() =>
|
if (!schema) return [];
|
||||||
schema ? visibleLayouts(schema, edition, (prefix) => hasObjectPermission(prefix, 'Get'), hasPermission) : [],
|
const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
|
||||||
[schema, edition, hasObjectPermission, hasPermission],
|
return visibleLayouts(schema, edition, canGet, hasPermission);
|
||||||
);
|
}, [schema, edition, permissions, hasPermission]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!schema) return;
|
if (typeof window === 'undefined') return;
|
||||||
if (layouts.length === 0) return;
|
if (window.matchMedia('(max-width: 767px)').matches) {
|
||||||
if (!layouts.find((l) => l.name === activeSection)) {
|
setSidebarOpen(false);
|
||||||
setActiveSection(layouts[0].name);
|
|
||||||
}
|
}
|
||||||
}, [schema, layouts, activeSection, setActiveSection]);
|
}, [location.pathname, setSidebarOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
activeItem.current?.scrollIntoView({ block: 'nearest' });
|
||||||
|
}, [location.pathname, activeSection]);
|
||||||
|
|
||||||
if (!sidebarOpen || !schema) return null;
|
if (!sidebarOpen || !schema) return null;
|
||||||
|
|
||||||
const layout: Layout | undefined = layouts.find((l) => l.name === activeSection);
|
const layout: Layout | undefined = layouts.find((l) => l.name === activeSection);
|
||||||
if (!layout) return null;
|
if (!layout) return null;
|
||||||
|
|
||||||
const handleSectionClick = (target: Layout) => {
|
// Folding to a rail is for wide screens; a phone keeps the slide-over, and so
|
||||||
setActiveSection(target.name);
|
// does the modern shell, where the rail would sit under the section bar.
|
||||||
const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
|
const collapsed =
|
||||||
const first =
|
!mobileOnly && sidebarCollapsed && typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches;
|
||||||
findFirstAccessibleLinkInLayout(schema, target, edition, canGet, hasPermission) ??
|
|
||||||
findFirstVisibleLinkInLayout(schema, target, edition, canGet, hasPermission);
|
if (collapsed) {
|
||||||
if (first) navigate(`/${target.name}/${first}`);
|
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 (
|
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">
|
<div
|
||||||
<nav className="flex flex-col gap-0.5 px-2">
|
aria-hidden="true"
|
||||||
{layout.items.map((item) => (
|
className="fixed inset-0 top-14 z-20 bg-black/40 md:hidden"
|
||||||
<SidebarTopItem
|
onClick={() => setSidebarOpen(false)}
|
||||||
key={'link' in item ? item.link.viewName : item.container.name}
|
/>
|
||||||
item={item}
|
<aside
|
||||||
sectionName={layout.name}
|
className={cn(
|
||||||
currentPath={location.pathname}
|
'fixed top-14 left-0 bottom-0 z-30 flex w-64 flex-col border-r bg-background',
|
||||||
navigate={navigate}
|
mobileOnly && 'md:hidden',
|
||||||
edition={edition}
|
)}
|
||||||
onUpsell={() => setUpsellOpen(true)}
|
>
|
||||||
/>
|
<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">
|
||||||
</nav>
|
{layout.name}
|
||||||
</ScrollArea>
|
</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 && (
|
<EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
|
||||||
<TooltipProvider>
|
</aside>
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,33 +1,49 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { Link, useNavigate } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import * as LucideIcons from 'lucide-react';
|
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 { Button } from '@/components/ui/button';
|
||||||
import { GlobalSearch } from '@/components/common/GlobalSearch';
|
import { CommandPalette } from '@/components/common/CommandPalette';
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuGroup,
|
DropdownMenuGroup,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuLabel,
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '@/components/ui/dropdown-menu';
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import { isPaletteId, PALETTES } from '@/lib/palettes';
|
||||||
import Logo from '@/components/common/Logo';
|
import Logo from '@/components/common/Logo';
|
||||||
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
|
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
|
||||||
import { findFirstAccessibleLinkInLayout, findFirstVisibleLinkInLayout, visibleLayouts } from '@/lib/layout';
|
import { SOURCE_URL } from '@/lib/sourceDownload';
|
||||||
import { useUIStore } from '@/stores/uiStore';
|
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 { 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 { useAccountStore } from '@/stores/accountStore';
|
||||||
import { useSchemaStore } from '@/stores/schemaStore';
|
import { useSchemaStore } from '@/stores/schemaStore';
|
||||||
|
|
||||||
|
const IS_MAC = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
|
||||||
|
|
||||||
function getIcon(name: string): LucideIcons.LucideIcon {
|
function getIcon(name: string): LucideIcons.LucideIcon {
|
||||||
const formatted = name
|
const formatted = name
|
||||||
.split('-')
|
.split('-')
|
||||||
@@ -41,8 +57,13 @@ export function TopBar() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const theme = useUIStore((s) => s.theme);
|
const theme = useUIStore((s) => s.theme);
|
||||||
const toggleTheme = useUIStore((s) => s.toggleTheme);
|
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 toggleSidebar = useUIStore((s) => s.toggleSidebar);
|
||||||
const setActiveSection = useUIStore((s) => s.setActiveSection);
|
const setActiveSection = useUIStore((s) => s.setActiveSection);
|
||||||
|
const activeSection = useUIStore((s) => s.activeSection);
|
||||||
const accounts = useAuthStore((s) => s.accounts);
|
const accounts = useAuthStore((s) => s.accounts);
|
||||||
const activeAccountId = useAuthStore((s) => s.activeAccountId);
|
const activeAccountId = useAuthStore((s) => s.activeAccountId);
|
||||||
const switchAccount = useAuthStore((s) => s.switchAccount);
|
const switchAccount = useAuthStore((s) => s.switchAccount);
|
||||||
@@ -52,6 +73,18 @@ export function TopBar() {
|
|||||||
const hasPermission = useAccountStore((s) => s.hasPermission);
|
const hasPermission = useAccountStore((s) => s.hasPermission);
|
||||||
const schema = useSchemaStore((s) => s.schema);
|
const schema = useSchemaStore((s) => s.schema);
|
||||||
const [upsellOpen, setUpsellOpen] = useState(false);
|
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
|
const navigableLayouts = schema
|
||||||
? visibleLayouts(schema, edition, (prefix) => hasObjectPermission(prefix, 'Get'), hasPermission)
|
? visibleLayouts(schema, edition, (prefix) => hasObjectPermission(prefix, 'Get'), hasPermission)
|
||||||
@@ -63,15 +96,89 @@ export function TopBar() {
|
|||||||
<Menu className="h-4 w-4" />
|
<Menu className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Link to="/" className="flex shrink-0 items-center">
|
<TooltipProvider>
|
||||||
<Logo />
|
<Tooltip>
|
||||||
</Link>
|
<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)} />}
|
{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')}>
|
<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" />}
|
{theme === 'light' ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -95,9 +202,7 @@ export function TopBar() {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveSection(layout.name);
|
setActiveSection(layout.name);
|
||||||
const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
|
const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
|
||||||
const firstLink =
|
const firstLink = sectionLandingLink(schema, layout, edition, canGet, hasPermission);
|
||||||
findFirstAccessibleLinkInLayout(schema, layout, edition, canGet, hasPermission) ??
|
|
||||||
findFirstVisibleLinkInLayout(schema, layout, edition, canGet, hasPermission);
|
|
||||||
if (firstLink) {
|
if (firstLink) {
|
||||||
navigate(`/${layout.name}/${firstLink}`);
|
navigate(`/${layout.name}/${firstLink}`);
|
||||||
}
|
}
|
||||||
@@ -128,20 +233,75 @@ export function TopBar() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{edition !== 'enterprise' && (
|
{/* INBUXA: the shell is the reader's choice, the way the palette is. */}
|
||||||
<>
|
<DropdownMenuSub>
|
||||||
<DropdownMenuItem onClick={() => setUpsellOpen(true)}>
|
<DropdownMenuSubTrigger>
|
||||||
<Sparkles className="mr-2 h-4 w-4" />
|
<LayoutTemplate className="mr-2 h-4 w-4" />
|
||||||
{t('tryEnterprise', 'Try Enterprise')}
|
{t('nav.layoutMenu', 'Layout')}
|
||||||
</DropdownMenuItem>
|
</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 />
|
<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
|
<DropdownMenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
const endSessionEndpoint = useAuthStore.getState().endSessionEndpoint;
|
||||||
logout();
|
logout();
|
||||||
navigate('/login');
|
if (endSessionEndpoint) {
|
||||||
|
window.location.href = buildEndSessionUrl(endSessionEndpoint, getPostLogoutRedirectUri());
|
||||||
|
} else {
|
||||||
|
navigate('/login');
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<LogOut className="mr-2 h-4 w-4" />
|
<LogOut className="mr-2 h-4 w-4" />
|
||||||
|
|||||||
@@ -1,9 +1,17 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
@@ -17,6 +25,7 @@ import {
|
|||||||
ArrowUpDown,
|
ArrowUpDown,
|
||||||
Filter,
|
Filter,
|
||||||
Loader2,
|
Loader2,
|
||||||
|
Lock,
|
||||||
Search,
|
Search,
|
||||||
RotateCcw,
|
RotateCcw,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
@@ -24,6 +33,7 @@ import {
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
|
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Combobox } from '@/components/ui/combobox';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { formatSize as fmtSize, formatDuration as fmtDuration } from '@/lib/durationFormat';
|
import { formatSize as fmtSize, formatDuration as fmtDuration } from '@/lib/durationFormat';
|
||||||
@@ -46,8 +56,12 @@ import {
|
|||||||
} from '@/components/ui/alert-dialog';
|
} from '@/components/ui/alert-dialog';
|
||||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
|
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
|
||||||
import { ObjectPicker } from '@/components/common/ObjectPicker';
|
import { ObjectPicker } from '@/components/common/ObjectPicker';
|
||||||
|
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
|
||||||
import { toast } from '@/hooks/use-toast';
|
import { toast } from '@/hooks/use-toast';
|
||||||
import { friendlySetError } from '@/lib/jmapErrors';
|
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 { useSchemaStore } from '@/stores/schemaStore';
|
||||||
import { useAuthStore } from '@/stores/authStore';
|
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 { JmapSetResponse, JmapSetError } from '@/types/jmap';
|
||||||
import type { ResolvedSchema } from '@/lib/schemaResolver';
|
import type { ResolvedSchema } from '@/lib/schemaResolver';
|
||||||
|
|
||||||
|
const ENUM_FILTER_COMBOBOX_THRESHOLD = 15;
|
||||||
|
|
||||||
const PAGE_SIZE = 25;
|
const PAGE_SIZE = 25;
|
||||||
const MAX_REPORTED_ERRORS = 3;
|
const MAX_REPORTED_ERRORS = 3;
|
||||||
|
|
||||||
@@ -257,7 +273,11 @@ function renderCellValue(
|
|||||||
case 'objectId': {
|
case 'objectId': {
|
||||||
const id = String(value);
|
const id = String(value);
|
||||||
const display = getDisplayName(ft.objectName, id);
|
const display = getDisplayName(ft.objectName, id);
|
||||||
return display ?? id;
|
return (
|
||||||
|
<ObjectHoverCard objectName={ft.objectName} id={id}>
|
||||||
|
{display ?? id}
|
||||||
|
</ObjectHoverCard>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'set': {
|
case 'set': {
|
||||||
@@ -280,9 +300,11 @@ function renderCellValue(
|
|||||||
|
|
||||||
case 'object': {
|
case 'object': {
|
||||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||||
const obj = value as Record<string, unknown>;
|
const typeName = (value as Record<string, unknown>)['@type'];
|
||||||
if ('@type' in obj && typeof obj['@type'] === 'string') {
|
if (typeof typeName === 'string') {
|
||||||
return obj['@type'];
|
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>;
|
return <span className="text-muted-foreground">-</span>;
|
||||||
@@ -301,6 +323,24 @@ interface SortState {
|
|||||||
ascending: boolean;
|
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 {
|
interface ConfirmAction {
|
||||||
label: string;
|
label: string;
|
||||||
onConfirm: () => void;
|
onConfirm: () => void;
|
||||||
@@ -318,6 +358,8 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
const schema = useSchemaStore((s) => s.schema);
|
const schema = useSchemaStore((s) => s.schema);
|
||||||
const viewToSection = useSchemaStore((s) => s.viewToSection);
|
const viewToSection = useSchemaStore((s) => s.viewToSection);
|
||||||
const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
|
const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
|
||||||
|
const edition = useAccountStore((s) => s.edition);
|
||||||
|
const [upsellOpen, setUpsellOpen] = useState(false);
|
||||||
|
|
||||||
const resolved = useMemo(() => {
|
const resolved = useMemo(() => {
|
||||||
if (!schema) return null;
|
if (!schema) return null;
|
||||||
@@ -346,15 +388,15 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||||
const [selectAllMode, setSelectAllMode] = useState(false);
|
const [selectAllMode, setSelectAllMode] = useState(false);
|
||||||
|
|
||||||
const [filtersOpen, setFiltersOpen] = useState(false);
|
const [filtersOpen, setFiltersOpen] = useState(() => Object.keys(readUrlFilters()).length > 0);
|
||||||
const [filterValues, setFilterValues] = useState<Record<string, string>>({});
|
const [filterValues, setFilterValues] = useState<Record<string, string>>(readUrlFilters);
|
||||||
const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>({});
|
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);
|
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useResetOnChange(viewName, () => {
|
||||||
setItems([]);
|
setItems([]);
|
||||||
setTotal(null);
|
setTotal(null);
|
||||||
setAnchorStack([]);
|
setAnchorStack([]);
|
||||||
@@ -363,44 +405,22 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
setSelectAllMode(false);
|
setSelectAllMode(false);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
const initialFilters = readUrlFilters();
|
||||||
const initialFilters: Record<string, string> = {};
|
|
||||||
params.forEach((value, key) => {
|
|
||||||
if (key.startsWith('f.')) {
|
|
||||||
initialFilters[key.slice(2)] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setFilterValues(initialFilters);
|
setFilterValues(initialFilters);
|
||||||
setAppliedFilters(initialFilters);
|
setAppliedFilters(initialFilters);
|
||||||
setFiltersOpen(Object.keys(initialFilters).length > 0);
|
setFiltersOpen(Object.keys(initialFilters).length > 0);
|
||||||
|
setSort(readUrlSort());
|
||||||
|
});
|
||||||
|
|
||||||
const sortParam = params.get('sort');
|
const objectName = resolved?.obj.objectName;
|
||||||
const sortDir = params.get('sortDir');
|
|
||||||
setSort(sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null);
|
|
||||||
}, [viewName]);
|
|
||||||
|
|
||||||
const buildFilter = useCallback((): Record<string, unknown> => {
|
const buildFilter = useCallback((): Record<string, unknown> => {
|
||||||
const filter: Record<string, unknown> = {};
|
return buildJmapFilter({
|
||||||
const list = resolved?.list;
|
appliedFilters,
|
||||||
if (list?.filtersStatic) {
|
filters: resolved?.list?.filters,
|
||||||
Object.assign(filter, list.filtersStatic);
|
filtersStatic: resolved?.list?.filtersStatic,
|
||||||
}
|
isXPrefixed: objectName?.startsWith('x:') ?? false,
|
||||||
const opSuffix: Record<string, string> = {
|
});
|
||||||
eq: '',
|
}, [appliedFilters, resolved?.list, objectName]);
|
||||||
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]);
|
|
||||||
|
|
||||||
const buildSort = useCallback((): Record<string, unknown>[] | undefined => {
|
const buildSort = useCallback((): Record<string, unknown>[] | undefined => {
|
||||||
if (!sort) return undefined;
|
if (!sort) return undefined;
|
||||||
@@ -472,6 +492,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!resolved?.list) return;
|
if (!resolved?.list) return;
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
setAnchorStack([]);
|
setAnchorStack([]);
|
||||||
setCurrentAnchor(null);
|
setCurrentAnchor(null);
|
||||||
fetchData(null);
|
fetchData(null);
|
||||||
@@ -515,7 +536,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
for (const obj of list) {
|
for (const obj of list) {
|
||||||
const id = obj.id as string;
|
const id = obj.id as string;
|
||||||
if (!id) continue;
|
if (!id) continue;
|
||||||
entries[id] = (obj[displayProp] as string) ?? id;
|
entries[id] = coerceLabel(obj[displayProp], id);
|
||||||
}
|
}
|
||||||
if (Object.keys(entries).length > 0) {
|
if (Object.keys(entries).length > 0) {
|
||||||
setDisplayNames(refType, entries);
|
setDisplayNames(refType, entries);
|
||||||
@@ -865,6 +886,20 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
|
|
||||||
case 'enum': {
|
case 'enum': {
|
||||||
const enumVariants = schema!.enums[filterDef.enumName] ?? [];
|
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(
|
return wrapper(
|
||||||
<Select value={value || '__all__'} onValueChange={(v) => handleFilterSelectChange(filterDef.field, v)}>
|
<Select value={value || '__all__'} onValueChange={(v) => handleFilterSelectChange(filterDef.field, v)}>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
@@ -1019,17 +1054,20 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
function renderItemActions(item: Record<string, unknown>): React.ReactNode {
|
function renderItemActions(item: Record<string, unknown>): React.ReactNode {
|
||||||
if (!hasItemActions || !list.itemActions) return null;
|
if (!hasItemActions || !list.itemActions) return null;
|
||||||
|
|
||||||
const filteredActions = list.itemActions.filter((action) => {
|
const filteredActions = list.itemActions.flatMap((action): { action: ItemAction; locked: boolean }[] => {
|
||||||
if (action.type === 'separator') return true;
|
if (action.type === 'separator') return [{ action, locked: false }];
|
||||||
if (action.type === 'delete') return canDelete;
|
if (action.type === 'delete') return canDelete ? [{ action, locked: false }] : [];
|
||||||
if (action.type === 'setProperty') return canUpdate;
|
if (action.type === 'setProperty') return canUpdate ? [{ action, locked: false }] : [];
|
||||||
if (action.type === 'view' || action.type === 'query') {
|
if (action.type === 'view' || action.type === 'query') {
|
||||||
const targetObj = resolveObject(schema!, action.objectName);
|
const targetObj = resolveObject(schema!, action.objectName);
|
||||||
if (targetObj && !hasObjectPermission(targetObj.permissionPrefix, 'Get')) {
|
if (!targetObj) return [];
|
||||||
return false;
|
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;
|
if (filteredActions.length === 0) return null;
|
||||||
@@ -1042,7 +1080,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
{filteredActions.map((action, idx) => {
|
{filteredActions.map(({ action, locked }, idx) => {
|
||||||
if (action.type === 'separator') {
|
if (action.type === 'separator') {
|
||||||
return <DropdownMenuSeparator key={`sep-${idx}`} />;
|
return <DropdownMenuSeparator key={`sep-${idx}`} />;
|
||||||
}
|
}
|
||||||
@@ -1056,7 +1094,9 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
className={isDestructive ? 'text-destructive' : undefined}
|
className={isDestructive ? 'text-destructive' : undefined}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (needsConfirmation) {
|
if (locked) {
|
||||||
|
setUpsellOpen(true);
|
||||||
|
} else if (needsConfirmation) {
|
||||||
setConfirmAction({
|
setConfirmAction({
|
||||||
label: action.label,
|
label: action.label,
|
||||||
onConfirm: () => executeItemAction(action, item),
|
onConfirm: () => executeItemAction(action, item),
|
||||||
@@ -1067,6 +1107,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{action.label}
|
{action.label}
|
||||||
|
{locked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -1076,13 +1117,11 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative space-y-4">
|
<div className="relative space-y-5">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||||
<div>
|
<PageHeader icon={iconForView(schema, viewName)} title={list.title} subtitle={list.subtitle} />
|
||||||
<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="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
<HelpPanel viewName={viewName} title={list.title} />
|
||||||
{hasMassActions && selectedIds.size > 0 && (
|
{hasMassActions && selectedIds.size > 0 && (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
@@ -1204,11 +1243,11 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="rounded-lg border bg-background shadow-sm">
|
<div className="rounded-xl border bg-card shadow-soft">
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto rounded-[calc(var(--radius-xl)-1px)]">
|
||||||
<table className="w-full text-sm">
|
<table className="w-full text-sm">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="border-b bg-muted">
|
<tr className="border-b bg-muted/60 text-xs uppercase tracking-wide text-muted-foreground">
|
||||||
{hasMassActions && (
|
{hasMassActions && (
|
||||||
<th className="w-10 px-3 py-3">
|
<th className="w-10 px-3 py-3">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
@@ -1247,9 +1286,12 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
colSpan={list.columns.length + (hasMassActions ? 1 : 0) + (hasItemActions ? 1 : 0)}
|
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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : (
|
) : (
|
||||||
@@ -1270,18 +1312,27 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
)}
|
)}
|
||||||
{list.columns.map((col) => (
|
{list.columns.map((col, colIndex) => {
|
||||||
<td key={col.name} className="px-3 py-2">
|
const cell = renderCellValue(
|
||||||
{renderCellValue(
|
item[col.name],
|
||||||
item[col.name],
|
fields[col.name],
|
||||||
fields[col.name],
|
col.name,
|
||||||
col.name,
|
schema!,
|
||||||
schema!,
|
resolved.obj.objectName,
|
||||||
resolved.obj.objectName,
|
getDisplayName,
|
||||||
getDisplayName,
|
);
|
||||||
)}
|
return (
|
||||||
</td>
|
<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>}
|
{hasItemActions && <td className="px-3 py-2 text-right">{renderItemActions(item)}</td>}
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
@@ -1351,6 +1402,8 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
</AlertDialogFooter>
|
</AlertDialogFooter>
|
||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
|
|
||||||
|
<EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
||||||
|
*
|
||||||
|
* Modified by Coffey Labs in 2026 for INBUXA.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@@ -11,21 +14,21 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
|||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
const buttonVariants = cva(
|
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: {
|
variants: {
|
||||||
variant: {
|
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',
|
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',
|
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-9 px-4 py-2',
|
default: 'h-9 px-4 py-2',
|
||||||
sm: 'h-8 rounded-md px-3 text-xs',
|
sm: 'h-8 rounded-lg px-3 text-xs',
|
||||||
lg: 'h-10 rounded-md px-8',
|
lg: 'h-10 rounded-xl px-8',
|
||||||
icon: 'h-9 w-9',
|
icon: 'h-9 w-9',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,156 @@
|
|||||||
|
/*
|
||||||
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
*
|
||||||
|
* 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 };
|
||||||
@@ -1,7 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
||||||
|
*
|
||||||
|
* Modified by Coffey Labs in 2026 for INBUXA.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@@ -9,7 +12,7 @@ import * as React from 'react';
|
|||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
|
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';
|
Card.displayName = 'Card';
|
||||||
|
|
||||||
@@ -22,7 +25,7 @@ CardHeader.displayName = 'CardHeader';
|
|||||||
|
|
||||||
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
({ className, ...props }, ref) => (
|
({ 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';
|
CardTitle.displayName = 'CardTitle';
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
||||||
|
*
|
||||||
|
* Modified by Coffey Labs in 2026 for INBUXA.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@@ -10,11 +13,11 @@ import type { TooltipPayload } from 'recharts/types/state/tooltipSlice';
|
|||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export const CHART_COLORS = [
|
export const CHART_COLORS = [
|
||||||
'hsl(var(--chart-1))',
|
'var(--chart-1)',
|
||||||
'hsl(var(--chart-2))',
|
'var(--chart-2)',
|
||||||
'hsl(var(--chart-3))',
|
'var(--chart-3)',
|
||||||
'hsl(var(--chart-4))',
|
'var(--chart-4)',
|
||||||
'hsl(var(--chart-5))',
|
'var(--chart-5)',
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
export function getChartColor(index: number): string {
|
export function getChartColor(index: number): string {
|
||||||
|
|||||||
@@ -41,8 +41,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
|
|||||||
|
|
||||||
const CommandInput = React.forwardRef<
|
const CommandInput = React.forwardRef<
|
||||||
React.ComponentRef<typeof CommandPrimitive.Input>,
|
React.ComponentRef<typeof CommandPrimitive.Input>,
|
||||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & { trailing?: React.ReactNode }
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, trailing, ...props }, ref) => (
|
||||||
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
||||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
<CommandPrimitive.Input
|
<CommandPrimitive.Input
|
||||||
@@ -53,6 +53,7 @@ const CommandInput = React.forwardRef<
|
|||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
|
{trailing}
|
||||||
</div>
|
</div>
|
||||||
));
|
));
|
||||||
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
||||||
|
|||||||
@@ -35,8 +35,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
const DialogContent = React.forwardRef<
|
||||||
React.ComponentRef<typeof DialogPrimitive.Content>,
|
React.ComponentRef<typeof DialogPrimitive.Content>,
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
|
||||||
>(({ className, children, ...props }, ref) => (
|
>(({ className, children, showCloseButton = true, ...props }, ref) => (
|
||||||
<DialogPortal>
|
<DialogPortal>
|
||||||
<DialogOverlay />
|
<DialogOverlay />
|
||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
@@ -48,10 +48,12 @@ const DialogContent = React.forwardRef<
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{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">
|
{showCloseButton && (
|
||||||
<X className="h-4 w-4" />
|
<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">
|
||||||
<span className="sr-only">Close</span>
|
<X className="h-4 w-4" />
|
||||||
</DialogPrimitive.Close>
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
</DialogPrimitive.Content>
|
</DialogPrimitive.Content>
|
||||||
</DialogPortal>
|
</DialogPortal>
|
||||||
));
|
));
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
||||||
|
*
|
||||||
|
* Modified by Coffey Labs in 2026 for INBUXA.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@@ -14,7 +17,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
|
|||||||
<input
|
<input
|
||||||
type={type}
|
type={type}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ const ToastViewport = React.forwardRef<HTMLOListElement, React.HTMLAttributes<HT
|
|||||||
<ol
|
<ol
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
@@ -6,15 +6,16 @@
|
|||||||
|
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import ReactMarkdown from 'react-markdown';
|
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 { 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 { Badge } from '@/components/ui/badge';
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||||
import { resolveSchema, resolveVariantForm, resolveForm } from '@/lib/schemaResolver';
|
import { resolveSchema, resolveVariantForm, resolveForm } from '@/lib/schemaResolver';
|
||||||
|
import { useObjectList, useObjectLabel } from '@/lib/objectOptions';
|
||||||
import { formatSize, formatDuration } from '@/lib/durationFormat';
|
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 {
|
export interface DynamicViewProps {
|
||||||
schema: Schema;
|
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>;
|
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') {
|
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>;
|
return <span className="break-all">{str}</span>;
|
||||||
}
|
}
|
||||||
@@ -401,7 +402,7 @@ function MapValue({
|
|||||||
schema,
|
schema,
|
||||||
}: {
|
}: {
|
||||||
value: unknown;
|
value: unknown;
|
||||||
keyClass: { type: string; enumName?: string };
|
keyClass: ScalarType;
|
||||||
valueClass: { type: string; objectName?: string };
|
valueClass: { type: string; objectName?: string };
|
||||||
schema: Schema;
|
schema: Schema;
|
||||||
}) {
|
}) {
|
||||||
@@ -417,12 +418,7 @@ function MapValue({
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{entries.map(([k, v]) => {
|
{entries.map(([k, v]) => {
|
||||||
let keyLabel = k;
|
const keyLabel = <MapKeyLabel keyClass={keyClass} keyValue={k} schema={schema} />;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (valueClass.type === 'object' && valueClass.objectName) {
|
if (valueClass.type === 'object' && valueClass.objectName) {
|
||||||
return (
|
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 }) {
|
function FieldTooltip({ description }: { description: string }) {
|
||||||
return (
|
return (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import { ArrowLeft, Loader2 } from 'lucide-react';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { useSchemaStore } from '@/stores/schemaStore';
|
import { useSchemaStore } from '@/stores/schemaStore';
|
||||||
import { resolveObject, resolveList } from '@/lib/schemaResolver';
|
import { resolveObject, resolveList } from '@/lib/schemaResolver';
|
||||||
|
import { coerceLabel } from '@/lib/objectOptions';
|
||||||
import { jmapGet, getAccountId } from '@/services/jmap/client';
|
import { jmapGet, getAccountId } from '@/services/jmap/client';
|
||||||
import { DynamicView } from './DynamicView';
|
import { DynamicView } from './DynamicView';
|
||||||
|
|
||||||
@@ -89,7 +90,8 @@ export function DynamicViewPage({ viewName, objectId }: DynamicViewPageProps) {
|
|||||||
|
|
||||||
const list = resolveList(schema, viewName, resolved.objectName);
|
const list = resolveList(schema, viewName, resolved.objectName);
|
||||||
const labelProp = list?.labelProperty ?? list?.columns?.[0]?.name;
|
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 singularName = list?.singularName ?? resolved.objectName.replace(/^x:/, '');
|
||||||
const title = displayName
|
const title = displayName
|
||||||
? `${singularName.charAt(0).toUpperCase() + singularName.slice(1)}: ${displayName}`
|
? `${singularName.charAt(0).toUpperCase() + singularName.slice(1)}: ${displayName}`
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -13,6 +13,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|||||||
import { useSchemaStore } from '@/stores/schemaStore';
|
import { useSchemaStore } from '@/stores/schemaStore';
|
||||||
import { useAccountStore } from '@/stores/accountStore';
|
import { useAccountStore } from '@/stores/accountStore';
|
||||||
import { resolveObject, resolveSchema, resolveVariantForm } from '@/lib/schemaResolver';
|
import { resolveObject, resolveSchema, resolveVariantForm } from '@/lib/schemaResolver';
|
||||||
|
import { SECRET_MASK } from '@/lib/jmapUtils';
|
||||||
import { jmapSet, getAccountId } from '@/services/jmap/client';
|
import { jmapSet, getAccountId } from '@/services/jmap/client';
|
||||||
import { FieldWidget } from '@/components/forms/FieldWidget';
|
import { FieldWidget } from '@/components/forms/FieldWidget';
|
||||||
import { DynamicView } from '@/components/views/DynamicView';
|
import { DynamicView } from '@/components/views/DynamicView';
|
||||||
@@ -104,7 +105,7 @@ export function ActionPage({ viewName }: ActionPageProps) {
|
|||||||
if (name in formData) {
|
if (name in formData) {
|
||||||
const isSecret =
|
const isSecret =
|
||||||
def.type.type === 'string' && (def.type.format === 'secret' || def.type.format === 'secretText');
|
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];
|
payload[name] = formData[name];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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';
|
import { useMemo, useRef, useState, useEffect } from 'react';
|
||||||
@@ -51,6 +54,7 @@ function ChartSizedContainer({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
import { Info } from 'lucide-react';
|
import { Info } from 'lucide-react';
|
||||||
|
import { GoLink } from './GoLink';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Tooltip as UiTooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
import { Tooltip as UiTooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import { getChartColor } from '@/components/ui/chart';
|
import { getChartColor } from '@/components/ui/chart';
|
||||||
@@ -242,6 +246,7 @@ export function DashboardChart({ chart, historySamples, historyWindow, period }:
|
|||||||
</UiTooltip>
|
</UiTooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
)}
|
)}
|
||||||
|
<GoLink metrics={chart.series.flatMap((x) => x.metrics)} />
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
|||||||
@@ -1,15 +1,21 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { useEffect, useMemo, useState, useCallback } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { AlertCircle } from 'lucide-react';
|
import { AlertCircle } from 'lucide-react';
|
||||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { useSchemaStore } from '@/stores/schemaStore';
|
import { useSchemaStore } from '@/stores/schemaStore';
|
||||||
import type { Dashboard } from '../types/schema';
|
import type { Dashboard } from '../types/schema';
|
||||||
|
import { LegacyProtocolsBanner } from '@/features/hardening/LegacyProtocolsBanner';
|
||||||
import { useDashboardStore } from '../stores/dashboardStore';
|
import { useDashboardStore } from '../stores/dashboardStore';
|
||||||
import { useLiveMetricsStore } from '../stores/liveMetricsStore';
|
import { useLiveMetricsStore } from '../stores/liveMetricsStore';
|
||||||
import { useHistoryMetricsStore } from '../stores/historyMetricsStore';
|
import { useHistoryMetricsStore } from '../stores/historyMetricsStore';
|
||||||
@@ -17,6 +23,18 @@ import { collectHistoryMetricIds, collectLiveMetricIds, periodKey, periodWindow,
|
|||||||
import { StatCard } from './StatCard';
|
import { StatCard } from './StatCard';
|
||||||
import { DashboardChart } from './DashboardChart';
|
import { DashboardChart } from './DashboardChart';
|
||||||
import { PeriodSelector } from './PeriodSelector';
|
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 {
|
interface DashboardViewProps {
|
||||||
dashboardId: string;
|
dashboardId: string;
|
||||||
@@ -24,6 +42,7 @@ interface DashboardViewProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function DashboardView({ dashboardId, section }: DashboardViewProps) {
|
export function DashboardView({ dashboardId, section }: DashboardViewProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const schema = useSchemaStore((s) => s.schema);
|
const schema = useSchemaStore((s) => s.schema);
|
||||||
const period = useDashboardStore((s) => s.period);
|
const period = useDashboardStore((s) => s.period);
|
||||||
@@ -35,6 +54,7 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
|
|||||||
const unsubscribeLive = useLiveMetricsStore((s) => s.unsubscribe);
|
const unsubscribeLive = useLiveMetricsStore((s) => s.unsubscribe);
|
||||||
const liveStatus = useLiveMetricsStore((s) => s.status);
|
const liveStatus = useLiveMetricsStore((s) => s.status);
|
||||||
const liveError = useLiveMetricsStore((s) => s.error);
|
const liveError = useLiveMetricsStore((s) => s.error);
|
||||||
|
const { facts } = useServerFacts();
|
||||||
|
|
||||||
const dashboards = useMemo<Dashboard[]>(() => schema?.dashboards ?? [], [schema]);
|
const dashboards = useMemo<Dashboard[]>(() => schema?.dashboards ?? [], [schema]);
|
||||||
const dashboard = dashboards.find((d) => d.id === dashboardId);
|
const dashboard = dashboards.find((d) => d.id === dashboardId);
|
||||||
@@ -102,6 +122,9 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<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">
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||||
{dashboards.length > 1 && (
|
{dashboards.length > 1 && (
|
||||||
<Tabs value={dashboardId} onValueChange={(id) => navigate(`/${section}/Dashboard/${id}`)}>
|
<Tabs value={dashboardId} onValueChange={(id) => navigate(`/${section}/Dashboard/${id}`)}>
|
||||||
@@ -114,15 +137,22 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
|
|||||||
</TabsList>
|
</TabsList>
|
||||||
</Tabs>
|
</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} />
|
<PeriodSelector onRefresh={handleRefresh} loading={isLoading} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{liveStatus === 'error' && liveError && (
|
{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">
|
<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" />
|
<AlertCircle className="h-4 w-4 shrink-0 text-highlight" />
|
||||||
{liveError}
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -134,11 +164,25 @@ export function DashboardView({ dashboardId, section }: DashboardViewProps) {
|
|||||||
card={card}
|
card={card}
|
||||||
historySamples={historySamples}
|
historySamples={historySamples}
|
||||||
historyWindow={historyWindow}
|
historyWindow={historyWindow}
|
||||||
|
fallback={
|
||||||
|
card.metrics.length === 1 && FALLBACKS[card.metrics[0]]
|
||||||
|
? (facts?.[FALLBACKS[card.metrics[0]]] as number | undefined)
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</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 && (
|
{dashboard.charts && dashboard.charts.length > 0 && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{dashboard.charts.map((chart, i) => (
|
{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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,12 +1,18 @@
|
|||||||
/*
|
/*
|
||||||
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
|
||||||
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||||
*
|
*
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
|
* 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 { useMemo } from 'react';
|
||||||
import * as LucideIcons from 'lucide-react';
|
import { ArrowUpRight, Info } from 'lucide-react';
|
||||||
import { 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 { LineChart, Line } from 'recharts';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
@@ -17,42 +23,31 @@ import { cardValue, formatValue, sparklineData, computeDelta } from '../helpers'
|
|||||||
import { useLiveMetricsStore } from '../stores/liveMetricsStore';
|
import { useLiveMetricsStore } from '../stores/liveMetricsStore';
|
||||||
import { getChartColor } from '@/components/ui/chart';
|
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 {
|
interface StatCardProps {
|
||||||
card: CardSchema;
|
card: CardSchema;
|
||||||
historySamples: Metric[];
|
historySamples: Metric[];
|
||||||
historyWindow: { from: Date; to: Date };
|
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 liveSnapshot = useLiveMetricsStore((s) => s.snapshot);
|
||||||
|
const liveStatus = useLiveMetricsStore((s) => s.status);
|
||||||
|
const link = useDashLink(card.metrics);
|
||||||
|
|
||||||
const value = useMemo(() => {
|
const value = useMemo(() => {
|
||||||
|
if (card.source === 'live' && fallback !== undefined && liveStatus !== 'open') return fallback;
|
||||||
if (card.source === 'live') {
|
if (card.source === 'live') {
|
||||||
const liveSamples = card.metrics.map((id) => liveSnapshot.get(id)).filter((m): m is Metric => m !== undefined);
|
const liveSamples = card.metrics.map((id) => liveSnapshot.get(id)).filter((m): m is Metric => m !== undefined);
|
||||||
return cardValue(card, liveSamples);
|
return cardValue(card, liveSamples);
|
||||||
}
|
}
|
||||||
return cardValue(card, historySamples);
|
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;
|
const { from, to } = historyWindow;
|
||||||
|
|
||||||
@@ -69,12 +64,21 @@ export function StatCard({ card, historySamples, historyWindow }: StatCardProps)
|
|||||||
return computeDelta(card, historySamples, from, to);
|
return computeDelta(card, historySamples, from, to);
|
||||||
}, [card, historySamples, from, to]);
|
}, [card, historySamples, from, to]);
|
||||||
|
|
||||||
return (
|
const body = (
|
||||||
<Card>
|
<Card
|
||||||
<CardContent className="p-4">
|
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">
|
<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>
|
<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 && (
|
{card.description && (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
@@ -89,7 +93,7 @@ export function StatCard({ card, historySamples, historyWindow }: StatCardProps)
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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) && (
|
{(delta || sparkline) && (
|
||||||
<div className="mt-1 flex items-center gap-2">
|
<div className="mt-1 flex items-center gap-2">
|
||||||
@@ -119,4 +123,16 @@ export function StatCard({ card, historySamples, historyWindow }: StatCardProps)
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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 mail’s 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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 };
|
||||||
|
}
|
||||||
@@ -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([]);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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', 'I’ll finish later')}
|
||||||
|
aside={
|
||||||
|
<>
|
||||||
|
<WizardNote title={t('dnsCopy.howTitle', 'How to add them')}>
|
||||||
|
<p>
|
||||||
|
{t(
|
||||||
|
'dnsCopy.how1',
|
||||||
|
'In your DNS host’s 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 hasn’t expired from caches yet.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</WizardShell>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 domain’s 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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) };
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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',
|
||||||
|
]);
|
||||||
@@ -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 can’t.',
|
||||||
|
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',
|
||||||
|
);
|
||||||
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -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 });
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||