UI/okta duo push notification (#11442)

* initial setup

* add delay and modify message

* test

* changing to different style because unable to interrupt the yield of authentication

* cleanup

* more consitency in messssage placement

* fix test

* clean up test notification

* clean up

* remove click

* changelog

* Update 11442.txt

* revert changes so a message is delayed by not calling yield

* amend test

* remove padding-bottom as no longer needed with reposition of message location

changelog/11442.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add push notification message when selecting okta auth.
+```

ui/app/components/auth-form.js

@@ -1,3 +1,4 @@
+import Ember from 'ember';
 import { next } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import { match, alias, or } from '@ember/object/computed';
@@ -6,7 +7,7 @@ import { dasherize } from '@ember/string';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { supportedAuthBackends } from 'vault/helpers/supported-auth-backends';
-import { task } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
 const BACKENDS = supportedAuthBackends();
 
 /**
@@ -208,6 +209,9 @@ export default Component.extend(DEFAULTS, {
   authenticate: task(function*(backendType, data) {
     let clusterId = this.cluster.id;
     try {
+      if (backendType === 'okta') {
+        this.delayAuthMessageReminder.perform();
+      }
       let authResponse = yield this.auth.authenticate({ clusterId, backend: backendType, data });
 
       let { isRoot, namespace } = authResponse;
@@ -235,6 +239,15 @@ export default Component.extend(DEFAULTS, {
     }
   }).withTestWaiter(),
 
+  delayAuthMessageReminder: task(function*() {
+    if (Ember.testing) {
+      this.showLoading = true;
+      yield timeout(0);
+      return;
+    }
+    yield timeout(5000);
+  }),
+
   actions: {
     doSubmit() {
       let passedData, e;

ui/app/styles/core/message.scss

@@ -119,6 +119,14 @@
   &.has-top {
     margin-top: 1rem;
   }
+
+  &.size-small {
+    font-size: $size-7;
+  }
+
+  &.padding-top {
+    padding-top: $size-8;
+  }
 }
 
 .has-text-highlight {

ui/app/templates/components/auth-form-options.hbs

@@ -19,7 +19,12 @@
              oninput={{action @onPathChange value="target.value"}}
           />
         </div>
-        <AlertInline @type="info" @message="If this backend was mounted using a non-default path, enter it here." />
+        <AlertInline
+          @sizeSmall=true
+          @paddingTop=true
+          @type="info"
+          @message="If this backend was mounted using a non-default path, enter it here."
+        />
       </div>
     {{/if}}
   </div>

ui/app/templates/components/auth-form.hbs

@@ -1,9 +1,4 @@
 <div class="auth-form">
-  {{#if showLoading}}
-    <div class="vault-loader">
-      <VaultLogoSpinner />
-    </div>
-  {{/if}}
   {{#if hasMethodsWithPath}}
     <nav class="tabs is-marginless">
       <ul>
@@ -80,7 +75,16 @@
         <button data-test-auth-submit=true type="submit" disabled={{authenticate.isRunning}} class="button is-primary {{if authenticate.isRunning 'is-loading'}}" id="auth-submit">
           Sign In
         </button>
+        {{#if (and delayAuthMessageReminder.isIdle showLoading)}}
+          <AlertInline
+            @paddingTop=true
+            @sizeSmall=true
+            @type="info" 
+            @message="If login takes longer than usual, you may need to check your device for an MFA notification, or contact your administrator if login times out."
+            data-test-auth-message="push"
+          />
+        {{/if}}
     </form>
   {{/if}}
-</div>
+  </div>
 </div>

ui/app/templates/components/auth-jwt.hbs

@@ -18,7 +18,12 @@
         data-test-role
       />
     </div>
-    <AlertInline @type="info" @message="Leave blank to sign in with the default role if one is configured" />
+    <AlertInline
+      @sizeSmall=true 
+      @paddingTop=true
+      @type="info" 
+      @message="Leave blank to sign in with the default role if one is configured"
+    />
   </div>
   {{#unless this.isOIDC}}
     <div class="field">

ui/lib/core/addon/components/alert-inline.js

@@ -14,6 +14,8 @@ import layout from '../templates/components/alert-inline';
  *
  * @param type=null{String} - The alert type. This comes from the message-types helper.
  * @param [message=null]{String} - The message to display within the alert.
+ * @param [sizeSmall=false]{Boolean} - Whether or not to display a small font with padding below of alert message.
+ * @param [paddingTop=false]{Boolean} - Whether or not to add padding above component.
  *
  */
 
@@ -21,8 +23,10 @@ export default Component.extend({
   layout,
   type: null,
   message: null,
-
+  sizeSmall: false,
+  paddingTop: false,
   classNames: ['message-inline'],
+  classNameBindings: ['sizeSmall:size-small', 'paddingTop:padding-top'],
 
   textClass: computed('type', function() {
     if (this.type == 'danger') {

ui/tests/acceptance/auth-test.js

@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import sinon from 'sinon';
-import { currentURL, visit, settled } from '@ember/test-helpers';
+import { click, currentURL, visit, settled } from '@ember/test-helpers';
 import { supportedAuthBackends } from 'vault/helpers/supported-auth-backends';
 import authForm from '../pages/components/auth-form';
 import jwtForm from '../pages/components/auth-jwt';
@@ -105,4 +105,17 @@ module('Acceptance | auth', function(hooks) {
     await visit('/vault/access');
     assert.dom('[data-test-allow-expiration="true"]').doesNotExist('hides beacon when the api is used again');
   });
+
+  test('it shows the push notification warning only for okta auth method after submit', async function(assert) {
+    await visit('/vault/auth');
+    await component.selectMethod('token');
+    await click('[data-test-auth-submit="true"]');
+    assert
+      .dom('[data-test-auth-message="push"]')
+      .doesNotExist('message is not shown for other authentication methods');
+
+    await component.selectMethod('okta');
+    await click('[data-test-auth-submit="true"]');
+    assert.dom('[data-test-auth-message="push"]').exists('shows push notification message');
+  });
 });