@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-layout/app/custom-pages/settings/roles.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import RoleEditor from "../../build/components/pages/settings/roles/RoleEditor.vue";
+import RoleOwnerPanel from "../../build/components/pages/settings/roles/RoleOwnerPanel.vue";
+import RolesList from "../../build/components/pages/settings/roles/RolesList.vue";
+import {
+  NEW_ROLE_ENTRY_ID,
+  OWNER_ENTRY_ID,
+  ROLES_API_PATH,
+  type RoleEditorField,
+  type RoleSummary,
+} from "../../build/components/pages/settings/roles/role-types";
+import {
+  type RolesPageData,
+  useRoleEditor,
+} from "../../build/components/pages/settings/roles/useRoleEditor";
+import { useRolesApi } from "../../build/components/pages/settings/roles/useRolesApi";
+import { usePageHeaderActions } from "../../composables/layout/usePageHeaderActions";
+import {
+  type PermissionPreviewInput,
+  usePermissionPreview,
+} from "#dms-core/app/build/composables/auth/usePermissionPreview";
+import { useFieldErrors } from "#dms-core/app/composables/useFieldErrors";
+import { REQUIRED_MESSAGE } from "#dms-core/app/composables/useFormValidation";
+import { useUnsavedChanges } from "#dms-ui/app/composables/unsaved-changes/useUnsavedChanges";
+import { useActionConfirm } from "#dms-ui/app/build/composables/confirm/useActionConfirm";
+
+interface RoleEditorHandle {
+  inputOf: (field: RoleEditorField) => HTMLInputElement | undefined;
+}
+
+const NAME_REQUIRED = "$page.settings.roles.error.name_required";
+const NAME_TAKEN = "$page.settings.roles.error.name_taken";
+const ROLE_DELETE_CONFIRM_URL = `${ROLES_API_PATH}/{id}/delete-confirm`;
+
+const api = useRolesApi();
+const { t } = useI18n();
+const toast = useToast();
+const { confirmAction } = useActionConfirm();
+const { processApiMessage } = useTranslation();
+
+// Before the first await: the header renders it in the server pass. The
+// render runs once the setup is done, so it may read what is declared below.
+usePageHeaderActions(() =>
+  h(UButton, {
+    label: t("page.settings.roles.editor.new_role"),
+    icon: "i-ph-plus",
+    color: "neutral",
+    variant: "outline",
+    disabled: !capabilities.value?.canAdd,
+    onClick: () => selectEntry(NEW_ROLE_ENTRY_ID),
+  }),
+);
+
+const { data, refresh } = await useDmsAsyncData<RolesPageData | null>(
+  "settings-roles-editor",
+  async () => {
+    const [overview, tree] = await Promise.all([
+      api.fetchOverview(),
+      api.fetchTree(),
+    ]);
+    return { overview, tree };
+  },
+  { default: () => null },
+);
+
+const editor = useRoleEditor(data);
+const isSaving = ref(false);
+const roleEditor = useTemplateRef<RoleEditorHandle>("roleEditor");
+// A refused name or description shows under its field, never as a toast.
+const fieldErrors = useFieldErrors<RoleEditorField>({
+  fields: {
+    name: () => roleEditor.value?.inputOf("name"),
+    description: () => roleEditor.value?.inputOf("description"),
+  },
+  // An empty name reads like every other required field.
+  codes: {
+    [NAME_REQUIRED]: { field: "name", message: REQUIRED_MESSAGE },
+    [NAME_TAKEN]: "name",
+  },
+});
+
+watch(
+  () => editor.draft.value.name,
+  () => fieldErrors.clear("name"),
+);
+watch(
+  () => editor.draft.value.description,
+  () => fieldErrors.clear("description"),
+);
+
+const capabilities = computed(() => data.value?.overview.capabilities);
+const isReadonly = computed(() =>
+  editor.isNew.value
+    ? !capabilities.value?.canAdd
+    : !capabilities.value?.canEdit,
+);
+
+editor.selectDefault();
+
+// "Preview as role" opens a tab on the dashboard that browses it as the role
+// would, edits included; while that tab is open it follows the editor's draft.
+// Previewing is reading the dashboard through a role, so it asks for the same
+// right as editing one.
+const preview = usePermissionPreview();
+const homepage = useHomepage();
+const route = useDmsRoute();
+const previewId = ref<string | null>(null);
+// Not from inside a preview: that tab is already looking through a role.
+const canPreview = computed(
+  () => (capabilities.value?.canEdit ?? false) && !preview.isActive.value,
+);
+const previewInput = computed<PermissionPreviewInput>(() => ({
+  roleId: editor.draft.value.id,
+  roleName: editor.draft.value.name,
+  permissions: editor.payload.value.permissions,
+  unsaved: editor.isDirty.value,
+  returnTo: route.path,
+}));
+
+function openPreview(): void {
+  previewId.value = preview.start(previewInput.value, homepage);
+}
+
+watch(previewInput, (input) => {
+  if (previewId.value) preview.update(previewId.value, input);
+});
+// Another role in the editor is another preview: the open tab keeps the last
+// state of the role it was opened for. Its errors went with the old draft.
+watch(
+  () => editor.selectedId.value,
+  () => {
+    previewId.value = null;
+    fieldErrors.clear();
+  },
+);
+
+// The draft of a role holds unsaved changes: leaving the page, or picking
+// another role, asks first (the dashboard's one warning dialog).
+const { confirmLeave: confirmDiscard } = useUnsavedChanges({
+  dirty: () => editor.isDirty.value && !isReadonly.value,
+});
+
+async function selectEntry(id: string): Promise<void> {
+  if (id === editor.selectedId.value) return;
+  if (!(await confirmDiscard())) return;
+  editor.select(id);
+}
+
+async function reloadAndSelect(id: string): Promise<void> {
+  await refresh();
+  editor.select(id);
+}
+
+async function runMutation(
+  mutation: () => Promise<void>,
+  successKey: string,
+): Promise<void> {
+  try {
+    await mutation();
+    toast.add({ title: t(successKey), color: "success" });
+  } catch (error) {
+    useApiError(error);
+  }
+}
+
+async function save(): Promise<void> {
+  if (!editor.draft.value.name.trim()) {
+    await fieldErrors.setError("name", processApiMessage(REQUIRED_MESSAGE));
+    return;
+  }
+  isSaving.value = true;
+  fieldErrors.clear();
+  const roleId = editor.draft.value.id;
+  try {
+    if (roleId) {
+      await api.updateRole(roleId, editor.payload.value);
+      await reloadAndSelect(roleId);
+    } else {
+      const created = await api.createRole(editor.payload.value);
+      await reloadAndSelect(created.id);
+    }
+    toast.add({
+      title: t(
+        roleId
+          ? "page.settings.roles.editor.saved"
+          : "page.settings.roles.editor.created",
+      ),
+      color: "success",
+    });
+  } catch (error) {
+    if (!(await fieldErrors.applyApiError(error))) useApiError(error);
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+function discard(): void {
+  if (editor.isNew.value) {
+    editor.selectDefault();
+    return;
+  }
+  editor.reset();
+}
+
+async function duplicate(): Promise<void> {
+  const role = editor.selectedRole.value;
+  if (!role || !(await confirmDiscard())) return;
+  await runMutation(async () => {
+    const name = t("page.settings.roles.editor.copy_name", { name: role.name });
+    const created = await api.duplicateRole(role._id, name);
+    await reloadAndSelect(created.id);
+  }, "page.settings.roles.editor.duplicated");
+}
+
+/** Deletes the role, moving its holders to `reassignTo` when one is picked. */
+async function deleteRole(
+  role: RoleSummary,
+  reassignTo: string | null,
+): Promise<void> {
+  await api.deleteRole(role._id, { reassignTo });
+  await refresh();
+  editor.select(reassignTo ?? editor.roles.value[0]?._id ?? OWNER_ENTRY_ID);
+  toast.add({
+    title: t("page.settings.roles.editor.deleted"),
+    color: "success",
+  });
+}
+
+// The server words the dialog: who still holds the role, and the role to
+// move them to. A refused target role shows under its field.
+async function requestDelete(): Promise<void> {
+  const role = editor.selectedRole.value;
+  if (!role) return;
+  await confirmAction(
+    { from: ROLE_DELETE_CONFIRM_URL },
+    {
+      urlParams: { id: encodeURIComponent(role._id) },
+      run: (values) =>
+        deleteRole(role, (values.reassignTo as string | null) ?? null),
+    },
+  );
+}
+</script>
+
+<template>
+  <div class="@container pb-16">
+    <div
+      v-if="data"
+      class="grid items-start gap-4 @3xl:grid-cols-[256px_minmax(0,1fr)]"
+    >
+      <RolesList
+        :roles="data.overview.roles"
+        :owners="data.overview.owners"
+        :total-permissions="data.overview.totalPermissions"
+        :selected-id="editor.selectedId.value"
+        :draft-name="editor.isNew.value ? editor.draft.value.name : null"
+        @select="selectEntry"
+      />
+      <RoleOwnerPanel
+        v-if="editor.selectedId.value === OWNER_ENTRY_ID"
+        :owners="data.overview.owners"
+      />
+      <RoleEditor
+        v-else
+        ref="roleEditor"
+        v-model:name="editor.draft.value.name"
+        v-model:description="editor.draft.value.description"
+        :is-new="editor.isNew.value"
+        :member-count="editor.selectedRole.value?.memberCount ?? 0"
+        :members="editor.selectedRole.value?.members ?? []"
+        :areas="editor.areas.value"
+        :index="editor.index.value"
+        :selection="editor.selection.value"
+        :saved="editor.savedIds.value"
+        :auto-added="editor.autoAdded.value"
+        :total-permissions="data.overview.totalPermissions"
+        :can-grant="editor.canGrant"
+        :readonly="isReadonly"
+        :can-duplicate="capabilities?.canAdd ?? false"
+        :can-delete="capabilities?.canDelete ?? false"
+        :dirty="editor.isDirty.value && !isReadonly"
+        :saving="isSaving"
+        :changes="editor.changes.value"
+        :can-preview="canPreview"
+        :name-error="fieldErrors.errors.name"
+        :description-error="fieldErrors.errors.description"
+        @toggle="editor.toggle"
+        @save="save"
+        @discard="discard"
+        @duplicate="duplicate"
+        @delete="requestDelete"
+        @preview="openPreview"
+      />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/custom-pages/settings/shortcuts.vue

@@ -1,136 +1,189 @@
 <script setup lang="ts">
+import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
+import { useShortcutRegistry } from "#dms-ui/app/build/composables/shortcuts/useShortcutRegistry";
 import KeyboardShortcut from "../../build/components/pages/settings/shortcut/KeyboardShortcut.vue";
+import DmsSegmented from "#dms-ui/app/components/segmented/Segmented.vue";
+import { usePageHeaderActions } from "../../composables/layout/usePageHeaderActions";
+import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+import {
+  keyboardKeyLabel,
+  type KeyboardPlatform,
+  useKeyboardPlatform,
+} from "#dms-ui/app/composables/global/keyboardPlatform";
 
-const SKELETON_SECTION_COUNT = 3;
-const META_KEYBOARD_TOKEN = "$keyboard.meta";
-const META_KEY_LABELS = {
-  mac: "⌘",
-  other: "Ctrl",
-};
-
-// Per-group accent icon (design panel-title pill). Keyed by the lowercased
-// component name; falls back to a keyboard glyph for unknown groups.
-const GROUP_ICONS: Record<string, string> = {
-  global: "i-ph-command",
-  tab: "i-ph-browsers",
-  tableview: "i-ph-table",
-  tree: "i-ph-tree-structure",
-  form: "i-ph-note-pencil",
-};
-
-const { t } = useI18n();
+interface ShortcutGroupView {
+  key: string;
+  title: string;
+  description: string;
+  shortcuts: ShortcutMetadata[];
+}
+
+const I18N_PREFIX = "$";
+const KEYBOARD_I18N_PREFIX = "$keyboard.";
+const GROUP_I18N = "page.settings.shortcuts.groups";
+
+const { t, te } = useI18n();
 const { getRegistry } = useShortcutRegistry();
 const shortcuts: Ref<ComponentShortcuts[]> = getRegistry();
 
-const sortedShortcuts = computed(() => {
-  return shortcuts.value.map((componentShortcuts: ComponentShortcuts) => ({
-    ...componentShortcuts,
-    shortcuts: [...componentShortcuts.shortcuts].sort((a, b) => {
-      return a.key.join("+").localeCompare(b.key.join("+"));
-    }),
-  }));
+// The layout the dashboard detected (the one every other hint uses); the
+// header switch previews the other one on this page only.
+const { platform: detectedPlatform, isMac } = useKeyboardPlatform();
+const platform = ref<KeyboardPlatform>(detectedPlatform.value);
+watch(detectedPlatform, (next) => {
+  platform.value = next;
 });
+const query = ref("");
 
-function isMacPlatform(): boolean {
-  if (typeof window === "undefined") return false;
-  const navAny = window.navigator as Navigator & {
-    userAgentData?: { platform?: string };
-  };
-  const platform =
-    navAny.userAgentData?.platform ?? window.navigator.platform ?? "";
-  return /Mac/i.test(platform);
-}
+const platformItems = computed(() => [
+  {
+    value: "mac",
+    label: t("page.settings.shortcuts.os_mac"),
+    icon: "i-ph-apple-logo",
+  },
+  {
+    value: "other",
+    label: t("page.settings.shortcuts.os_other"),
+    icon: "i-ph-windows-logo",
+  },
+]);
 
-function getMetaKeyLabel(): string {
-  return isMacPlatform() ? META_KEY_LABELS.mac : META_KEY_LABELS.other;
+usePageHeaderActions(() =>
+  h(DmsSegmented, {
+    items: platformItems.value,
+    modelValue: platform.value,
+    size: "xs",
+    ariaLabel: t("page.settings.shortcuts.layout_label"),
+    "onUpdate:modelValue": (value: string | number | undefined) => {
+      if (value !== undefined) platform.value = value as KeyboardPlatform;
+    },
+  }),
+);
+
+function translate(token: string): string {
+  if (token.startsWith(I18N_PREFIX)) return t(token.slice(I18N_PREFIX.length));
+  return token.toUpperCase();
 }
 
-function attemptTranslation(toTranslate: string): string {
-  if (toTranslate === META_KEYBOARD_TOKEN) {
-    return getMetaKeyLabel();
-  }
-  if (toTranslate.startsWith("$")) {
-    return t(toTranslate.slice(1));
+/**
+ * A `$keyboard.*` key takes the platform's label when it has one (⌘, Ctrl,
+ * ⇧…, shared with every other hint); any other keeps its translated name.
+ */
+function keyLabel(token: string): string {
+  if (token.startsWith(KEYBOARD_I18N_PREFIX)) {
+    const key = token.slice(KEYBOARD_I18N_PREFIX.length);
+    const label = keyboardKeyLabel(key, platform.value);
+    if (label !== key) return label;
   }
-  return toTranslate.toUpperCase();
+  return translate(token);
 }
 
 function groupKey(component: string): string {
-  return component.replace(/^\$/, "").toLowerCase();
+  return component.replace(/^\$/, "").split(".").pop()!.toLowerCase();
 }
 
-function groupIcon(component: string): string {
-  return GROUP_ICONS[groupKey(component)] ?? "i-ph-keyboard";
+function groupText(component: string, field: "title" | "description"): string {
+  const key = `${GROUP_I18N}.${groupKey(component)}.${field}`;
+  if (te(key)) return t(key);
+  return field === "title" ? translate(component) : "";
 }
 
-// Group title keeps its natural case (e.g. "TableView"), unlike keys/labels.
-function groupTitle(component: string): string {
-  return component.startsWith("$") ? t(component.slice(1)) : component;
+function matchesQuery(shortcut: ShortcutMetadata, needle: string): boolean {
+  const haystack = [
+    translate(shortcut.descriptionKey),
+    shortcut.condition ? translate(shortcut.condition.descriptionKey) : "",
+    ...shortcut.key.map(keyLabel),
+  ];
+  return haystack.some((text) => text.toLocaleLowerCase().includes(needle));
 }
+
+const groups = computed<ShortcutGroupView[]>(() => {
+  const needle = query.value.trim().toLocaleLowerCase();
+  return shortcuts.value
+    .map((group) => ({
+      key: group.component,
+      title: groupText(group.component, "title"),
+      description: groupText(group.component, "description"),
+      shortcuts: group.shortcuts.filter(
+        (shortcut) => !needle || matchesQuery(shortcut, needle),
+      ),
+    }))
+    .filter((group) => group.shortcuts.length > 0);
+});
+
+const shortcutCount = computed(() =>
+  shortcuts.value.reduce((total, group) => total + group.shortcuts.length, 0),
+);
+
+const detectedLabel = computed(() =>
+  isMac.value
+    ? t("page.settings.shortcuts.os_mac")
+    : t("page.settings.shortcuts.os_other"),
+);
 </script>
 
+<!-- Rendered on the server too: the list is static, and the platform comes
+     from the cookie both sides read, so only the key labels can change once
+     the browser has detected its own layout. -->
 <template>
-  <DmsClientOnly>
-    <div class="space-y-5 pb-16">
-      <DmsCard
-        v-for="(componentShortcuts, componentIndex) in sortedShortcuts"
-        :key="componentIndex"
-        as="section"
-        :padded="false"
-        class="overflow-hidden"
-      >
-        <div class="border-default flex items-center gap-3 border-b px-5 py-4">
-          <span
-            class="bg-primary/10 ring-primary/20 text-primary flex size-[34px] shrink-0 items-center justify-center rounded-md ring"
-          >
-            <UIcon
-              :name="groupIcon(componentShortcuts.component)"
-              class="size-[17px]"
-            />
-          </span>
-          <h2 class="text-highlighted text-[17px] font-semibold tracking-tight">
-            {{ groupTitle(componentShortcuts.component) }}
-          </h2>
-        </div>
-
-        <div class="p-2">
-          <div
-            v-for="(shortcut, shortcutIndex) in componentShortcuts.shortcuts"
-            :key="shortcutIndex"
-            class="hover:bg-default flex items-center justify-between gap-4 rounded-md px-4 py-3.5 transition-colors"
-            :class="{ 'border-muted border-t': shortcutIndex > 0 }"
-          >
-            <span class="text-muted text-sm">
-              {{ attemptTranslation(shortcut.descriptionKey) }}
-            </span>
-
-            <KeyboardShortcut :keys="shortcut.key.map(attemptTranslation)" />
-          </div>
-        </div>
-      </DmsCard>
+  <div>
+    <div class="mb-7 flex flex-wrap items-center gap-x-4 gap-y-2">
+      <!-- "/" stays with the settings menu search (SettingsNav): this page's
+        own search takes ⌘ / or Ctrl /, its hint drawn for the layout picked
+        in the header. -->
+      <DmsSearchInput
+        id="shortcuts-search"
+        v-model="query"
+        :placeholder="t('page.settings.shortcuts.search_placeholder')"
+        shortcut="page"
+        :hint-platform="platform"
+        class="w-full max-w-[420px]"
+      />
+      <span class="text-muted inline-flex items-center gap-1.5 text-xs">
+        <UIcon name="i-ph-info" class="size-3.5 shrink-0" />
+        {{
+          t("page.settings.shortcuts.detected", {
+            os: detectedLabel,
+            count: shortcutCount,
+            groups: shortcuts.length,
+          })
+        }}
+      </span>
     </div>
 
-    <template #fallback>
-      <div class="space-y-5 pb-16">
-        <DmsCard
-          v-for="i in SKELETON_SECTION_COUNT"
-          :key="i"
-          as="section"
-          :padded="false"
-          class="overflow-hidden"
+    <DmsSection
+      v-for="group in groups"
+      :key="group.key"
+      :title="group.title"
+      :description="group.description"
+    >
+      <template #badge>
+        <span
+          :class="[
+            MONO_CHIP_CLASS,
+            'bg-elevated text-dimmed text-[10.5px] font-semibold',
+          ]"
         >
-          <div
-            class="border-default flex items-center gap-3 border-b px-5 py-4"
-          >
-            <USkeleton class="size-[34px] rounded-md" />
-            <USkeleton class="h-5 w-28" />
-          </div>
-          <div class="space-y-2 p-2">
-            <USkeleton class="h-11 w-full rounded-md" />
-            <USkeleton class="h-11 w-full rounded-md" />
-          </div>
-        </DmsCard>
-      </div>
-    </template>
-  </DmsClientOnly>
+          {{ group.shortcuts.length }}
+        </span>
+      </template>
+
+      <DmsFieldRow
+        v-for="(shortcut, index) in group.shortcuts"
+        :key="`${group.key}-${index}`"
+        :label="translate(shortcut.descriptionKey)"
+        :description="
+          shortcut.condition
+            ? translate(shortcut.condition.descriptionKey)
+            : undefined
+        "
+      >
+        <KeyboardShortcut :keys="shortcut.key.map(keyLabel)" />
+      </DmsFieldRow>
+    </DmsSection>
+
+    <p v-if="query && groups.length === 0" class="text-muted text-[13px]">
+      {{ t("page.settings.shortcuts.no_results") }}
+    </p>
+  </div>
 </template>

package/frontend-vue/layers/dms-layout/app/emails/EmailChangeNotice.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import { emailStyles } from "./components/index";
+
+defineProps<{
+  userName: string;
+  newEmail: string;
+}>();
+</script>
+
+<template>
+  <EmailLayout title="Your sign-in email is being changed">
+    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+
+    <EText :style="emailStyles.text">
+      Someone signed in to your account asked to change its sign-in email to
+      {{ newEmail }}. The change takes effect once that address is confirmed.
+    </EText>
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        If this wasn't you, change your password now and sign out the other
+        sessions in Security: your account keeps this address until the new
+        one is confirmed.
+      </EText>
+    </template>
+  </EmailLayout>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/EmailChangeVerification.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import EmailOTP from "./components/EmailOTP.vue";
+import { emailStyles } from "./components/index";
+
+defineProps<{
+  userName: string;
+  newEmail: string;
+  code: string;
+  expiresIn: string;
+}>();
+</script>
+
+<template>
+  <EmailLayout title="Confirm your new sign-in email">
+    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+
+    <EText :style="emailStyles.text">
+      Enter the code below to make {{ newEmail }} the sign-in email of your
+      account:
+    </EText>
+
+    <EmailOTP :code="code" :expires-in="expiresIn" />
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        If you didn't ask for this change, you can safely ignore this email:
+        your account keeps its current address.
+      </EText>
+    </template>
+  </EmailLayout>
+</template>