From f581b79dab1c5b8048ab621f0b37a88fb1e29d4d Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Fri, 10 Jul 2026 20:33:00 +0200
Subject: [PATCH 1/8] Fix Testbench workbench serving

---
 composer.json          | 5 ++++-
 testbench.yaml         | 2 +-
 workbench/.env.example | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/composer.json b/composer.json
index b7ca4051a62..9f8968bf1a1 100644
--- a/composer.json
+++ b/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",
diff --git a/testbench.yaml b/testbench.yaml
index bd4f20c94da..f61b1625f09 100644
--- a/testbench.yaml
+++ b/testbench.yaml
@@ -18,7 +18,7 @@ workbench:
   install: false # We run the Craft install in DatabaseSeeder
   user: 1
   sync:
-    - from: resources
+    - from: cms-assets/resources
       to: public/vendor/craft
     - from: storage
       to: workbench/storage
diff --git a/workbench/.env.example b/workbench/.env.example
index 45a02fd3a90..20eee2ace41 100644
--- a/workbench/.env.example
+++ b/workbench/.env.example
@@ -7,7 +7,7 @@ APP_KEY=base64:6BDzvwO4hrN7Twv6/gaQ6oZMB/CvpUArZXho189U75E=
 APP_URL=http://127.0.0.1:8000
 
 DB_CONNECTION=sqlite
-DB_DATABASE=workbench/database/database.sqlite
+SESSION_DRIVER=database
 
 FROM_EMAIL_NAME="Craft CMS"
 FROM_EMAIL_ADDRESS=info@craftcms.com

From 51937e5b3a2a745f636798ccdfc7a520746690b6 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Fri, 10 Jul 2026 20:33:19 +0200
Subject: [PATCH 2/8] Modernize elevated session confirmation

---
 CHANGELOG.md                                  |   5 +
 packages/craftcms-legacy/cp/src/Craft.js      |   2 -
 .../components/HtmlFragmentRenderer.vue       |   8 +
 resources/js/common/layouts/AppLayout.vue     |   2 +
 resources/js/common/types/globals.d.ts        |   2 +-
 resources/js/cp.ts                            |   1 +
 resources/js/legacy.ts                        |   3 +
 .../auth/components/login/login-form.ts       |  10 ++
 .../ElevatedSessionHost.test.ts               |  96 ++++++++++
 .../elevated-session/ElevatedSessionHost.vue  | 113 ++++++++++++
 .../elevated-session-form.test.ts             |  66 +++++++
 .../elevated-session/elevated-session-form.ts | 170 ++++++++++++++++++
 .../auth/elevated-session/index.test.ts       |  41 +++++
 .../js/modules/auth/elevated-session/index.ts |  71 ++++++++
 .../auth/elevated-session/manager.test.ts     | 142 +++++++++++++++
 .../modules/auth/elevated-session/manager.ts  | 166 +++++++++++++++++
 .../settings/composables/useSettingsSave.ts   |  75 ++++++--
 resources/js/pages/graphql/schemas/Edit.vue   |   8 +-
 resources/js/pages/graphql/tokens/Edit.vue    |   7 +-
 .../js/pages/settings/users/groups/Edit.vue   |   9 +-
 resources/js/pages/users/Permissions.vue      |  14 +-
 resources/js/pages/users/SignInProviders.vue  |  55 ++++--
 routes/actions.php                            |   3 +
 routes/cp.php                                 |   5 +-
 src/Auth/Concerns/ConfirmsPasswords.php       |  13 +-
 src/Auth/LoginRateLimiter.php                 |  29 +++
 src/Http/Controllers/Auth/LoginController.php |   7 +-
 .../Auth/SessionInfoController.php            |  63 +++++++
 .../Controllers/Gql/SchemasController.php     |  13 +-
 src/Http/Controllers/Gql/TokensController.php |  11 +-
 .../Settings/Users/UserGroupsController.php   |  11 --
 .../Users/PermissionsController.php           |  15 +-
 .../Users/SignInProvidersController.php       |  14 +-
 .../Middleware/RequireConfirmedPassword.php   |  21 +++
 src/Route/RouteServiceProvider.php            |  10 ++
 .../Auth/Concerns/ConfirmsPasswordsTest.php   |  21 ++-
 .../Controllers/Auth/LoginControllerTest.php  |  56 ++++++
 .../Auth/SessionInfoControllerTest.php        | 123 +++++++++++++
 .../User/SignInProvidersControllerTest.php    |  23 +--
 .../RequireConfirmedPasswordTest.php          |  39 ++++
 40 files changed, 1428 insertions(+), 115 deletions(-)
 create mode 100644 resources/js/modules/auth/elevated-session/ElevatedSessionHost.test.ts
 create mode 100644 resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
 create mode 100644 resources/js/modules/auth/elevated-session/elevated-session-form.test.ts
 create mode 100644 resources/js/modules/auth/elevated-session/elevated-session-form.ts
 create mode 100644 resources/js/modules/auth/elevated-session/index.test.ts
 create mode 100644 resources/js/modules/auth/elevated-session/index.ts
 create mode 100644 resources/js/modules/auth/elevated-session/manager.test.ts
 create mode 100644 resources/js/modules/auth/elevated-session/manager.ts
 create mode 100644 src/Auth/LoginRateLimiter.php
 create mode 100644 src/Http/Middleware/RequireConfirmedPassword.php
 create mode 100644 tests/Feature/Http/Middleware/RequireConfirmedPasswordTest.php

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11d9a9c8abc..c7e06ae291b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Release Notes for Craft CMS 6
 
+## Unreleased
+
+- Updated elevated session prompts to use the modern control panel frontend while preserving the legacy JavaScript APIs.
+- Login attempts are now rate limited.
+
 ## 6.0.0-alpha.11 - 2026-07-07
 
 - Users can now connect their accounts to one or more Socialite providers. ([#19202](https://github.com/craftcms/cms/pull/19202))
diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 8b3aac249fd..5278931ddab 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/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';
diff --git a/resources/js/common/components/HtmlFragmentRenderer.vue b/resources/js/common/components/HtmlFragmentRenderer.vue
index 3f193ce8e78..53dd9c50853 100644
--- a/resources/js/common/components/HtmlFragmentRenderer.vue
+++ b/resources/js/common/components/HtmlFragmentRenderer.vue
@@ -11,6 +11,10 @@
     fragment?: CraftCms.Cms.View.HtmlFragment | null;
   }>();
 
+  const emit = defineEmits<{
+    rendered: [element: HTMLElement];
+  }>();
+
   const container = ref<HTMLElement | null>(null);
   const disposers: AppendHtmlDisposer[] = [];
   let lastKey = '';
@@ -86,6 +90,10 @@
       ) {
         return;
       }
+
+      if (currentRunId === runId) {
+        emit('rendered', element);
+      }
     },
     {immediate: true}
   );
diff --git a/resources/js/common/layouts/AppLayout.vue b/resources/js/common/layouts/AppLayout.vue
index f4e28db29ab..b491cc15b2f 100644
--- a/resources/js/common/layouts/AppLayout.vue
+++ b/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">
diff --git a/resources/js/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index 2eadd64c9c2..09733e8f249 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/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
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 2a3abfbd943..79611757e0b 100644
--- a/resources/js/cp.ts
+++ b/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';
diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 3d5e7a5f7d4..6ed46a30e44 100644
--- a/resources/js/legacy.ts
+++ b/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
  */
diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index 7affe3fa43d..7ca6c4bcbdd 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/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');
   }
