@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useProfilePreferences.ts

@@ -0,0 +1,198 @@
+import { usePreferredDark } from "@vueuse/core";
+import { computed, onMounted, ref } from "vue";
+import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
+import { useUniqueLocales } from "#dms-core/app/composables/translation/useUniqueLocales";
+import { formatDate } from "#dms-core/app/utils/formatter";
+import { useAccessibilityPreferences } from "../../../../composables/general/useAccessibilityPreferences";
+import { useColorModePreference } from "../../../../composables/general/useColorModePreference";
+import { useInterfaceScale } from "../../../../composables/general/useInterfaceScale";
+import { useIsOwner } from "../../../../composables/page/useIsOwner";
+import { useNotificationCatalog } from "../../notification/useNotificationCatalog";
+import { useNotificationPreferences } from "../../notification/useNotificationPreferences";
+import { useNotifications } from "../../../../composables/notification/useNotifications";
+import { timeZoneLabel } from "../../../components/pages/settings/region/timeZones";
+import { useSettingsNavigation } from "../useSettingsNavigation";
+import {
+  buildAccessSummary,
+  buildAppearanceSummary,
+  buildNotificationsSummary,
+  buildRegionSummary,
+  type ProfileAccess,
+  resolvePreferenceRows,
+  type SummaryTranslate,
+  tallySubjects,
+} from "./preferencesSummary";
+
+export const PROFILE_ACCESS_ENDPOINT = "/settings/user/profile/access";
+// Sample values the skeletons are shaped from.
+const SAMPLE_ACCESS: ProfileAccess = {
+  roles: ["Admin", "Finance"],
+  workspaceOwner: false,
+  platformOwner: false,
+};
+// Who holds every permission is most likely a platform owner.
+const SAMPLE_OWNER_ACCESS: ProfileAccess = {
+  roles: [],
+  workspaceOwner: false,
+  platformOwner: true,
+};
+const SAMPLE_TIME_ZONE = "Europe/Brussels";
+// Noon UTC: the same calendar day in every time zone a server or browser
+// could run in, so both write the same sample date.
+const SAMPLE_DATE = new Date(Date.UTC(2026, 9, 3, 12));
+const SAMPLE_UNREAD = 3;
+const SAMPLE_TALLY = { on: 6, total: 9 };
+const MONDAY = 1;
+
+/**
+ * The profile's "Preferences & access" rows: which ones the user may see,
+ * and each one's sentence, `undefined` while it is not known yet (the row
+ * shows a skeleton then, never a made-up "0 unread").
+ *
+ * Nothing is awaited before render. The roles and the notification
+ * preferences are fetched after mount; the unread count is the header bell's
+ * own; the regional and appearance sentences, which depend on the browser
+ * (time zone, today's date, the system theme), are written after mount so
+ * the server and the hydrating browser render the same skeleton.
+ */
+export function useProfilePreferences() {
+  const { t: translate, locale } = useI18n();
+  const t = translate as SummaryTranslate;
+  const { $authFetch } = useAuthFetch();
+  const { groups } = useSettingsNavigation();
+  const isOwner = useIsOwner();
+  const isMounted = ref(false);
+
+  // The settings navigation's own list decides: a row shows when the page
+  // it leads to is one the nav offers.
+  const rows = computed(() =>
+    resolvePreferenceRows(
+      new Map(
+        groups.value.flatMap((group) =>
+          group.pages.map((page) => [page.fullId, page.to] as const),
+        ),
+      ),
+    ),
+  );
+
+  const access = ref<ProfileAccess>();
+  const accessFailed = ref(false);
+  const accessSummary = computed(() => {
+    if (access.value) return buildAccessSummary(t, access.value);
+    return accessFailed.value
+      ? t("page.settings.profile.preferences.access_unavailable")
+      : undefined;
+  });
+
+  async function loadAccess(): Promise<void> {
+    try {
+      access.value = await $authFetch<ProfileAccess>(PROFILE_ACCESS_ENDPOINT);
+    } catch {
+      accessFailed.value = true;
+    }
+  }
+
+  const { uniqueLocales } = useUniqueLocales();
+  const regional = useUserRegionalPreferences();
+  // Frozen at mount: the row shows formats, not a ticking clock.
+  let today = new Date();
+  // Some languages name themselves in lower case ("français"): it opens
+  // the summary, so it is capitalized.
+  const languageName = computed(() => {
+    const tag = locale.value;
+    const name =
+      uniqueLocales.value.find((entry) => entry.code === tag)?.name ?? tag;
+    return name.charAt(0).toLocaleUpperCase(tag) + name.slice(1);
+  });
+  const regionSummary = computed(() => {
+    if (!isMounted.value) return undefined;
+    return buildRegionSummary(t, {
+      language: languageName.value,
+      timeZone: timeZoneLabel(regional.timeZone.value),
+      date: formatDate(today, locale.value) ?? "",
+      timeFormat: regional.timeFormat.value,
+      weekStart: regional.weekStartsOn.value,
+      locale: locale.value,
+    });
+  });
+
+  const notificationPreferences = useNotificationPreferences();
+  const { subjects } = useNotificationCatalog();
+  const { unreadCount, areCountsLoaded } = useNotifications();
+  const isNotificationsLoading = computed(
+    () => notificationPreferences.isLoading.value || !areCountsLoaded.value,
+  );
+  const notificationsSummary = computed(() => {
+    if (isNotificationsLoading.value) return undefined;
+    const tally = notificationPreferences.loadFailed.value
+      ? undefined
+      : tallySubjects(subjects.value, notificationPreferences.isEnabled);
+    return buildNotificationsSummary(t, unreadCount.value, tally);
+  });
+  const hasUnread = computed(
+    () => !isNotificationsLoading.value && unreadCount.value > 0,
+  );
+
+  const colorMode = useColorModePreference();
+  const scale = useInterfaceScale();
+  const { preferences: accessibility } = useAccessibilityPreferences();
+  const prefersDark = usePreferredDark();
+  // The cookies are read on the server too; only a theme that follows the
+  // system waits for the browser to say which it is.
+  const appearanceSummary = computed(() => {
+    if (colorMode.value === "system" && !isMounted.value) return undefined;
+    return buildAppearanceSummary(t, {
+      theme: colorMode.value,
+      systemDark: prefersDark.value,
+      scale: scale.value,
+      accessibility: accessibility.value,
+      locale: locale.value,
+    });
+  });
+
+  // What the skeletons are drawn from: the same sentences with what the
+  // server already knows, and sample values for the rest. Nothing here
+  // reads the browser, so the server and the hydrating browser agree.
+  const placeholders = computed(() => {
+    const { preferences } = regional;
+    return {
+      access: buildAccessSummary(
+        t,
+        isOwner.value ? SAMPLE_OWNER_ACCESS : SAMPLE_ACCESS,
+      ),
+      region: buildRegionSummary(t, {
+        language: languageName.value,
+        timeZone: timeZoneLabel(preferences.value.timeZone ?? SAMPLE_TIME_ZONE),
+        date: formatDate(SAMPLE_DATE, locale.value) ?? "",
+        timeFormat: preferences.value.timeFormat ?? "h23",
+        weekStart: preferences.value.weekStart ?? MONDAY,
+        locale: locale.value,
+      }),
+      notifications: buildNotificationsSummary(t, SAMPLE_UNREAD, SAMPLE_TALLY),
+      appearance: buildAppearanceSummary(t, {
+        theme: colorMode.value,
+        systemDark: false,
+        scale: scale.value,
+        accessibility: accessibility.value,
+        locale: locale.value,
+      }),
+    };
+  });
+
+  onMounted(() => {
+    today = new Date();
+    isMounted.value = true;
+    void loadAccess();
+    if (rows.value.notifications.visible) void notificationPreferences.load();
+  });
+
+  return {
+    rows,
+    accessSummary,
+    regionSummary,
+    notificationsSummary,
+    hasUnread,
+    appearanceSummary,
+    placeholders,
+  };
+}

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useCodeFieldError.ts

