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

{{#if encoded_token}}
  <div class="box is-marginless is-shadowless">
    <div class="message is-list">
      <div class="message-body">
        <h4 class="title is-7 is-uppercase is-marginless">
          Encoded Operation Token
        </h4>
        <code class="is-word-break">{{encoded_token}}</code>
      </div>
    </div>
    <p class="has-text-grey">
      If you entered a One Time Password, you can use the Vault CLI to decode the Token:
    </p>
    <div class="message is-list">
      <div class="message-body">
        <h4 class="title is-7 is-uppercase is-marginless">
          DR Operation Token Command
        </h4>
        <code class="is-word-break">
          vault operator generate-root -otp="[enter your otp here]" -decode="{{encoded_token}}"
        </code>
      </div>
    </div>
    {{#copy-button
      clipboardText=(concat 'vault operator generate-root -otp="<enter your otp here>" -decode="' encoded_token '"')
      class="button is-compact"
      buttonType="button"
      success=(action (set-flash-message 'CLI command copied!'))
    }}
      Copy CLI command
    {{/copy-button}}
  </div>
  <div class="box is-marginless is-shadowless has-background-white-bis">
    {{#copy-button
      clipboardText=encoded_token
      class="button is-primary"
      buttonType="button"
      success=(action (set-flash-message 'OTP copied!'))
    }}
      Copy Encoded Operation Token
    {{/copy-button}}
    <button type="button" class="button" {{action 'clearToken'}}>
      Clear Token
    </button>
  </div>
{{else if (and generateAction (not started))}}
  <form {{action 'startGenerate' (hash otp=otp pgp_key=pgp_key) on="submit"}} id="shamir">
    <div class="box is-marginless is-shadowless">
      {{message-error errors=errors}}
      <p class="has-text-grey">
      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
      (OTP) or a PGP Key to encrypt the resultant operation token.
      </p>
      <div class="field box is-shadowless is-fullwidth is-marginless">
        <div class="level">
          <div class="level-left">
            <div class="b-checkbox">
              {{input type="checkbox"
              id="generateWithPGP"
              class="styled"
              checked=generateWithPGP
              }}
              <label for="generateWithPGP" class="is-label">
                PGP Encrypt Operation Token
              </label>
            </div>
          </div>
          {{#unless generateWithPGP}}
            <div class="level-right">
              <div class="control">
                <button type="button" class="button is-compact" {{action "generateOTP"}}>
                  Generate OTP
                </button>
              </div>
            </div>
          {{/unless}}
        </div>
      </div>
      {{#if generateWithPGP}}
        {{pgp-file index='' key=pgpKeyFile onChange=(action 'setKey')}}
      {{else}}
        {{#if otp}}
          <div class="message is-list">
            <div class="message-body">
              <h4 class="title is-7 is-uppercase is-marginless">
                One Time Password
              </h4>
              <code class="is-word-break">{{otp}}</code>
            </div>
          </div>
        {{/if}}
        <div class="field is-grouped">
          {{#if otp}}
            <div class="control">
              {{#copy-button
                clipboardText=otp
                class="button is-compact"
                buttonType="button"
                success=(action (set-flash-message 'OTP copied!'))
              }}
                Copy OTP
              {{/copy-button}}
            </div>
            <p class="has-text-grey help-text is-pulled-right">Make sure to save this value for later.</p>
          {{/if}}
        </div>
      {{/if}}
    </div>
    <div class="box is-marginless is-shadowless has-background-white-bis">
      <button type="submit" disabled={{and (not pgp_key) (not otp)}} class="button is-primary">
        Generate Operation Token
      </button>
    </div>
  </form>
{{else}}
  <form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">
    <div class="box is-marginless is-shadowless">
      {{message-error errors=errors}}
      <div class="box has-slim-padding is-shadowless is-marginless">
        {{#if hasBlock}}
          {{yield}}
        {{else}}
          <p> {{formText}} </p>
        {{/if}}
      </div>
      <div class="field">
        <label for="key" class="is-label">
          Key
        </label>
        <div class="control">
          {{input class="input"type="password" name="key" value=key data-test-shamir-input=true}}
        </div>
      </div>
    </div>
    <div class="box is-marginless is-shadowless has-background-white-bis">
      <div class="columns is-mobile">
        <div class="column is-narrow">
          <button
            type="submit"
            class="button is-primary"
            disabled={{loading}}
            data-test-shamir-submit=true
          >
            {{if generateAction "Generate Token" buttonText}}
          </button>
        </div>
        <div class="column is-flex-v-centered is-flex-end">
          {{#if (or started hasProgress)}}
            {{shamir-progress
              threshold=threshold
              progress=progress
            }}
          {{/if}}
        </div>
      </div>
    </div>
  </form>
{{/if}}