[ui, sso] warn user about pending token expiry #15091

philrenaud · 2022-10-31T20:15:20Z

Throw a global notification when an active token is within 10 minutes of expiring, and prompt the user to re-authenticate.

These notifications pair with the tokens page changes from #15073 to resolve #15061; these notifications will be seen anyplace in the UI.

TODO

Notification tests
Mirage soon-expiring token

philrenaud · 2022-10-31T20:17:14Z

ui/app/services/token.js

+  @task(function* () {
+    while (this.selfToken) {
+      const diff = new Date(this.selfToken.expirationTime) - new Date();
+      // Let the user know at the 10 minute mark,
+      // or any time they refresh with under 10 minutes left
+      if (diff < 1000 * 60 * MINUTES_LEFT_AT_WARNING) {
+        const existingNotification = this.flashMessages.queue?.find(
+          (m) => m.title === EXPIRY_NOTIFICATION_TITLE
+        );
+        // For the sake of updating the "time left" message, we keep running the task down to the moment of expiration
+        if (diff > 0) {
+          if (existingNotification) {
+            existingNotification.set(
+              'message',
+              `Your token access expires ${moment(
+                this.selfToken.expirationTime
+              ).fromNow()}`
+            );
+          } else {
+            if (!this.expirationNotificationDismissed) {
+              this.flashMessages.add({
+                title: EXPIRY_NOTIFICATION_TITLE,
+                message: `Your token access expires ${moment(
+                  this.selfToken.expirationTime
+                ).fromNow()}`,
+                type: 'error',
+                destroyOnClick: false,
+                sticky: true,
+                customCloseAction: () => {
+                  this.set('expirationNotificationDismissed', true);
+                },
+                customAction: {
+                  label: 'Re-authenticate',
+                  action: () => {
+                    this.router.transitionTo('settings.tokens');
+                  },
+                },
+              });
+            }
+          }
+        } else {
+          if (existingNotification) {
+            existingNotification.setProperties({
+              title: 'Your access has expired',
+              message: `Your token will need to be re-authenticated`,
+            });
+          }
+          this.monitorTokenTime.cancelAll(); // Stop updating time left after expiration
+        }
+      }
+      yield timeout(1000);
+    }
+  })
+  monitorTokenTime;


This is using a syntax common to Nomad's front-end, inherited from Ember Concurrency. There were a few attempts to handle this using native JS async/await but, despite the large block size, this ended up feeling more streamlined.

philrenaud · 2022-10-31T20:18:04Z

ui/app/styles/core/notifications.scss

@@ -1,3 +1,5 @@
+$bonusRightPadding: 20px;


variablizing the px-specific space we hold open for our close button

philrenaud · 2022-10-31T20:18:47Z

ui/app/templates/application.hbs