@@ -0,0 +1,63 @@
+import { nextTick, watch, type Ref } from "vue";
+import { focusFirstEmptyCell } from "#dms-ui/app/build/utils/codeCells";
+
+/**
+ * The inline error of a two-factor code entry. A code the API refused empties
+ * the cells and focuses the first one; a code flagged before sending (empty
+ * or partial, see {@link flag}) keeps the digits and focuses the first empty
+ * cell. Typing clears either.
+ *
+ * @param digits The cells' model
+ * @param error The message shown under the cells, set by the parent
+ * @param container Element holding the cells
+ */
+export function useCodeFieldError(
+  digits: Ref<string[]>,
+  error: Ref<string | undefined>,
+  container: Ref<HTMLElement | null>,
+) {
+  let isResetting = false;
+  let keepsDigits = false;
+
+  const focusCell = () => focusFirstEmptyCell(container.value);
+
+  watch(error, async (message) => {
+    if (!message) return;
+    if (keepsDigits) {
+      keepsDigits = false;
+      await nextTick();
+      focusCell();
+      return;
+    }
+    isResetting = true;
+    digits.value = [];
+    await nextTick();
+    isResetting = false;
+    focusCell();
+  });
+
+  watch(
+    digits,
+    () => {
+      if (!isResetting) error.value = undefined;
+    },
+    { deep: true },
+  );
+
+  /**
+   * Shows a client-side error under the cells (nothing or part of the code
+   * typed) without emptying them.
+   *
+   * @param message The text, already translated
+   */
+  function flag(message: string): void {
+    if (error.value === message) {
+      focusCell();
+      return;
+    }
+    keepsDigits = true;
+    error.value = message;
+  }
+
+  return { flag };
+}

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useRevealedBackupCodes.ts

