@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/tests/security-email-panel.test.ts

@@ -0,0 +1,378 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watch,
+  type App,
+} from "vue";
+
+const overview = ref({
+  email: "admin@example.com",
+  isValidated: true,
+  hasPassword: true,
+});
+const refresh = vi.fn(async () => {});
+const refreshSession = vi.fn(async () => {});
+const authFetch = vi.fn();
+const addToast = vi.fn();
+
+// The leave guard needs the app (router, confirm dialog): the dirty state only.
+vi.mock(
+  "#dms-ui/app/composables/unsaved-changes/useUnsavedChanges",
+  async () => {
+    const { computed, toValue } = await import("vue");
+    return {
+      useUnsavedChanges: (options: { dirty: () => boolean }) => ({
+        isDirty: computed(() => !!toValue(options.dirty)),
+        confirmLeave: async () => true,
+      }),
+    };
+  },
+);
+
+vi.mock(
+  "../layers/dms-layout/app/build/composables/settings/security/useSecurityOverview",
+  () => ({
+    SECURITY_ENDPOINT: "/settings/user/security",
+    useSecurityOverview: () => ({ overview, refresh }),
+  }),
+);
+vi.mock(
+  "../layers/dms-layout/app/build/composables/settings/security/useSecurityFormat",
+  () => ({
+    useSecurityFormat: () => ({
+      errorMessage: (_error: unknown, fallback: string) => fallback,
+      errorCode: (error: { data?: unknown } | undefined) => error?.data,
+    }),
+  }),
+);
+
+// The code dialog stands for its confirm button, which sends a fixed code.
+vi.mock(
+  "../layers/dms-layout/app/build/components/pages/settings/security/SecurityCodeModal.vue",
+  async () => {
+    const { defineComponent, h } = await import("vue");
+    return {
+      default: defineComponent({
+        props: { open: Boolean },
+        emits: ["confirm"],
+        setup:
+          (props, { emit }) =>
+          () =>
+            props.open
+              ? h("button", {
+                  id: "email-code-confirm",
+                  type: "button",
+                  onClick: () => emit("confirm", "123456"),
+                })
+              : null,
+      }),
+    };
+  },
+);
+
+let app: App;
+let host: HTMLDivElement;
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", [slots.label?.(), slots.default?.(), slots.meta?.()]),
+});
+
+const Button = defineComponent({
+  props: { label: String, loading: Boolean },
+  setup: (props) => () => h("button", { type: "button" }, props.label),
+});
+
+const Input = defineComponent({
+  inheritAttrs: false,
+  props: { modelValue: String },
+  emits: ["update:modelValue"],
+  setup:
+    (props, { attrs, emit, slots }) =>
+    () =>
+      h("div", [
+        h("input", {
+          ...attrs,
+          value: props.modelValue,
+          onInput: (event: Event) =>
+            emit("update:modelValue", (event.target as HTMLInputElement).value),
+        }),
+        slots.trailing?.(),
+      ]),
+});
+
+const Collapsible = defineComponent({
+  props: { open: Boolean },
+  setup:
+    (props, { slots }) =>
+    () =>
+      h("div", props.open ? slots.content?.() : []),
+});
+
+const I18nT = defineComponent({
+  props: { keypath: String },
+  setup:
+    (props, { slots }) =>
+    () =>
+      h("span", { "data-note": "" }, [props.keypath, " ", slots.email?.()]),
+});
+
+async function flush(): Promise<void> {
+  for (let tick = 0; tick < 4; tick++) await nextTick();
+}
+
+async function mountEmail(): Promise<void> {
+  const { default: SecurityEmail } = await import(
+    "../layers/dms-layout/app/build/components/pages/settings/security/SecurityEmail.vue"
+  );
+  app = createApp(SecurityEmail);
+  for (const name of ["DmsSection", "DmsFieldRow", "DmsListRow", "UTooltip"]) {
+    app.component(name, Passthrough);
+  }
+  for (const name of ["UBadge", "USkeleton", "UIcon", "DmsLink"]) {
+    app.component(name, defineComponent({ setup: () => () => h("span") }));
+  }
+  app.component("UButton", Button);
+  app.component("UInput", Input);
+  app.component("UCollapsible", Collapsible);
+  app.component("I18nT", I18nT);
+  app.component("DmsBanner", (_, { slots }) => h("div", slots.description?.()));
+  app.mount(host);
+  await flush();
+}
+
+const trigger = () =>
+  host.querySelector<HTMLButtonElement>("#security-email-form-trigger");
+const form = () => host.querySelector<HTMLFormElement>("#security-email-form");
+const emailInput = () =>
+  host.querySelector<HTMLInputElement>("#security-new-email");
+const passwordInput = () =>
+  host.querySelector<HTMLInputElement>("#security-email-current-password");
+const submitButton = () =>
+  host.querySelector<HTMLButtonElement>("button[type='submit']");
+const cancelButton = () =>
+  [...host.querySelectorAll("button")].find(
+    (button) => button.textContent === "page.settings.security.cancel",
+  );
+
+async function type(input: HTMLInputElement | null, value: string) {
+  input!.value = value;
+  input!.dispatchEvent(new Event("input"));
+  await flush();
+}
+
+async function openPanel(): Promise<void> {
+  trigger()!.click();
+  await flush();
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("nextTick", nextTick);
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useToast", () => ({ add: addToast }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("useCurrentUser", () => ({ refresh: refreshSession }));
+  vi.stubGlobal("useTranslation", () => ({
+    processApiMessage: (message: string) => message,
+  }));
+  overview.value = {
+    email: "admin@example.com",
+    isValidated: true,
+    hasPassword: true,
+  };
+  authFetch.mockReset();
+  addToast.mockReset();
+  refresh.mockClear();
+  refreshSession.mockClear();
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("opens inline from a collapsed trigger and focuses the new email", async () => {
+  await mountEmail();
+  expect(form()).toBeNull();
+  expect(trigger()?.getAttribute("aria-expanded")).toBe("false");
+  expect(trigger()?.getAttribute("aria-controls")).toBe("security-email-form");
+
+  await openPanel();
+  expect(form()).not.toBeNull();
+  expect(trigger()).toBeNull();
+  expect(host.textContent).toContain("page.settings.security.email.editing");
+  expect(document.activeElement).toBe(emailInput());
+  expect(host.querySelector("[data-note]")?.textContent).toContain(
+    "page.settings.security.email.new_placeholder",
+  );
+});
+
+it("closes on Cancel and Escape, returns focus and resets the form", async () => {
+  await mountEmail();
+  await openPanel();
+  await type(emailInput(), "new@example.com");
+  cancelButton()!.click();
+  await flush();
+  expect(form()).toBeNull();
+  expect(document.activeElement).toBe(trigger());
+
+  await openPanel();
+  expect(emailInput()?.value).toBe("");
+  emailInput()!.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+  );
+  await flush();
+  expect(form()).toBeNull();
+  expect(document.activeElement).toBe(trigger());
+});
+
+it("validates the address inline once the field is left", async () => {
+  await mountEmail();
+  await openPanel();
+
+  await type(emailInput(), "not-an-email");
+  // Not flagged while typing, only once the field is left.
+  expect(host.querySelector("#security-new-email-error")).toBeNull();
+  emailInput()!.dispatchEvent(new Event("blur"));
+  await flush();
+  expect(host.querySelector("#security-new-email-error")?.textContent).toBe(
+    "page.settings.security.email.invalid",
+  );
+  expect(emailInput()?.getAttribute("aria-invalid")).toBe("true");
+  expect(emailInput()?.getAttribute("aria-describedby")).toBe(
+    "security-new-email-error",
+  );
+
+  await type(emailInput(), "Admin@Example.com");
+  expect(host.querySelector("#security-new-email-error")?.textContent).toBe(
+    "page.settings.security.errors.email_unchanged",
+  );
+
+  await type(emailInput(), "new@example.com");
+  expect(host.querySelector("#security-new-email-error")).toBeNull();
+});
+
+it("flags every empty field on submit, focuses the first and sends nothing", async () => {
+  await mountEmail();
+  await openPanel();
+  // Nothing typed, nothing to submit: only Cancel shows.
+  expect(submitButton()).toBeFalsy();
+  expect(host.querySelector("#security-new-email-error")).toBeNull();
+
+  form()!.dispatchEvent(new Event("submit"));
+  await flush();
+  expect(authFetch).not.toHaveBeenCalled();
+  expect(host.querySelector("#security-new-email-error")?.textContent).toBe(
+    "$dms.field_errors.required",
+  );
+  expect(
+    host.querySelector("#security-email-current-password-error")?.textContent,
+  ).toBe("$dms.field_errors.required");
+  expect(emailInput()?.getAttribute("aria-invalid")).toBe("true");
+  expect(document.activeElement).toBe(emailInput());
+
+  // Each message goes away once its field is filled.
+  await type(emailInput(), "new@example.com");
+  expect(submitButton()).toBeTruthy();
+  expect(host.querySelector("#security-new-email-error")).toBeNull();
+  form()!.dispatchEvent(new Event("submit"));
+  await flush();
+  expect(document.activeElement).toBe(passwordInput());
+  await type(passwordInput(), "secret");
+  expect(
+    host.querySelector("#security-email-current-password-error"),
+  ).toBeNull();
+});
+
+it("posts the new address with the current password, then asks for the code", async () => {
+  authFetch.mockResolvedValue({ pendingEmail: "new@example.com" });
+  await mountEmail();
+  await openPanel();
+  await type(emailInput(), "  new@example.com ");
+  await type(passwordInput(), "secret");
+  form()!.dispatchEvent(new Event("submit"));
+  await flush();
+
+  expect(authFetch).toHaveBeenCalledWith("/settings/user/security/email", {
+    method: "POST",
+    body: { email: "new@example.com", currentPassword: "secret" },
+  });
+  expect(addToast).toHaveBeenCalledWith({
+    title: "page.settings.security.email.code_sent",
+    color: "success",
+  });
+  expect(refresh).toHaveBeenCalled();
+  expect(refreshSession).not.toHaveBeenCalled();
+  expect(form()).toBeNull();
+  expect(host.querySelector("#email-code-confirm")).not.toBeNull();
+});
+
+it("moves to the new address once its code is confirmed", async () => {
+  authFetch.mockResolvedValue({ pendingEmail: "new@example.com" });
+  await mountEmail();
+  await openPanel();
+  await type(emailInput(), "new@example.com");
+  await type(passwordInput(), "secret");
+  form()!.dispatchEvent(new Event("submit"));
+  await flush();
+  addToast.mockReset();
+
+  host.querySelector<HTMLButtonElement>("#email-code-confirm")!.click();
+  await flush();
+
+  expect(authFetch).toHaveBeenLastCalledWith(
+    "/settings/user/security/email/confirm",
+    { method: "POST", body: { code: "123456" } },
+  );
+  expect(addToast).toHaveBeenCalledWith({
+    title: "page.settings.security.email.updated",
+    color: "success",
+  });
+  expect(refreshSession).toHaveBeenCalled();
+  expect(host.querySelector("#email-code-confirm")).toBeNull();
+});
+
+it("shows a wrong current password under its field, without a toast", async () => {
+  authFetch.mockRejectedValue({
+    statusCode: 400,
+    data: "error.invalid_current_password",
+  });
+  await mountEmail();
+  await openPanel();
+  await type(emailInput(), "new@example.com");
+  await type(passwordInput(), "wrong");
+  form()!.dispatchEvent(new Event("submit"));
+  await flush();
+
+  expect(form()).not.toBeNull();
+  expect(
+    host.querySelector("#security-email-current-password-error")?.textContent,
+  ).toBe("page.settings.security.errors.invalid_current_password");
+  expect(document.activeElement).toBe(passwordInput());
+  expect(addToast).not.toHaveBeenCalled();
+
+  await type(passwordInput(), "wrong2");
+  expect(
+    host.querySelector("#security-email-current-password-error"),
+  ).toBeNull();
+});
+
+it("keeps the trigger disabled for accounts without a password", async () => {
+  overview.value = { ...overview.value, hasPassword: false };
+  await mountEmail();
+  expect(trigger()?.disabled).toBe(true);
+});

