@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/useRoleEditor.ts

@@ -0,0 +1,204 @@
+import { watch, type Ref } from "vue";
+import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+import {
+  buildPermissionAreas,
+  buildPermissionIndex,
+  diffPermissions,
+  grantPermission,
+  revokePermission,
+} from "./role-permissions";
+import {
+  NEW_ROLE_ENTRY_ID,
+  OWNER_ENTRY_ID,
+  type RoleDraft,
+  type RolePermissionNode,
+  type RolesOverview,
+  type RoleSummary,
+} from "./role-types";
+
+// The Owner row the list shows above the stored roles.
+const OWNER_ROW = 1;
+const ROLES_PAGE_ID = "settings.workspace.roles";
+
+/** What the roles page loads: the roles and the permission tree. */
+export interface RolesPageData {
+  overview: RolesOverview;
+  tree: RolePermissionNode[];
+}
+
+const NAMED_MEMBERS_LIMIT = 2;
+
+function draftOf(role: RoleSummary | null): RoleDraft {
+  return {
+    id: role?._id ?? null,
+    name: role?.name ?? "",
+    description: role?.description ?? "",
+    permissions: [...(role?.permissions ?? [])],
+  };
+}
+
+/** What the change summary of the save bar is computed from. */
+interface RoleChangeSource {
+  draft: Ref<RoleDraft>;
+  saved: Ref<RoleDraft>;
+  selection: Ref<Set<string>>;
+  selectedRole: Ref<RoleSummary | null>;
+  isNew: Ref<boolean>;
+}
+
+function appliesToLabel(
+  role: RoleSummary | null,
+  t: ReturnType<typeof useI18n>["t"],
+): string | undefined {
+  if (!role || role.memberCount === 0) return undefined;
+  if (role.memberCount > NAMED_MEMBERS_LIMIT) {
+    return t("page.settings.roles.editor.applies_to_count", role.memberCount);
+  }
+  const names = role.members.map((member) => member.name).join(", ");
+  return t("page.settings.roles.editor.applies_to", { names });
+}
+
+/** Whether the draft differs from the saved role, and how, for the save bar. */
+function useRoleChanges(source: RoleChangeSource) {
+  const { t } = useI18n();
+  const diff = computed(() =>
+    diffPermissions(source.saved.value.permissions, source.selection.value),
+  );
+  const isNameChanged = computed(
+    () => source.draft.value.name !== source.saved.value.name,
+  );
+  const isDescriptionChanged = computed(
+    () => source.draft.value.description !== source.saved.value.description,
+  );
+  const isDirty = computed(
+    () =>
+      source.isNew.value ||
+      isNameChanged.value ||
+      isDescriptionChanged.value ||
+      diff.value.added.length > 0 ||
+      diff.value.removed.length > 0,
+  );
+  const changes = computed(() =>
+    [
+      isNameChanged.value && t("page.settings.roles.editor.changed_name"),
+      isDescriptionChanged.value &&
+        t("page.settings.roles.editor.changed_description"),
+      diff.value.added.length > 0 &&
+        t("page.settings.roles.editor.changed_added", diff.value.added.length),
+      diff.value.removed.length > 0 &&
+        t(
+          "page.settings.roles.editor.changed_removed",
+          diff.value.removed.length,
+        ),
+      appliesToLabel(source.selectedRole.value, t),
+    ].filter((label): label is string => Boolean(label)),
+  );
+  return { isDirty, changes };
+}
+
+/**
+ * State of the roles editor: which entry is selected, the draft being edited,
+ * its permission selection and how it differs from the saved role.
+ */
+export function useRoleEditor(data: Ref<RolesPageData | null>) {
+  const { processI18n } = useTranslation();
+
+  const selectedId = ref<string>(OWNER_ENTRY_ID);
+  const draft = ref<RoleDraft>(draftOf(null));
+  const selection = ref<Set<string>>(new Set());
+  const autoAdded = ref<Map<string, string[]>>(new Map());
+
+  const roles = computed(() => data.value?.overview.roles ?? []);
+
+  // The settings nav shows the role count — the stored roles and the Owner
+  // row, as the list and the server count them; keep it current as roles
+  // are created, duplicated or deleted here.
+  const { setNavBadge } = useNavBadges();
+  watch(
+    () => data.value?.overview.roles.length,
+    (count) => {
+      if (count !== undefined) {
+        setNavBadge(ROLES_PAGE_ID, String(count + OWNER_ROW));
+      }
+    },
+    { immediate: true },
+  );
+  // Served in menu order, which the settings nav follows too.
+  const tree = computed(() => data.value?.tree ?? []);
+  const index = computed(() => buildPermissionIndex(tree.value));
+  const areas = computed(() => buildPermissionAreas(tree.value, processI18n));
+  const selectedRole = computed(
+    () => roles.value.find((role) => role._id === selectedId.value) ?? null,
+  );
+  const isNew = computed(() => selectedId.value === NEW_ROLE_ENTRY_ID);
+  const saved = computed(() => draftOf(selectedRole.value));
+  const savedIds = computed(() => new Set(saved.value.permissions));
+  const { isDirty, changes } = useRoleChanges({
+    draft,
+    saved,
+    selection,
+    selectedRole,
+    isNew,
+  });
+
+  const grantable = computed(() => {
+    const ids = data.value?.overview.grantable;
+    return ids ? new Set(ids) : null;
+  });
+  const canGrant = (id: string) => !grantable.value || grantable.value.has(id);
+
+  function reset(): void {
+    draft.value = draftOf(isNew.value ? null : selectedRole.value);
+    selection.value = new Set(draft.value.permissions);
+    autoAdded.value = new Map();
+  }
+
+  function select(id: string): void {
+    selectedId.value = id;
+    reset();
+  }
+
+  function selectDefault(): void {
+    const [first] = roles.value;
+    select(first?._id ?? OWNER_ENTRY_ID);
+  }
+
+  function toggle(id: string, checked: boolean): void {
+    const nextAutoAdded = new Map(autoAdded.value);
+    nextAutoAdded.delete(id);
+    if (checked) {
+      const grant = grantPermission(index.value, selection.value, id, canGrant);
+      selection.value = grant.selection;
+      if (grant.autoAdded.length > 0) nextAutoAdded.set(id, grant.autoAdded);
+    } else {
+      selection.value = revokePermission(index.value, selection.value, id);
+    }
+    autoAdded.value = nextAutoAdded;
+  }
+
+  const payload = computed<RoleDraft>(() => ({
+    ...draft.value,
+    permissions: [...selection.value],
+  }));
+
+  return {
+    selectedId,
+    selectedRole,
+    draft,
+    selection,
+    autoAdded,
+    roles,
+    index,
+    areas,
+    isNew,
+    savedIds,
+    isDirty,
+    changes,
+    payload,
+    canGrant,
+    reset,
+    select,
+    selectDefault,
+    toggle,
+  };
+}

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/useRolesApi.ts