diff --git a/resources/js/modules/auth/elevated-session/ElevatedSessionHost.test.ts b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.test.ts
new file mode 100644
index 00000000000..f3268057c6a
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
new file mode 100644
index 00000000000..457b8c5d05f
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
@@ -0,0 +1,113 @@
+<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);
+  }
+
+  function initializeAlternativeLoginMethods(element: HTMLElement): void {
+    Craft.initUiElements(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"
+          @rendered="initializeAlternativeLoginMethods"
+        />
+      </craft-login-form>
+    </Pane>
+  </Modal>
+</template>
diff --git a/resources/js/modules/auth/elevated-session/elevated-session-form.test.ts b/resources/js/modules/auth/elevated-session/elevated-session-form.test.ts
new file mode 100644
index 00000000000..bd0e64c8783
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/resources/js/modules/auth/elevated-session/elevated-session-form.ts b/resources/js/modules/auth/elevated-session/elevated-session-form.ts
new file mode 100644
index 00000000000..32627e81cab
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/elevated-session-form.ts
@@ -0,0 +1,170 @@
+import {elevatedSessionManager} from './manager';
+
+type FormTarget = HTMLFormElement | string | ArrayLike<HTMLFormElement>;
+type InputTarget = Element | string | ArrayLike<Element>;
+type InputValue = string | string[] | null;
+
+function firstElement<T extends Element>(target: T | string | ArrayLike<T>): T {
+  const element =
+    typeof target === 'string'
+      ? document.querySelector<T>(target)
+      : target instanceof Element
+        ? target
+        : target[0];
+
+  if (!element) {
+    throw new Error('Unable to find the elevated-session form.');
+  }
+
+  return element;
+}
+
+function inputValue(input: Element): InputValue {
+  const currentInput = passwordInput(input);
+
+  if (currentInput instanceof HTMLInputElement) {
+    if (
+      ['checkbox', 'radio'].includes(currentInput.type) &&
+      !currentInput.checked
+    ) {
+      return null;
+    }
+
+    return currentInput.value;
+  }
+
+  if (currentInput instanceof HTMLTextAreaElement) {
+    return currentInput.value;
+  }
+
+  if (currentInput instanceof HTMLSelectElement) {
+    const values = Array.from(currentInput.selectedOptions, ({value}) => value);
+
+    if (!currentInput.multiple) {
+      return values.at(-1) ?? '';
+    }
+
+    return currentInput.name.endsWith('[]') ? values : (values.at(-1) ?? null);
+  }
+
+  return currentInput.getAttribute('value');
+}
+
+function passwordInput(input: Element): Element {
+  const jquery = (window as any).jQuery ?? (window as any).$;
+  const currentInput =
+    jquery?.(input).data?.('passwordInput')?.$currentInput?.[0];
+
+  return currentInput ?? input;
+}
+
+function valuesMatch(first: InputValue, second: InputValue): boolean {
+  return Array.isArray(first) || Array.isArray(second)
+    ? JSON.stringify(first) === JSON.stringify(second)
+    : first === second;
+}
+
+export class ElevatedSessionForm {
+  readonly form: HTMLFormElement;
+
+  private readonly inputSelectors: string[] = [];
+  private readonly inputs = new Map<Element, InputValue>();
+  private enabled = true;
+  private resuming = false;
+
+  constructor(
+    form: FormTarget,
+    inputTargets?: InputTarget | InputTarget[],
+    private readonly manager: Pick<
+      typeof elevatedSessionManager,
+      'require'
+    > = elevatedSessionManager
+  ) {
+    this.form = firstElement(form);
+
+    if (!(this.form instanceof HTMLFormElement)) {
+      throw new TypeError('ElevatedSessionForm requires a form element.');
+    }
+
+    if (inputTargets !== undefined) {
+      const targets = Array.isArray(inputTargets)
+        ? inputTargets
+        : [inputTargets];
+      targets.forEach((target) => this.track(target));
+    }
+
+    this.form.addEventListener('submit', this.handleSubmit);
+  }
+
+  inputsChanged(): boolean {
+    if (this.inputSelectors.length === 0 && this.inputs.size === 0) {
+      return true;
+    }
+
+    if (
+      this.inputSelectors.some((selector) =>
+        Array.from(this.form.querySelectorAll(selector)).some(
+          (input) => !this.inputs.has(input)
+        )
+      )
+    ) {
+      return true;
+    }
+
+    return Array.from(this.inputs).some(
+      ([input, value]) => !valuesMatch(inputValue(input), value)
+    );
+  }
+
+  disable(): void {
+    this.enabled = false;
+  }
+
+  enable(): void {
+    this.enabled = true;
+  }
+
+  destroy(): void {
+    this.form.removeEventListener('submit', this.handleSubmit);
+  }
+
+  private readonly handleSubmit = (event: SubmitEvent): void => {
+    if (!this.enabled || this.resuming) {
+      this.resuming = false;
+      return;
+    }
+
+    if (!this.inputsChanged()) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+
+    void this.manager.require().then((confirmed) => {
+      if (!confirmed) {
+        return;
+      }
+
+      this.resuming = true;
+      if (event.submitter instanceof HTMLElement) {
+        this.form.requestSubmit(event.submitter);
+      } else {
+        this.form.requestSubmit();
+      }
+    });
+  };
+
+  private track(target: InputTarget): void {
+    if (typeof target === 'string') {
+      this.inputSelectors.push(target);
+      this.form
+        .querySelectorAll(target)
+        .forEach((input) => this.inputs.set(input, inputValue(input)));
+      return;
+    }
+
+    const inputs = target instanceof Element ? [target] : Array.from(target);
+    inputs.forEach((input) => this.inputs.set(input, inputValue(input)));
+  }
+}
diff --git a/resources/js/modules/auth/elevated-session/index.test.ts b/resources/js/modules/auth/elevated-session/index.test.ts
new file mode 100644
index 00000000000..b20916b84f7
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/index.test.ts
@@ -0,0 +1,41 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {elevatedSessionManager} from './manager';
+import './index';
+
+describe('legacy elevated-session adapter', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('maps successful confirmation to the legacy callback', async () => {
+    vi.spyOn(elevatedSessionManager, 'require').mockResolvedValue(true);
+    const onSuccess = vi.fn();
+    const onCancel = vi.fn();
+
+    await (window as any).Craft.elevatedSessionManager.requireElevatedSession(
+      onSuccess,
+      onCancel,
+      20
+    );
+
+    expect(elevatedSessionManager.require).toHaveBeenCalledWith({
+      minimumRemainingSeconds: 20,
+    });
+    expect(onSuccess).toHaveBeenCalledOnce();
+    expect(onCancel).not.toHaveBeenCalled();
+  });
+
+  it('maps canceled confirmation to the legacy callback', async () => {
+    vi.spyOn(elevatedSessionManager, 'require').mockResolvedValue(false);
+    const onSuccess = vi.fn();
+    const onCancel = vi.fn();
+
+    await (window as any).Craft.elevatedSessionManager.requireElevatedSession(
+      onSuccess,
+      onCancel
+    );
+
+    expect(onSuccess).not.toHaveBeenCalled();
+    expect(onCancel).toHaveBeenCalledOnce();
+  });
+});
diff --git a/resources/js/modules/auth/elevated-session/index.ts b/resources/js/modules/auth/elevated-session/index.ts
new file mode 100644
index 00000000000..89533c71480
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/index.ts
@@ -0,0 +1,71 @@
+import {createApp} from 'vue';
+import ElevatedSessionHost from './ElevatedSessionHost.vue';
+import {ElevatedSessionForm} from './elevated-session-form';
+import {
+  elevatedSessionManager,
+  ElevatedSessionManager,
+  type ElevatedSessionOptions,
+} from './manager';
+
+class LegacyElevatedSessionManager {
+  static minSafeElevatedSessionTimeout = 5;
+
+  get fetchingTimeout(): boolean {
+    return elevatedSessionManager.state.checking;
+  }
+
+  async requireElevatedSession(
+    onSuccess: () => void,
+    onCancel?: () => void,
+    minimumRemainingSeconds = LegacyElevatedSessionManager.minSafeElevatedSessionTimeout
+  ): Promise<void> {
+    const confirmed = await elevatedSessionManager.require({
+      minimumRemainingSeconds,
+    });
+
+    if (confirmed) {
+      onSuccess();
+    } else {
+      onCancel?.();
+    }
+  }
+
+  showLoginModal(): void {
+    void elevatedSessionManager.require({force: true});
+  }
+}
+
+const craft = (window as any).Craft ?? ((window as any).Craft = {});
+craft.ElevatedSessionManager = LegacyElevatedSessionManager;
+craft.elevatedSessionManager = new LegacyElevatedSessionManager();
+craft.ElevatedSessionForm = ElevatedSessionForm;
+
+export function mountElevatedSessionHost(): void {
+  if (document.querySelector('[data-elevated-session-host]')) {
+    return;
+  }
+
+  const host = document.createElement('div');
+  host.dataset.elevatedSessionHost = '';
+  document.body.append(host);
+  createApp(ElevatedSessionHost).mount(host);
+}
+
+export function usePasswordConfirmation() {
+  return {
+    require: (options?: ElevatedSessionOptions) =>
+      elevatedSessionManager.require(options),
+    run: <T>(
+      callback: () => T | Promise<T>,
+      options?: ElevatedSessionOptions
+    ) => elevatedSessionManager.run(callback, options),
+  };
+}
+
+export {
+  ElevatedSessionForm,
+  ElevatedSessionHost,
+  elevatedSessionManager,
+  ElevatedSessionManager,
+};
+export type {ElevatedSessionOptions};
diff --git a/resources/js/modules/auth/elevated-session/manager.test.ts b/resources/js/modules/auth/elevated-session/manager.test.ts
new file mode 100644
index 00000000000..7e04079a897
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/manager.test.ts
@@ -0,0 +1,142 @@
+import {describe, expect, it, vi} from 'vitest';
+import {ElevatedSessionManager} from './manager';
+
+describe('ElevatedSessionManager', () => {
+  it('uses the default minimum remaining time', async () => {
+    const request = vi.fn().mockResolvedValue({confirmed: true, timeout: 5});
+    const manager = new ElevatedSessionManager(request);
+
+    await expect(manager.require()).resolves.toBe(true);
+    expect(request).toHaveBeenCalledWith({
+      minimumRemainingSeconds: 5,
+      force: false,
+    });
+  });
+
+  it('coalesces confirmation checks using the highest minimum', async () => {
+    const request = vi.fn().mockResolvedValue({confirmed: true, timeout: 30});
+    const manager = new ElevatedSessionManager(request);
+
+    const first = manager.require({minimumRemainingSeconds: 10});
+    const second = manager.require({minimumRemainingSeconds: 30});
+
+    await expect(Promise.all([first, second])).resolves.toEqual([true, true]);
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(request).toHaveBeenCalledWith({
+      minimumRemainingSeconds: 30,
+      force: false,
+    });
+  });
+
+  it('rechecks when a stricter minimum arrives during a request', async () => {
+    let resolveFirst!: (response: {
+      confirmed: boolean;
+      timeout: number;
+    }) => void;
+    const firstResponse = new Promise<{confirmed: boolean; timeout: number}>(
+      (resolve) => {
+        resolveFirst = resolve;
+      }
+    );
+    const request = vi
+      .fn()
+      .mockReturnValueOnce(firstResponse)
+      .mockResolvedValueOnce({confirmed: true, timeout: 30});
+    const manager = new ElevatedSessionManager(request);
+
+    const first = manager.require({minimumRemainingSeconds: 10});
+    await Promise.resolve();
+    const second = manager.require({minimumRemainingSeconds: 30});
+    resolveFirst({confirmed: true, timeout: 10});
+
+    await expect(Promise.all([first, second])).resolves.toEqual([true, true]);
+    expect(request).toHaveBeenNthCalledWith(1, {
+      minimumRemainingSeconds: 10,
+      force: false,
+    });
+    expect(request).toHaveBeenNthCalledWith(2, {
+      minimumRemainingSeconds: 30,
+      force: false,
+    });
+  });
+
+  it('resolves every waiter when the prompt succeeds', async () => {
+    const manager = new ElevatedSessionManager(async () => ({
+      confirmed: false,
+      timeout: 0,
+      loginName: 'admin@example.com',
+      alternativeLoginMethods: null,
+    }));
+
+    const first = manager.require();
+    const second = manager.require();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(manager.state.active).toBe(true);
+    expect(manager.state.loginName).toBe('admin@example.com');
+    manager.confirm();
+
+    await expect(Promise.all([first, second])).resolves.toEqual([true, true]);
+  });
+
+  it('returns undefined without running the callback when canceled', async () => {
+    const manager = new ElevatedSessionManager(async () => ({
+      confirmed: false,
+      timeout: 0,
+      loginName: 'admin@example.com',
+    }));
+    const callback = vi.fn();
+    const result = manager.run(callback);
+    await Promise.resolve();
+    await Promise.resolve();
+    manager.cancel();
+
+    await expect(result).resolves.toBeUndefined();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('forces confirmation and retries once after a 423 response', async () => {
+    const request = vi
+      .fn()
+      .mockResolvedValueOnce({confirmed: true, timeout: 10})
+      .mockResolvedValueOnce({confirmed: true, timeout: 10});
+    const callback = vi
+      .fn()
+      .mockRejectedValueOnce({response: {status: 423}})
+      .mockResolvedValueOnce('saved');
+    const manager = new ElevatedSessionManager(request);
+
+    await expect(manager.run(callback)).resolves.toBe('saved');
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(request).toHaveBeenLastCalledWith({
+      minimumRemainingSeconds: 5,
+      force: true,
+    });
+  });
+
+  it('propagates a second 423 response', async () => {
+    const error = {response: {status: 423}};
+    const manager = new ElevatedSessionManager(async () => ({
+      confirmed: true,
+      timeout: 10,
+    }));
+
+    await expect(manager.run(async () => Promise.reject(error))).rejects.toBe(
+      error
+    );
+  });
+
+  it('propagates errors other than 423 without another check', async () => {
+    const request = vi
+      .fn()
+      .mockResolvedValue({confirmed: true, timeout: false});
+    const error = new Error('No connection');
+    const manager = new ElevatedSessionManager(request);
+
+    await expect(manager.run(async () => Promise.reject(error))).rejects.toBe(
+      error
+    );
+    expect(request).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/resources/js/modules/auth/elevated-session/manager.ts b/resources/js/modules/auth/elevated-session/manager.ts
new file mode 100644
index 00000000000..90d0915c6eb
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/manager.ts
@@ -0,0 +1,166 @@
+import {actionClient} from '@craftcms/cp';
+import {reactive, readonly, type DeepReadonly} from 'vue';
+
+export interface ElevatedSessionOptions {
+  minimumRemainingSeconds?: number;
+  force?: boolean;
+}
+
+export interface ElevatedSessionResponse {
+  confirmed: boolean;
+  timeout: number | false;
+  loginName?: string;
+  alternativeLoginMethods?: CraftCms.Cms.View.HtmlFragment | null;
+}
+
+export interface ElevatedSessionState {
+  active: boolean;
+  checking: boolean;
+  loginName: string;
+  alternativeLoginMethods: CraftCms.Cms.View.HtmlFragment | null;
+}
+
+export type ElevatedSessionRequest = (
+  options: Required<ElevatedSessionOptions>
+) => Promise<ElevatedSessionResponse>;
+
+const DEFAULT_MINIMUM_REMAINING_SECONDS = 5;
+
+async function requestConfirmation(
+  options: Required<ElevatedSessionOptions>
+): Promise<ElevatedSessionResponse> {
+  const {data} = await actionClient.post<ElevatedSessionResponse>(
+    'users/confirm-password',
+    options
+  );
+
+  return data;
+}
+
+export class ElevatedSessionManager {
+  readonly state: DeepReadonly<ElevatedSessionState>;
+
+  private readonly mutableState = reactive<ElevatedSessionState>({
+    active: false,
+    checking: false,
+    loginName: '',
+    alternativeLoginMethods: null,
+  });
+  private pendingMinimum = DEFAULT_MINIMUM_REMAINING_SECONDS;
+  private pendingForce = false;
+  private pendingConfirmation: Promise<boolean> | null = null;
+  private finishPrompt: ((confirmed: boolean) => void) | null = null;
+
+  constructor(
+    private readonly request: ElevatedSessionRequest = requestConfirmation
+  ) {
+    this.state = readonly(this.mutableState);
+  }
+
+  require(options: ElevatedSessionOptions = {}): Promise<boolean> {
+    this.pendingMinimum = Math.max(
+      this.pendingMinimum,
+      options.minimumRemainingSeconds ?? DEFAULT_MINIMUM_REMAINING_SECONDS
+    );
+    this.pendingForce ||= options.force ?? false;
+
+    this.pendingConfirmation ??= Promise.resolve()
+      .then(() => this.checkConfirmation())
+      .finally(() => {
+        this.pendingConfirmation = null;
+        this.pendingMinimum = DEFAULT_MINIMUM_REMAINING_SECONDS;
+        this.pendingForce = false;
+      });
+
+    return this.pendingConfirmation;
+  }
+
+  async run<T>(
+    callback: () => T | Promise<T>,
+    options: ElevatedSessionOptions = {}
+  ): Promise<T | undefined> {
+    if (!(await this.require(options))) {
+      return undefined;
+    }
+
+    try {
+      return await callback();
+    } catch (error) {
+      if (!isPasswordConfirmationError(error)) {
+        throw error;
+      }
+
+      if (!(await this.require({...options, force: true}))) {
+        return undefined;
+      }
+
+      return callback();
+    }
+  }
+
+  confirm(): void {
+    this.finish(true);
+  }
+
+  cancel(): void {
+    this.finish(false);
+  }
+
+  private async checkConfirmation(): Promise<boolean> {
+    this.mutableState.checking = true;
+
+    try {
+      const requestedMinimum = this.pendingMinimum;
+      const requestedForce = this.pendingForce;
+      const response = await this.request({
+        minimumRemainingSeconds: requestedMinimum,
+        force: requestedForce,
+      });
+
+      if (
+        response.confirmed &&
+        requestedForce === this.pendingForce &&
+        (response.timeout === false || response.timeout >= this.pendingMinimum)
+      ) {
+        return true;
+      }
+
+      if (response.confirmed) {
+        return this.checkConfirmation();
+      }
+
+      this.mutableState.loginName = response.loginName ?? '';
+      this.mutableState.alternativeLoginMethods =
+        response.alternativeLoginMethods ?? null;
+
+      return new Promise<boolean>((resolve) => {
+        this.finishPrompt = resolve;
+        this.mutableState.active = true;
+      });
+    } finally {
+      this.mutableState.checking = false;
+    }
+  }
+
+  private finish(confirmed: boolean): void {
+    if (!this.finishPrompt) {
+      return;
+    }
+
+    const resolve = this.finishPrompt;
+    this.finishPrompt = null;
+    this.mutableState.active = false;
+    resolve(confirmed);
+  }
+}
+
+export function isPasswordConfirmationError(error: unknown): boolean {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'response' in error &&
+    (error as {response?: {status?: number}}).response?.status === 423
+  );
+}
+
+export const elevatedSessionManager = new ElevatedSessionManager();
diff --git a/resources/js/modules/settings/composables/useSettingsSave.ts b/resources/js/modules/settings/composables/useSettingsSave.ts
index 2caaa678a41..bb497a50d62 100644
--- a/resources/js/modules/settings/composables/useSettingsSave.ts
+++ b/resources/js/modules/settings/composables/useSettingsSave.ts
@@ -2,9 +2,16 @@ import {useEventListener} from '@vueuse/core';
 import {type InertiaForm, usePage} from '@inertiajs/vue3';
 import {computed} from 'vue';
 import type {FormSaveOptions} from '@/common/types';
+import {elevatedSessionManager} from '@/modules/auth/elevated-session';
+
+interface PasswordConfirmationOptions<T> {
+  required: (data: T) => boolean;
+  minimumRemainingSeconds?: number;
+}
 
 interface UseSettingsSaveOptions<T extends Record<string, any>> {
   transform?: (data: T) => Record<string, any>;
+  passwordConfirmation?: PasswordConfirmationOptions<T>;
 }
 
 export function useSettingsSave<T extends Record<string, any>>(
@@ -41,19 +48,63 @@ export function useSettingsSave<T extends Record<string, any>>(
           replace: true,
         };
 
-    form
-      .clearErrors()
-      .transform((data: T) => {
-        const transformedData = options.transform?.(data) ?? data;
+    function submit(retried = false) {
+      form
+        .clearErrors()
+        .transform((data: T) => {
+          const transformedData = options.transform?.(data) ?? data;
 
-        return {
-          ...transformedData,
-          ...extraData,
-          redirect:
-            redirect && redirectUrl.value ? redirectUrl.value : undefined,
-        };
-      })
-      .submit(action(), submitOptions);
+          return {
+            ...transformedData,
+            ...extraData,
+            redirect:
+              redirect && redirectUrl.value ? redirectUrl.value : undefined,
+          };
+        })
+        .submit(action(), {
+          ...submitOptions,
+          onHttpException: (response) => {
+            if (
+              !options.passwordConfirmation ||
+              response.status !== 423 ||
+              retried
+            ) {
+              return;
+            }
+
+            elevatedSessionManager
+              .require({
+                force: true,
+                minimumRemainingSeconds:
+                  options.passwordConfirmation?.minimumRemainingSeconds,
+              })
+              .then((confirmed) => {
+                if (confirmed) {
+                  submit(true);
+                }
+              });
+
+            return false;
+          },
+        });
+    }
+
+    if (options.passwordConfirmation?.required(form.data())) {
+      elevatedSessionManager
+        .require({
+          minimumRemainingSeconds:
+            options.passwordConfirmation.minimumRemainingSeconds,
+        })
+        .then((confirmed) => {
+          if (confirmed) {
+            submit();
+          }
+        });
+
+      return;
+    }
+
+    submit();
   }
 
   return {save};
diff --git a/resources/js/pages/graphql/schemas/Edit.vue b/resources/js/pages/graphql/schemas/Edit.vue
index 974e177999e..18b7663a944 100644
--- a/resources/js/pages/graphql/schemas/Edit.vue
+++ b/resources/js/pages/graphql/schemas/Edit.vue
@@ -42,6 +42,7 @@
     enabled: props.token?.enabled ?? true,
     expiryDate: props.token?.expiryDate ?? '',
   });
+  const initialPermissions = new Set(form.permissions);
 
   const routeAction = () => {
     if (!props.schema.id) {
@@ -53,7 +54,12 @@
     });
   };
 
-  const {save} = useSettingsSave(form, routeAction);
+  const {save} = useSettingsSave(form, routeAction, {
+    passwordConfirmation: {
+      required: ({permissions}) =>
+        permissions.some((permission) => !initialPermissions.has(permission)),
+    },
+  });
 
   useAppLayout({form, onSave: save});
 </script>
diff --git a/resources/js/pages/graphql/tokens/Edit.vue b/resources/js/pages/graphql/tokens/Edit.vue
index fdf6adeb3f5..4a5d5fee80c 100644
--- a/resources/js/pages/graphql/tokens/Edit.vue
+++ b/resources/js/pages/graphql/tokens/Edit.vue
@@ -16,6 +16,7 @@
     update,
   } from '@actions/Gql/TokensController';
   import {useForm, useHttp} from '@inertiajs/vue3';
+  import {elevatedSessionManager} from '@/modules/auth/elevated-session';
 
   type TokenData = Pick<
     CraftCms.Cms.Gql.Data.GqlToken,
@@ -57,7 +58,9 @@
   const routeAction = () =>
     props.token.id ? update({tokenId: props.token.id}) : store();
 
-  const {save} = useSettingsSave(form, routeAction);
+  const {save} = useSettingsSave(form, routeAction, {
+    passwordConfirmation: {required: () => true},
+  });
 
   useAppLayout({form, onSave: save});
 
@@ -72,7 +75,7 @@
     const tokenId = props.token.id;
 
     if (!visibleAccessToken.value && tokenId) {
-      (Craft as any).elevatedSessionManager.requireElevatedSession(async () => {
+      await elevatedSessionManager.run(async () => {
         await revealToken(tokenId);
         await nextTick();
         await copyButton.value?.copyValue();
diff --git a/resources/js/pages/settings/users/groups/Edit.vue b/resources/js/pages/settings/users/groups/Edit.vue
index 19636a812e3..69c840e2358 100644
--- a/resources/js/pages/settings/users/groups/Edit.vue
+++ b/resources/js/pages/settings/users/groups/Edit.vue
@@ -40,6 +40,7 @@
     description: props.group.description ?? '',
     permissions: props.group.permissions ?? [],
   });
+  const initialPermissions = new Set(form.permissions);
 
   // Auto-generate handle from name for new sections
   const handleGenerator = useInputGenerator(
@@ -52,7 +53,13 @@
     handleGenerator.stop();
   }
 
-  const {save} = useSettingsSave(form, store);
+  const {save} = useSettingsSave(form, store, {
+    passwordConfirmation: {
+      required: ({permissions}) =>
+        !props.brandNew &&
+        permissions.some((permission) => !initialPermissions.has(permission)),
+    },
+  });
 
   const actions = computed(() => {
     if (props.readOnly || !props.group.id) {
diff --git a/resources/js/pages/users/Permissions.vue b/resources/js/pages/users/Permissions.vue
index 2e2a9a0fdd3..362c65c0171 100644
--- a/resources/js/pages/users/Permissions.vue
+++ b/resources/js/pages/users/Permissions.vue
@@ -28,6 +28,9 @@
     groups: props.currentGroupIds,
     permissions: props.directPermissions,
   });
+  const initialAdmin = form.admin;
+  const initialGroups = new Set(form.groups);
+  const initialPermissions = new Set(form.permissions);
 
   const routeAction = () =>
     props.user.isCurrent
@@ -36,7 +39,16 @@
           userId: props.user.id,
         });
 
-  const {save} = useSettingsSave(form, routeAction);
+  const {save} = useSettingsSave(form, routeAction, {
+    passwordConfirmation: {
+      required: ({admin, groups, permissions}) =>
+        admin !== initialAdmin ||
+        groups.length !== initialGroups.size ||
+        groups.some((group) => !initialGroups.has(group)) ||
+        permissions.length !== initialPermissions.size ||
+        permissions.some((permission) => !initialPermissions.has(permission)),
+    },
+  });
 
   const lockedPermissions = computed(() => [
     ...new Set(
diff --git a/resources/js/pages/users/SignInProviders.vue b/resources/js/pages/users/SignInProviders.vue
index f550c1bce2a..6df112c58f6 100644
--- a/resources/js/pages/users/SignInProviders.vue
+++ b/resources/js/pages/users/SignInProviders.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import {h, ref} from 'vue';
-  import {router, usePage} from '@inertiajs/vue3';
+  import {router, useHttp, usePage} from '@inertiajs/vue3';
   import {t} from '@craftcms/cp';
   import Pane from '@/common/components/Pane.vue';
   import {connect, destroy} from '@actions/Users/SignInProvidersController';
@@ -8,6 +8,7 @@
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import Badge from '@/common/components/Badge.vue';
+  import {elevatedSessionManager} from '@/modules/auth/elevated-session';
 
   defineOptions({
     inheritAttrs: false,
@@ -17,24 +18,36 @@
     usePage<CraftCms.Cms.Http.ViewModels.UserSignInProvidersViewModel>();
 
   type Provider = (typeof page.props.providers)[number];
+  type ConnectResponse = {url: string};
 
   const processingProvider = ref<string | null>(null);
+  const connectRequest = useHttp<Record<string, never>, ConnectResponse>({});
+  const disconnectRequest = useHttp<
+    Record<string, never>,
+    Record<string, unknown>
+  >({});
 
-  function requireElevatedSession(onSuccess: () => void) {
-    (Craft as any).elevatedSessionManager.requireElevatedSession(onSuccess);
-  }
-
-  function connectProvider(provider: Provider) {
+  async function connectProvider(provider: Provider) {
     if (!provider.canConnect) {
       return;
     }
 
-    requireElevatedSession(() => {
-      window.location.href = connect({provider: provider.handle}).url;
-    });
+    processingProvider.value = provider.handle;
+
+    try {
+      const response = await elevatedSessionManager.run(() =>
+        connectRequest.post(connect({provider: provider.handle}).url)
+      );
+
+      if (response) {
+        window.location.href = response.url;
+      }
+    } finally {
+      processingProvider.value = null;
+    }
   }
 
-  function disconnectProvider(provider: Provider) {
+  async function disconnectProvider(provider: Provider) {
     if (!provider.connected) {
       return;
     }
@@ -43,16 +56,19 @@
       return;
     }
 
-    requireElevatedSession(() => {
-      processingProvider.value = provider.handle;
+    processingProvider.value = provider.handle;
+
+    try {
+      const response = await elevatedSessionManager.run(() =>
+        disconnectRequest.delete(destroy({provider: provider.handle}).url)
+      );
 
-      router.delete(destroy({provider: provider.handle}), {
-        preserveScroll: true,
-        onFinish: () => {
-          processingProvider.value = null;
-        },
-      });
-    });
+      if (response) {
+        router.reload();
+      }
+    } finally {
+      processingProvider.value = null;
+    }
   }
 
   const columnHelper = createCraftColumnHelper<Provider>();
@@ -100,6 +116,7 @@
                   provider: row.original.name,
                 }),
                 disabled: !row.original.canConnect,
+                loading: processingProvider.value === row.original.handle,
                 onclick: () => connectProvider(row.original),
               },
               t('Connect')
diff --git a/routes/actions.php b/routes/actions.php
index 0b9e8f6eccd..8f1fb49efb5 100644
--- a/routes/actions.php
+++ b/routes/actions.php
@@ -136,6 +136,9 @@
         Route::any('users/get-elevated-session-timeout', [SessionInfoController::class, 'confirmTimeout'])
             ->middleware(StartSessionWithoutPersistence::class)
             ->withoutMiddleware([StartSession::class, ShareErrorsFromSession::class, PreventRequestForgery::class]);
+        Route::post('users/confirm-password', [SessionInfoController::class, 'confirmPassword'])
+            ->middleware(['auth', 'can:accessCp'])
+            ->block();
         Route::middleware(
             in_array('craft.cp', $middleware) ? null : 'throttle:password-reset'
         )->post('users/send-password-reset-email', [PasswordController::class, 'sendPasswordResetEmail']);
diff --git a/routes/cp.php b/routes/cp.php
index f108d2ee38d..26554f7b8da 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 use CraftCms\Cms\Auth\Enums\CpAuthPath;
+use CraftCms\Cms\Auth\LoginRateLimiter;
 use CraftCms\Cms\Edition;
 use CraftCms\Cms\Http\Controllers\Assets\IndexController as AssetsIndexController;
 use CraftCms\Cms\Http\Controllers\Auth\LoginController;
@@ -66,7 +67,7 @@
 
 Route::middleware('craft.web')->group(function () {
     Route::get(CpAuthPath::Login->value, [LoginController::class, 'showLogin']);
-    Route::post(CpAuthPath::Login->value, [LoginController::class, 'attemptLogin']);
+    Route::post(CpAuthPath::Login->value, [LoginController::class, 'attemptLogin'])->middleware('throttle:'.LoginRateLimiter::NAME);
     Route::get(CpAuthPath::TwoFactorChallenge->value, [TwoFactorAuthenticationController::class, 'showForm'])->middleware(EnsureTwoFactorChallengeIsRecent::class);
     Route::get(CpAuthPath::SetPassword->value, [SetPasswordController::class, 'show']);
     Route::post(CpAuthPath::SetPassword->value, [SetPasswordController::class, 'store']);
@@ -152,7 +153,7 @@
     Route::get('myaccount/preferences', [PreferencesController::class, 'index']);
     Route::patch('myaccount/preferences', [PreferencesController::class, 'update']);
     Route::get('myaccount/sign-in-providers', [SignInProvidersController::class, 'index']);
-    Route::get('myaccount/sign-in-providers/{provider}/connect', [SignInProvidersController::class, 'connect']);
+    Route::post('myaccount/sign-in-providers/{provider}/connect', [SignInProvidersController::class, 'connect']);
     Route::delete('myaccount/sign-in-providers/{provider}', [SignInProvidersController::class, 'destroy']);
 
     Route::middleware([
diff --git a/src/Auth/Concerns/ConfirmsPasswords.php b/src/Auth/Concerns/ConfirmsPasswords.php
index 47af92f0df1..0d07469eaa8 100644
--- a/src/Auth/Concerns/ConfirmsPasswords.php
+++ b/src/Auth/Concerns/ConfirmsPasswords.php
@@ -20,14 +20,14 @@ protected function requireConfirmedPassword(?string $message = null): void
     {
         abort_unless(
             $this->isPasswordConfirmed(),
-            403,
+            423,
             $message ?? t('This action may only be performed with an elevated session.')
         );
     }
 
     protected function isPasswordConfirmed(): bool
     {
-        $maximumSecondsSinceConfirmation = config('auth.password_timeout', 900);
+        $maximumSecondsSinceConfirmation = $this->passwordConfirmationDuration();
 
         if ($maximumSecondsSinceConfirmation === -1) {
             return true;
@@ -39,7 +39,7 @@ protected function isPasswordConfirmed(): bool
     protected function confirmedPasswordTimeout(): int|false
     {
         if (Auth::check()) {
-            $maximumSecondsSinceConfirmation = config('auth.password_timeout', 300);
+            $maximumSecondsSinceConfirmation = $this->passwordConfirmationDuration();
             $confirmedAt = Session::get('auth.password_confirmed_at');
 
             if ($confirmedAt !== null) {
@@ -53,10 +53,15 @@ protected function confirmedPasswordTimeout(): int|false
         }
 
         // If it has been disabled, return false.
-        if (config('auth.password_timeout') === -1) {
+        if ($this->passwordConfirmationDuration() === -1) {
             return false;
         }
 
         return 0;
     }
+
+    private function passwordConfirmationDuration(): int
+    {
+        return (int) config('auth.password_timeout', 300);
+    }
 }
diff --git a/src/Auth/LoginRateLimiter.php b/src/Auth/LoginRateLimiter.php
new file mode 100644
index 00000000000..01c53bb781d
--- /dev/null
+++ b/src/Auth/LoginRateLimiter.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Auth;
+
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\RateLimiter;
+
+class LoginRateLimiter
+{
+    public const string NAME = 'login';
+
+    public function limit(Request $request): Limit
+    {
+        return Limit::perMinute(5)->by($this->key($request));
+    }
+
+    public function clear(Request $request): void
+    {
+        RateLimiter::clear(md5(self::NAME.$this->key($request)));
+    }
+
+    private function key(Request $request): string
+    {
+        return mb_strtolower((string) $request->input('loginName')).'|'.$request->ip();
+    }
+}
diff --git a/src/Http/Controllers/Auth/LoginController.php b/src/Http/Controllers/Auth/LoginController.php
index 14a00b028f5..4e34bec97cb 100644
--- a/src/Http/Controllers/Auth/LoginController.php
+++ b/src/Http/Controllers/Auth/LoginController.php
@@ -10,6 +10,7 @@
 use CraftCms\Cms\Auth\Events\LoginUserRetrieved;
 use CraftCms\Cms\Auth\Events\LoginUserRetrieving;
 use CraftCms\Cms\Auth\Impersonation;
+use CraftCms\Cms\Auth\LoginRateLimiter;
 use CraftCms\Cms\Auth\OAuth\OAuth;
 use CraftCms\Cms\Config\GeneralConfig;
 use CraftCms\Cms\User\Contracts\CraftUser;
@@ -107,7 +108,7 @@ public function showLoginModal(Request $request, Impersonation $impersonation, H
         ]);
     }
 
-    public function attemptLogin(Request $request, Impersonation $impersonation): Response
+    public function attemptLogin(Request $request, Impersonation $impersonation, LoginRateLimiter $loginRateLimiter): Response
     {
         $request->validate([
             'loginName' => [
@@ -126,7 +127,7 @@ public function attemptLogin(Request $request, Impersonation $impersonation): Re
 
         $user = $this->retrieveLoginUser($request->input('loginName'));
 
-        return new Timebox()->call(function () use ($request, $provider, $user, $impersonation) {
+        return new Timebox()->call(function () use ($request, $provider, $user, $impersonation, $loginRateLimiter) {
             if (! $user || $user->getAuthPassword() === null) {
                 return $this->handleLoginFailure($request, AuthError::InvalidCredentials);
             }
@@ -136,6 +137,8 @@ public function attemptLogin(Request $request, Impersonation $impersonation): Re
             }
 
             // Valid credentials
+            $loginRateLimiter->clear($request);
+
             if (config('hashing.rehash_on_login', true) && $user instanceof Model) {
                 $provider->rehashPasswordIfRequired($user, ['password' => $request->input('password')]);
             }
diff --git a/src/Http/Controllers/Auth/SessionInfoController.php b/src/Http/Controllers/Auth/SessionInfoController.php
index fb9a2eac7c3..5537b774bbc 100644
--- a/src/Http/Controllers/Auth/SessionInfoController.php
+++ b/src/Http/Controllers/Auth/SessionInfoController.php
@@ -5,6 +5,11 @@
 namespace CraftCms\Cms\Http\Controllers\Auth;
 
 use CraftCms\Cms\Auth\Concerns\ConfirmsPasswords;
+use CraftCms\Cms\Auth\Impersonation;
+use CraftCms\Cms\Config\GeneralConfig;
+use CraftCms\Cms\View\HtmlStack;
+use CraftCms\Cms\View\TemplateGlobals;
+use CraftCms\Cms\View\TemplateHooks;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 
@@ -37,4 +42,62 @@ public function confirmTimeout(): JsonResponse
             'timeout' => $this->confirmedPasswordTimeout(),
         ]);
     }
+
+    public function confirmPassword(
+        Request $request,
+        GeneralConfig $generalConfig,
+        Impersonation $impersonation,
+        HtmlStack $htmlStack,
+        TemplateGlobals $templateGlobals,
+        TemplateHooks $templateHooks,
+    ): JsonResponse {
+        $validated = $request->validate([
+            'minimumRemainingSeconds' => ['sometimes', 'integer', 'min:0'],
+            'force' => ['sometimes', 'boolean'],
+        ]);
+        $minimumRemainingSeconds = $validated['minimumRemainingSeconds'] ?? 5;
+        $force = $validated['force'] ?? false;
+        $timeout = $this->confirmedPasswordTimeout();
+
+        if ($timeout === false) {
+            return new JsonResponse([
+                'confirmed' => true,
+                'timeout' => false,
+            ]);
+        }
+
+        if (! $force && $timeout !== 0 && $timeout >= $minimumRemainingSeconds) {
+            return new JsonResponse([
+                'confirmed' => true,
+                'timeout' => $timeout,
+            ]);
+        }
+
+        $request->session()->forget('auth.password_confirmed_at');
+        $user = $impersonation->getImpersonator() ?? $request->craftUser()?->asElement();
+
+        if (! $user) {
+            abort(401);
+        }
+
+        $loginName = (string) ($user->email ?? $user->username);
+        $context = [
+            ...$templateGlobals->resolve(),
+            'action' => action([LoginController::class, 'attemptLogin']),
+            'forElevatedSession' => true,
+            'generalConfig' => $generalConfig,
+            'staticEmail' => $loginName,
+            'username' => $loginName,
+        ];
+        $alternativeLoginMethods = $htmlStack->capture(
+            fn (): string => $templateHooks->invoke('cp.login.alternative-login-methods', $context),
+        );
+
+        return new JsonResponse([
+            'confirmed' => false,
+            'timeout' => 0,
+            'loginName' => $loginName,
+            'alternativeLoginMethods' => $alternativeLoginMethods->isEmpty() ? null : $alternativeLoginMethods,
+        ]);
+    }
 }
diff --git a/src/Http/Controllers/Gql/SchemasController.php b/src/Http/Controllers/Gql/SchemasController.php
index f11c83d325f..acf5d588854 100644
--- a/src/Http/Controllers/Gql/SchemasController.php
+++ b/src/Http/Controllers/Gql/SchemasController.php
@@ -10,7 +10,6 @@
 use CraftCms\Cms\Http\RespondsWithFlash;
 use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Support\DateTimeHelper;
-use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\Support\Url;
 use CraftCms\Cms\User\Data\Permission;
 use CraftCms\Cms\User\Data\PermissionGroup;
@@ -159,17 +158,7 @@ private function editScreen(GqlSchema $schema, ?GqlToken $token = null): CpScree
                     'expiryDate' => $token->expiryDate?->format('Y-m-d\TH:i'),
                 ] : null,
                 'permissions' => $this->schemaPermissionGroups(),
-            ])
-            ->prepareScreen(function (CpScreenResponse $response, string $containerId) {
-                HtmlStack::jsWithVars(
-                    fn ($containerId) => <<<JS
-                        new Craft.ElevatedSessionForm('#' + $containerId, [
-                            '.user-permissions input[type="checkbox"]:not(:checked)'
-                        ]);
-                    JS,
-                    [$containerId],
-                );
-            });
+            ]);
     }
 
     /** @return Collection<int, PermissionGroup> */
diff --git a/src/Http/Controllers/Gql/TokensController.php b/src/Http/Controllers/Gql/TokensController.php
index c03bbd33fd8..312b19c46ee 100644
--- a/src/Http/Controllers/Gql/TokensController.php
+++ b/src/Http/Controllers/Gql/TokensController.php
@@ -10,7 +10,6 @@
 use CraftCms\Cms\Http\RespondsWithFlash;
 use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Support\DateTimeHelper;
-use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\Support\Url;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -146,15 +145,7 @@ private function editScreen(GqlToken $token, ?string $accessToken = null): CpScr
                 'token' => $this->tokenData($token),
                 'accessToken' => $accessToken,
                 'schemaOptions' => $this->schemaOptions($token),
-            ])
-            ->prepareScreen(function (CpScreenResponse $response, string $containerId) {
-                HtmlStack::jsWithVars(
-                    fn ($containerId) => <<<JS
-                        new Craft.ElevatedSessionForm('#' + $containerId);
-                    JS,
-                    [$containerId],
-                );
-            });
+            ]);
     }
 
     private function tokenData(GqlToken $token): array
diff --git a/src/Http/Controllers/Settings/Users/UserGroupsController.php b/src/Http/Controllers/Settings/Users/UserGroupsController.php
index 69e757aa192..6a30dc1f5e5 100644
--- a/src/Http/Controllers/Settings/Users/UserGroupsController.php
+++ b/src/Http/Controllers/Settings/Users/UserGroupsController.php
@@ -11,7 +11,6 @@
 use CraftCms\Cms\Edition;
 use CraftCms\Cms\Http\RespondsWithFlash;
 use CraftCms\Cms\Http\Responses\CpScreenResponse;
-use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\User\Data\UserGroup;
 use CraftCms\Cms\User\Models\UserGroup as UserGroupModel;
 use CraftCms\Cms\User\UserGroups;
@@ -94,16 +93,6 @@ public function edit(UserGroupModel $userGroup, UserPermissions $userPermissions
                 'brandNew' => false,
                 'permissions' => $userPermissions->getAllPermissions(),
             ])
-            ->prepareScreen(function (CpScreenResponse $response, string $containerId) {
-                HtmlStack::jsWithVars(
-                    fn ($containerId) => <<<JS
-                        new Craft.ElevatedSessionForm('#' + $containerId, [
-                            '.user-permissions input[type="checkbox"]:not(:checked)'
-                        ]);
-                    JS,
-                    [$containerId],
-                );
-            })
             ->when($this->readOnly, function (CpScreenResponse $response) {
                 $response->noticeHtml(app(ContentHtml::class)->readOnlyNoticeHtml());
             });
diff --git a/src/Http/Controllers/Users/PermissionsController.php b/src/Http/Controllers/Users/PermissionsController.php
index 1edc2587c7c..aa495f25c20 100644
--- a/src/Http/Controllers/Users/PermissionsController.php
+++ b/src/Http/Controllers/Users/PermissionsController.php
@@ -12,7 +12,6 @@
 use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Http\ViewModels\UserPermissionsViewModel;
 use CraftCms\Cms\Support\Arr;
-use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\Support\Facades\UserGroups;
 use CraftCms\Cms\Support\Facades\UserPermissions;
 use CraftCms\Cms\Support\Facades\Users;
@@ -43,19 +42,7 @@ public function index(Request $request, ?int $userId = null): CpScreenResponse
         }
 
         return $this->asEditUserScreen($user, self::SCREEN_PERMISSIONS)
-            ->inertiaPage('users/Permissions', new UserPermissionsViewModel($user, $currentUser))
-            ->prepareScreen(function (CpScreenResponse $response, string $containerId) {
-                HtmlStack::jsWithVars(
-                    fn ($containerId) => <<<JS
-                        new Craft.ElevatedSessionForm('#' + $containerId, [
-                            '[name="admin"]',
-                            '[data-user-groups-input]',
-                            '[data-user-permissions-input]'
-                        ]);
-                    JS,
-                    [$containerId],
-                );
-            });
+            ->inertiaPage('users/Permissions', new UserPermissionsViewModel($user, $currentUser));
     }
 
     public function update(Request $request, Elements $elements, ?int $userId = null): Response
diff --git a/src/Http/Controllers/Users/SignInProvidersController.php b/src/Http/Controllers/Users/SignInProvidersController.php
index 9187681d6f0..ae7f172adb6 100644
--- a/src/Http/Controllers/Users/SignInProvidersController.php
+++ b/src/Http/Controllers/Users/SignInProvidersController.php
@@ -9,7 +9,7 @@
 use CraftCms\Cms\Http\RespondsWithFlash;
 use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Http\ViewModels\UserSignInProvidersViewModel;
-use CraftCms\Cms\Support\Flash;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Symfony\Component\HttpFoundation\Response;
 
@@ -39,7 +39,7 @@ public function index(Request $request): CpScreenResponse
             ->inertiaPage('users/SignInProviders', new UserSignInProvidersViewModel($user, $this->oauth));
     }
 
