UI: [VAULT-19783] Set up root token warning modal

changelog/23277.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add modal to warn users about the behavior when logging in with a root token.
+```

ui/app/controllers/vault/cluster/auth.js

@@ -62,9 +62,7 @@ export default Controller.extend({
     }
     transition.followRedirects().then(() => {
       if (isRoot) {
-        this.flashMessages.warning(
-          'You have logged in with a root token. As a security precaution, this root token will not be stored by your browser and you will need to re-authenticate after the window is closed or refreshed.'
-        );
+        this.auth.set('showRootTokenWarning', true);
       }
     });
   },

ui/app/services/auth.js

@@ -36,6 +36,7 @@ export default Service.extend({
   expirationCalcTS: null,
   isRenewing: false,
   mfaErrors: null,
+  showRootTokenWarning: false,
 
   get tokenExpired() {
     const expiration = this.tokenExpirationDate;

ui/app/services/namespace.js

@@ -6,6 +6,7 @@
 import { alias, equal } from '@ember/object/computed';
 import Service, { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import { computed } from '@ember/object';
 
 const ROOT_NAMESPACE = '';
 export default Service.extend({
@@ -20,6 +21,13 @@ export default Service.extend({
 
   inRootNamespace: equal('path', ROOT_NAMESPACE),
 
+  currentNamespacePath: computed('inRootNamespace', 'path', function () {
+    if (this.inRootNamespace) return 'root';
+
+    const parts = this.path?.split('/');
+    return parts[parts.length - 1];
+  }),
+
   setNamespace(path) {
     if (!path) {
       this.set('path', '');

ui/app/templates/vault/cluster.hbs

@@ -3,6 +3,40 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
+{{#if this.auth.showRootTokenWarning}}
+  <Modal
+    @title="Warning"
+    @onClose={{fn (mut this.auth.showRootTokenWarning) false}}
+    @isActive={{this.auth.showRootTokenWarning}}
+    @type="warning"
+  >
+    <section class="modal-card-body">
+      {{#if this.namespaceService.inRootNamespace}}
+        You have logged in with a root token. As a security precaution, this root token will not be stored by your browser
+        and you will need to re-authenticate after the window is closed or refreshed. Click
+        <b>confirm</b>
+        to continue.
+      {{else}}
+        As a security precaution, you will be logged out and need to log in again to navigate to the
+        <code>{{this.namespaceService.currentNamespacePath}}</code>
+        namespace. Click
+        <b>confirm</b>
+        to continue.
+      {{/if}}
+    </section>
+    <footer class="modal-card-foot modal-card-foot-outlined">
+      <button
+        type="button"
+        class="button is-primary"
+        {{on "click" (fn (mut this.auth.showRootTokenWarning) false)}}
+        data-test-root-warning-confirm
+      >
+        Confirm
+      </button>
+    </footer>
+  </Modal>
+
+{{/if}}
 <Sidebar::Nav::Cluster />
 {{! Only show license banners for Enterprise }}
 {{#if this.activeCluster.version.isEnterprise}}

ui/tests/acceptance/auth-list-test.js

@@ -79,6 +79,7 @@ module('Acceptance | auth backend list', function (hooks) {
   test('auth methods are linkable and link to correct view', async function (assert) {
     assert.expect(16);
     const uid = uuidv4();
+    await click('[data-test-root-warning-confirm]');
     await visit('/vault/access');
 
     const supportManaged = supportedManagedAuthBackends();
@@ -117,6 +118,7 @@ module('Acceptance | auth backend list', function (hooks) {
   test('enterprise: auth methods are linkable and link to correct view', async function (assert) {
     assert.expect(19);
     const uid = uuidv4();
+    await click('[data-test-root-warning-confirm]');
     await visit('/vault/access');
 
     const supportManaged = supportedManagedAuthBackends();

ui/tests/acceptance/secrets/backend/database/secret-test.js

@@ -280,6 +280,7 @@ module('Acceptance | secrets/database/*', function (hooks) {
         .doesNotExist('does not show oracle alert for non-oracle plugins');
       await connectionPage.save();
       await settled();
+      await click('[data-test-root-warning-confirm]');
       assert
         .dom('.modal.is-active .title')
         .hasText('Rotate your root credentials?', 'Modal appears asking to rotate root credentials');
@@ -396,6 +397,7 @@ module('Acceptance | secrets/database/*', function (hooks) {
     await connectionPage.toggleVerify();
     await connectionPage.save();
     await settled();
+    await click('[data-test-root-warning-confirm]');
     assert
       .dom('.modal.is-active .title')
       .hasText('Rotate your root credentials?', 'Modal appears asking to ');

ui/tests/acceptance/transit-test.js

@@ -339,6 +339,7 @@ module('Acceptance | transit (flaky)', function (hooks) {
 
     const name = await this.generateTransitKey(keyData);
     await visit(`vault/secrets/${this.path}/show/${name}`);
+    await click('[data-test-root-warning-confirm]');
     assert
       .dom(SELECTORS.infoRow('Auto-rotation period'))
       .hasText('30 days', 'Has expected auto rotate value');