UI secondary dr recovery token fix (#5818)

* use the OTP that the server provides instead of generating one in the JS client

* fix button styling

* differentiate between OTP and encoded token and encrypted token in the template

ui/app/adapters/cluster.js

@@ -180,7 +180,7 @@ export default ApplicationAdapter.extend({
   generateDrOperationToken(data, options) {
     const verb = options && options.checkStatus ? 'GET' : 'PUT';
     let url = `${this.buildURL()}/replication/dr/secondary/generate-operation-token/`;
-    if (!data || data.pgp_key || data.otp) {
+    if (!data || data.pgp_key || data.attempt) {
       // start the generation
       url = url + 'attempt';
     } else {

ui/app/components/shamir-flow.js

@@ -3,7 +3,6 @@ import { gt } from '@ember/object/computed';
 import { camelize } from '@ember/string';
 import Component from '@ember/component';
 import { get, computed } from '@ember/object';
-import base64js from 'base64-js';
 
 const DEFAULTS = {
   key: null,
@@ -62,18 +61,18 @@ export default Component.extend(DEFAULTS, {
   hasProgress: gt('progress', 0),
 
   actionSuccess(resp) {
-    let { onUpdate, isComplete, onShamirSuccess, thresholdPath } = this.getProperties(
+    let { onUpdate, isComplete, onShamirSuccess, thresholdPath } = this;
-      'onUpdate',
-      'isComplete',
-      'onShamirSuccess',
-      'thresholdPath'
-    );
     let threshold = get(resp, thresholdPath);
     let props = {
       ...resp,
       threshold,
     };
     this.stopLoading();
+    // if we have an OTP, but update doesn't include one,
+    // we don't want to null it out
+    if (this.otp && !props.otp) {
+      delete props.otp;
+    }
     this.setProperties(props);
     onUpdate(props);
     if (isComplete(props)) {
@@ -91,19 +90,11 @@ export default Component.extend(DEFAULTS, {
     }
   },
 
-  generateStep: computed('generateWithPGP', 'haveSavedPGPKey', 'otp', 'pgp_key', function() {
+  generateStep: computed('generateWithPGP', 'haveSavedPGPKey', 'pgp_key', function() {
-    let { generateWithPGP, otp, pgp_key, haveSavedPGPKey } = this.getProperties(
+    let { generateWithPGP, pgp_key, haveSavedPGPKey } = this;
-      'generateWithPGP',
+    if (!generateWithPGP && !pgp_key) {
-      'otp',
-      'pgp_key',
-      'haveSavedPGPKey'
-    );
-    if (!generateWithPGP && !pgp_key && !otp) {
       return 'chooseMethod';
     }
-    if (otp) {
-      return 'beginGenerationWithOTP';
-    }
     if (generateWithPGP) {
       if (pgp_key && haveSavedPGPKey) {
         return 'beginGenerationWithPGP';
@@ -133,7 +124,7 @@ export default Component.extend(DEFAULTS, {
     }
 
     return {
-      otp: data.otp,
+      attempt: data.attempt,
     };
   },
 
@@ -144,6 +135,7 @@ export default Component.extend(DEFAULTS, {
     this.set('loading', true);
     const adapter = this.get('store').adapterFor('cluster');
     const method = adapter[action];
+
     method
       .call(adapter, data, { checkStatus })
       .then(resp => this.actionSuccess(resp), (...args) => this.actionError(...args));
@@ -164,15 +156,12 @@ export default Component.extend(DEFAULTS, {
     },
 
     startGenerate(data) {
+      if (this.generateAction) {
+        data.attempt = true;
+      }
       this.attemptProgress(this.extractData(data));
     },
 
-    generateOTP() {
-      const bytes = new window.Uint8Array(16);
-      window.crypto.getRandomValues(bytes);
-      this.set('otp', base64js.fromByteArray(bytes));
-    },
-
     setKey(_, keyFile) {
       this.set('pgp_key', keyFile.value);
       this.set('pgpKeyFile', keyFile);

ui/app/styles/core/buttons.scss

@@ -13,8 +13,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
   min-width: 6rem;
   padding: $size-10 $size-8;
   text-decoration: none;
-  transition: background-color $speed, border-color $speed, box-shadow $speed,
+  transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
-    color $speed;
   vertical-align: middle;
 
   &.is-icon {
@@ -45,7 +44,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
 
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
-    @if $name == "primary" {
+    @if $name == 'primary' {
       $color: $blue;
     }
     $color-invert: nth($pair, 2);
@@ -211,8 +210,10 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
   }
 }
 
+.button.auto-width,
 .button .icon.auto-width {
   width: auto;
+  min-width: auto;
   margin: 0 !important;
 }
 

ui/app/templates/components/shamir-flow.hbs

@@ -4,28 +4,39 @@
       <HoverCopyButton @copyValue={{encoded_token}} />
       <div class="message-body">
         <h4 class="title is-7 is-marginless">
-          Encoded Operation Token
+          {{#if otp}}
+            Encoded Operation Token
+          {{else}}
+            Encrypted Operation Token
+          {{/if}}
         </h4>
         <code class="is-word-break">{{encoded_token}}</code>
       </div>
     </div>
-    <p>
+    {{#if otp}}
-      If you entered a One Time Password, you can use the Vault CLI to decode the Token:
+      <div class="message is-list has-copy-button" tabindex="-1">
-    </p>
+        <HoverCopyButton @copyValue={{otp}} />
-    <div class="message is-list has-copy-button" tabindex="-1">
-      {{#with (if otp
-        (concat 'vault operator generate-root -otp="' otp '" -decode="' encoded_token '"')
-        (concat 'vault operator generate-root -otp="<enter your otp here>" -decode="' encoded_token '"')
-      ) as |cmd|}}
-        <HoverCopyButton @copyValue={{cmd}} />
         <div class="message-body">
           <h4 class="title is-7 is-marginless">
-            DR Operation Token Command
+            One Time Password (otp)
           </h4>
-          <code class="is-word-break">{{cmd}}</code>
+          <code class="is-word-break">{{otp}}</code>
         </div>
-      {{/with}}
+      </div>
-    </div>
+      <div class="message is-list has-copy-button" tabindex="-1">
+        {{#let
+            (concat 'vault operator generate-root -otp="' otp '" -decode="' encoded_token '"')
+        as |cmd|}}
+          <HoverCopyButton @copyValue={{cmd}} />
+          <div class="message-body">
+            <h4 class="title is-7 is-marginless">
+              DR Operation Token Command
+            </h4>
+            <code class="is-word-break">{{cmd}}</code>
+          </div>
+        {{/let}}
+      </div>
+    {{/if}}
   </div>
   <div class="box is-marginless is-shadowless">
     <button type="button" class="button" {{action 'reset'}}>
@@ -33,119 +44,83 @@
     </button>
   </div>
 {{else if (and generateAction (not started))}}
-  <form {{action 'startGenerate' (hash otp=otp pgp_key=pgp_key) on="submit"}} id="shamir">
+  <form {{action 'startGenerate' (hash pgp_key=pgp_key) on="submit"}} id="shamir">
-      {{message-error errors=errors}}
+    {{message-error errors=errors}}
-      {{#if (eq generateStep 'chooseMethod')}}
+    {{#if (eq generateStep 'chooseMethod')}}
-        <div class="box is-marginless is-shadowless">
+      <div class="box is-marginless is-shadowless">
-          <p>
+        <p>
-          Updating or promoting this cluster requires an operation token. Let's generate one by 
+        Updating or promoting this cluster requires an operation token. Let's generate one by
-          inputting the master key shares. To get started you'll need to generate a One Time Password
+        inputting the master key shares. If you'd like to encrypt the token with a PGP Key, please click "Provide PGP Key" below, otherwise we can begin generation of the Operation Token.
-          (OTP) or provide a PGP Key to encrypt the resultant operation token.
+        </p>
-          </p>
+      </div>
+      <div class="box is-shadowless field is-grouped is-grouped-centered">
+        <div class="control">
+          <button type="button" class="button is-primary" {{action (mut generateWithPGP) true}}>
+            Provide PGP Key
+          </button>
         </div>
-        <div class="box is-shadowless field is-grouped is-grouped-centered">
+        <div class="control">
-          <div class="control">
+          <span class="button auto-width is-white is-static">
-            <button type="button" class="button is-primary" {{action (mut generateWithPGP) true}}>
+            or
-              Provide PGP Key
+          </span>
-            </button>
-          </div>
-          <div class="control">
-            <span class="button is-white is-static">
-              or
-            </span>
-          </div>
-          <div class="control">
-            <button type="button" class="button is-primary" {{action "generateOTP"}}>
-              Generate OTP
-            </button>
-          </div>
         </div>
-      {{/if}}
+        <div class="control">
-
+          <button type="submit" class="button is-primary">
-      {{#if (eq generateStep 'providePGPKey')}}
+            Generate Operation Token
-
+          </button>
-        <div class="box is-marginless is-shadowless">
+        </div>
+      </div>
+    {{/if}}
+    {{#if (eq generateStep 'providePGPKey')}}
+      <div class="box is-marginless is-shadowless">
         <p>
           Choose a PGP Key from your computer or paste the contents of one in the form below.
           This key will be used to Encrypt the generated Operation Token.
         </p>
         {{pgp-file index='' key=pgpKeyFile onChange=(action 'setKey')}}
+      </div>
+      <div class="field is-grouped box is-marginless is-shadowless">
+        <div class="control">
+          <button type="button" class="button" {{action "reset"}}>
+            Back
+          </button>
         </div>
-
+        <div class="control">
-        <div class="field is-grouped box is-marginless is-shadowless">
+          <button type="button" disabled={{not pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
-          <div class="control">
+            Use PGP Key
-            <button type="button" class="button" {{action "reset"}}>
+          </button>
-              Back
+        </div>
-            </button>
+      </div>
-          </div>
+    {{/if}}
-          <div class="control">
+    {{#if (eq generateStep 'beginGenerationWithPGP')}}
-            <button type="button" disabled={{not pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
+      <div class="box is-marginless is-shadowless">
-              Use PGP Key
+        <p>
-            </button>
+          Below is the base-64 encoded PGP Key that will be used to encrypt the generated Operation Token.
+          Next we'll enter portions of the master key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
+        </p>
+        <div class="message is-list has-copy-button" tabindex="-1">
+          <HoverCopyButton @copyValue={{pgp_key}} />
+          <div class="message-body">
+            <h4 class="title is-7 is-marginless">
+              PGP Key {{pgpKeyFile.fileName}}
+            </h4>
+            <code class="is-word-break">{{pgp_key}}</code>
           </div>
         </div>
-      {{/if}}
+      </div>
-      {{#if (eq generateStep 'beginGenerationWithPGP')}}
+      <div class="field is-grouped box is-marginless is-shadowless">
-        <div class="box is-marginless is-shadowless">
+        <div class="control">
-          <p>
+          <button type="button" class="button" {{action "reset"}}>
-            Below is the base-64 encoded PGP Key that will be used to encrypt the generated Operation Token.
+            Back
-            Next we'll enter portions of the master key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
+          </button>
-          </p>
-          <div class="message is-list has-copy-button" tabindex="-1">
-            <HoverCopyButton @copyValue={{pgp_key}} />
-            <div class="message-body">
-              <h4 class="title is-7 is-marginless">
-                PGP Key {{pgpKeyFile.fileName}}
-              </h4>
-              <code class="is-word-break">{{pgp_key}}</code>
-            </div>
-          </div>
         </div>
-        <div class="field is-grouped box is-marginless is-shadowless">
+        <div class="control">
-          <div class="control">
+          <button type="submit" disabled={{and (not pgp_key)}} class="button is-primary">
-            <button type="button" class="button" {{action "reset"}}>
+            Generate Operation Token
-              Back
+          </button>
-            </button>
-          </div>
-          <div class="control">
-            <button type="submit" disabled={{and (not pgp_key) (not otp)}} class="button is-primary">
-              Generate Operation Token
-            </button>
-          </div>
         </div>
-      {{/if}}
+      </div>
-      {{#if (eq generateStep 'beginGenerationWithOTP')}}
+    {{/if}}
-        <div class="box is-marginless is-shadowless">
-          <p>
-            Below is the generated OTP. This will be used to encrypt the generated Operation Token.
-            <em class="has-text-danger has-text-weight-semibold">
-              Make sure to save this, as you will need it later to decrypt the Operation Token.
-            </em>
-            Next we'll enter portions of the master key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
-          </p>
-          <div class="message is-list has-copy-button" tabindex="-1">
-            <HoverCopyButton @copyValue={{otp}} />
-            <div class="message-body">
-              <h4 class="title is-7 is-marginless">
-                One Time Password
-              </h4>
-              <code class="is-word-break">{{otp}}</code>
-            </div>
-          </div>
-        </div>
-        <div class="field is-grouped box is-marginless is-shadowless">
-          <div class="control">
-            <button type="button" class="button" {{action "reset"}}>
-              Back
-            </button>
-          </div>
-          <div class="control">
-            <button type="submit" disabled={{and (not pgp_key) (not otp)}} class="button is-primary">
-              Generate Operation Token
-            </button>
-          </div>
-        </div>
-      {{/if}}
   </form>
 {{else}}
   <form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">