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/components/dashboard/vault-version-title.js

@@ -25,10 +25,4 @@ export default class DashboardVaultVersionTitle extends Component {
       ? `Vault v${this.version.version.slice(0, this.version.version.indexOf('+'))}`
       : `Vault v${this.version.version}`;
   }
-
-  get namespaceDisplay() {
-    if (this.namespace.inRootNamespace) return 'root';
-    const parts = this.namespace.path?.split('/');
-    return parts[parts.length - 1];
-  }
 }

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

@@ -2,7 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
-
+import Ember from 'ember';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import Controller, { inject as controller } from '@ember/controller';
@@ -62,9 +62,9 @@ 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.'
-        );
+        if (Ember.testing) return;
+
+        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),
 
+  currentNamespace: 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/components/dashboard/vault-version-title.hbs

@@ -3,7 +3,7 @@
     <h1 class="title is-3" data-test-dashboard-card-header="Vault version">
       {{this.versionHeader}}
       {{#if @version.isEnterprise}}
-        <Hds::Badge @text={{this.namespaceDisplay}} @icon="org" data-test-badge-namespace />
+        <Hds::Badge @text={{this.namespace.currentNamespace}} @icon="org" data-test-badge-namespace />
       {{/if}}
     </h1>
   </p.levelLeft>

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}}