[6.x] Modernize elevated session confirmation

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Updated elevated session prompts to use the modern control panel frontend while preserving the legacy JavaScript APIs.
+- Login attempts are now rate limited.
 - Added `Illuminate\Contracts\Translation\HasLocalePreference` support to user elements, allowing Laravel notifications to use users’ Language preferences. ([#19228](https://github.com/craftcms/cms/pull/19228))
 - Fixed a bug where site routes weren't being registered for each localized site value.
 - Fixed a bug where POST requests to the `loginPath` weren’t being handled properly. ([#19220](https://github.com/craftcms/cms/pull/19220))

composer.json

@@ -142,7 +142,10 @@
     ],
     "clear": "@php vendor/bin/testbench package:purge-skeleton --ansi",
     "prepare": "@php vendor/bin/testbench package:discover --ansi",
-    "build": "@php vendor/bin/testbench workbench:build --ansi",
+    "build": [
+      "@php vendor/bin/testbench package:create-sqlite-db --ansi",
+      "@php vendor/bin/testbench workbench:build --ansi"
+    ],
     "serve": [
       "Composer\\Config::disableProcessTimeout",
       "@php vendor/bin/testbench package:sync-skeleton --ansi",

packages/craftcms-legacy/cp/src/Craft.js

@@ -61,8 +61,6 @@ import './js/ElementDeletionManager.js';
 import './js/ElementEditor.js';
 import './js/ElementFieldSettings.js';
 import './js/ElementTableSorter.js';
-import './js/ElevatedSessionForm.js';
-import './js/ElevatedSessionManager.js';
 import './js/EntryIndex.js';
 import './js/EntrySelectInput.js';
 import './js/EntryTypeSelectInput.js';

resources/js/common/layouts/AppLayout.vue

@@ -15,6 +15,7 @@
   import SystemInfo from '@/common/components/SystemInfo.vue';
   import UserMenu from '@/common/components/UserMenu.vue';
   import ErrorSummary from '@/common/form/ErrorSummary.vue';
+  import ElevatedSessionHost from '@/modules/auth/elevated-session/ElevatedSessionHost.vue';
   import {useActionRedirect} from '@/common/composables/useActionRedirect';
   import {useAnnouncer} from '@/common/composables/useAnnouncer';
   import {useAppendHtml} from '@/common/composables/useAppendHtml';
@@ -396,6 +397,7 @@
   </div>
 
   <DebugPanel v-if="debug" :data="debug" />
+  <ElevatedSessionHost />
 </template>
 
 <style scoped lang="css">

resources/js/common/types/globals.d.ts

@@ -97,7 +97,7 @@ interface CraftStatic {
   IntervalManager: IntervalManagerInterface;
   t(message: string, params?: object, category?: string): string;
   sendActionRequest(method: string, action: string, options?: object): Promise;
-  initUiElements($container: JQuery): void;
+  initUiElements(container: Element | JQuery): void;
   createElementSelectorModal(
     elementType: string,
     settings?: ElementSelectorModalSettings

resources/js/cp.ts

@@ -9,6 +9,7 @@ import './modules/navigation/components/cp-queue-indicator.js';
  */
 import './modules/sortable-checkbox-select';
 import './modules/listbox';
+import './modules/auth/elevated-session';
 import './modules/field-layout-designer';
 import './modules/editable-table';
 import './modules/generated-fields';

resources/js/legacy.ts

@@ -7,6 +7,7 @@ import './modules/auth/components/set-password/set-password-form.js';
 import './modules/auth/components/verify-email/verify-email-form.js';
 import './modules/auth/components/totp/totp-form.js';
 import './modules/auth/components/recovery-codes/recovery-code-form.js';
+import {mountElevatedSessionHost} from './modules/auth/elevated-session';
 
 import './modules/listbox/index';
 import './modules/field-layout-designer/index';
@@ -17,6 +18,8 @@ const {default: Cp} = await import('./bootstrap/cp.js');
 
 window.Cp = Cp;
 
+mountElevatedSessionHost();
+
 /**
  * Components - dynamically imported after Craft is initialized
  */

resources/js/modules/auth/components/login/login-form.ts

@@ -84,6 +84,16 @@ export default class CraftLoginForm extends LitElement {
     }
   }
 
+  override focus(options?: FocusOptions): void {
+    void this.updateComplete.then(() => {
+      const input = this.staticEmail
+        ? this._passwordInput
+        : (this._usernameInput ?? this._passwordInput);
+
+      input?.focus(options);
+    });
+  }
+
   #usernameLabel() {
     return this.useEmailAsUsername ? t('Email') : t('Username or Email');
   }

resources/js/modules/auth/elevated-session/ElevatedSessionHost.test.ts

@@ -0,0 +1,96 @@
+import {createApp, nextTick} from 'vue';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+const manager = vi.hoisted(() => ({
+  state: {
+    active: true,
+    checking: false,
+    loginName: 'admin@example.com',
+    alternativeLoginMethods: null,
+  },
+  cancel: vi.fn(),
+  confirm: vi.fn(),
+}));
+
+vi.mock('./manager', async () => {
+  const {reactive, readonly} = await import('vue');
+
+  return {
+    elevatedSessionManager: {
+      state: readonly(reactive(manager.state)),
+      cancel: manager.cancel,
+      confirm: manager.confirm,
+    },
+  };
+});
+
+vi.mock('@craftcms/cp', () => ({
+  ConfigService: {
+    getInstance: () => ({
+      getCpUrl: (path: string) => `https://example.test/admin/${path}`,
+      get: (key: string, fallback: unknown) =>
+        key === 'useEmailAsUsername' ? true : fallback,
+    }),
+  },
+}));
+
+vi.mock('@/common/components/Modal.vue', () => ({
+  default: {
+    props: {isActive: Boolean},
+    emits: ['close', 'opened'],
+    template:
+      '<div v-if="isActive"><button class="overlay" @click="$emit(\'close\')">Close</button><slot /></div>',
+  },
+}));
+
+vi.mock('@/modules/auth/components/login/login-form.js', () => ({}));
+
+vi.mock('@/common/components/Pane.vue', () => ({
+  default: {template: '<div><slot /></div>'},
+}));
+
+vi.mock('@/common/components/HtmlFragmentRenderer.vue', () => ({
+  default: {template: '<div></div>'},
+}));
+
+import ElevatedSessionHost from './ElevatedSessionHost.vue';
+
+describe('ElevatedSessionHost', () => {
+  let app: ReturnType<typeof createApp>;
+  let container: HTMLElement;
+
+  beforeEach(async () => {
+    manager.cancel.mockClear();
+    manager.confirm.mockClear();
+    container = document.createElement('div');
+    document.body.append(container);
+    app = createApp(ElevatedSessionHost);
+    app.mount(container);
+    await nextTick();
+  });
+
+  afterEach(() => {
+    app.unmount();
+    container.remove();
+  });
+
+  it('renders the server-selected identity and confirms login success', () => {
+    const loginForm = container.querySelector('craft-login-form')!;
+    const event = new CustomEvent('craft:login:success', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    loginForm.dispatchEvent(event);
+
+    expect(loginForm.getAttribute('static-email')).toBe('admin@example.com');
+    expect(event.defaultPrevented).toBe(true);
+    expect(manager.confirm).toHaveBeenCalledOnce();
+  });
+
+  it('cancels when the modal requests dismissal', () => {
+    container.querySelector<HTMLButtonElement>('.overlay')!.click();
+
+    expect(manager.cancel).toHaveBeenCalledOnce();
+  });
+});

resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+  import {ConfigService} from '@craftcms/cp';
+  import {releaseFocusWithin, trapFocusWithin} from '@craftcms/garnish';
+  import {t} from '@craftcms/cp/utilities/translate';
+  import {nextTick, onBeforeUnmount, watch} from 'vue';
+  import HtmlFragmentRenderer from '@/common/components/HtmlFragmentRenderer.vue';
+  import Modal from '@/common/components/Modal.vue';
+  import Pane from '@/common/components/Pane.vue';
+  import {elevatedSessionManager} from './manager';
+  import '@/modules/auth/components/login/login-form.js';
+
+  const {state} = elevatedSessionManager;
+  let previouslyFocused: HTMLElement | null = null;
+  let dialog: Element | null = null;
+
+  watch(
+    () => state.active,
+    async (active) => {
+      if (active) {
+        previouslyFocused = document.activeElement as HTMLElement | null;
+        await nextTick();
+        document
+          .querySelector<HTMLElement>(
+            '[data-elevated-session-dialog] craft-login-form'
+          )
+          ?.focus();
+      } else {
+        if (dialog) {
+          releaseFocusWithin(dialog);
+          dialog = null;
+        }
+        previouslyFocused?.focus();
+        previouslyFocused = null;
+      }
+    }
+  );
+
+  onBeforeUnmount(() => {
+    if (state.active) {
+      elevatedSessionManager.cancel();
+    }
+  });
+
+  function handleSuccess(event: Event): void {
+    event.preventDefault();
+    elevatedSessionManager.confirm();
+  }
+
+  function close(): void {
+    if (state.active) {
+      elevatedSessionManager.cancel();
+    }
+  }
+
+  function opened(element: Element): void {
+    dialog = element;
+    trapFocusWithin(element);
+  }
+</script>
+
+<template>
+  <Modal :is-active="state.active" width="md" @close="close" @opened="opened">
+    <Pane
+      data-elevated-session-dialog
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="elevated-session-title"
+      aria-describedby="elevated-session-description"
+      class="p-6"
+    >
+      <div class="flex items-start gap-4 mb-5">
+        <div>
+          <h1 id="elevated-session-title" class="text-xl">
+            {{ t('Confirm your identity.') }}
+          </h1>
+          <p id="elevated-session-description">
+            {{ t('You must reverify your identity before proceeding.') }}
+          </p>
+        </div>
+        <craft-button
+          icon
+          appearance="plain"
+          type="button"
+          class="ml-auto"
+          @click="close"
+        >
+          <craft-icon name="xmark" :label="t('Cancel')"></craft-icon>
+        </craft-button>
+      </div>
+
+      <craft-login-form
+        tabindex="0"
+        :action="ConfigService.getInstance().getCpUrl('login')"
+        :static-email="state.loginName"
+        :use-email-as-username="
+          ConfigService.getInstance().get('useEmailAsUsername', false)
+        "
+        @craft:login:success="handleSuccess"
+      >
+        <HtmlFragmentRenderer
+          v-if="state.alternativeLoginMethods"
+          slot="alternative-methods"
+          :fragment="state.alternativeLoginMethods"
+        />
+      </craft-login-form>
+    </Pane>
+  </Modal>
+</template>

resources/js/modules/auth/elevated-session/elevated-session-form.test.ts

@@ -0,0 +1,66 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {ElevatedSessionForm} from './elevated-session-form';
+
+describe('ElevatedSessionForm', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('only requires confirmation when a tracked input changes', () => {
+    document.body.innerHTML = `
+      <form id="settings">
+        <input name="name" value="Original">
+        <input class="permission" name="permissions[]" value="edit">
+      </form>
+    `;
+    const form = document.querySelector<HTMLFormElement>('#settings')!;
+    const elevatedForm = new ElevatedSessionForm(form, [
+      '[name="name"]',
+      '.permission',
+    ]);
+
+    expect(elevatedForm.inputsChanged()).toBe(false);
+    form.querySelector<HTMLInputElement>('[name="name"]')!.value = 'Changed';
+    expect(elevatedForm.inputsChanged()).toBe(true);
+  });
+
+  it('detects inputs added after initialization', () => {
+    document.body.innerHTML = '<form id="settings"></form>';
+    const form = document.querySelector<HTMLFormElement>('#settings')!;
+    const elevatedForm = new ElevatedSessionForm(form, '.permission');
+
+    expect(elevatedForm.inputsChanged()).toBe(false);
+    form.insertAdjacentHTML(
+      'beforeend',
+      '<input class="permission" name="permissions[]" value="edit">'
+    );
+    expect(elevatedForm.inputsChanged()).toBe(true);
+  });
+
+  it('resubmits with the original submitter after confirmation', async () => {
+    document.body.innerHTML = `
+      <form id="settings">
+        <input name="name" value="Original">
+        <button type="submit" name="redirect" value="1">Save</button>
+      </form>
+    `;
+    const form = document.querySelector<HTMLFormElement>('#settings')!;
+    const button = form.querySelector<HTMLButtonElement>('button')!;
+    const manager = {require: vi.fn().mockResolvedValue(true)};
+    new ElevatedSessionForm(form, '[name="name"]', manager);
+    const submitted = vi.fn();
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      submitted((event as SubmitEvent).submitter);
+    });
+    form.querySelector<HTMLInputElement>('[name="name"]')!.value = 'Changed';
+
+    form.requestSubmit(button);
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(manager.require).toHaveBeenCalledOnce();
+    expect(submitted).toHaveBeenCalledOnce();
+    expect(submitted).toHaveBeenCalledWith(button);
+  });
+});