Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 18 commits into from
Oct 12, 2023
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/23277.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: Add modal to warn users about the behavior when logging in with a root token.
kiannaquach marked this conversation as resolved.
Show resolved Hide resolved
```
6 changes: 0 additions & 6 deletions ui/app/components/dashboard/vault-version-title.js
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}
}
6 changes: 4 additions & 2 deletions ui/app/controllers/vault/cluster/auth.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/

import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';
import Controller, { inject as controller } from '@ember/controller';
import { task, timeout } from 'ember-concurrency';
import ENV from 'vault/config/environment';
import { sanitizePath } from 'core/utils/sanitize-path';

export default Controller.extend({
Expand Down Expand Up @@ -67,8 +67,10 @@ export default Controller.extend({
}
transition.followRedirects().then(() => {
if (isRoot) {
this.auth.set('isRootToken', true);
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.'
'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.',
ENV.environment !== 'development' ? { sticky: true } : {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is making the flash message sticky necessary?

Copy link
Contributor

@hellobontempo hellobontempo Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the alternative we decided in UI sync last week instead of implementing a modal (since that seemed the most disruptive)

But - I'd agree that the overall issue is I think when users are logged out unexpectedly which happens 1. changing namespaces and 2. when we refresh internally

The dropdown alert solves number 1. For number 2 - we could revert the sticky flash message, or make it appear a little bit longer, in favor of tracking down and adding a warning to the "sneaky" times we log people out. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought the initial intent of the modal was to warn people after they have clicked a namespace link, before we transition them, to warn that they were about to be logged out due to using a root token. That seems to be where the most complaints have been, which corresponds to your 1 above.

For refreshing internally, it probably would be good to have at least an internal map of when that happens. I haven't heard as many complaints about that but if the longer-lived flash message was discussed to handle that case, that makes sense to me

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We discussed alternatives to the modal during ui sync last week because there was confusion on the original ask.

That's helpful context that most of the complaints were related to changing namespaces. I agree - the namespace picker feels sufficient.

We didn't discuss a longer-lived flash message, but perhaps that can be revisited (along with internal mapping of refreshing) if more user complaints come in after this change

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing thanks Claire + Chelsea for the feedback! I just updated the changelog + removed the sticky from the flash message. If either one of you has time, could you take a look? :)

);
}
});
Expand Down
1 change: 1 addition & 0 deletions ui/app/services/auth.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default Service.extend({
expirationCalcTS: null,
isRenewing: false,
mfaErrors: null,
isRootToken: false,

get tokenExpired() {
const expiration = this.tokenExpirationDate;
Expand Down
8 changes: 8 additions & 0 deletions ui/app/services/namespace.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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', '');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion ui/app/templates/components/namespace-link.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}

<ExternalLink
@href={{this.namespaceLink}}
@sameTab={{true}}
Expand Down
9 changes: 9 additions & 0 deletions ui/app/templates/components/namespace-picker.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,15 @@
</div>
</div>
<div class="namespace-list {{if this.isAnimating 'animated-list'}}">
{{#if this.auth.isRootToken}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opted to follow what's being done in the user menu dropdown see here. hen we use AlertInline, with type warning the icon looks really small and styling gets a little wonky and with type compact the namespace picker dropdown gets pulled to the top (see attached images).

<div class="has-left-margin-s has-right-margin-s">
<span><Icon @name="alert-triangle-fill" class="has-text-highlight" /></span>
<span class="is-size-8 has-text-semibold">
You are logged in with a root token and will have to reauthenticate when switching namespaces.
</span>
</div>
{{/if}}

<div class="is-mobile level-left">
{{#unless this.isUserRootNamespace}}
<NamespaceLink
Expand Down
1 change: 0 additions & 1 deletion ui/app/templates/vault/cluster.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}

<Sidebar::Nav::Cluster />
{{! Only show license banners for Enterprise }}
{{#if this.activeCluster.version.isEnterprise}}
Expand Down
Loading