package/frontend-vue/tests/security-password-modal.test.ts

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import {
+  type App,
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  watch,
+} from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+// The password dialog asked before a two-factor method is added: it sends the
+// password once typed, flags an empty one, and shows the API's refusal.
+
+const FIELD_ID = "security-confirm-current-password";
+
+let app: App;
+let host: HTMLDivElement;
+const confirmed: string[] = [];
+const refusal = ref<string>();
+
+const Passthrough = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", [slots.header?.(), slots.body?.(), slots.default?.()]),
+});
+
+const Input = defineComponent({
+  inheritAttrs: false,
+  props: { modelValue: String },
+  emits: ["update:modelValue"],
+  setup:
+    (props, { attrs, emit }) =>
+    () =>
+      h("input", {
+        ...attrs,
+        value: props.modelValue,
+        onInput: (event: Event) =>
+          emit("update:modelValue", (event.target as HTMLInputElement).value),
+      }),
+});
+
+async function flush(): Promise<void> {
+  for (let tick = 0; tick < 4; tick++) await nextTick();
+}
+
+const input = () => host.querySelector<HTMLInputElement>(`#${FIELD_ID}`)!;
+const errorText = () =>
+  host.querySelector(`#${FIELD_ID}-error`)?.textContent?.trim();
+
+async function submit(): Promise<void> {
+  host.querySelector("form")!.dispatchEvent(new Event("submit"));
+  await flush();
+}
+
+async function mount(): Promise<void> {
+  const { default: SecurityPasswordModal } = await import(
+    "../layers/dms-layout/app/build/components/pages/settings/security/SecurityPasswordModal.vue"
+  );
+  app = createApp(() =>
+    h(SecurityPasswordModal, {
+      open: true,
+      error: refusal.value,
+      "onUpdate:error": (value: string | undefined) => (refusal.value = value),
+      title: "Add authenticator",
+      description: "Confirm your password",
+      icon: "i-ph-shield-check",
+      confirmLabel: "Continue",
+      onConfirm: (password: string) => confirmed.push(password),
+    }),
+  );
+  for (const name of ["UModal", "DmsIconWell", "UKbd", "UButton", "UIcon"]) {
+    app.component(name, Passthrough);
+  }
+  app.component("DmsLink", Passthrough);
+  app.component("UInput", Input);
+  app.mount(host);
+  await flush();
+}
+
+beforeEach(() => {
+  confirmed.length = 0;
+  refusal.value = undefined;
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processApiMessage: (message: string) => message,
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("flags an empty password and sends nothing", async () => {
+  await mount();
+  await submit();
+  expect(confirmed).toEqual([]);
+  expect(errorText()).toBe("$dms.field_errors.required");
+});
+
+it("sends the typed password", async () => {
+  await mount();
+  input().value = "Current1!";
+  input().dispatchEvent(new Event("input"));
+  await submit();
+  expect(confirmed).toEqual(["Current1!"]);
+});
+
+it("shows the API's refusal under the field, until the password changes", async () => {
+  await mount();
+  refusal.value = "Wrong password";
+  await flush();
+  expect(errorText()).toBe("Wrong password");
+  input().value = "Other1!";
+  input().dispatchEvent(new Event("input"));
+  await flush();
+  expect(errorText()).toBeUndefined();
+});