-    public function connect(Request $request, string $provider): Response
+    public function connect(Request $request, string $provider): JsonResponse
     {
         $this->requireConfirmedPassword(t('An elevated session is required to connect a sign-in provider.'));
 
@@ -50,11 +50,7 @@ public function connect(Request $request, string $provider): Response
         abort_if(! $definition = $this->oauth->getProviderDefinition($provider), 404);
 
         if ($definition->stateless) {
-            $message = t('This OAuth provider cannot be connected to an account.');
-
-            Flash::error($message);
-
-            return to_action([self::class, 'index'])->with('error', $message);
+            abort(422, t('This OAuth provider cannot be connected to an account.'));
         }
 
         $request->session()->put(OAuth::CONNECT_SESSION_KEY, [
@@ -62,7 +58,9 @@ public function connect(Request $request, string $provider): Response
             'userId' => $currentUser->getCraftUserId(),
         ]);
 
-        return $this->oauth->buildProvider($definition, true)->redirect();
+        return new JsonResponse([
+            'url' => $this->oauth->buildProvider($definition, true)->redirect()->getTargetUrl(),
+        ]);
     }
 
     public function destroy(Request $request, string $provider): Response
diff --git a/src/Http/Middleware/RequireConfirmedPassword.php b/src/Http/Middleware/RequireConfirmedPassword.php
new file mode 100644
index 00000000000..8c44da9d8ba
--- /dev/null
+++ b/src/Http/Middleware/RequireConfirmedPassword.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Http\Middleware;
+
+use Closure;
+use CraftCms\Cms\Auth\Concerns\ConfirmsPasswords;
+use Illuminate\Http\Request;
+
+class RequireConfirmedPassword
+{
+    use ConfirmsPasswords;
+
+    public function handle(Request $request, Closure $next): mixed
+    {
+        $this->requireConfirmedPassword();
+
+        return $next($request);
+    }
+}
diff --git a/src/Route/RouteServiceProvider.php b/src/Route/RouteServiceProvider.php
index 5b15e9d618f..8e459815754 100644
--- a/src/Route/RouteServiceProvider.php
+++ b/src/Route/RouteServiceProvider.php
@@ -4,6 +4,7 @@
 
 namespace CraftCms\Cms\Route;
 