@@ -0,0 +1,71 @@
+import {
+  type CreatedRole,
+  type RoleDeleteRequest,
+  type RoleDraft,
+  type RolePermissionNode,
+  ROLES_API_PATH,
+  ROLES_TABLE_API_PATH,
+  type RolesOverview,
+} from "./role-types";
+
+/** Body of the create and update calls. */
+interface RoleWriteBody {
+  name: string;
+  description: string;
+  permissions: string[];
+}
+
+function toWriteBody(draft: RoleDraft): RoleWriteBody {
+  return {
+    name: draft.name,
+    description: draft.description,
+    permissions: draft.permissions,
+  };
+}
+
+/** Calls of the roles page API (`packages/dms/src/pages/settings/users/roles.ts`). */
+export function useRolesApi() {
+  const { $authFetch } = useAuthFetch();
+
+  const fetchOverview = () =>
+    $authFetch<RolesOverview>(`${ROLES_API_PATH}/overview`);
+
+  const fetchTree = () =>
+    $authFetch<RolePermissionNode[]>(`${ROLES_API_PATH}/editor-tree`);
+
+  const createRole = (draft: RoleDraft) =>
+    $authFetch<CreatedRole>(`${ROLES_API_PATH}/create`, {
+      method: "POST",
+      body: toWriteBody(draft),
+    });
+
+  const updateRole = (roleId: string, draft: RoleDraft) =>
+    $authFetch<void>(`${ROLES_API_PATH}/${encodeURIComponent(roleId)}`, {
+      method: "PUT",
+      body: toWriteBody(draft),
+    });
+
+  const duplicateRole = (roleId: string, name: string) =>
+    $authFetch<CreatedRole>(
+      `${ROLES_API_PATH}/${encodeURIComponent(roleId)}/duplicate`,
+      { method: "POST", body: { name } },
+    );
+
+  // The table's own delete: the answer of the delete dialog goes as its
+  // body, which the roles' delete guard reads to move the holders.
+  const deleteRole = (roleId: string, request: RoleDeleteRequest) =>
+    $authFetch<number>(`${ROLES_TABLE_API_PATH}/delete`, {
+      method: "DELETE",
+      query: { id: roleId },
+      body: request,
+    });
+
+  return {
+    fetchOverview,
+    fetchTree,
+    createRole,
+    updateRole,
+    duplicateRole,
+    deleteRole,
+  };
+}

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityBackupCodesModal.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useCopyFeedback } from "#dms-ui/app/build/composables/clipboard/useCopyFeedback";
+interface SecurityBackupCodesModalProps {
+  codes: string[];
+  /** Codes replace a previous set, which stopped working. */
+  isRegenerated?: boolean;
+  account: string;
+}
+
+const props = withDefaults(defineProps<SecurityBackupCodesModalProps>(), {
+  isRegenerated: false,
+});
+
+const emit = defineEmits<{
+  /** The user downloaded, copied or confirmed keeping the codes. */
+  saved: [];
+}>();
+
+const FILE_NAME = "dms-backup-codes.txt";
+const FILE_TYPE = "text/plain";
+
+const isOpen = defineModel<boolean>("open", { default: false });
+const { t } = useI18n();
+// Copied, the codes stay marked so: the footer says they are kept.
+const clipboard = useCopyFeedback(Number.POSITIVE_INFINITY);
+const isCopied = computed(() => clipboard.isCopied(true));
+const isDownloaded = ref(false);
+
+// Shown exactly as they are typed at sign-in: no grouping separator.
+const displayCodes = computed(() => props.codes);
+
+watch(isOpen, (open) => {
+  if (!open) return;
+  clipboard.reset();
+  isDownloaded.value = false;
+});
+
+function codesText(): string {
+  return [
+    t("page.settings.security.backup.file_header", { account: props.account }),
+    "",
+    ...displayCodes.value,
+  ].join("\n");
+}
+
+async function copy(): Promise<void> {
+  await clipboard.copyText(displayCodes.value.join("\n"), true);
+  emit("saved");
+}
+
+function download(): void {
+  const url = URL.createObjectURL(new Blob([codesText()], { type: FILE_TYPE }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = FILE_NAME;
+  link.click();
+  URL.revokeObjectURL(url);
+  isDownloaded.value = true;
+  emit("saved");
+}
+
+function acknowledge(): void {
+  emit("saved");
+  isOpen.value = false;
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :dismissible="false"
+    :ui="{ content: 'max-w-lg' }"
+  >
+    <template #header>
+      <div class="flex items-start gap-3">
+        <DmsIconWell icon="i-ph-key" tone="success" size="xl" />
+        <div class="grid gap-1">
+          <h3 class="text-highlighted text-base font-semibold">
+            {{ t("page.settings.security.backup.modal_title") }}
+          </h3>
+          <p class="text-muted text-sm">
+            {{ t("page.settings.two_factor.backup_warning") }}
+          </p>
+        </div>
+      </div>
+    </template>
+    <template #body>
+      <div class="grid gap-3.5">
+        <!-- Two columns, one when a code no longer fits half the list
+             (phones). -->
+        <ol
+          class="border-default grid grid-cols-[repeat(auto-fill,minmax(max(8.5rem,calc(50%-1rem)),1fr))] gap-x-4 gap-y-1.5 rounded-md border bg-(--dms-bg-muted) px-4 py-3.5"
+        >
+          <li
+            v-for="(code, index) in displayCodes"
+            :key="code"
+            class="text-highlighted flex items-center gap-2.5 font-mono text-[13px] font-semibold tracking-[0.06em]"
+          >
+            <span class="text-dimmed text-[10px] font-normal tracking-normal">
+              {{ String(index + 1).padStart(2, "0") }}
+            </span>
+            {{ code }}
+          </li>
+        </ol>
+        <div class="flex gap-2">
+          <UButton
+            class="flex-1 justify-center"
+            color="neutral"
+            variant="outline"
+            :icon="isDownloaded ? 'i-ph-check' : 'i-ph-download-simple'"
+            :label="t('page.settings.security.backup.download')"
+            @click="download"
+          />
+          <UButton
+            class="flex-1 justify-center"
+            :color="isCopied ? 'success' : 'neutral'"
+            variant="outline"
+            :icon="clipboard.iconOf(true)"
+            :label="
+              isCopied
+                ? t('page.settings.security.copied')
+                : t('page.settings.security.copy')
+            "
+            @click="copy"
+          />
+        </div>
+        <DmsBanner
+          v-if="props.isRegenerated"
+          size="sm"
+          tone="warning"
+          icon="i-ph-warning"
+          :description="t('page.settings.security.backup.regenerated_note')"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex w-full flex-wrap items-center justify-end gap-2">
+        <span
+          v-if="isCopied || isDownloaded"
+          class="text-success me-auto flex items-center gap-1.5 text-xs font-medium"
+        >
+          <UIcon name="i-ph-check-circle" class="size-4" />
+          {{
+            isCopied
+              ? t(
+                  "page.settings.security.backup.copied_count",
+                  { count: props.codes.length },
+                  props.codes.length,
+                )
+              : t("page.settings.security.backup.downloaded")
+          }}
+        </span>
+        <UButton
+          :label="t('page.settings.security.backup.acknowledge')"
+          @click="acknowledge"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityCodeModal.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import DmsOtpInput from "#dms-ui/app/build/components/form/OtpInput.vue";
+import { codeEntryError } from "#dms-core/app/composables/useFormValidation";
+import { useCodeFieldError } from "../../../../composables/settings/security/useCodeFieldError";
+import SecurityDialogFrame, {
+  type SecurityDialogTone,
+} from "./SecurityDialogFrame.vue";
+
+interface SecurityCodeModalProps {
+  title: string;
+  description: string;
+  icon: string;
+  tone?: SecurityDialogTone;
+  codeLabel: string;
+  confirmLabel: string;
+  loading?: boolean;
+  /** Offer to email a code (the email method has no code until asked). */
+  canSendEmailCode?: boolean;
+}
+
+const props = withDefaults(defineProps<SecurityCodeModalProps>(), {
+  tone: "error",
+  loading: false,
+  canSendEmailCode: false,
+});
+
+const emit = defineEmits<{
+  confirm: [code: string];
+  sendCode: [];
+}>();
+
+const CODE_LENGTH = 6;
+
+const isOpen = defineModel<boolean>("open", { default: false });
+/** A code the API refused, shown under the cells; typing clears it. */
+const error = defineModel<string | undefined>("error");
+const { t } = useI18n();
+const { processApiMessage } = useTranslation();
+const digits = ref<string[]>([]);
+const codeField = useTemplateRef<HTMLElement>("codeField");
+
+const { flag } = useCodeFieldError(digits, error, codeField);
+
+const code = computed(() => digits.value.join(""));
+
+// The code submits once per entry: "complete" and the button can both fire
+// before "loading" reaches this component, and a second call would replace
+// what the first one produced (a new set of backup codes, for instance).
+const submittedCode = ref<string | null>(null);
+
+watch(isOpen, (open) => {
+  if (open) digits.value = [];
+});
+
+watch(code, () => {
+  submittedCode.value = null;
+});
+
+function confirm(): void {
+  if (props.loading) return;
+  // An empty or partial code is flagged under the cells, not sent.
+  const missing = codeEntryError(digits.value, CODE_LENGTH);
+  if (missing) {
+    flag(processApiMessage(missing));
+    return;
+  }
+  if (submittedCode.value === code.value) return;
+  submittedCode.value = code.value;
+  emit("confirm", code.value);
+}
+</script>
+
+<template>
+  <SecurityDialogFrame
+    v-model:open="isOpen"
+    :title="props.title"
+    :icon="props.icon"
+    :tone="props.tone"
+    :confirm-label="props.confirmLabel"
+    :loading="props.loading"
+    @confirm="confirm"
+  >
+    <form class="grid gap-4" @submit.prevent="confirm">
+      <p class="text-muted text-sm">{{ props.description }}</p>
+      <div ref="codeField" class="grid gap-2">
+        <span class="text-highlighted text-[13px] font-medium">
+          {{ props.codeLabel }}
+        </span>
+        <DmsOtpInput
+          v-model="digits"
+          :label="props.codeLabel"
+          :length="CODE_LENGTH"
+          type="number"
+          is-otp
+          :error="error"
+          @complete="confirm"
+        />
+        <UButton
+          v-if="props.canSendEmailCode"
+          variant="link"
+          size="sm"
+          class="w-fit px-0"
+          :label="t('page.settings.two_factor.send_code')"
+          @click="emit('sendCode')"
+        />
+      </div>
+    </form>
+  </SecurityDialogFrame>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityDialogFrame.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+export type SecurityDialogTone = "primary" | "error" | "warning";
+</script>
+
+<script setup lang="ts">
+interface SecurityDialogFrameProps {
+  title: string;
+  icon: string;
+  tone?: SecurityDialogTone;
+  confirmLabel: string;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<SecurityDialogFrameProps>(), {
+  tone: "error",
+  loading: false,
+});
+
+const emit = defineEmits<{
+  confirm: [];
+}>();
+
+const CONFIRM_COLORS: Record<
+  SecurityDialogTone,
+  "primary" | "error" | "warning"
+> = {
+  primary: "primary",
+  error: "error",
+  warning: "warning",
+};
+
+const isOpen = defineModel<boolean>("open", { default: false });
+const { t } = useI18n();
+</script>
+
+<template>
+  <UModal v-model:open="isOpen" :ui="{ content: 'max-w-md' }">
+    <template #header>
+      <div class="flex items-start gap-3">
+        <DmsIconWell :icon="props.icon" :tone="props.tone" size="xl" />
+        <div class="grid gap-1 pt-1">
+          <h3 class="text-highlighted text-base font-semibold">
+            {{ props.title }}
+          </h3>
+        </div>
+      </div>
+    </template>
+    <template #body>
+      <slot />
+    </template>
+    <template #footer>
+      <!-- Phones: no Esc hint (no keyboard) and the buttons may wrap. -->
+      <div class="flex w-full flex-wrap items-center justify-end gap-2">
+        <span
+          class="text-dimmed me-auto flex items-center gap-1.5 text-xs max-sm:hidden"
+        >
+          <UKbd value="Esc" size="sm" />
+          {{ t("page.settings.security.esc_to_cancel") }}
+        </span>
+        <UButton
+          color="neutral"
+          variant="outline"
+          :label="t('page.settings.security.cancel')"
+          @click="isOpen = false"
+        />
+        <UButton
+          :color="CONFIRM_COLORS[props.tone]"
+          :loading="props.loading"
+          :label="props.confirmLabel"
+          @click="emit('confirm')"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>