@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -0,0 +1,209 @@
+// The sentences of the profile's "Preferences & access" rows, and which rows
+// the user may see. Pure: useProfilePreferences reads the data.
+
+import type { TimeFormatPreference } from "#dms-core/app/utils/regional";
+import type { AccessibilityPreferences } from "#dms-ui/app/build/utils/accessibilityPreferences";
+import type { NotificationSubject } from "../../notification/useNotificationCatalog";
+import type {
+  ColorModePreference,
+  InterfaceScale,
+} from "../../../../composables/general/types";
+
+/** `t` as vue-i18n takes it: key, named params, plural count. */
+export type SummaryTranslate = (
+  key: string,
+  params?: Record<string, unknown>,
+  plural?: number,
+) => string;
+
+const KEY = "page.settings.profile.preferences";
+const SEPARATOR = " · ";
+// 4 January 2026 is a Sunday: day `n` of the week is `n` days later.
+const FIRST_SUNDAY_UTC = Date.UTC(2026, 0, 4, 12);
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** The settings page each row opens, which is also the page that gates it. */
+export const PREFERENCE_ROW_PAGES = {
+  access: "settings.workspace.roles",
+  region: "settings.user.region",
+  notifications: "settings.user.notifications",
+  appearance: "settings.user.appearance",
+} as const;
+
+export type PreferenceRowId = keyof typeof PREFERENCE_ROW_PAGES;
+
+export interface PreferenceRow {
+  visible: boolean;
+  /** Route of the row's button; none when the user cannot open the page. */
+  to?: string;
+}
+
+/**
+ * Which rows show and where their buttons lead, from the settings pages the
+ * user can open (the ones the settings navigation lists, by full id). A
+ * personal page the user cannot open takes its row away; "Your access"
+ * always shows, and only links to the roles page when it opens.
+ */
+export function resolvePreferenceRows(
+  openPages: ReadonlyMap<string, string>,
+): Record<PreferenceRowId, PreferenceRow> {
+  const row = (id: PreferenceRowId, alwaysVisible = false): PreferenceRow => {
+    const to = openPages.get(PREFERENCE_ROW_PAGES[id]);
+    return { visible: alwaysVisible || to !== undefined, to };
+  };
+  return {
+    access: row("access", true),
+    region: row("region"),
+    notifications: row("notifications"),
+    appearance: row("appearance"),
+  };
+}
+
+/** What `GET /settings/user/profile/access` answers. */
+export interface ProfileAccess {
+  roles: string[];
+  workspaceOwner: boolean;
+  platformOwner: boolean;
+}
+
+/**
+ * `Roles: Admin, Finance · workspace owner`. An owner without a role is
+ * said as such rather than as "No role".
+ */
+export function buildAccessSummary(
+  t: SummaryTranslate,
+  access: ProfileAccess,
+): string {
+  const { roles } = access;
+  const owner = access.platformOwner
+    ? "platform_owner"
+    : access.workspaceOwner
+      ? "workspace_owner"
+      : undefined;
+  if (!roles.length) {
+    return t(`${KEY}.${owner ? `access_${owner}_alone` : "access_no_role"}`);
+  }
+  const held = t(
+    `${KEY}.access_roles`,
+    { roles: roles.join(", ") },
+    roles.length,
+  );
+  return owner ? [held, t(`${KEY}.access_${owner}`)].join(SEPARATOR) : held;
+}
+
+/** The regional settings as they apply, "Automatic" already resolved. */
+export interface RegionFacts {
+  language: string;
+  /** Display label of the time zone. */
+  timeZone: string;
+  /** Today, as the dashboard writes a full date. */
+  date: string;
+  timeFormat: TimeFormatPreference;
+  /** 0 Sunday … 6 Saturday. */
+  weekStart: number;
+  locale: string;
+}
+
+/** The weekday `day` (0 Sunday … 6 Saturday) as `locale` names it. */
+export function weekdayName(locale: string, day: number): string {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    timeZone: "UTC",
+  }).format(new Date(FIRST_SUNDAY_UTC + day * DAY_MS));
+}
+
+/**
+ * `Français · Europe / Brussels: dates 03/10/2026, 24-hour time, weeks start
+ * on Monday`.
+ */
+export function buildRegionSummary(
+  t: SummaryTranslate,
+  facts: RegionFacts,
+): string {
+  return t(`${KEY}.region_summary`, {
+    language: facts.language,
+    zone: facts.timeZone,
+    date: facts.date,
+    clock: t(`${KEY}.clock_${facts.timeFormat}`),
+    weekday: weekdayName(facts.locale, facts.weekStart),
+  });
+}
+
+export interface SubjectTally {
+  on: number;
+  total: number;
+}
+
+/** Subjects that reach the user: switched on, or locked on by the server. */
+export function tallySubjects(
+  subjects: readonly NotificationSubject[],
+  isEnabled: (subject: NotificationSubject) => boolean,
+): SubjectTally {
+  return {
+    on: subjects.filter((subject) => subject.locked || isEnabled(subject))
+      .length,
+    total: subjects.length,
+  };
+}
+
+/**
+ * `3 unread notifications · 6 of 9 subjects on · email coming soon`. Without
+ * a tally (the preferences did not load) the subjects are left out.
+ */
+export function buildNotificationsSummary(
+  t: SummaryTranslate,
+  unread: number,
+  subjects?: SubjectTally,
+): string {
+  const parts = [t(`${KEY}.notifications_unread`, { count: unread }, unread)];
+  if (subjects && subjects.total > 0) {
+    parts.push(t(`${KEY}.notifications_subjects`, { ...subjects }));
+  }
+  parts.push(t(`${KEY}.notifications_email_soon`));
+  return parts.join(SEPARATOR);
+}
+
+export interface AppearanceFacts {
+  theme: ColorModePreference;
+  /** What a `system` theme resolves to right now. */
+  systemDark: boolean;
+  scale: InterfaceScale;
+  accessibility: AccessibilityPreferences;
+  locale: string;
+}
+
+/** The accessibility options that are on, in the Appearance page's order. */
+function activeAccessibilityOptions(
+  preferences: AccessibilityPreferences,
+): string[] {
+  return [
+    preferences.reduceMotion === "on" && "reduce_motion",
+    preferences.increaseContrast && "increase_contrast",
+    preferences.underlineLinks && "underline_links",
+  ].filter((option): option is string => !!option);
+}
+
+/**
+ * `Dark theme · normal density · increased contrast on`. Accessibility is
+ * only mentioned when an option is on.
+ */
+export function buildAppearanceSummary(
+  t: SummaryTranslate,
+  facts: AppearanceFacts,
+): string {
+  const theme =
+    facts.theme === "system"
+      ? t(`${KEY}.theme_system_${facts.systemDark ? "dark" : "light"}`)
+      : t(`${KEY}.theme_${facts.theme}`);
+  const parts = [theme, t(`${KEY}.density_${facts.scale}`)];
+  const options = activeAccessibilityOptions(facts.accessibility).map(
+    (option) => t(`${KEY}.a11y_${option}`),
+  );
+  if (options.length) {
+    const list = new Intl.ListFormat(facts.locale, {
+      type: "conjunction",
+    }).format(options);
+    parts.push(t(`${KEY}.accessibility_on`, { options: list }));
+  }
+  return parts.join(SEPARATOR);
+}

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