+use CraftCms\Cms\Auth\LoginRateLimiter;
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Http\Controllers\ConfigSyncController;
 use CraftCms\Cms\Http\Controllers\MigrateController;
@@ -24,6 +25,7 @@
 use CraftCms\Cms\Http\Middleware\HandleMatchedElementRoute;
 use CraftCms\Cms\Http\Middleware\HandleTemplateRequest;
 use CraftCms\Cms\Http\Middleware\HandleTokenRequest;
+use CraftCms\Cms\Http\Middleware\RequireConfirmedPassword;
 use CraftCms\Cms\Http\Middleware\RequireCpRequest;
 use CraftCms\Cms\Http\Middleware\ResolveSite;
 use CraftCms\Cms\Http\Middleware\RunQueue;
@@ -40,6 +42,7 @@
 use Illuminate\Foundation\Http\Middleware\PreventRequestForgery;
 use Illuminate\Foundation\Http\Middleware\PreventRequestsDuringMaintenance;
 use Illuminate\Foundation\Support\Providers\RouteServiceProvider as LaravelRouteServiceProvider;
+use Illuminate\Http\Request;
 use Illuminate\Routing\Router;
 use Illuminate\Session\Middleware\AuthenticateSession;
 use Illuminate\Support\Facades\Event;
@@ -118,6 +121,11 @@ public function boot(Router $router, Routes $routes): void
             // Throttle to prevent enumeration attacks
             return Limit::perMinute(1)->by($request->ip());
         });
+
+        RateLimiter::for(
+            LoginRateLimiter::NAME,
+            fn (Request $request) => app(LoginRateLimiter::class)->limit($request),
+        );
     }
 
     private function bootRequestForgeryExceptions(): void
@@ -157,6 +165,8 @@ private function bootMaintenanceModeExceptions(): void
 
     private function bootMiddleware(Router $router): void
     {
+        $router->aliasMiddleware('password.confirm', RequireConfirmedPassword::class);
+
         collect([
             ForgetTriggerParameters::class,
             EnsureInstalled::class,
diff --git a/tests/Feature/Auth/Concerns/ConfirmsPasswordsTest.php b/tests/Feature/Auth/Concerns/ConfirmsPasswordsTest.php
index 169129c7775..52a0ca50e80 100644
--- a/tests/Feature/Auth/Concerns/ConfirmsPasswordsTest.php
+++ b/tests/Feature/Auth/Concerns/ConfirmsPasswordsTest.php
@@ -36,9 +36,26 @@ public function __call(string $name, array $arguments)
 });
 
 test('it can require password to be confirmed', function () {
-    $this->expectException(HttpException::class);
+    try {
+        new TestConfirmsPasswords()->requireConfirmedPassword();
+    } catch (HttpException $exception) {
+        expect($exception->getStatusCode())->toBe(423);
 
-    new TestConfirmsPasswords()->requireConfirmedPassword();
+        return;
+    }
+
+    $this->fail('Password confirmation should have been required.');
+});
+
+test('password confirmation uses the same default duration everywhere', function () {
+    $authConfig = config('auth');
+    unset($authConfig['password_timeout']);
+    config()->set('auth', $authConfig);
+
+    new TestConfirmsPasswords()->confirmPassword();
+
+    expect(new TestConfirmsPasswords()->confirmedPasswordTimeout())->toBe(300)
+        ->and(new TestConfirmsPasswords()->isPasswordConfirmed())->toBeTrue();
 });
 
 test('timeout returns seconds until confirmation is required', function () {
diff --git a/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php b/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php
index f786fde5793..c26a36cbf2f 100644
--- a/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php
@@ -22,6 +22,7 @@
 use function CraftCms\Cms\cp_url;
 use function Pest\Laravel\actingAs;
 use function Pest\Laravel\get;
+use function Pest\Laravel\post;
 use function Pest\Laravel\postJson;
 
 test('showLogin redirects already authenticated users', function () {
@@ -87,6 +88,61 @@
     Event::assertDispatched(Failed::class);
 });
 
+test('attemptLogin is limited to five failed attempts per minute', function () {
+    $user = User::findOne();
+
+    foreach (range(1, 5) as $attempt) {
+        postJson(action([LoginController::class, 'attemptLogin']), [
+            'loginName' => $attempt % 2 === 0 ? mb_strtoupper($user->email) : $user->email,
+            'password' => 'wrongpassword',
+        ])->assertStatus(400);
+    }
+
+    postJson(action([LoginController::class, 'attemptLogin']), [
+        'loginName' => $user->email,
+        'password' => 'wrongpassword',
+    ])->assertTooManyRequests();
+});
+
+test('attemptLogin limits full-page login failures', function () {
+    $user = User::findOne();
+
+    foreach (range(1, 5) as $attempt) {
+        post(action([LoginController::class, 'attemptLogin']), [
+            'loginName' => $user->email,
+            'password' => 'wrongpassword',
+        ])->assertRedirect();
+    }
+
+    post(action([LoginController::class, 'attemptLogin']), [
+        'loginName' => $user->email,
+        'password' => 'wrongpassword',
+    ])->assertTooManyRequests();
+});
+
+test('attemptLogin clears failed attempts after valid credentials', function () {
+    $user = User::findOne();
+
+    postJson(action([LoginController::class, 'attemptLogin']), [
+        'loginName' => $user->email,
+        'password' => 'wrongpassword',
+    ])->assertStatus(400);
+
+    postJson(action([LoginController::class, 'attemptLogin']), [
+        'loginName' => $user->email,
+        'password' => 'craftcms2018!!',
+    ])->assertOk();
+
+    Auth::logout();
+
+    foreach (range(1, 5) as $attempt) {
+        postJson(action([LoginController::class, 'attemptLogin']), [
+            'loginName' => $user->email,
+            'password' => 'wrongpassword',
+        ])->assertStatus(400);
+    }
+});
+
 test('attemptLogin succeeds with valid credentials', function () {
     $user = User::findOne();
 
diff --git a/tests/Feature/Http/Controllers/Auth/SessionInfoControllerTest.php b/tests/Feature/Http/Controllers/Auth/SessionInfoControllerTest.php
index b1bedf1204d..12db5cdf950 100644
--- a/tests/Feature/Http/Controllers/Auth/SessionInfoControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/SessionInfoControllerTest.php
@@ -2,9 +2,19 @@
 
 declare(strict_types=1);
 
+use CraftCms\Cms\Auth\Impersonation;
 use CraftCms\Cms\Http\Controllers\Auth\SessionInfoController;
+use CraftCms\Cms\Support\Facades\HtmlStack;
+use CraftCms\Cms\User\Elements\User;
+use CraftCms\Cms\User\Models\User as UserModel;
+use CraftCms\Cms\View\TemplateHooks;
+use Illuminate\Support\Facades\Date;
+use Illuminate\Support\Facades\Session;
 
+use function Pest\Laravel\actingAs;
 use function Pest\Laravel\getJson;
+use function Pest\Laravel\postJson;
+use function Pest\Laravel\travel;
 
 test('session info returns csrf token without extending the session', function () {
     $response = getJson(action([SessionInfoController::class, 'show'], [
@@ -32,3 +42,116 @@
             'timeout' => 0,
         ]);
 });
+
+test('password confirmation requires authentication', function () {
+    postJson(action([SessionInfoController::class, 'confirmPassword']))
+        ->assertUnauthorized();
+});
+
+test('password confirmation requires control panel access', function () {
+    $user = UserModel::factory()->active()->create();
+    actingAs($user);
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']))
+        ->assertForbidden();
+});
+
+test('password confirmation reports a sufficient confirmation', function () {
+    Date::setTestNow(now());
+    actingAs(User::findOne());
+    Session::passwordConfirmed();
+    travel(10)->seconds();
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']), [
+        'minimumRemainingSeconds' => 5,
+    ])->assertOk()->assertJson([
+        'confirmed' => true,
+        'timeout' => config('auth.password_timeout') - 10,
+    ]);
+});
+
+test('password confirmation invalidates an insufficient confirmation', function () {
+    Date::setTestNow(now());
+    actingAs(User::findOne());
+    Session::passwordConfirmed();
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']), [
+        'minimumRemainingSeconds' => config('auth.password_timeout') + 1,
+    ])->assertOk()->assertJson([
+        'confirmed' => false,
+        'timeout' => 0,
+        'loginName' => 'support@craftcms.com',
+        'alternativeLoginMethods' => null,
+    ]);
+
+    expect(Session::has('auth.password_confirmed_at'))->toBeFalse();
+});
+
+test('password confirmation can be forced', function () {
+    actingAs(User::findOne());
+    Session::passwordConfirmed();
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']), [
+        'force' => true,
+    ])->assertOk()->assertJsonPath('confirmed', false);
+
+    expect(Session::has('auth.password_confirmed_at'))->toBeFalse();
+});
+
+test('password confirmation remains confirmed when disabled', function () {
+    config()->set('auth.password_timeout', -1);
+    actingAs(User::findOne());
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']), [
+        'force' => true,
+    ])->assertOk()->assertJson([
+        'confirmed' => true,
+        'timeout' => false,
+    ]);
+});
+
+test('password confirmation uses the impersonator login name', function () {
+    $impersonator = UserModel::factory()->admin()->createElement([
+        'email' => 'impersonator@example.com',
+    ]);
+    $impersonated = UserModel::factory()
+        ->withPermissions(['accessCp'])
+        ->createElement([
+            'email' => 'impersonated@example.com',
+        ]);
+    actingAs($impersonated);
+    app(Impersonation::class)->setImpersonatorId($impersonator->id);
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']))
+        ->assertOk()
+        ->assertJsonPath('loginName', 'impersonator@example.com');
+});
+
+test('password confirmation captures alternative login methods and assets', function () {
+    actingAs(User::findOne());
+    app(TemplateHooks::class)->register('cp.login.alternative-login-methods', function (array &$context): string {
+        expect($context['forElevatedSession'])->toBeTrue()
+            ->and($context['staticEmail'])->toBe('support@craftcms.com')
+            ->and($context['username'])->toBe('support@craftcms.com');
+
+        HtmlStack::cssFile('/alternative-login.css');
+        HtmlStack::js('window.alternativeLoginReady = true');
+
+        return '<button>Alternative login</button>';
+    });
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']))
+        ->assertOk()
+        ->assertJsonPath('alternativeLoginMethods.html', '<button>Alternative login</button>')
+        ->assertJsonPath('alternativeLoginMethods.headHtml', fn (string $html): bool => str_contains($html, '/alternative-login.css'))
+        ->assertJsonPath('alternativeLoginMethods.bodyHtml', fn (string $html): bool => str_contains($html, 'window.alternativeLoginReady = true'));
+});
+
+test('password confirmation validates its options', function () {
+    actingAs(User::findOne());
+
+    postJson(action([SessionInfoController::class, 'confirmPassword']), [
+        'minimumRemainingSeconds' => -1,
+        'force' => 'sometimes',
+    ])->assertJsonValidationErrors(['minimumRemainingSeconds', 'force']);
+});
diff --git a/tests/Feature/Http/Controllers/User/SignInProvidersControllerTest.php b/tests/Feature/Http/Controllers/User/SignInProvidersControllerTest.php
index 3b9bbc67c0a..0f7f60c8e41 100644
--- a/tests/Feature/Http/Controllers/User/SignInProvidersControllerTest.php
+++ b/tests/Feature/Http/Controllers/User/SignInProvidersControllerTest.php
@@ -19,6 +19,7 @@
 use function Pest\Laravel\actingAs;
 use function Pest\Laravel\delete;
 use function Pest\Laravel\get;
+use function Pest\Laravel\postJson;
 
 beforeEach(function () {
     Edition::set(Edition::Pro);
@@ -117,7 +118,7 @@ function signInProviderRemoveCurrentPassword(): User
     Auth::logout();
 
     get(cp_url('myaccount/sign-in-providers'))->assertRedirect();
-    get(cp_url('myaccount/sign-in-providers/test/connect'))->assertRedirect();
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'))->assertUnauthorized();
     delete(cp_url('myaccount/sign-in-providers/test'))->assertRedirect();
 });
 
@@ -201,7 +202,7 @@ function signInProviderRemoveCurrentPassword(): User
     configureSignInProvider();
     Session::forget('auth.password_confirmed_at');
 
-    get(cp_url('myaccount/sign-in-providers/test/connect'))->assertForbidden();
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'))->assertStatus(423);
 
     expect(session()->has(OAuth::CONNECT_SESSION_KEY))->toBeFalse();
 });
@@ -211,9 +212,8 @@ function signInProviderRemoveCurrentPassword(): User
         'stateless' => true,
     ]);
 
-    get(cp_url('myaccount/sign-in-providers/test/connect'))
-        ->assertRedirect(cp_url('myaccount/sign-in-providers'))
-        ->assertSessionHas('error');
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'))
+        ->assertUnprocessable();
 
     expect(session()->has(OAuth::CONNECT_SESSION_KEY))->toBeFalse();
 });
@@ -222,8 +222,9 @@ function signInProviderRemoveCurrentPassword(): User
     configureSignInProvider();
     $user = signInProviderUser();
 
