[6.x] Modernize elevated sessions

CHANGELOG.md

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

composer.json

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

package.json

@@ -27,6 +27,7 @@
     "dev:cp": "cd ./packages/craftcms-cp && npm run dev",
     "build:cp": "cd ./packages/craftcms-cp && npm run build",
     "build:garnish": "cd ./packages/craftcms-garnish && npm run build",
+    "test": "vitest run",
     "test:cp": "cd ./packages/craftcms-cp && npm run test",
     "storybook": "storybook dev -p 6007",
     "build:storybook": "storybook build",

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';

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);

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>

resources/js/common/layouts/AppLayout.vue

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

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

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

resources/js/cp.ts

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

resources/js/legacy.ts

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

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

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