@@ -0,0 +1,53 @@
+import { computed, ref, watch, type Ref } from "vue";
+
+/** A set of backup codes, as issued to one account. */
+interface RevealedBackupCodes {
+  userId: string;
+  codes: string[];
+  /** The set replaced a previous one, which stopped working. */
+  isRegenerated: boolean;
+}
+
+/**
+ * The backup codes shown once, right after they were issued. Held by the
+ * component showing them rather than in shared state, tied to the account
+ * they were issued for, and dropped as soon as their dialog closes or the
+ * session changes: switching accounts in the same tab must not show one
+ * account's codes to another.
+ *
+ * @param userId The signed-in account
+ */
+export function useRevealedBackupCodes(userId: Ref<string | undefined>) {
+  const revealed = ref<RevealedBackupCodes | null>(null);
+  const isOpen = ref(false);
+
+  const current = computed(() =>
+    revealed.value && revealed.value.userId === userId.value
+      ? revealed.value
+      : null,
+  );
+  const codes = computed(() => current.value?.codes ?? []);
+  const isRegenerated = computed(() => current.value?.isRegenerated ?? false);
+
+  function forget(): void {
+    revealed.value = null;
+    isOpen.value = false;
+  }
+
+  /** Keeps a freshly issued set for the signed-in account, until shown and closed. */
+  function reveal(backupCodes: string[], regenerated = false): void {
+    if (!userId.value || !backupCodes.length) return;
+    revealed.value = {
+      userId: userId.value,
+      codes: backupCodes,
+      isRegenerated: regenerated,
+    };
+  }
+
+  watch(userId, forget);
+  watch(isOpen, (open) => {
+    if (!open) revealed.value = null;
+  });
+
+  return { codes, isRegenerated, isOpen, reveal };
+}

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityFormat.ts