-    get(cp_url('myaccount/sign-in-providers/test/connect'))
-        ->assertRedirect('https://provider.test/oauth/authorize');
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'))
+        ->assertOk()
+        ->assertJsonPath('url', 'https://provider.test/oauth/authorize');
 
     signInProviderCallback([
         'id' => 'provider-user-1',
@@ -241,7 +242,7 @@ function signInProviderRemoveCurrentPassword(): User
     $user = signInProviderUser();
     app(OAuth::class)->linkIdentity($user, signInProviderDefinition(), 'provider-user-1');
 
-    get(cp_url('myaccount/sign-in-providers/test/connect'));
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'));
 
     signInProviderCallback([
         'id' => 'provider-user-1',
@@ -263,7 +264,7 @@ function signInProviderRemoveCurrentPassword(): User
 
     app(OAuth::class)->linkIdentity($otherUser, signInProviderDefinition(), 'provider-user-1');
 
-    get(cp_url('myaccount/sign-in-providers/test/connect'));
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'));
 
     signInProviderCallback([
         'id' => 'provider-user-1',
@@ -281,7 +282,7 @@ function signInProviderRemoveCurrentPassword(): User
     $user = signInProviderUser();
     app(OAuth::class)->linkIdentity($user, signInProviderDefinition(), 'provider-user-1');
 
-    get(cp_url('myaccount/sign-in-providers/test/connect'));
+    postJson(cp_url('myaccount/sign-in-providers/test/connect'));
 
     signInProviderCallback([
         'id' => 'provider-user-2',
@@ -300,7 +301,7 @@ function signInProviderRemoveCurrentPassword(): User
     app(OAuth::class)->linkIdentity($user, signInProviderDefinition(), 'provider-user-1');
     Session::forget('auth.password_confirmed_at');
 
-    delete(cp_url('myaccount/sign-in-providers/test'))->assertForbidden();
+    delete(cp_url('myaccount/sign-in-providers/test'))->assertStatus(423);
 
     expect(signInProviderHasIdentity('provider-user-1', $user->id))->toBeTrue();
 });
diff --git a/tests/Feature/Http/Middleware/RequireConfirmedPasswordTest.php b/tests/Feature/Http/Middleware/RequireConfirmedPasswordTest.php
new file mode 100644
index 00000000000..3d602b78c6b
--- /dev/null
+++ b/tests/Feature/Http/Middleware/RequireConfirmedPasswordTest.php
@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+use CraftCms\Cms\Http\Middleware\RequireConfirmedPassword;
+use CraftCms\Cms\User\Elements\User;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Session;
+
+use function Pest\Laravel\actingAs;
+use function Pest\Laravel\postJson;
+
+beforeEach(function () {
+    Route::post('_test/confirmed-password', fn () => response()->noContent())
+        ->middleware(RequireConfirmedPassword::class);
+
+    actingAs(User::findOne());
+});
+
+test('password confirmation middleware returns 423', function () {
+    postJson('_test/confirmed-password')->assertStatus(423);
+});
+
+test('password confirmation middleware uses the configured timeout', function () {
+    config()->set('auth.password_timeout', 10);
+    Session::passwordConfirmed();
+
+    postJson('_test/confirmed-password')->assertNoContent();
+
+    $this->travel(11)->seconds();
+
+    postJson('_test/confirmed-password')->assertStatus(423);
+});
+
+test('password confirmation middleware can be disabled', function () {
+    config()->set('auth.password_timeout', -1);
+
+    postJson('_test/confirmed-password')->assertNoContent();
+});

From 3985ef2c452d1ba498e4388ef0eb80761fdd0b68 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Fri, 10 Jul 2026 20:45:12 +0200
Subject: [PATCH 3/8] Fix elevated session auth tests

---
 routes/actions.php                                            | 4 +++-
 .../Http/Controllers/User/AuthMethodControllerTest.php        | 2 +-
 .../Feature/Http/Controllers/User/PasskeysControllerTest.php  | 4 ++--
 .../Http/Controllers/User/RecoveryCodesControllerTest.php     | 4 ++--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/routes/actions.php b/routes/actions.php
index 093eea2acc3..8b8e65d7547 100644
--- a/routes/actions.php
+++ b/routes/actions.php
@@ -2,6 +2,7 @@
 
 declare(strict_types=1);
 
+use CraftCms\Cms\Auth\LoginRateLimiter;
 use CraftCms\Cms\Edition;
 use CraftCms\Cms\Http\Controllers\AddressesController;
 use CraftCms\Cms\Http\Controllers\AnnouncementsController;
@@ -129,7 +130,8 @@
             Route::post('auth/verify-recovery-code', [TwoFactorAuthenticationController::class, 'verifyRecoveryCode']);
         });
         Route::post('auth/passkey-request-options', [PasskeyController::class, 'requestOptions']);
-        Route::post('users/login', [LoginController::class, 'attemptLogin']);
+        Route::post('users/login', [LoginController::class, 'attemptLogin'])
+            ->middleware('throttle:'.LoginRateLimiter::NAME);
         Route::post('users/login-with-passkey', [PasskeyController::class, 'login']);
         Route::post('users/login-modal', [LoginController::class, 'showLoginModal']);
         Route::any('users/redirect', [LoginController::class, 'redirect']);
diff --git a/tests/Feature/Http/Controllers/User/AuthMethodControllerTest.php b/tests/Feature/Http/Controllers/User/AuthMethodControllerTest.php
index bb396a8987d..1418befbdde 100644
--- a/tests/Feature/Http/Controllers/User/AuthMethodControllerTest.php
+++ b/tests/Feature/Http/Controllers/User/AuthMethodControllerTest.php
@@ -96,7 +96,7 @@
 
         postJson(action([AuthMethodController::class, 'destroy']), [
             'method' => RecoveryCodes::class,
-        ])->assertForbidden();
+        ])->assertStatus(423);
     });
 
     it('validates method parameter is required', function () {
diff --git a/tests/Feature/Http/Controllers/User/PasskeysControllerTest.php b/tests/Feature/Http/Controllers/User/PasskeysControllerTest.php
index 2aa0ee9569a..3146fee615f 100644
--- a/tests/Feature/Http/Controllers/User/PasskeysControllerTest.php
+++ b/tests/Feature/Http/Controllers/User/PasskeysControllerTest.php
@@ -42,7 +42,7 @@
         Session::forget('auth.password_confirmed_at');
 
         postJson(action([PasskeysController::class, 'creationOptions']))
-            ->assertForbidden();
+            ->assertStatus(423);
     });
 
     it('returns passkey creation options', function () {
@@ -75,7 +75,7 @@
         Session::forget('auth.password_confirmed_at');
 
         postJson(action([PasskeysController::class, 'verifyCreation']))
-            ->assertForbidden();
+            ->assertStatus(423);
     });
 
     it('validates credentials parameter is required', function () {
diff --git a/tests/Feature/Http/Controllers/User/RecoveryCodesControllerTest.php b/tests/Feature/Http/Controllers/User/RecoveryCodesControllerTest.php
index 470c276d7f5..48a41700a78 100644
--- a/tests/Feature/Http/Controllers/User/RecoveryCodesControllerTest.php
+++ b/tests/Feature/Http/Controllers/User/RecoveryCodesControllerTest.php
@@ -29,7 +29,7 @@
         Session::forget('auth.password_confirmed_at');
 
         postJson(action([RecoveryCodesController::class, 'generate']))
-            ->assertForbidden();
+            ->assertStatus(423);
     });
 
     it('generates recovery codes successfully', function () {
@@ -78,7 +78,7 @@
         Session::forget('auth.password_confirmed_at');
 
         postJson(action([RecoveryCodesController::class, 'download']))
-            ->assertForbidden();
+            ->assertStatus(423);
     });
 
     it('returns 400 when no recovery codes exist', function () {

From 7120d32f3d077625b2b3e3a95c83bb719ad9a647 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Fri, 10 Jul 2026 20:52:43 +0200
Subject: [PATCH 4/8] Address elevated session review feedback

---
 .../common/components/HtmlFragmentRenderer.vue   |  8 --------
 .../elevated-session/ElevatedSessionHost.vue     |  5 -----
 .../auth/elevated-session/manager.test.ts        | 16 +++++++++++++++-
 .../js/modules/auth/elevated-session/manager.ts  |  2 +-
 resources/js/pages/graphql/schemas/Edit.vue      |  1 +
 .../js/pages/settings/users/groups/Edit.vue      |  5 ++++-
 routes/web.php                                   |  4 +++-
 .../Controllers/Auth/LoginControllerTest.php     |  5 +++++
 8 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/resources/js/common/components/HtmlFragmentRenderer.vue b/resources/js/common/components/HtmlFragmentRenderer.vue
index d0e5a8e4596..d67b0b8b3e7 100644
--- a/resources/js/common/components/HtmlFragmentRenderer.vue
+++ b/resources/js/common/components/HtmlFragmentRenderer.vue
@@ -11,10 +11,6 @@
     fragment?: CraftCms.Cms.View.HtmlFragment | null;
   }>();
 
-  const emit = defineEmits<{
-    rendered: [element: HTMLElement];
-  }>();
-
   const container = ref<HTMLElement | null>(null);
   const disposers: AppendHtmlDisposer[] = [];
   let lastKey = '';
@@ -91,10 +87,6 @@
         return;
       }
 
-      if (currentRunId === runId) {
-        emit('rendered', element);
-      }
-
       // Upgrade legacy UI elements (lightswitches, field toggles, menus, …)
       // the same way CpScreenSlideout does after injecting fragment content.
       if (html) {
diff --git a/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
index 457b8c5d05f..cf49ebc2cb6 100644
--- a/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
+++ b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
@@ -56,10 +56,6 @@
     dialog = element;
     trapFocusWithin(element);
   }
-
-  function initializeAlternativeLoginMethods(element: HTMLElement): void {
-    Craft.initUiElements(element);
-  }
 </script>
 
 <template>
@@ -105,7 +101,6 @@
           v-if="state.alternativeLoginMethods"
           slot="alternative-methods"
           :fragment="state.alternativeLoginMethods"
-          @rendered="initializeAlternativeLoginMethods"
         />
       </craft-login-form>
     </Pane>
diff --git a/resources/js/modules/auth/elevated-session/manager.test.ts b/resources/js/modules/auth/elevated-session/manager.test.ts
index 7e04079a897..4fed2ca1c13 100644
--- a/resources/js/modules/auth/elevated-session/manager.test.ts
+++ b/resources/js/modules/auth/elevated-session/manager.test.ts
@@ -38,16 +38,30 @@ describe('ElevatedSessionManager', () => {
         resolveFirst = resolve;
       }
     );
+    let resolveSecond!: (response: {
+      confirmed: boolean;
+      timeout: number;
+    }) => void;
+    const secondResponse = new Promise<{confirmed: boolean; timeout: number}>(
+      (resolve) => {
+        resolveSecond = resolve;
+      }
+    );
     const request = vi
       .fn()
       .mockReturnValueOnce(firstResponse)
-      .mockResolvedValueOnce({confirmed: true, timeout: 30});
+      .mockReturnValueOnce(secondResponse);
     const manager = new ElevatedSessionManager(request);
 
     const first = manager.require({minimumRemainingSeconds: 10});
     await Promise.resolve();
     const second = manager.require({minimumRemainingSeconds: 30});
     resolveFirst({confirmed: true, timeout: 10});
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(manager.state.checking).toBe(true);
+    resolveSecond({confirmed: true, timeout: 30});
 
     await expect(Promise.all([first, second])).resolves.toEqual([true, true]);
     expect(request).toHaveBeenNthCalledWith(1, {
diff --git a/resources/js/modules/auth/elevated-session/manager.ts b/resources/js/modules/auth/elevated-session/manager.ts
index 90d0915c6eb..bfde3885e3e 100644
--- a/resources/js/modules/auth/elevated-session/manager.ts
+++ b/resources/js/modules/auth/elevated-session/manager.ts
@@ -126,7 +126,7 @@ export class ElevatedSessionManager {
       }
 
       if (response.confirmed) {
-        return this.checkConfirmation();
+        return await this.checkConfirmation();
       }
 
       this.mutableState.loginName = response.loginName ?? '';
diff --git a/resources/js/pages/graphql/schemas/Edit.vue b/resources/js/pages/graphql/schemas/Edit.vue
index 18b7663a944..335d57e40a5 100644
--- a/resources/js/pages/graphql/schemas/Edit.vue
+++ b/resources/js/pages/graphql/schemas/Edit.vue
@@ -57,6 +57,7 @@
   const {save} = useSettingsSave(form, routeAction, {
     passwordConfirmation: {
       required: ({permissions}) =>
+        permissions.length !== initialPermissions.size ||
         permissions.some((permission) => !initialPermissions.has(permission)),
     },
   });
diff --git a/resources/js/pages/settings/users/groups/Edit.vue b/resources/js/pages/settings/users/groups/Edit.vue
index 69c840e2358..671569ec1e0 100644
--- a/resources/js/pages/settings/users/groups/Edit.vue
+++ b/resources/js/pages/settings/users/groups/Edit.vue
@@ -57,7 +57,10 @@
     passwordConfirmation: {
       required: ({permissions}) =>
         !props.brandNew &&
-        permissions.some((permission) => !initialPermissions.has(permission)),
+        (permissions.length !== initialPermissions.size ||
+          permissions.some(
+            (permission) => !initialPermissions.has(permission)
+          )),
     },
   });
 
