UI: remodel shamir flow

changelog/21871.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: update unseal and DR operation token flow components
+```

ui/app/adapters/cluster.js

@@ -211,17 +211,19 @@ export default ApplicationAdapter.extend({
   },
 
   generateDrOperationToken(data, options) {
-    let verb = options && options.checkStatus ? 'GET' : 'PUT';
-    if (options.cancel) {
-      verb = 'DELETE';
-    }
+    let verb = 'POST';
     let url = `${this.buildURL()}/replication/dr/secondary/generate-operation-token/`;
-    if (!data || data.pgp_key || data.attempt) {
-      // start the generation
-      url = url + 'attempt';
+    if (options?.cancel) {
+      verb = 'DELETE';
+      url += 'attempt';
+    } else if (options?.checkStatus) {
+      verb = 'GET';
+      url += 'attempt';
+    } else if (data?.pgp_key || data?.attempt) {
+      url += 'attempt';
     } else {
       // progress the operation
-      url = url + 'update';
+      url += 'update';
     }
     return this.ajax(url, verb, {
       data,

ui/app/controllers/vault/cluster/unseal.js

@@ -15,6 +15,10 @@ export default Controller.extend({
       });
     },
 
+    reloadCluster() {
+      return this.model.reload();
+    },
+
     isUnsealed(data) {
       return data.sealed === false;
     },

ui/app/styles/core.scss

@@ -120,5 +120,4 @@
 @import './components/unseal-warning';
 // @import './components/ui-wizard'; // remove, see PR https://github.com/hashicorp/vault/pull/19220
 @import './components/vault-loading';
-@import './components/vlt-radio';
 @import './components/vlt-table';

ui/app/templates/components/raft-join.hbs

@@ -25,27 +25,25 @@
         <br />
         How do you want to get started?
       </h2>
-      <div class="vlt-radio is-block">
+      <div class="has-bottom-margin-s">
         <RadioButton
           id="join"
           name="setup-pref"
           @value="join"
           @groupValue={{this.preference}}
           @onChange={{fn (mut this.preference)}}
         />
-        <label for="join"></label>
-        Join an existing Raft cluster
+        <label for="join">Join an existing Raft cluster</label>
       </div>
-      <div class="vlt-radio is-block">
+      <div>
         <RadioButton
           id="init"
           name="setup-pref"
           @value="init"
           @groupValue={{this.preference}}
           @onChange={{fn (mut this.preference)}}
         />
-        <label for="init" data-test-join-init></label>
-        Create a new Raft cluster
+        <label for="init" data-test-join-init>Create a new Raft cluster</label>
       </div>
     </div>
     <div class="box is-marginless is-shadowless">

ui/app/templates/vault/cluster/unseal.hbs

@@ -31,21 +31,27 @@
           is
           {{if this.model.unsealed "unsealed" "sealed"}}
         </p>
-        <p>
-          Unseal Vault by entering portions of the unseal key. This can be done via multiple mechanisms on multiple
-          computers. Once all portions are entered, the root key will be decrypted and Vault will unseal.
-        </p>
+        {{#if this.model.unsealed}}
+          <p>Please wait while we redirect you.</p>
+        {{else}}
+          <p>
+            Unseal Vault by entering portions of the unseal key. This can be done via multiple mechanisms on multiple
+            computers. Once all portions are entered, the root key will be decrypted and Vault will unseal.
+          </p>
+          <Shamir::Flow
+            @action="unseal"
+            @threshold={{this.model.sealThreshold}}
+            @progress={{this.model.sealProgress}}
+            @updateProgress={{action "reloadCluster"}}
+            @inputLabel="Unseal Key Portion"
+            @buttonText="Unseal"
+            @onLicenseError={{action "handleLicenseError"}}
+            @checkComplete={{action "isUnsealed"}}
+            @onShamirSuccess={{action "transitionToCluster"}}
+            class="has-top-margin-m"
+          />
+        {{/if}}
       </div>
-      <ShamirFlow
-        @action="unseal"
-        @onLicenseError={{action "handleLicenseError"}}
-        @onShamirSuccess={{action "transitionToCluster"}}
-        @buttonText="Unseal"
-        @thresholdPath="t"
-        @isComplete={{action "isUnsealed"}}
-        @threshold={{this.model.sealThreshold}}
-        @progress={{this.model.sealProgress}}
-      />
     </Page.content>
     <Page.footer>
       <div class="box is-borderless is-shadowless">

ui/lib/core/addon/components/choose-pgp-key-form.hbs

@@ -0,0 +1,64 @@
+{{#if this.selectedPgp}}
+  <form
+    id="confirm-pgp-key"
+    {{on "submit" this.handleSubmit}}
+    aria-label="begin token generation with PGP key"
+    data-test-confirm-pgp-key
+  >
+    <div>
+      <p class="has-bottom-margin-m" data-test-pgp-key-confirm>
+        {{or
+          @confirmText
+          (concat
+            'Below is the base-64 encoded PGP Key that will be used. Click the "' this.buttonText '" button to proceed.'
+          )
+        }}
+      </p>
+      <h4 class="field-title has-bottom-padding-m is-fullwidth">
+        {{concat "PGP Key " this.pgpKeyFile.filename}}
+      </h4>
+      <div class="message is-list has-copy-button" tabindex="-1">
+        <HoverCopyButton @copyValue={{this.pgpKey}} />
+        <code class="is-word-break" data-test-pgp-key-copy>{{this.pgpKey}}</code>
+      </div>
+    </div>
+    <div class="field is-grouped">
+      <div class="control">
+        <button type="button" class="button" {{on "click" (fn (mut this.selectedPgp) "")}} data-test-confirm-pgp-back-button>
+          Back
+        </button>
+      </div>
+      <div class="control">
+        <button type="submit" disabled={{not this.pgpKey}} class="button is-primary" data-test-confirm-pgp-key-submit>
+          {{this.buttonText}}
+        </button>
+      </div>
+    </div>
+  </form>
+{{else}}
+  <form
+    id="choose-pgp-key"
+    {{on "submit" this.usePgpKey}}
+    aria-label="provide PGP key"
+    data-test-choose-pgp-key-form="begin"
+  >
+    <div class="has-bottom-margin-m">
+      <p data-test-choose-pgp-key-description>
+        {{this.formText}}
+      </p>
+      <PgpFile @index="" @key={{this.pgpKeyFile}} @onChange={{this.setKey}} />
+    </div>
+    <div class="field is-grouped">
+      <div class="control">
+        <button type="button" class="button" {{on "click" @onCancel}} data-test-use-pgp-key-cancel>
+          Back
+        </button>
+      </div>
+      <div class="control">
+        <button type="submit" disabled={{not this.pgpKeyFile.value}} class="button is-primary" data-test-use-pgp-key-button>
+          Use PGP Key
+        </button>
+      </div>
+    </div>
+  </form>
+{{/if}}

ui/lib/core/addon/components/choose-pgp-key-form.js

@@ -0,0 +1,53 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+const pgpKeyFileDefault = () => ({ value: '' });
+
+/**
+ * @module ChoosePgpKeyForm
+ * ChoosePgpKeyForm component is used for DR Operation Token Generation workflow. It provides
+ * an interface for the user to upload or paste a PGP key for use
+ *
+ * @example
+ * ```js
+ * <ChoosePgpKeyForm @onCancel={{this.reset}} @onSubmit={{handleGenerateWithPgpKey}}>
+ * ```
+ * @param {function} onCancel - required - This function will be triggered when the modal intends to be closed
+ * @param {function} onSubmit - required - When the PGP key is confirmed, it will call this method with the pgpKey value as the only param
+ * @param {string} buttonText - Button text for onSubmit. Defaults to "Continue with key"
+ * @param {string} formText - Form text above where the users uploads or pastes the key. Has default
+ */
+export default class ChoosePgpKeyForm extends Component {
+  @tracked pgpKeyFile = pgpKeyFileDefault();
+  @tracked selectedPgp = '';
+
+  get pgpKey() {
+    return this.pgpKeyFile.value;
+  }
+
+  get buttonText() {
+    return this.args.buttonText || 'Continue with key';
+  }
+
+  get formText() {
+    return (
+      this.args.formText ||
+      'Choose a PGP Key from your computer or paste the contents of one in the form below.'
+    );
+  }
+
+  @action setKey(_, keyFile) {
+    this.pgpKeyFile = keyFile;
+  }
+
+  // Form submit actions:
+  @action usePgpKey(evt) {
+    evt.preventDefault();
+    this.selectedPgp = this.pgpKey;
+  }
+  @action handleSubmit(evt) {
+    evt.preventDefault();
+    this.args.onSubmit(this.pgpKey);
+  }
+}