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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 18 commits into from Oct 12, 2023
Merged

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

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
7c27340
Set up root token warning modal
kiannaquach Sep 25, 2023
742f147
Get current namespace path name
kiannaquach Sep 25, 2023
5aaf409
Add changelog
kiannaquach Sep 25, 2023
2bb0b2f
Fix tests
kiannaquach Sep 25, 2023
3d64360
Fix more test failures
kiannaquach Sep 26, 2023
bb9dc53
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Sep 26, 2023
a122c95
Remove close button
kiannaquach Sep 26, 2023
eb7557c
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Sep 26, 2023
ff1447e
Update namespace service prop name and remove click test
kiannaquach Sep 28, 2023
1dd002a
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Sep 28, 2023
dd406c9
Put flash message and come up with warning
kiannaquach Oct 6, 2023
e821659
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Oct 6, 2023
10266a6
Add conditional for root token
kiannaquach Oct 9, 2023
1b577d6
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Oct 9, 2023
ce2a6c5
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Oct 11, 2023
909acaf
Remove sticky flash message
kiannaquach Oct 11, 2023
f0ba3a1
Update changelog
kiannaquach Oct 11, 2023
d5022d5
Merge branch 'main' into ui/VAULT-19783/root-token-warning-modal
kiannaquach Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/23277.txt
View file
Open in desktop
@@ -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
View file
Open in desktop
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
View file
Open in desktop
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
Collaborator

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

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
Collaborator

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
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion ui/app/templates/components/dashboard/vault-version-title.hbs
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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