@@ -0,0 +1,329 @@
+import UFormField from "@nuxt/ui/components/FormField.vue";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import type { Component, Ref } from "vue";
+import { downloadFile } from "#dms-core/app/utils/downloadFile";
+import { useConfirm } from "#dms-ui/app/composables/confirm";
+import {
+  type ConfirmImpact,
+  ConfirmTextError,
+} from "#dms-ui/app/composables/confirm/types";
+import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
+import { REQUIRED_MESSAGE } from "#dms-core/app/composables/useFormValidation";
+import { useSecurityFormat } from "../security/useSecurityFormat";
+
+const PROFILE_ENDPOINT = "/settings/user/profile";
+const EXPORT_ENDPOINT = `${PROFILE_ENDPOINT}/account-export`;
+const DELETION_ENDPOINT = `${PROFILE_ENDPOINT}/account-deletion`;
+const EXPORT_FILE_PREFIX = "dms-account-export";
+const JSON_INDENT = 2;
+const ISO_DATE_LENGTH = 10;
+const AUTH_ROUTE = "/auth";
+const I18N = "page.settings.profile.data";
+const INVALID_CURRENT_PASSWORD = "error.invalid_current_password";
+const CONFIRMATION_REFUSED = `$${I18N}.delete_error_confirmation`;
+const SECURITY_ERRORS = "page.settings.security.errors";
+
+/** Fields of the deletion dialog an API error can belong to. */
+type DeletionField = "password" | "confirmation";
+
+/** The password control of the deletion dialog, as `UInput` exposes it. */
+interface PasswordInputHandle {
+  inputRef?: HTMLInputElement;
+}
+
+/** Why the account cannot be deleted yet, as the API answers it. */
+export interface DeletionBlocker {
+  kind: "tenant" | "platform";
+  tenantId?: string;
+  tenantName?: string;
+}
+
+/** What deleting the account would remove, as the API answers it. */
+export interface AccountDeletionImpact {
+  email: string;
+  hasPassword: boolean;
+  memberships: number;
+  sessions: number;
+  notifications: number;
+  externalIdentities: number;
+  invitesSent: number;
+  blockers: DeletionBlocker[];
+}
+
+/** The export file name: `dms-account-export-2026-10-01.json`. */
+export function accountExportFilename(at: Date = new Date()): string {
+  return `${EXPORT_FILE_PREFIX}-${at.toISOString().slice(0, ISO_DATE_LENGTH)}.json`;
+}
+
+/**
+ * "Your data" on the profile page: download everything the DMS keeps about
+ * the signed-in user, or delete the account after a password and a typed
+ * e-mail, then sign out.
+ */
+export function useAccountData() {
+  const { $authFetch } = useAuthFetch();
+  const { confirm } = useConfirm();
+  const { user, clear } = useUserSession<User>();
+  const { removeAccount } = useMultiAccount();
+  const { processI18n, processApiMessage } = useTranslation();
+  const { errorMessage, errorCode } = useSecurityFormat();
+  const toast = useToast();
+  const { t } = useI18n();
+
+  const isExporting = ref(false);
+  const isCheckingDeletion = ref(false);
+
+  /** A message key the API answers with (`$…`), else a known error code. */
+  function describeError(error: unknown, fallbackKey: string): string {
+    const code = errorCode(error);
+    if (code?.startsWith("$")) return processI18n(code);
+    return errorMessage(error, fallbackKey);
+  }
+
+  async function exportData(): Promise<void> {
+    isExporting.value = true;
+    try {
+      const file = await $authFetch<unknown>(EXPORT_ENDPOINT);
+      const blob = new Blob([JSON.stringify(file, null, JSON_INDENT)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      downloadFile(url, accountExportFilename());
+      URL.revokeObjectURL(url);
+      toast.add({
+        color: "success",
+        icon: "i-ph-check-circle",
+        title: t(`${I18N}.export_done`),
+      });
+    } catch (error) {
+      toast.add({
+        color: "error",
+        icon: "i-ph-warning-circle",
+        title: describeError(error, `${I18N}.export_error`),
+      });
+    } finally {
+      isExporting.value = false;
+    }
+  }
+
+  function impactList(impact: AccountDeletionImpact): ConfirmImpact[] {
+    return [
+      {
+        icon: "i-ph-users-three",
+        label: t(`${I18N}.impact_memberships`),
+        count: impact.memberships,
+      },
+      {
+        icon: "i-ph-devices",
+        label: t(`${I18N}.impact_sessions`),
+        count: impact.sessions,
+      },
+      {
+        icon: "i-ph-bell",
+        label: t(`${I18N}.impact_notifications`),
+        count: impact.notifications,
+      },
+      {
+        icon: "i-ph-link",
+        label: t(`${I18N}.impact_identities`),
+        count: impact.externalIdentities,
+      },
+      {
+        icon: "i-ph-envelope-simple",
+        label: t(`${I18N}.impact_invites`),
+        count: impact.invitesSent,
+      },
+    ];
+  }
+
+  /**
+   * The password of the deletion dialog; a wrong one shows under it (the
+   * field marks itself invalid and describes the input with it).
+   */
+  function passwordField(
+    password: Ref<string>,
+    error: Ref<string | undefined>,
+    input: Ref<PasswordInputHandle | null>,
+  ) {
+    return () =>
+      h(
+        UFormField,
+        { label: t(`${I18N}.delete_password`), error: error.value },
+        {
+          default: () =>
+            // Generic in its value type, which `h` cannot infer.
+            h(UInput as Component, {
+              ref: input,
+              modelValue: password.value,
+              type: "password",
+              autocomplete: "current-password",
+              class: "w-full",
+              "onUpdate:modelValue": (value: unknown) => {
+                password.value = typeof value === "string" ? value : "";
+                error.value = undefined;
+              },
+            }),
+          error: ({ error: message }: { error?: string | boolean }) =>
+            message
+              ? [
+                  h(UIcon, {
+                    name: "i-ph-warning-circle",
+                    class: "size-3.5 shrink-0",
+                  }),
+                  String(message),
+                ]
+              : [],
+        },
+      );
+  }
+
+  function blockerNames(blockers: DeletionBlocker[]): string {
+    return blockers
+      .map((blocker) =>
+        blocker.kind === "platform"
+          ? t(`${I18N}.blocker_platform`)
+          : (blocker.tenantName ?? blocker.tenantId ?? ""),
+      )
+      .join(", ");
+  }
+
+  async function explainBlockers(blockers: DeletionBlocker[]): Promise<void> {
+    await confirm({
+      title: t(`${I18N}.blocked_title`),
+      description: t(`${I18N}.blocked_description`, {
+        names: blockerNames(blockers),
+      }),
+      icon: "i-ph-crown-simple",
+      color: "warning",
+      blocked: true,
+      cancelLabel: t(`${I18N}.blocked_close`),
+    });
+  }
+
+  async function signOutDeleted(): Promise<void> {
+    const userId = user.value?._id;
+    await clear().catch(() => undefined);
+    if (userId) await removeAccount(userId).catch(() => undefined);
+    toast.add({
+      color: "success",
+      icon: "i-ph-check-circle",
+      title: t(`${I18N}.delete_done_title`),
+      description: t(`${I18N}.delete_done_description`),
+    });
+    await navigateDms(AUTH_ROUTE);
+  }
+
+  /**
+   * Sends the deletion. A wrong password shows under the password field, a
+   * refused e-mail under the typed one; anything else is a toast. The dialog
+   * stays open on every failure.
+   */
+  async function submitDeletion(
+    impact: AccountDeletionImpact,
+    password: string,
+    passwordError: Ref<string | undefined>,
+    passwordInput: Ref<PasswordInputHandle | null>,
+  ): Promise<boolean> {
+    passwordError.value = undefined;
+    try {
+      await $authFetch(DELETION_ENDPOINT, {
+        method: "POST",
+        body: {
+          password: impact.hasPassword ? password : undefined,
+          confirmation: impact.email,
+        },
+      });
+      return true;
+    } catch (error) {
+      const [fieldError] = resolveFieldErrors<DeletionField>(error, {
+        fields: impact.hasPassword
+          ? ["password", "confirmation"]
+          : ["confirmation"],
+        codes: {
+          [INVALID_CURRENT_PASSWORD]: {
+            field: "password",
+            message: `${SECURITY_ERRORS}.invalid_current_password`,
+          },
+          [CONFIRMATION_REFUSED]: "confirmation",
+        },
+      }).fields;
+      if (fieldError?.field === "confirmation") {
+        throw new ConfirmTextError(processApiMessage(fieldError.message));
+      }
+      if (fieldError?.field === "password") {
+        passwordError.value = processApiMessage(fieldError.message);
+        await nextTick();
+        passwordInput.value?.inputRef?.focus();
+        return false;
+      }
+      toast.add({
+        color: "error",
+        icon: "i-ph-warning-circle",
+        title: describeError(error, `${I18N}.delete_error`),
+      });
+      return false;
+    }
+  }
+
+  /** The password is required: an empty one is flagged, not sent. */
+  function passwordCheck(
+    password: Ref<string>,
+    error: Ref<string | undefined>,
+    input: Ref<PasswordInputHandle | null>,
+  ) {
+    return async (): Promise<boolean> => {
+      if (password.value) return true;
+      error.value = processApiMessage(REQUIRED_MESSAGE);
+      await nextTick();
+      input.value?.inputRef?.focus();
+      return false;
+    };
+  }
+
+  async function confirmDeletion(impact: AccountDeletionImpact): Promise<void> {
+    const password = ref("");
+    const passwordError = ref<string>();
+    const passwordInput = ref<PasswordInputHandle | null>(null);
+    const confirmed = await confirm({
+      title: t(`${I18N}.delete_confirm_title`),
+      description: t(`${I18N}.delete_confirm_description`),
+      icon: "i-ph-warning",
+      color: "error",
+      confirmIcon: "i-ph-trash",
+      confirmLabel: t(`${I18N}.delete_confirm_button`),
+      impact: impactList(impact),
+      body: impact.hasPassword
+        ? passwordField(password, passwordError, passwordInput)
+        : undefined,
+      confirmText: impact.email,
+      validate: impact.hasPassword
+        ? passwordCheck(password, passwordError, passwordInput)
+        : undefined,
+      onConfirm: () =>
+        submitDeletion(impact, password.value, passwordError, passwordInput),
+    });
+    if (confirmed) await signOutDeleted();
+  }
+
+  async function deleteAccount(): Promise<void> {
+    isCheckingDeletion.value = true;
+    let impact: AccountDeletionImpact;
+    try {
+      impact = await $authFetch<AccountDeletionImpact>(DELETION_ENDPOINT);
+    } catch (error) {
+      toast.add({
+        color: "error",
+        icon: "i-ph-warning-circle",
+        title: describeError(error, `${I18N}.delete_error`),
+      });
+      return;
+    } finally {
+      isCheckingDeletion.value = false;
+    }
+    if (impact.blockers.length > 0) return explainBlockers(impact.blockers);
+    return confirmDeletion(impact);
+  }
+
+  return { isExporting, isCheckingDeletion, exportData, deleteAccount };
+}

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

@@ -0,0 +1,95 @@
+import {
+  type PresignResponse,
+  useUploadWithProgress,
+} from "#dms-ui/app/composables/form/useUploadWithProgress";
+import {
+  type FileFieldConstraints,
+  matchMimetype,
+} from "#dms-ui/app/utils/fileConstraints";
+import {
+  type ImageResizeBounds,
+  resizeImageToBounds,
+} from "#dms-ui/app/utils/imageResize";
+
+const PRESIGN_URL = "/api/files/presign";
+const METADATA_URL = "/api/files/metadata";
+
+/** Upload options the backend serialized for the avatar image field. */
+export interface AvatarFieldOptions {
+  uploadToken?: string;
+  storage?: string;
+  constraints?: FileFieldConstraints;
+  resize?: ImageResizeBounds;
+}
+
+/** Why a picked file was refused before any upload. */
+export type AvatarRejection = "mimetype" | "size";
+
+interface FileMetadataResponse {
+  url: string;
+}
+
+/** Outcome of an avatar upload: a staged key, or why it was refused. */
+export interface AvatarUploadResult {
+  key?: string;
+  rejection?: AvatarRejection;
+}
+
+/**
+ * The profile avatar's upload flow, the same one the image form field uses:
+ * resize to the field's bounds, presign with the field's upload token, then
+ * PUT to storage. The returned key is staged until the profile is saved.
+ *
+ * @param options Serialized options of the avatar image field
+ */
+export function useProfileAvatar(options: () => AvatarFieldOptions) {
+  const { $authFetch } = useAuthFetch();
+  const { uploadWithProgress } = useUploadWithProgress();
+  const progress = ref(0);
+
+  const isAccepted = (file: File): boolean => {
+    const mimetypes = options().constraints?.allowedMimetypes;
+    if (!mimetypes?.length) return file.type.startsWith("image/");
+    return mimetypes.some((pattern) => matchMimetype(file.type, pattern));
+  };
+
+  const prepare = (file: File): Promise<File> => {
+    const bounds = options().resize;
+    return bounds ? resizeImageToBounds(file, bounds) : Promise.resolve(file);
+  };
+
+  async function upload(file: File): Promise<AvatarUploadResult> {
+    if (!isAccepted(file)) return { rejection: "mimetype" };
+    const prepared = await prepare(file);
+    const maxSize = options().constraints?.maxSize;
+    if (maxSize && prepared.size > maxSize) return { rejection: "size" };
+    progress.value = 0;
+    const presign = await $authFetch<PresignResponse>(PRESIGN_URL, {
+      method: "POST",
+      body: {
+        filename: prepared.name,
+        size: prepared.size,
+        mimetype: prepared.type,
+        uploadToken: options().uploadToken,
+      },
+    });
+    await uploadWithProgress(presign, prepared, (value) => {
+      progress.value = value;
+    });
+    return { key: presign.resourceKey };
+  }
+
+  /** @returns A short-lived URL to display a stored avatar */
+  async function resolveUrl(key: string): Promise<string | null> {
+    try {
+      const metadata = await $authFetch<FileMetadataResponse>(METADATA_URL, {
+        query: { resourceKey: key, storage: options().storage },
+      });
+      return metadata.url;
+    } catch {
+      return null;
+    }
+  }
+
+  return { progress, upload, resolveUrl };
+}