diff --git a/routes/web.php b/routes/web.php
index d710d1e4c8f..f762b9656d6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use CraftCms\Cms\Auth\Enums\CpAuthPath;
+use CraftCms\Cms\Auth\LoginRateLimiter;
 use CraftCms\Cms\Auth\OAuth\OAuth;
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Edition;
@@ -29,7 +30,8 @@
     if (Cms::isInstalled()) {
         foreach ($routes->localizedConfigPaths('getLoginPath') as $path) {
             Route::get($path, [LoginController::class, 'showLogin']);
-            Route::post($path, [LoginController::class, 'attemptLogin']);
+            Route::post($path, [LoginController::class, 'attemptLogin'])
+                ->middleware('throttle:'.LoginRateLimiter::NAME);
         }
 
         foreach ($routes->localizedConfigPaths('getVerifyEmailPath') as $path) {
diff --git a/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php b/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php
index 578ef27dee6..a7820b10ba5 100644
--- a/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/LoginControllerTest.php
@@ -5,6 +5,7 @@
 use CraftCms\Cms\Auth\Enums\CpAuthPath;
 use CraftCms\Cms\Auth\Events\LoginUserRetrieved;
 use CraftCms\Cms\Auth\Events\LoginUserRetrieving;
+use CraftCms\Cms\Auth\LoginRateLimiter;
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Config\GeneralConfig;
 use CraftCms\Cms\Database\Table;
@@ -14,6 +15,7 @@
 use CraftCms\Cms\User\Elements\User;
 use CraftCms\Cms\User\Models\User as UserModel;
 use Illuminate\Auth\Events\Failed;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Event;
@@ -311,8 +313,11 @@
 
     Route::middleware(['web', 'craft', 'craft.web'])->group(dirname(__DIR__, 5).'/routes/web.php');
 
+    $route = Route::getRoutes()->match(Request::create('/aanmelden', 'POST'));
     $user = User::findOne();
 
+    expect($route->middleware())->toContain('throttle:'.LoginRateLimiter::NAME);
+
     postJson('/aanmelden', [
         'loginName' => $user->email,
         'password' => 'craftcms2018!!',

From 1c673a522266ffabfc4f7fd1f043e241d6b6bd32 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 10 Jul 2026 13:58:02 -0500
Subject: [PATCH 5/8] First run through

---
 packages/craftcms-cp/src/styles/cp.css        |   6 +-
 packages/craftcms-legacy/cp/src/Craft.js      |   3 +-
 .../cp/src/js/ElevatedSessionForm.js          | 106 ------------
 .../common/composables/useElevatedSession.ts  |  23 +++
 resources/js/common/types/globals.d.ts        |  11 ++
 resources/js/cp.ts                            |   1 +
 .../js/modules/elevated-session/README.md     |  79 +++++++++
 .../elevated-session-form.ce.ts               |  43 +++++
 .../elevated-session/elevated-session-form.ts | 153 ++++++++++++++++++
 .../elevated-session/elevated-session.ts      |  73 +++++++++
 .../js/modules/elevated-session/index.ts      |  23 +++
 .../js/modules/elevated-session/support.ts    |   9 ++
 .../permissions/components/PermissionList.vue |   2 +-
 .../settings/composables/useSettingsSave.ts   |  63 +++++++-
 resources/js/pages/graphql/tokens/Edit.vue    |  16 +-
 resources/js/pages/users/Permissions.vue      |  41 ++---
 resources/js/pages/users/SignInProviders.vue  |   8 +-
 .../Users/PermissionsController.php           |  18 +--
 18 files changed, 526 insertions(+), 152 deletions(-)
 delete mode 100644 packages/craftcms-legacy/cp/src/js/ElevatedSessionForm.js
 create mode 100644 resources/js/common/composables/useElevatedSession.ts
 create mode 100644 resources/js/modules/elevated-session/README.md
 create mode 100644 resources/js/modules/elevated-session/elevated-session-form.ce.ts
 create mode 100644 resources/js/modules/elevated-session/elevated-session-form.ts
 create mode 100644 resources/js/modules/elevated-session/elevated-session.ts
 create mode 100644 resources/js/modules/elevated-session/index.ts
 create mode 100644 resources/js/modules/elevated-session/support.ts

diff --git a/packages/craftcms-cp/src/styles/cp.css b/packages/craftcms-cp/src/styles/cp.css
index 715500bf73a..9b343e8c59b 100644
--- a/packages/craftcms-cp/src/styles/cp.css
+++ b/packages/craftcms-cp/src/styles/cp.css
@@ -26,13 +26,13 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  background-color: var(--c-bg-body);
+  background-color: var(--c-surface-default);
   text-decoration: none;
   padding-block: var(--c-spacing-md);
   padding-inline: var(--c-spacing-lg);
   outline: none;
-  border: 1px dashed var(--c-form-control-border);
-  color: var(--c-fg-text);
+  border: 1px dashed var(--c-form-control-border-color);
+  color: var(--c-text-default);
   font-weight: var(--font-weight-medium);
   border-radius: var(--c-radius-md);
 
diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index 8b3aac249fd..e8d342b8658 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -61,7 +61,8 @@ import './js/ElementDeletionManager.js';
 import './js/ElementEditor.js';
 import './js/ElementFieldSettings.js';
 import './js/ElementTableSorter.js';
-import './js/ElevatedSessionForm.js';
+// ElevatedSessionForm ported to resources/js/modules/elevated-session (assigns
+// window.Craft.ElevatedSessionForm). The manager stays here.
 import './js/ElevatedSessionManager.js';
 import './js/EntryIndex.js';
 import './js/EntrySelectInput.js';
diff --git a/packages/craftcms-legacy/cp/src/js/ElevatedSessionForm.js b/packages/craftcms-legacy/cp/src/js/ElevatedSessionForm.js
deleted file mode 100644
index 4de1041ca7e..00000000000
--- a/packages/craftcms-legacy/cp/src/js/ElevatedSessionForm.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/** global: Craft */
-/** global: Garnish */
-/**
- * Elevated Session Form
- */
-Craft.ElevatedSessionForm = Garnish.Base.extend({
-  $form: null,
-  inputSelectors: null,
-  $inputs: null,
-  inputs: null,
-
-  init: function (form, inputs) {
-    this.$form = $(form);
-    this.inputSelectors = [];
-    this.$inputs = $();
-    this.inputs = [];
-
-    // Only check specific inputs?
-    if (typeof inputs !== 'undefined') {
-      $.makeArray(inputs).forEach((selector) => {
-        if (typeof selector === 'string') {
-          this.inputSelectors.push(selector);
-        }
-
-        $(selector, this.$form).each((i, input) => {
-          this.$inputs = this.$inputs.add(input);
-          const $input = $(input);
-          this.inputs.push({
-            $input,
-            val: Garnish.getInputPostVal($input),
-          });
-        });
-      });
-    }
-
-    // is this for a slideout?
-    const slideout = this.$form.data('slideout');
-    if (slideout) {
-    } else {
-    }
-    this.addListener(this.$form, 'submit', 'handleFormSubmit');
-  },
-
-  handleFormSubmit: function (ev) {
-    // Ignore if we're in the middle of getting the elevated session timeout
-    if (Craft.elevatedSessionManager.fetchingTimeout) {
-      ev.preventDefault();
-      ev.stopImmediatePropagation();
-      ev.cancel = true;
-      return;
-    }
-
-    if (!this.inputsChanged()) {
-      return;
-    }
-
-    // Prevent the form from submitting until the user has an elevated session
-    ev.preventDefault();
-    ev.stopImmediatePropagation();
-    ev.cancel = true;
-
-    Craft.elevatedSessionManager.requireElevatedSession(
-      this.submitForm.bind(this)
-    );
-  },
-
-  inputsChanged: function () {
-    if (!this.inputSelectors.length && !this.inputs.length) {
-      // no way to know
-      return true;
-    }
-
-    // If we have any input selectors, see if there are any new inputs that match them
-    for (const selector of this.inputSelectors) {
-      const $inputs = $(selector, this.$form);
-      for (let i = 0; i < $inputs.length; i++) {
-        const input = $inputs[i];
-        if (!this.$inputs.is(input)) {
-          return true;
-        }
-      }
-    }
-
-    // If we have any inputs, see if their values have changed
-    for (let {$input, val} of this.inputs) {
-      // Is this a password input?
-      if ($input.data('passwordInput')) {
-        $input = $input.data('passwordInput').$currentInput;
-      }
-
-      // Has this input's value changed?
-      if (Garnish.getInputPostVal($input) !== val) {
-        return true;
-      }
-    }
-
-    return false;
-  },
-
-  submitForm: function () {
-    // Don't let handleFormSubmit() interrupt this time
-    this.disable();
-    this.$form.trigger('submit');
-    this.enable();
-  },
-});
diff --git a/resources/js/common/composables/useElevatedSession.ts b/resources/js/common/composables/useElevatedSession.ts
new file mode 100644
index 00000000000..4d95f8e61d8
--- /dev/null
+++ b/resources/js/common/composables/useElevatedSession.ts
@@ -0,0 +1,23 @@
+import {
+  ElevatedSessionCancelled,
+  requireElevatedSession,
+} from '@/modules/elevated-session/elevated-session';
+
+/**
+ * Vue-facing wrapper over the elevated-session primitive — the Inertia-friendly
+ * counterpart to the legacy `Craft.ElevatedSessionForm`. Where the DOM-form
+ * controller intercepts a native submit, Vue screens `await` this before
+ * dispatching an Inertia visit.
+ *
+ * ```ts
+ * const {requireElevatedSession} = useElevatedSession();
+ * await requireElevatedSession(); // resolves once elevated, rejects on cancel
+ * form.submit(...);
+ * ```
+ *
+ * `useSettingsSave` uses this internally via its `elevatedFields` option; call it
+ * directly for one-off actions (e.g. revealing a token).
+ */
+export function useElevatedSession() {
+  return {requireElevatedSession, ElevatedSessionCancelled};
+}
diff --git a/resources/js/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index 2eadd64c9c2..55899289c13 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/resources/js/common/types/globals.d.ts
@@ -150,6 +150,17 @@ interface CraftStatic {
   FieldLayoutDesigner: {
     new (container: any, settings?: object): FieldLayoutDesignerInstance;
   };
+  ElevatedSessionForm: {
+    new (form: any, inputs?: string | string[]): unknown;
+  };
+  elevatedSessionManager: {
+    fetchingTimeout: boolean;
+    requireElevatedSession(
+      onSuccess: () => void,
+      onCancel?: () => void,
+      minSafeElevatedSessionTimeout?: number
+    ): void | Promise<void>;
+  };
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
diff --git a/resources/js/cp.ts b/resources/js/cp.ts
index 2a3abfbd943..75dc91ad3e4 100644
--- a/resources/js/cp.ts
+++ b/resources/js/cp.ts
@@ -12,6 +12,7 @@ import './modules/listbox';
 import './modules/field-layout-designer';
 import './modules/editable-table';
 import './modules/generated-fields';
+import './modules/elevated-session';
 
 window.Cp = Cp;
 
diff --git a/resources/js/modules/elevated-session/README.md b/resources/js/modules/elevated-session/README.md
new file mode 100644
index 00000000000..36674be6924
--- /dev/null
+++ b/resources/js/modules/elevated-session/README.md
@@ -0,0 +1,79 @@
+# Elevated session
+
+An Inertia-friendly, modern port of Craft's `Craft.ElevatedSessionForm` — the
+guard that forces the user to (re)confirm their password before a sensitive
+change is saved (toggling admin, granting new permissions/groups, changing a
+password, revealing a GraphQL token, etc.).
+
+## The two seams
+
+Elevation has two moving parts. Only the **form** guard is ported here; the
+**manager** stays legacy and is reused:
+
+- **Manager** — `Craft.elevatedSessionManager` (still legacy, in
+  `packages/craftcms-legacy/cp/src/js/ElevatedSessionManager.js`). It checks the
+  remaining elevated-session time (`users/get-elevated-session-timeout`) and, if
+  needed, shows the login modal — including 2FA, passkeys, and impersonation.
+  Re-implementing that in Vue would be a large, risky duplication, so both the
+  DOM controller and the Inertia flow delegate to it.
+- **Form guard** — decides *when* elevation is required (which inputs/fields
+  changed) and holds the submit until it's granted. This is what's ported.
+
+## What's here
+
+- `elevated-session.ts` — `requireElevatedSession()`, a promise wrapper over the
+  manager. Resolves once elevated, rejects with `ElevatedSessionCancelled` if the
+  modal is dismissed. Resolves as a no-op when the manager isn't on the page (the
+  server still enforces elevation, so the request just 403s if truly required).
+  The shared core for both seams below.
+- `elevated-session-form.ts` — the `ElevatedSessionForm` class, a faithful port
+  of the legacy `Craft.ElevatedSessionForm` onto `@craftcms/garnish` `Base`.
+  Watches a list of input selectors on a `<form>`; on submit, if any changed, it
+  holds the native submit and requires an elevated session first. Serves the
+  still-legacy Twig/PHP screens (`_password.twig`, `_team.twig`, the field-layout
+  email element, the GraphQL schema/token and user-group controllers).
+- `elevated-session-form.ce.ts` — `<craft-elevated-session-form>`, a self-booting
+  custom element wrapping a `<form>`, with an optional `inputs` JSON-array
+  attribute. Lets Twig emit the guard declaratively instead of a `{% js %}` boot.
+- `support.ts` — the `formElevatedSessions` WeakMap (form → instance back-ref +
+  double-init guard).
+- `index.ts` — assigns `window.Craft.ElevatedSessionForm` (the shim keeping the
+  legacy `new Craft.ElevatedSessionForm(...)` callers working) and
+  `defineElement('craft-elevated-session-form', …)`. Imported for side effects
+  from `resources/js/cp.ts`.
+
+## Inertia side
+
+Vue/Inertia screens don't submit a DOM `<form>`, so the class guard can't hook
+them. Instead:
+
+- `@/common/composables/useElevatedSession` exposes the same
+  `requireElevatedSession()` promise for one-off actions (see
+  `pages/users/SignInProviders.vue`, `pages/graphql/tokens/Edit.vue`).
+- `useSettingsSave(form, action, {elevatedFields: [...]})` snapshots those
+  fields' initial values and, on save, requires an elevated session before
+  `form.submit()` if any changed — the Inertia equivalent of the watched-input
+  list. `pages/users/Permissions.vue` uses
+  `elevatedFields: ['admin', 'groups', 'permissions']`. Pass `elevatedFields:
+  'all'` instead to require elevation whenever the form is dirty (backed by
+  Inertia's `form.isDirty`), rather than naming specific fields.
+
+The server remains the source of truth: `update()` actions call
+`ConfirmsPasswords::requireConfirmedPassword()`, which 403s without a confirmed
+password. The client guard is UX (prompt up front) — not the enforcement.
+
+## Legacy callers that must keep working
+
+Via the `Craft.ElevatedSessionForm` shim, unchanged:
+
+- `src/FieldLayout/LayoutElements/Users/EmailField.php`
+- `src/Http/Controllers/Settings/Users/UserGroupsController.php`
+- `src/Http/Controllers/Gql/{SchemasController,TokensController}.php`
+- `resources/templates/users/_password.twig`,
+  `resources/templates/users/_permissions.twig`,
+  `resources/templates/settings/users/groups/_team.twig`
+
+## Deferred
+
+Behavioral/browser verification (the login modal round-trip, 2FA/passkey users,
+and the legacy Twig callers) is left to manual testing.
diff --git a/resources/js/modules/elevated-session/elevated-session-form.ce.ts b/resources/js/modules/elevated-session/elevated-session-form.ce.ts
new file mode 100644
index 00000000000..ba1d5278978
--- /dev/null
+++ b/resources/js/modules/elevated-session/elevated-session-form.ce.ts
@@ -0,0 +1,43 @@
+import {ElevatedSessionForm} from '@/modules/elevated-session/elevated-session-form';
+import {ControllerElement} from '@/common/web-components';
+
+/**
+ * `<craft-elevated-session-form>` — boots an {@link ElevatedSessionForm} around
+ * the `<form>` it wraps, so PHP/Twig can emit the element instead of a manual
+ * `new Craft.ElevatedSessionForm(...)` boot.
+ *
+ * The optional `inputs` attribute is a JSON array of selectors to watch (resolved
+ * within the form); with none, submitting always requires an elevated session.
+ *
+ * ```html
+ * <craft-elevated-session-form inputs='["[name=\"admin\"]"]'>
+ *   <form id="main-form">…</form>
+ * </craft-elevated-session-form>
+ * ```
+ */
+export default class CraftElevatedSessionForm extends ControllerElement<ElevatedSessionForm> {
+  protected readonly rootSelector = 'form';
+
+  protected create(root: HTMLElement): ElevatedSessionForm {
+    return new ElevatedSessionForm(root, this.inputSelectors());
+  }
+
+  private inputSelectors(): string[] | undefined {
+    const raw = this.getAttribute('inputs');
+    if (!raw) {
+      return undefined;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed : undefined;
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-elevated-session-form': CraftElevatedSessionForm;
+  }
+}
diff --git a/resources/js/modules/elevated-session/elevated-session-form.ts b/resources/js/modules/elevated-session/elevated-session-form.ts
new file mode 100644
index 00000000000..d8bcc5df796
--- /dev/null
+++ b/resources/js/modules/elevated-session/elevated-session-form.ts
@@ -0,0 +1,153 @@
+import {Base, getInputPostVal} from '@craftcms/garnish';
+import {formElevatedSessions} from './support';
+import {
+  isFetchingElevatedTimeout,
+  requireElevatedSession,
+} from './elevated-session';
+
+// `Craft` and `$` (jQuery) remain page globals. This class manages a
+// server-rendered `<form>` and its inputs via jQuery, mirroring the seams kept by
+// the other legacy ports (`listbox`, `sortable-checkbox-select`).
+declare const $: any;
+
+interface WatchedInput {
+  $input: any;
+  val: string | string[] | null;
+}
+
+/**
+ * Elevated Session Form — a port of the legacy `Craft.ElevatedSessionForm` onto
+ * `@craftcms/garnish` `Base`.
+ *
+ * Guards a form so that, if any of the watched inputs changed, the native submit
+ * is held until the user establishes an elevated session (via
+ * {@link requireElevatedSession} → the login modal). Setup lives in {@link init},
+ * invoked from the constructor only for the leaf class (`new.target` guard) — the
+ * same contract as the other ports.
+ *
+ * Construct with a form (selector, element, or jQuery collection) and, optionally,
+ * a list of input selectors to watch. With no selectors it always requires an
+ * elevated session on submit (the legacy "no way to know" behavior).
+ *
+ * @see elevated-session.ts for the manager-backed promise primitive.
+ */
+export class ElevatedSessionForm extends Base {
+  $form: any = null;
+  inputSelectors: string[] = [];
+  $inputs: any = null;
+  inputs: WatchedInput[] = [];
+
+  constructor(form?: any, inputs?: string | string[]) {
+    super();
+    if (new.target === ElevatedSessionForm) {
+      this.init(form, inputs);
+    }
+  }
+
+  init(form: any, inputs?: string | string[]): void {
+    this.$form = $(form);
+    this.inputSelectors = [];
+    this.$inputs = $();
+    this.inputs = [];
+
+    // Object back-reference + double-instantiation guard.
+    const el: Element | undefined = this.$form[0];
+    if (el) {
+      formElevatedSessions.set(el, this);
+    }
+
+    // Only check specific inputs?
+    if (typeof inputs !== 'undefined') {
+      ($.makeArray(inputs) as unknown[]).forEach((selector) => {
+        if (typeof selector === 'string') {
+          this.inputSelectors.push(selector);
+        }
+
+        $(selector, this.$form).each((_i: number, input: Element) => {
+          this.$inputs = this.$inputs.add(input);
+          const $input = $(input);
+          this.inputs.push({
+            $input,
+            val: getInputPostVal(input),
+          });
+        });
+      });
+    }
+
+    this.addListener(this.$form, 'submit', 'handleFormSubmit');
+  }
+
+  handleFormSubmit(ev: any): void {
+    // Ignore if we're in the middle of getting the elevated session timeout.
+    if (isFetchingElevatedTimeout()) {
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+      ev.cancel = true;
+      return;
+    }
+
+    if (!this.inputsChanged()) {
+      return;
+    }
+
+    // Prevent the form from submitting until the user has an elevated session.
+    ev.preventDefault();
+    ev.stopImmediatePropagation();
+    ev.cancel = true;
+
+    requireElevatedSession()
+      .then(() => this.submitForm())
+      .catch(() => {
+        // Cancelled — leave the form as-is.
+      });
+  }
+
+  inputsChanged(): boolean {
+    if (!this.inputSelectors.length && !this.inputs.length) {
+      // No way to know.
+      return true;
+    }
+
+    // If we have any input selectors, see if there are any new inputs that match.
+    for (const selector of this.inputSelectors) {
+      const $inputs = $(selector, this.$form);
+      for (let i = 0; i < $inputs.length; i++) {
+        const input = $inputs[i];
+        if (!this.$inputs.is(input)) {
+          return true;
+        }
+      }
+    }
+
+    // If we have any inputs, see if their values have changed.
+    for (const {$input: initial, val} of this.inputs) {
+      // Is this a password input? (Craft swaps the visible input.)
+      const $input = initial.data('passwordInput')
+        ? initial.data('passwordInput').$currentInput
+        : initial;
+
+      if (!valsMatch(getInputPostVal($input[0] ?? $input), val)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  submitForm(): void {
+    // Don't let handleFormSubmit() interrupt this time.
+    this.disable();
+    this.$form.trigger('submit');
+    this.enable();
+  }
+}
+
+function valsMatch(
+  a: string | string[] | null,
+  b: string | string[] | null
+): boolean {
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+  return a === b;
+}
diff --git a/resources/js/modules/elevated-session/elevated-session.ts b/resources/js/modules/elevated-session/elevated-session.ts
new file mode 100644
index 00000000000..d350f1d4208
--- /dev/null
+++ b/resources/js/modules/elevated-session/elevated-session.ts
@@ -0,0 +1,73 @@
+/**
+ * Elevated session primitive — a promise wrapper over the legacy
+ * `Craft.elevatedSessionManager`.
+ *
+ * The manager (still legacy JS, {@link ElevatedSessionManager.js}) owns the
+ * timeout check + the login modal, including 2FA / passkeys / impersonation, so
+ * both the DOM-form controller ({@link ElevatedSessionForm}) and the Inertia
+ * save flow ({@link useElevatedSession}) route through it rather than
+ * reimplementing that UI.
+ *
+ * The manager exposes a callback API; this wraps it in a promise:
+ * - resolves once the user has an elevated session (immediately if one is still
+ *   valid, otherwise after the login modal succeeds),
+ * - rejects with an {@link ElevatedSessionCancelled} if the user dismisses the
+ *   modal.
+ *
+ * When the manager isn't on the page (it's assigned by the legacy CP bundle),
+ * this resolves so the caller proceeds — the server still enforces elevation via
+ * `ConfirmsPasswords::requireConfirmedPassword()`, which returns a 403.
+ */
+export class ElevatedSessionCancelled extends Error {
+  constructor() {
+    super('Elevated session was cancelled.');
+    this.name = 'ElevatedSessionCancelled';
+  }
+}
+
+interface ElevatedSessionManagerLike {
+  fetchingTimeout: boolean;
+  requireElevatedSession(
+    onSuccess: () => void,
+    onCancel?: () => void,
+    minSafeElevatedSessionTimeout?: number
+  ): void | Promise<void>;
+}
+
+function manager(): ElevatedSessionManagerLike | undefined {
+  return (window as any).Craft?.elevatedSessionManager;
+}
+
+/**
+ * Ensure the user has an elevated session, showing the login modal if needed.
+ *
+ * @param minSafeElevatedSessionTimeout Minimum seconds that must remain on an
+ *   existing elevated session for it to be reused without re-prompting.
+ */
+export function requireElevatedSession(
+  minSafeElevatedSessionTimeout?: number
+): Promise<void> {
+  const mgr = manager();
+
+  // No manager on the page — let the caller proceed; the server enforces.
+  if (!mgr) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    mgr.requireElevatedSession(
+      () => resolve(),
+      () => reject(new ElevatedSessionCancelled()),
+      minSafeElevatedSessionTimeout
+    );
+  });
+}
+
+/**
+ * Whether the manager is mid-flight fetching the elevated-session timeout. The
+ * DOM-form controller uses this to ignore re-entrant submits, mirroring the
+ * legacy guard.
+ */
+export function isFetchingElevatedTimeout(): boolean {
+  return manager()?.fetchingTimeout === true;
+}
diff --git a/resources/js/modules/elevated-session/index.ts b/resources/js/modules/elevated-session/index.ts
new file mode 100644
index 00000000000..bd973d52e31
--- /dev/null
+++ b/resources/js/modules/elevated-session/index.ts
@@ -0,0 +1,23 @@
+import {ElevatedSessionForm} from '@/modules/elevated-session/elevated-session-form';
+import CraftElevatedSessionForm from '@/modules/elevated-session/elevated-session-form.ce';
+import {defineElement} from '@/common/web-components';
+
+/**
+ * Assign onto the legacy `Craft` global so the Twig/PHP-emitted
+ * `new Craft.ElevatedSessionForm(form, [selectors])` keeps working. Nothing
+ * subclasses it via legacy `.extend()`, so — like `SortableCheckboxSelect` — it
+ * needs no compat shim and is assigned as the modern ES class directly.
+ *
+ * The elevated-session *manager* (the timeout check + login modal) remains the
+ * legacy `Craft.elevatedSessionManager`; this class delegates to it.
+ */
+const craft = (window as any).Craft ?? ((window as any).Craft = {});
+craft.ElevatedSessionForm = ElevatedSessionForm;
+
+defineElement('craft-elevated-session-form', CraftElevatedSessionForm);
+
+export {ElevatedSessionForm, CraftElevatedSessionForm};
+export {
+  requireElevatedSession,
+  ElevatedSessionCancelled,
+} from '@/modules/elevated-session/elevated-session';
diff --git a/resources/js/modules/elevated-session/support.ts b/resources/js/modules/elevated-session/support.ts
new file mode 100644
index 00000000000..5e671a1a706
--- /dev/null
+++ b/resources/js/modules/elevated-session/support.ts
@@ -0,0 +1,9 @@
+import type {ElevatedSessionForm} from './elevated-session-form';
+
+/**
+ * Maps a form element back to its {@link ElevatedSessionForm} instance — the
+ * native replacement for a `$form.data('elevatedSessionForm', this)`
+ * back-reference, and the double-instantiation guard. Mirrors the
+ * `listbox` / `sortable-checkbox-select` `support.ts`.
+ */
+export const formElevatedSessions = new WeakMap<Element, ElevatedSessionForm>();
diff --git a/resources/js/modules/permissions/components/PermissionList.vue b/resources/js/modules/permissions/components/PermissionList.vue
index 5fe2041f366..8b7fd686e40 100644
--- a/resources/js/modules/permissions/components/PermissionList.vue
+++ b/resources/js/modules/permissions/components/PermissionList.vue
@@ -103,7 +103,7 @@
 
 <template>
   <div v-if="heading" class="flex gap-2 items-center">
-    <h3 class="mb-1 text-base">
+    <h3 class="text-base !m-0">
       {{ heading }}
     </h3>
 
diff --git a/resources/js/modules/settings/composables/useSettingsSave.ts b/resources/js/modules/settings/composables/useSettingsSave.ts
index 2caaa678a41..4d00001772d 100644
--- a/resources/js/modules/settings/composables/useSettingsSave.ts
+++ b/resources/js/modules/settings/composables/useSettingsSave.ts
@@ -2,14 +2,28 @@ import {useEventListener} from '@vueuse/core';
 import {type InertiaForm, usePage} from '@inertiajs/vue3';
 import {computed} from 'vue';
 import type {FormSaveOptions} from '@/common/types';
+import {
+  ElevatedSessionCancelled,
+  requireElevatedSession,
+} from '@/modules/elevated-session/elevated-session';
 
 interface UseSettingsSaveOptions<T extends Record<string, any>> {
   transform?: (data: T) => Record<string, any>;
+  /**
+   * Which changes require an elevated (password-confirmed) session before the
+   * form may submit — the Inertia-friendly port of `Craft.ElevatedSessionForm`'s
+   * watched-input list. Pass an array of fields to watch just those (elevation is
+   * required when any differ from their initial value at save time), or `'*'` to
+   * require elevation whenever the form is dirty. When triggered, the login modal
+   * is shown first (via {@link requireElevatedSession}). The server still
+   * enforces elevation with `ConfirmsPasswords::requireConfirmedPassword()`.
+   */
+  elevatedFields?: Array<keyof T> | '*';
 }
 
 export function useSettingsSave<T extends Record<string, any>>(
   form: InertiaForm<T>,
-  action: any,
+  action: () => any,
   options: UseSettingsSaveOptions<T> = {}
 ) {
   const page = usePage<{
@@ -17,6 +31,28 @@ export function useSettingsSave<T extends Record<string, any>>(
   }>();
   const redirectUrl = computed(() => page.props.redirectUrl);
 
+  const elevatedFields = options.elevatedFields ?? [];
+
+  // Snapshot the watched fields' initial values so we can tell, at save time,
+  // whether an elevated session is required (mirrors the legacy
+  // `ElevatedSessionForm.inputsChanged()`). Empty in `'all'` mode, which defers
+  // to Inertia's own dirty tracking instead.
+  const elevatedBaseline = new Map<keyof T, string>(
+    elevatedFields === 'all'
+      ? []
+      : elevatedFields.map((field) => [field, normalize(form[field])])
+  );
+
+  function elevatedFieldsChanged(): boolean {
+    if (elevatedFields === 'all') {
+      return form.isDirty;
+    }
+
+    return elevatedFields.some(
+      (field) => normalize(form[field]) !== elevatedBaseline.get(field)
+    );
+  }
+
   // Handle cmd + s events
   useEventListener('keydown', (event) => {
     if ((event.metaKey || event.ctrlKey) && event.key === 's') {
@@ -25,13 +61,25 @@ export function useSettingsSave<T extends Record<string, any>>(
     }
   });
 
-  function save({
+  async function save({
     redirect = true,
     data: extraData = {},
     // Callers can opt out of state preservation — e.g. "save as new", which
     // navigates to a different record and needs the form to re-initialize.
     preserveState = true,
   }: FormSaveOptions = {}) {
+    // Establish an elevated session before submitting if a watched field changed.
+    if (elevatedFieldsChanged()) {
+      try {
+        await requireElevatedSession();
+      } catch (e) {
+        if (e instanceof ElevatedSessionCancelled) {
+          return;
+        }
+        throw e;
+      }
+    }
+
     const submitOptions = redirect
       ? {
           preserveScroll: true,
@@ -58,3 +106,14 @@ export function useSettingsSave<T extends Record<string, any>>(
 
   return {save};
 }
+
+/**
+ * Stringify a field value for change comparison. Arrays are sorted first so that
+ * a set of permissions/groups compares equal regardless of order.
+ */
+function normalize(value: unknown): string {
+  if (Array.isArray(value)) {
+    return JSON.stringify([...value].sort());
+  }
+  return JSON.stringify(value);
+}
diff --git a/resources/js/pages/graphql/tokens/Edit.vue b/resources/js/pages/graphql/tokens/Edit.vue
index fdf6adeb3f5..6f149d05a5e 100644
--- a/resources/js/pages/graphql/tokens/Edit.vue
+++ b/resources/js/pages/graphql/tokens/Edit.vue
@@ -9,6 +9,7 @@
   import CraftSwitch from '@craftcms/cp/vue/CraftSwitch.vue';
   import {useAppLayout} from '@/common/composables/useAppLayout';
   import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
+  import {useElevatedSession} from '@/common/composables/useElevatedSession';
   import {
     accessToken as revealAccessToken,
     generate,
@@ -58,6 +59,7 @@
     props.token.id ? update({tokenId: props.token.id}) : store();
 
   const {save} = useSettingsSave(form, routeAction);
+  const {requireElevatedSession} = useElevatedSession();
 
   useAppLayout({form, onSave: save});
 
@@ -72,11 +74,15 @@
     const tokenId = props.token.id;
 
     if (!visibleAccessToken.value && tokenId) {
-      (Craft as any).elevatedSessionManager.requireElevatedSession(async () => {
-        await revealToken(tokenId);
-        await nextTick();
-        await copyButton.value?.copyValue();
-      });
+      requireElevatedSession()
+        .then(async () => {
+          await revealToken(tokenId);
+          await nextTick();
+          await copyButton.value?.copyValue();
+        })
+        .catch(() => {
+          // Cancelled — leave the token hidden.
+        });
     }
   }
 
diff --git a/resources/js/pages/users/Permissions.vue b/resources/js/pages/users/Permissions.vue
index 2e2a9a0fdd3..b9b5a29d28f 100644
--- a/resources/js/pages/users/Permissions.vue
+++ b/resources/js/pages/users/Permissions.vue
@@ -36,7 +36,9 @@
           userId: props.user.id,
         });
 
-  const {save} = useSettingsSave(form, routeAction);
+  const {save} = useSettingsSave(form, routeAction, {
+    elevatedFields: ['admin', 'groups', 'permissions'],
+  });
 
   const lockedPermissions = computed(() => [
     ...new Set(
@@ -75,25 +77,26 @@
     :value="form.permissions.join(',')"
   />
 
-  <Pane appearance="raised" :padding="0">
-    <div class="grid gap-6 p-4">
-      <section v-if="props.can.assignUserGroups" class="grid gap-3">
-        <h2 class="text-lg">{{ t('User Groups') }}</h2>
-
-        <UserGroupSelect
-          :groups="props.groups"
-          :can-create="props.can.createGroups"
-          :error="form.errors.groups"
-          v-model="form.groups"
-        />
-      </section>
+  <Pane appearance="raised">
+    <section v-if="props.can.assignUserGroups">
+      <h2 class="text-lg">{{ t('User Groups') }}</h2>
 
-      <hr
-        v-if="props.can.assignUserGroups && props.can.assignUserPermissions"
+      <UserGroupSelect
+        :groups="props.groups"
+        :can-create="props.can.createGroups"
+        :error="form.errors.groups"
+        v-model="form.groups"
       />
+    </section>
+
+    <hr
+      class="my-3"
+      v-if="props.can.assignUserGroups && props.can.assignUserPermissions"
+    />
 
-      <section v-if="props.can.assignUserPermissions" class="grid gap-3">
-        <h2 class="text-lg">{{ t('Permissions') }}</h2>
+    <section v-if="props.can.assignUserPermissions">
+      <craft-field-group>
+        <h2 class="text-lg !m-0">{{ t('Permissions') }}</h2>
 
         <CraftSwitch
           v-if="props.showAdminSwitch"
@@ -147,8 +150,8 @@
             />
           </div>
         </div>
-      </section>
-    </div>
+      </craft-field-group>
+    </section>
   </Pane>
 
   <LayoutSlot v-if="props.details" name="details">
diff --git a/resources/js/pages/users/SignInProviders.vue b/resources/js/pages/users/SignInProviders.vue
index f550c1bce2a..edf64030448 100644
--- a/resources/js/pages/users/SignInProviders.vue
+++ b/resources/js/pages/users/SignInProviders.vue
@@ -8,6 +8,7 @@
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import Badge from '@/common/components/Badge.vue';
+  import {useElevatedSession} from '@/common/composables/useElevatedSession';
 
   defineOptions({
     inheritAttrs: false,
@@ -20,8 +21,13 @@
 
   const processingProvider = ref<string | null>(null);
 
+  const {requireElevatedSession: elevate} = useElevatedSession();
+
   function requireElevatedSession(onSuccess: () => void) {
-    (Craft as any).elevatedSessionManager.requireElevatedSession(onSuccess);
+    // Fire-and-forget: run the action once elevated, ignore a cancelled modal.
+    elevate()
+      .then(onSuccess)
+      .catch(() => {});
   }
 
   function connectProvider(provider: Provider) {
diff --git a/src/Http/Controllers/Users/PermissionsController.php b/src/Http/Controllers/Users/PermissionsController.php
index 1edc2587c7c..2d0306b2e95 100644
--- a/src/Http/Controllers/Users/PermissionsController.php
+++ b/src/Http/Controllers/Users/PermissionsController.php
@@ -12,7 +12,6 @@
 use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Http\ViewModels\UserPermissionsViewModel;
 use CraftCms\Cms\Support\Arr;
-use CraftCms\Cms\Support\Facades\HtmlStack;
 use CraftCms\Cms\Support\Facades\UserGroups;
 use CraftCms\Cms\Support\Facades\UserPermissions;
 use CraftCms\Cms\Support\Facades\Users;
@@ -42,20 +41,11 @@ public function index(Request $request, ?int $userId = null): CpScreenResponse
             abort(401);
         }
 
+        // Elevation is handled client-side by the Inertia page via
+        // `useSettingsSave({elevatedFields: […]})`, and enforced server-side in
+        // `update()` via `requireConfirmedPassword()`.
         return $this->asEditUserScreen($user, self::SCREEN_PERMISSIONS)
-            ->inertiaPage('users/Permissions', new UserPermissionsViewModel($user, $currentUser))
-            ->prepareScreen(function (CpScreenResponse $response, string $containerId) {
-                HtmlStack::jsWithVars(
-                    fn ($containerId) => <<<JS
-                        new Craft.ElevatedSessionForm('#' + $containerId, [
-                            '[name="admin"]',
-                            '[data-user-groups-input]',
-                            '[data-user-permissions-input]'
-                        ]);
-                    JS,
-                    [$containerId],
-                );
-            });
+            ->inertiaPage('users/Permissions', new UserPermissionsViewModel($user, $currentUser));
     }
 
     public function update(Request $request, Elements $elements, ?int $userId = null): Response

From 23350b8b3e7e0754eacb3d164353bc1213487255 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 10 Jul 2026 14:44:42 -0500
Subject: [PATCH 6/8] Drop stray design-token changes (moved to
 design-token-updates)

The skip-link token renames and permissions heading margin tweak that landed in
"First run through" are unrelated to the elevated-session work; they've been
split out to the design-token-updates branch (off 6.x).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/craftcms-cp/src/styles/cp.css                      | 6 +++---
 .../js/modules/permissions/components/PermissionList.vue    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/craftcms-cp/src/styles/cp.css b/packages/craftcms-cp/src/styles/cp.css
index 9b343e8c59b..715500bf73a 100644
--- a/packages/craftcms-cp/src/styles/cp.css
+++ b/packages/craftcms-cp/src/styles/cp.css
@@ -26,13 +26,13 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  background-color: var(--c-surface-default);
+  background-color: var(--c-bg-body);
   text-decoration: none;
   padding-block: var(--c-spacing-md);
   padding-inline: var(--c-spacing-lg);
   outline: none;
-  border: 1px dashed var(--c-form-control-border-color);
-  color: var(--c-text-default);
+  border: 1px dashed var(--c-form-control-border);
+  color: var(--c-fg-text);
   font-weight: var(--font-weight-medium);
   border-radius: var(--c-radius-md);
 
diff --git a/resources/js/modules/permissions/components/PermissionList.vue b/resources/js/modules/permissions/components/PermissionList.vue
index 8b7fd686e40..5fe2041f366 100644
--- a/resources/js/modules/permissions/components/PermissionList.vue
+++ b/resources/js/modules/permissions/components/PermissionList.vue
@@ -103,7 +103,7 @@
 
 <template>
   <div v-if="heading" class="flex gap-2 items-center">
-    <h3 class="text-base !m-0">
+    <h3 class="mb-1 text-base">
       {{ heading }}
     </h3>
 

From 61fcbfe5bcf75b75a82ede20fc394337aef8b415 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 10 Jul 2026 15:21:13 -0500
Subject: [PATCH 7/8] Styling cleanup

---
 packages/craftcms-legacy/cp/src/css/_cp.scss  |  15 --
 resources/js/common/components/Pane.vue       |   2 +-
 .../elevated-session/ElevatedSessionHost.vue  |  37 ++---
 .../permissions/components/PermissionList.vue |   2 +-
 .../user/components/UserGroupSelect.vue       |  18 +--
 resources/js/pages/users/Permissions.vue      | 139 +++++++++---------
 6 files changed, 91 insertions(+), 122 deletions(-)

diff --git a/packages/craftcms-legacy/cp/src/css/_cp.scss b/packages/craftcms-legacy/cp/src/css/_cp.scss
index 6041a22c3d0..6141833e550 100644
--- a/packages/craftcms-legacy/cp/src/css/_cp.scss
+++ b/packages/craftcms-legacy/cp/src/css/_cp.scss
@@ -1577,21 +1577,6 @@ li.breadcrumb-toggle-wrapper {
   }
 }
 
-/* grids */
-.grid {
-  position: relative;
-  min-height: 1px; // Required for Grid.js to run
-
-  &::after {
-    @include mixins.clearafter;
-  }
-
-  & > .item {
-    display: none;
-    box-sizing: border-box;
-  }
-}
-
 %type-heading-small {
   text-transform: uppercase;
   color: var(--medium-text-color);
diff --git a/resources/js/common/components/Pane.vue b/resources/js/common/components/Pane.vue
index 82661bb14b2..58ab2d6b800 100644
--- a/resources/js/common/components/Pane.vue
+++ b/resources/js/common/components/Pane.vue
@@ -74,7 +74,7 @@
     <slot name="header" v-if="showHeader">
       <div class="cp-pane__header">
         <slot name="title">
-          <h1 v-if="title" class="text-lg">
+          <h1 v-if="title" class="text-lg m-0!">
             {{ title }}
           </h1>
         </slot>
diff --git a/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
index cf49ebc2cb6..50d68f79964 100644
--- a/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
+++ b/resources/js/modules/auth/elevated-session/ElevatedSessionHost.vue
@@ -2,16 +2,18 @@
   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 {nextTick, onBeforeUnmount, useTemplateRef, 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';
+  import type CraftLoginForm from '@/modules/auth/components/login/login-form';
 
   const {state} = elevatedSessionManager;
   let previouslyFocused: HTMLElement | null = null;
   let dialog: Element | null = null;
+  const loginForm = useTemplateRef<CraftLoginForm | null>('loginForm');
 
   watch(
     () => state.active,
@@ -19,11 +21,7 @@
       if (active) {
         previouslyFocused = document.activeElement as HTMLElement | null;
         await nextTick();
-        document
-          .querySelector<HTMLElement>(
-            '[data-elevated-session-dialog] craft-login-form'
-          )
-          ?.focus();
+        loginForm.value?.focus();
       } else {
         if (dialog) {
           releaseFocusWithin(dialog);
@@ -59,36 +57,25 @@
 </script>
 
 <template>
-  <Modal :is-active="state.active" width="md" @close="close" @opened="opened">
+  <Modal :is-active="state.active" width="sm" @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 class="grid gap-2 mb-3">
+        <h1 id="elevated-session-title" class="m-0!">
+          {{ t('Confirm your identity.') }}
+        </h1>
+        <div id="elevated-session-description" class="text-md">
+          {{ t('You must reverify your identity before proceeding.') }}
         </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
+        ref="loginForm"
         tabindex="0"
         :action="ConfigService.getInstance().getCpUrl('login')"
         :static-email="state.loginName"
diff --git a/resources/js/modules/permissions/components/PermissionList.vue b/resources/js/modules/permissions/components/PermissionList.vue
index 5fe2041f366..f1b3490df8e 100644
--- a/resources/js/modules/permissions/components/PermissionList.vue
+++ b/resources/js/modules/permissions/components/PermissionList.vue
@@ -103,7 +103,7 @@
 
 <template>
   <div v-if="heading" class="flex gap-2 items-center">
-    <h3 class="mb-1 text-base">
+    <h3 class="m-0! text-base">
       {{ heading }}
     </h3>
 
diff --git a/resources/js/modules/user/components/UserGroupSelect.vue b/resources/js/modules/user/components/UserGroupSelect.vue
index f39223318da..9f5786d17d7 100644
--- a/resources/js/modules/user/components/UserGroupSelect.vue
+++ b/resources/js/modules/user/components/UserGroupSelect.vue
@@ -75,28 +75,26 @@
 </script>
 
 <template>
-  <div class="grid gap-2 mr-auto">
+  <div class="grid gap-2">
     <div class="user-group-list">
       <craft-chip v-for="group in selectedGroups" :key="group.id">
-        <div class="grid gap-1 justify-items-start">
+        <div class="grid gap-1">
           <div class="flex gap-1">
             <div class="font-bold">{{ groupLabel(group) }}</div>
             <Tooltip v-if="group.description">{{ group.description }}</Tooltip>
           </div>
-          <div class="cp-code">{{ group.handle }}</div>
         </div>
 
         <craft-button
           slot="suffix"
-          icon
+          icon="x"
           type="button"
           appearance="plain"
+          size="small"
           @click="removeGroup(group.id)"
+          aria-label="t('Remove {name}', {name: groupLabel(group)})"
+          variant="danger"
         >
-          <craft-icon
-            name="x"
-            :label="t('Remove {name}', {name: groupLabel(group)})"
-          ></craft-icon>
         </craft-button>
       </craft-chip>
     </div>
@@ -157,8 +155,8 @@
 
 <style scoped lang="scss">
   .user-group-list {
-    display: inline-flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: var(--c-spacing-sm);
   }
 </style>
diff --git a/resources/js/pages/users/Permissions.vue b/resources/js/pages/users/Permissions.vue
index 362c65c0171..41e9496848b 100644
--- a/resources/js/pages/users/Permissions.vue
+++ b/resources/js/pages/users/Permissions.vue
@@ -87,80 +87,79 @@
     :value="form.permissions.join(',')"
   />
 
-  <Pane appearance="raised" :padding="0">
-    <div class="grid gap-6 p-4">
-      <section v-if="props.can.assignUserGroups" class="grid gap-3">
-        <h2 class="text-lg">{{ t('User Groups') }}</h2>
-
-        <UserGroupSelect
-          :groups="props.groups"
-          :can-create="props.can.createGroups"
-          :error="form.errors.groups"
-          v-model="form.groups"
-        />
-      </section>
-
-      <hr
-        v-if="props.can.assignUserGroups && props.can.assignUserPermissions"
+  <Pane appearance="raised">
+    <craft-field-group v-if="props.can.assignUserGroups" class="grid gap-3">
+      <h2 class="text-lg m-0!">{{ t('User Groups') }}</h2>
+
+      <UserGroupSelect
+        :groups="props.groups"
+        :can-create="props.can.createGroups"
+        :error="form.errors.groups"
+        v-model="form.groups"
+      />
+    </craft-field-group>
+
+    <hr
+      class="my-3"
+      v-if="props.can.assignUserGroups && props.can.assignUserPermissions"
+    />
+
+    <craft-field-group v-if="props.can.assignUserPermissions">
+      <h2 class="text-lg m-0!">{{ t('Permissions') }}</h2>
+
+      <CraftSwitch
+        v-if="props.showAdminSwitch"
+        :label="t('Admin')"
+        id="admin"
+        name="admin"
+        type="checkbox"
+        value="1"
+        v-model="form.admin"
+        :error="form.errors.admin"
       />
 
-      <section v-if="props.can.assignUserPermissions" class="grid gap-3">
-        <h2 class="text-lg">{{ t('Permissions') }}</h2>
-
-        <CraftSwitch
-          v-if="props.showAdminSwitch"
-          :label="t('Admin')"
-          id="admin"
-          name="admin"
-          type="checkbox"
-          value="1"
-          v-model="form.admin"
-          :error="form.errors.admin"
-        />
-
-        <craft-callout
-          v-if="props.teamPermissionsNotice && !form.admin"
-          data-color="info"
-        >
-          <template v-if="props.teamPermissionsNotice.allowAdminChanges">
-            {{ t('Team permissions can be managed from') }}
-            <CpLink
-              :href="props.teamPermissionsNotice.settingsUrl"
-              :inertia="false"
-            >
-              {{ t('User Permissions') }}
-            </CpLink>
-          </template>
-          <template v-else>
-            {{
-              t(
-                'Team permissions can be managed from {path} on a development environment.',
-                {
-                  path: props.teamPermissionsNotice.path.join(' -> '),
-                }
-              )
-            }}
-          </template>
-        </craft-callout>
-
-        <div v-if="!form.admin" class="grid gap-3">
-          <div
-            v-for="group in props.permissions"
-            :key="group.handle"
-            class="user-permissions"
+      <craft-callout
+        v-if="props.teamPermissionsNotice && !form.admin"
+        data-color="info"
+      >
+        <template v-if="props.teamPermissionsNotice.allowAdminChanges">
+          {{ t('Team permissions can be managed from') }}
+          <CpLink
+            :href="props.teamPermissionsNotice.settingsUrl"
+            :inertia="false"
           >
-            <PermissionList
-              :heading="group.heading"
-              :permissions="group.permissions"
-              :permission-keys="group.keys"
-              :locked-permissions="lockedPermissions"
-              :disabled="Boolean(props.teamPermissionsNotice)"
-              v-model="form.permissions"
-            />
-          </div>
+            {{ t('User Permissions') }}
+          </CpLink>
+        </template>
+        <template v-else>
+          {{
+            t(
+              'Team permissions can be managed from {path} on a development environment.',
+              {
+                path: props.teamPermissionsNotice.path.join(' -> '),
+              }
+            )
+          }}
+        </template>
+      </craft-callout>
+
+      <craft-field-group v-if="!form.admin">
+        <div
+          v-for="group in props.permissions"
+          :key="group.handle"
+          class="user-permissions"
+        >
+          <PermissionList
+            :heading="group.heading"
+            :permissions="group.permissions"
+            :permission-keys="group.keys"
+            :locked-permissions="lockedPermissions"
+            :disabled="Boolean(props.teamPermissionsNotice)"
+            v-model="form.permissions"
+          />
         </div>
-      </section>
-    </div>
+      </craft-field-group>
+    </craft-field-group>
   </Pane>
 
   <LayoutSlot v-if="props.details" name="details">

From 85716025ce222afc39f50bcc142c74713481a282 Mon Sep 17 00:00:00 2001
From: Brian Hanson <brian@brianhanson.net>
Date: Fri, 10 Jul 2026 15:42:27 -0500
Subject: [PATCH 8/8] Refactor a bit

---
 .../modules/auth/elevated-session/README.md   | 51 +++++++++++++++++++
 .../elevated-session-form.ce.ts               | 50 ++++++++++++++++++
 .../js/modules/auth/elevated-session/index.ts | 11 ++++
 3 files changed, 112 insertions(+)
 create mode 100644 resources/js/modules/auth/elevated-session/README.md
 create mode 100644 resources/js/modules/auth/elevated-session/elevated-session-form.ce.ts

diff --git a/resources/js/modules/auth/elevated-session/README.md b/resources/js/modules/auth/elevated-session/README.md
new file mode 100644
index 00000000000..0914bdf27e3
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/README.md
@@ -0,0 +1,51 @@
+# Elevated session
+
+Forces the user to (re)confirm their password before a sensitive change goes
+through (toggling admin, granting new permissions/groups, changing a password,
+revealing a GraphQL token, etc.).
+
+Split along the same lines as other modules — a main controller
+class, a custom element that boots it, and an `index.ts` that shims the modern
+code onto the legacy `Craft.*` globals — plus the reactive manager + Vue modal
+that back the confirmation UI.
+
+## Files
+
+- `elevated-session-form.ts` — the **main class**, `ElevatedSessionForm`. Guards a
+  `<form>`: on submit, if any watched input changed, it holds the native submit,
+  requires an elevated session via the manager, then re-submits. Dependency-free
+  DOM (`requestSubmit` / `SubmitEvent`); the only jQuery seam is reading a Craft
+  password field's swapped input.
+- `elevated-session-form.ce.ts` — the **custom element**,
+  `<craft-elevated-session-form>`. Boots `ElevatedSessionForm` around the `<form>`
+  it wraps (optional `inputs` JSON-array attribute), so Twig can emit it instead
+  of a `{% js %}` boot.
+- `index.ts` — the **shim**. Assigns `window.Craft.ElevatedSessionForm` and
+  `window.Craft.elevatedSessionManager` (a `LegacyElevatedSessionManager` adapter
+  over the modern manager) so existing `new Craft.ElevatedSessionForm(...)`
+  callers keep working, and `defineElement('craft-elevated-session-form', …)`.
+  Also exports `mountElevatedSessionHost()` and the `usePasswordConfirmation()`
+  composable. Imported for side effects from `resources/js/cp.ts`; the host is
+  mounted from `resources/js/legacy.ts`.
+- `manager.ts` — `ElevatedSessionManager`, a reactive (Vue) manager. Talks to the
+  `users/confirm-password` endpoint, coalesces concurrent `require()` calls, and
+  drives the modal's state. `run()` also retries a callback once on a `423`.
+- `ElevatedSessionHost.vue` — the Vue modal that renders the `craft-login-form`
+  (with 2FA / passkey fallbacks) when the manager needs confirmation. Mounted once
+  into `<body>`.
+
+## Two seams, one manager
+
+There are two ways to require elevation, both routed through the single reactive
+`elevatedSessionManager`:
+
+- **Legacy DOM forms** — `ElevatedSessionForm` / `<craft-elevated-session-form>`,
+  used by `EmailField.php` and the `_password` / `_team` / `_permissions` Twig
+  screens through the `Craft.ElevatedSessionForm` shim.
+- **Inertia/Vue** — `useSettingsSave({passwordConfirmation})` and direct
+  `elevatedSessionManager.run(...)` calls (e.g. `SignInProviders.vue`,
+  `tokens/Edit.vue`).
+
+The server is the source of truth: `RequireConfirmedPassword` /
+`ConfirmsPasswords::requireConfirmedPassword()` returns `423` when elevation is
+missing, so the client guard is UX, not enforcement.
diff --git a/resources/js/modules/auth/elevated-session/elevated-session-form.ce.ts b/resources/js/modules/auth/elevated-session/elevated-session-form.ce.ts
new file mode 100644
index 00000000000..2ea9dd52858
--- /dev/null
+++ b/resources/js/modules/auth/elevated-session/elevated-session-form.ce.ts
@@ -0,0 +1,50 @@
+import {ElevatedSessionForm} from '@/modules/auth/elevated-session/elevated-session-form';
+import {ControllerElement} from '@/common/web-components';
+
+/**
+ * `<craft-elevated-session-form>` — boots an {@link ElevatedSessionForm} around
+ * the `<form>` it wraps, so PHP/Twig can emit the element instead of a manual
+ * `new Craft.ElevatedSessionForm(...)` `{% js %}` block (the same declarative
+ * shape as `<craft-listbox>` / `<craft-generated-fields-table>`).
+ *
+ * The form renders as **light-DOM children** — the controller listens on the real
+ * `<form>` submit and calls `requestSubmit()` on it, so a shadow root would hide
+ * it. The optional `inputs` attribute is a JSON array of selectors to watch
+ * (resolved within the form); with none, submitting always requires an elevated
+ * session — mirroring the constructor's `inputTargets` argument.
+ *
+ * ```html
+ * <craft-elevated-session-form inputs='["[name=\"admin\"]"]'>
+ *   <form id="main-form">…</form>
+ * </craft-elevated-session-form>
+ * ```
+ */
+export default class CraftElevatedSessionForm extends ControllerElement<ElevatedSessionForm> {
+  protected readonly rootSelector = 'form';
+
+  protected create(form: HTMLElement): ElevatedSessionForm {
+    return new ElevatedSessionForm(
+      form as HTMLFormElement,
+      this.inputSelectors()
+    );
+  }
+
+  private inputSelectors(): string[] | undefined {
+    const raw = this.getAttribute('inputs');
+    if (!raw) {
+      return undefined;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed : undefined;
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-elevated-session-form': CraftElevatedSessionForm;
+  }
+}
diff --git a/resources/js/modules/auth/elevated-session/index.ts b/resources/js/modules/auth/elevated-session/index.ts
index 89533c71480..14ac840474c 100644
--- a/resources/js/modules/auth/elevated-session/index.ts
+++ b/resources/js/modules/auth/elevated-session/index.ts
@@ -1,6 +1,8 @@
 import {createApp} from 'vue';
 import ElevatedSessionHost from './ElevatedSessionHost.vue';
 import {ElevatedSessionForm} from './elevated-session-form';
+import CraftElevatedSessionForm from './elevated-session-form.ce';
+import {defineElement} from '@/common/web-components';
 import {
   elevatedSessionManager,
   ElevatedSessionManager,
@@ -35,11 +37,19 @@ class LegacyElevatedSessionManager {
   }
 }
 
+// Assign onto the legacy `Craft` global so the Twig/PHP-emitted
+// `new Craft.ElevatedSessionForm(...)` (EmailField, _password/_team/_permissions
+// screens) and `Craft.elevatedSessionManager` keep working. The manager global is
+// a thin `LegacyElevatedSessionManager` shim over the modern reactive manager.
 const craft = (window as any).Craft ?? ((window as any).Craft = {});
 craft.ElevatedSessionManager = LegacyElevatedSessionManager;
 craft.elevatedSessionManager = new LegacyElevatedSessionManager();
 craft.ElevatedSessionForm = ElevatedSessionForm;
 
+// Register the declarative custom element, so Twig can emit
+// `<craft-elevated-session-form>` instead of the manual global constructor.
+defineElement('craft-elevated-session-form', CraftElevatedSessionForm);
+
 export function mountElevatedSessionHost(): void {
   if (document.querySelector('[data-elevated-session-host]')) {
     return;
@@ -64,6 +74,7 @@ export function usePasswordConfirmation() {
 
 export {
   ElevatedSessionForm,
+  CraftElevatedSessionForm,
   ElevatedSessionHost,
   elevatedSessionManager,
   ElevatedSessionManager,