@@ -0,0 +1,95 @@
+import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
+
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_MONTH = 30 * MS_PER_DAY;
+const MS_PER_YEAR = 365 * MS_PER_DAY;
+const ERROR_CODE_PREFIX = "error.";
+const SECURITY_ERRORS_PREFIX = "page.settings.security.errors.";
+
+interface RelativeUnit {
+  unit: Intl.RelativeTimeFormatUnit;
+  ms: number;
+}
+
+/** Largest unit first: the first one that fits at least once is used. */
+const RELATIVE_UNITS: RelativeUnit[] = [
+  { unit: "year", ms: MS_PER_YEAR },
+  { unit: "month", ms: MS_PER_MONTH },
+  { unit: "day", ms: MS_PER_DAY },
+  { unit: "hour", ms: MS_PER_HOUR },
+  { unit: "minute", ms: MS_PER_MINUTE },
+];
+
+interface FetchErrorLike {
+  data?: unknown;
+}
+
+type DateInput = string | Date;
+
+/**
+ * Locale-aware dates for the Security and Profile settings, plus the
+ * translation of API error codes into sentences.
+ */
+export function useSecurityFormat() {
+  const { locale, t, te } = useI18n();
+
+  const formatDate = (value: DateInput): string =>
+    regionalDateTimeFormat(locale.value, { dateStyle: "medium" }).format(
+      new Date(value),
+    );
+
+  const formatDateTime = (value: DateInput): string =>
+    regionalDateTimeFormat(locale.value, {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(new Date(value));
+
+  const daysSince = (value: DateInput): number =>
+    Math.max(
+      0,
+      Math.floor((Date.now() - new Date(value).getTime()) / MS_PER_DAY),
+    );
+
+  /** "3 days ago", "in an hour"… or "now" under a minute. */
+  const formatRelative = (value: DateInput): string => {
+    const elapsed = new Date(value).getTime() - Date.now();
+    const formatter = new Intl.RelativeTimeFormat(locale.value, {
+      numeric: "auto",
+    });
+    const fit = RELATIVE_UNITS.find(({ ms }) => Math.abs(elapsed) >= ms);
+    if (!fit) return formatter.format(0, "second");
+    return formatter.format(Math.round(elapsed / fit.ms), fit.unit);
+  };
+
+  /**
+   * @param error What `$authFetch` threw
+   * @param fallbackKey Message used when the error carries no known code
+   */
+  const errorMessage = (error: unknown, fallbackKey: string): string => {
+    const code = (error as FetchErrorLike | undefined)?.data;
+    if (typeof code !== "string" || !code.startsWith(ERROR_CODE_PREFIX)) {
+      return t(fallbackKey);
+    }
+    const ownKey = `${SECURITY_ERRORS_PREFIX}${code.slice(ERROR_CODE_PREFIX.length)}`;
+    if (te(ownKey)) return t(ownKey);
+    return te(code) ? t(code) : t(fallbackKey);
+  };
+
+  /** @returns The error code (`error.xxx`) the API answered with, if any */
+  const errorCode = (error: unknown): string | undefined => {
+    const code = (error as FetchErrorLike | undefined)?.data;
+    return typeof code === "string" ? code : undefined;
+  };
+
+  return {
+    formatDate,
+    formatDateTime,
+    formatRelative,
+    daysSince,
+    errorMessage,
+    errorCode,
+  };
+}

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityOverview.ts

@@ -0,0 +1,85 @@
+import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+
+/** Base URL of the Security page API. */
+export const SECURITY_ENDPOINT = "/settings/user/security";
+/** Route of the Security page. */
+export const SECURITY_PAGE_PATH = "/settings/user/security";
+const SECURITY_PAGE_ID = "settings.user.security";
+
+/** Two-factor state as the API reports it. */
+export interface TwoFactorStatus {
+  methods: string[];
+  hasBackupCodes: boolean;
+  backupCodesLeft: number;
+  backupCodesTotal: number;
+  backupCodesGeneratedAt: string | null;
+  backupCodesSavedAt: string | null;
+}
+
+/** Summary behind the Security status strip and the profile pointer card. */
+export interface SecurityOverview {
+  email: string;
+  /** The address a sign-in email change waits on, until its code is entered. */
+  pendingEmail: string | null;
+  isValidated: boolean;
+  hasPassword: boolean;
+  passwordChangedAt: string | null;
+  accountCreatedAt: string;
+  twoFactor: TwoFactorStatus;
+  activeSessions: number;
+  /** What needs the user's attention, most important first. */
+  attention: SecurityAttention[];
+}
+
+/** What the API returns to enrol an authenticator app. */
+export interface TotpSetup {
+  secret: string;
+  /** Base32 key to type into an app that cannot scan. */
+  manualKey: string;
+  otpAuthUrl: string;
+  /** PNG data URL rendered by the backend. */
+  qrCode: string;
+}
+
+/** Something on the Security page that needs the user's attention. */
+export type SecurityAttention =
+  | "two_factor_off"
+  | "backup_codes_unsaved"
+  | "backup_codes_low";
+
+/**
+ * Shared Security summary: the status strip, every Security block and the
+ * profile pointer card read the same state, and any change refreshes it for
+ * all of them. It also keeps the navigation badge of the Security page, the
+ * count of what needs attention, in sync after a change.
+ */
+export function useSecurityOverview() {
+  const overview = useDmsState<SecurityOverview | null>(
+    "dms-security-overview",
+    () => null,
+  );
+  const isUnavailable = useDmsState<boolean>(
+    "dms-security-overview-unavailable",
+    () => false,
+  );
+  const { $authFetch } = useAuthFetch();
+  const { setNavBadge } = useNavBadges();
+
+  const attention = computed<SecurityAttention[]>(
+    () => overview.value?.attention ?? [],
+  );
+
+  async function refresh(): Promise<void> {
+    try {
+      overview.value = await $authFetch<SecurityOverview>(SECURITY_ENDPOINT);
+      isUnavailable.value = false;
+    } catch {
+      isUnavailable.value = true;
+      return;
+    }
+    const count = attention.value.length;
+    setNavBadge(SECURITY_PAGE_ID, count > 0 ? String(count) : "");
+  }
+
+  return { overview, attention, isUnavailable, refresh };
+}

package/frontend-vue/layers/dms-layout/app/build/composables/settings/useSettingsNavigation.ts

@@ -0,0 +1,101 @@
+import type { MenuItemStatus } from "#dms-core/app/types/menu";
+import type { SiteLayoutTree } from "../../../types/page";
+import {
+  listCategoryPages,
+  listPagesAmong,
+  orderedChildren,
+} from "../../utils/categoryPages";
+
+export const SETTINGS_ROOT_ID = "settings";
+const DEFAULT_SETTINGS_ICON = "i-ph-gear-six";
+
+export interface SettingsNavPage {
+  fullId: string;
+  label: string;
+  description: string;
+  icon: string;
+  to: string;
+  /** Badge the server counted or the page declared for its entry. */
+  badge?: string;
+  /** Dot the page declared for its entry. */
+  status?: MenuItemStatus;
+}
+
+export interface SettingsNavGroup {
+  id: string;
+  /** The category's display name, an i18n key (`$…`) or a literal. */
+  label: string;
+  description?: string;
+  pages: SettingsNavPage[];
+}
+
+const toNavPage = (node: SiteLayoutTree): SettingsNavPage => ({
+  fullId: node.fullId,
+  label: node.displayName,
+  description: node.description || "",
+  icon: node.icon || DEFAULT_SETTINGS_ICON,
+  to: node.fullSlug,
+  badge: node.badge,
+  status: node.status,
+});
+
+function groupOf(
+  category: SiteLayoutTree,
+  pages: SiteLayoutTree[],
+): SettingsNavGroup {
+  return {
+    id: category.fullId,
+    label: category.displayName,
+    description: category.description,
+    pages: pages.map(toNavPage),
+  };
+}
+
+/**
+ * The settings navigation's groups: one per category declared under the
+ * settings root, in menu order, then the pages declared on the root itself.
+ * Each lists the pages the viewer can open, in menu order.
+ */
+export function buildSettingsGroups(root: SiteLayoutTree): SettingsNavGroup[] {
+  const children = orderedChildren(root);
+  const groups = children
+    .filter((child) => !child.layoutUrl)
+    .map((category) => groupOf(category, listCategoryPages(category)));
+  const rootPages = children.filter((child) => child.layoutUrl);
+  groups.push(groupOf(root, listPagesAmong(rootPages, root.fullSlug)));
+  return groups.filter((group) => group.pages.length > 0);
+}
+
+/**
+ * The settings pages the current user can open, grouped the way the settings
+ * navigation shows them.
+ */
+export const useSettingsNavigation = () => {
+  const siteLayout = useSiteLayout();
+
+  const groups = computed<SettingsNavGroup[]>(() => {
+    const root = siteLayout.siteLayoutTree.value?.children[SETTINGS_ROOT_ID];
+    return root ? buildSettingsGroups(root) : [];
+  });
+
+  return { groups };
+};
+
+/**
+ * The nav path the current route stands under: the longest one it equals or
+ * lies below, so a page nested under another (pending invitations under
+ * Members) is the only one marked active there.
+ */
+export function findActiveSettingsPath(
+  path: string,
+  paths: readonly string[],
+): string | undefined {
+  let active: string | undefined;
+  for (const candidate of paths) {
+    const matches = path === candidate || path.startsWith(`${candidate}/`);
+    if (matches && candidate.length > (active?.length ?? -1)) {
+      active = candidate;
+    }
+  }
+  return active;
+}

package/frontend-vue/layers/dms-layout/app/build/utils/categoryPages.ts

@@ -0,0 +1,44 @@
+import type { SiteLayoutTree } from "../../types/page";
+
+/** A node's children, in the order the menu lists them (`order`, then name). */
+export function orderedChildren(node: SiteLayoutTree): SiteLayoutTree[] {
+  return (node.childrenOrders ?? Object.keys(node.children))
+    .map((id) => node.children[id])
+    .filter((child): child is SiteLayoutTree => !!child);
+}
+
+/** The node registered under `fullId`, found by walking its dotted id. */
+export function findTreeNode(
+  root: SiteLayoutTree | undefined,
+  fullId: string,
+): SiteLayoutTree | undefined {
+  let node = root;
+  for (const segment of fullId.split(".")) {
+    node = node?.children[segment];
+  }
+  return node;
+}
+
+const isOpenablePage = (node: SiteLayoutTree): boolean =>
+  !!node.layoutUrl && node.hasAccess !== false;
+
+/**
+ * The pages the viewer can open among `nodes` and under them, in menu order,
+ * each one followed by the pages nested under it (Member invitations under
+ * Members). The page answering at `landingSlug` leads to the others rather
+ * than being one of them.
+ */
+export function listPagesAmong(
+  nodes: SiteLayoutTree[],
+  landingSlug: string,
+): SiteLayoutTree[] {
+  return nodes.flatMap((node) => [
+    ...(isOpenablePage(node) && node.fullSlug !== landingSlug ? [node] : []),
+    ...listPagesAmong(orderedChildren(node), landingSlug),
+  ]);
+}
+
+/** The pages the viewer can open under `category`, in menu order. */
+export function listCategoryPages(category: SiteLayoutTree): SiteLayoutTree[] {
+  return listPagesAmong(orderedChildren(category), category.fullSlug);
+}