+    <span class="close-button" role="button" {{on "click" (queue (action close) (action flash.customCloseAction))}}>&times;</span>
    {{#if flash.title}}
    <h3>{{flash.title}}</h3>
    {{/if}}
    {{#if flash.message}}
      <p>{{flash.message}}</p>
    {{/if}}
+    {{#if flash.customAction}}
+      <button type="button" class="button custom-action-button" {{on "click" (action flash.customAction.action)}}>{{flash.customAction.label}}</button>
+    {{/if}}


Added a couple spots in our notifications for custom actions; both optional. One on close and another that appears as a button in the notification itself.

philrenaud · 2022-10-31T20:19:35Z

ui/app/templates/settings/tokens.hbs

+            <div class="columns">
+              <div class="column">
+                <h3 class="title is-4">Token Failed to Authenticate</h3>
+                <p>The token secret you have provided does not match an existing token, or has expired.</p>


Review this file with "Hide Whitespace" enabled for the sake of sanity; this block was just moved into an ...unless of the token.isExpired block from before.

github-actions · 2022-10-31T20:23:39Z

Ember Asset Size action

As of c000e5e

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+1.82 kB	+415 B
nomad-ui.css	+92 B	+55 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
vendor.css	0 B	0 B

jrasell

LGTM.

would be worth adding a changelog entry for this.

…block

* Handle error states generally * Dont direct, just redirect * no longer need explicit error on controller * Linting on _blank * Custom notification actions and shift the template to within an else block * Lintfix * Make the closeAction optional * changelog * Add a mirage token that will always expire in 11 minutes * Test for token expiry with ember concurrency waiters * concurrency handling for earlier test, and button redirect test

* Top nav auth dropdown (#15055) * Basic dropdown styles * Some cleanup * delog * Default nomad hover state styles * Component separation-of-concerns and acceptance tests for auth dropdown * lintfix * [ui, sso] Handle token expiry 500s (#15073) * Handle error states generally * Dont direct, just redirect * no longer need explicit error on controller * Redirect on token-doesnt-exist * Forgot to import our time lib * Linting on _blank * Redirect tests * changelog * [ui, sso] warn user about pending token expiry (#15091) * Handle error states generally * Dont direct, just redirect * no longer need explicit error on controller * Linting on _blank * Custom notification actions and shift the template to within an else block * Lintfix * Make the closeAction optional * changelog * Add a mirage token that will always expire in 11 minutes * Test for token expiry with ember concurrency waiters * concurrency handling for earlier test, and button redirect test * [ui] if ACLs are disabled, remove the Sign In link from the top of the UI (#15114) * Remove top nav link if ACLs disabled * Change to an enabled-by-default model since you get no agent config when ACLs are disabled but you lack a token * PR feedback addressed; down with double negative conditionals * lintfix * ember getter instead of ?.prop * [SSO] Auth Methods and Mock OIDC Flow (#15155) * Big ol first pass at a redirect sign in flow * dont recursively add queryparams on redirect * Passing state and code qps * In which I go off the deep end and embed a faux provider page in the nomad ui * Buggy but self-contained flow * Flow auto-delay added and a little more polish to resetting token * secret passing turned to accessor passing * Handle SSO Failure * General cleanup and test fix * Lintfix * SSO flow acceptance tests * Percy snapshots added * Explicitly note the OIDC test route is mirage only * Handling failure case for complete-auth * Leentfeex * Tokens page styles (#15273) * styling and moving columns around * autofocus and enter press handling * Styles refined * Split up manager and regular tests * Standardizing to a binary status state * Serialize auth-methods response to use "name" as primary key (#15380) * Serializer for unique-by-name * Use @classic because of class extension

github-actions · 2023-03-03T02:46:46Z

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

philrenaud requested review from pkazmierczak, mikenomitch and jrasell October 31, 2022 20:15

philrenaud self-assigned this Oct 31, 2022

vercel bot deployed to Preview – nomad-storybook-and-ui October 31, 2022 20:16 View deployment

philrenaud commented Oct 31, 2022

View reviewed changes

vercel bot deployed to Preview – nomad-storybook-and-ui October 31, 2022 20:26 View deployment

jrasell approved these changes Nov 1, 2022

View reviewed changes

vercel bot deployed to Preview – nomad-storybook-and-ui November 1, 2022 14:41 View deployment

vercel bot deployed to Preview – nomad-storybook-and-ui November 1, 2022 14:46 View deployment

vercel bot deployed to Preview – nomad-storybook-and-ui November 1, 2022 20:55 View deployment

vercel bot deployed to Preview – nomad-storybook-and-ui November 1, 2022 21:04 View deployment

Base automatically changed from 15061-ui-sso-handle-ttl-ending-gracefully to f-ui/sso November 1, 2022 23:33

philrenaud added 11 commits November 1, 2022 19:35

Handle error states generally

c6b986a

Dont direct, just redirect

49f5a6f

no longer need explicit error on controller

907f1ea

Linting on _blank

f0528e0

Custom notification actions and shift the template to within an else …

c30f52a

…block

Lintfix

0cc629c

Make the closeAction optional

7b76da8

changelog

965d842

Add a mirage token that will always expire in 11 minutes

00b46f3

Test for token expiry with ember concurrency waiters

597d2ed

concurrency handling for earlier test, and button redirect test

c000e5e

philrenaud force-pushed the 15061-ui-sso-warn-user-about-expiry branch from 154c35d to c000e5e Compare November 1, 2022 23:37

vercel bot deployed to Preview – nomad-storybook-and-ui November 1, 2022 23:39 View deployment

philrenaud merged commit 40c821e into f-ui/sso Nov 2, 2022

philrenaud deleted the 15061-ui-sso-warn-user-about-expiry branch November 2, 2022 02:44

github-actions bot locked as resolved and limited conversation to collaborators Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ui, sso] warn user about pending token expiry #15091

[ui, sso] warn user about pending token expiry #15091

philrenaud commented Oct 31, 2022 •

edited

Loading

philrenaud Oct 31, 2022

philrenaud Oct 31, 2022

philrenaud Oct 31, 2022

philrenaud Oct 31, 2022

github-actions bot commented Oct 31, 2022 •

edited

Loading

jrasell left a comment

github-actions bot commented Mar 3, 2023

[ui, sso] warn user about pending token expiry #15091

[ui, sso] warn user about pending token expiry #15091

Conversation

philrenaud commented Oct 31, 2022 • edited Loading

TODO

philrenaud Oct 31, 2022

Choose a reason for hiding this comment

philrenaud Oct 31, 2022

Choose a reason for hiding this comment

philrenaud Oct 31, 2022

Choose a reason for hiding this comment

philrenaud Oct 31, 2022

Choose a reason for hiding this comment

github-actions bot commented Oct 31, 2022 • edited Loading

Ember Asset Size action

jrasell left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 3, 2023

philrenaud commented Oct 31, 2022 •

edited

Loading

github-actions bot commented Oct 31, 2022 •

edited

Loading