open-vault/ui/app/templates/components/transit-key-action/sign.hbs

<form {{action 'doSubmit' (hash input=input hash_algorithm=hash_algorithm signature_algorithm=signature_algorithm key_version=key_version context=context prehashed=prehashed encodedBase64=encodedBase64) on="submit"}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode="perform" @noun="signing" />
    <div class="content">
      <p>Return the cryptographic signature of the given data using <code>{{key.name}}</code> as the encryption key and the specified hash algorithm.</p>
    </div>
    {{key-version-select
      key=key
      onVersionChange=(action (mut key_version))
      key_version=key_version
    }}
    <div class="field">
      <label for="input" class="is-label">
        Input
      </label>
      <div class="control is-relative">
        {{ivy-codemirror
            value=input
            valueUpdated=(action (mut input))
            options=(hash
              lineNumbers=true
              tabSize=2
              mode='ruby'
              theme='hashi'
            )
            data-test-transit-input="input"
          }}
      </div>
    </div>
    <div class="field">
      {{input type="checkbox" id="encodedBase64" checked=encodedBase64 data-test-transit-input="encodedBase64"}}
      <label for="encodedBase64">This data is already encoded in base64</label>
    </div>
    {{#if key.derived}}
      <div class="field">
        <label for="context" class="is-label">
          Context
        </label>
        <div class="field has-addons">
          <div class="control">
            {{input type="text" id="context" value=context class="input" data-test-transit-input="context"}}
          </div>
          <div class="control">
            {{b64-toggle value=context data-test-transit-b64-toggle="context"}}
          </div>
        </div>
      </div>
    {{/if}}
    <div class="field">
      <div class="level is-mobile">
        <div class="level-left">
          <label for="hash_algorithm" class="is-label">Hash Algorithm</label>
        </div>
        <div class="level-right">
          <div class="control is-flex">
            {{input  id="prehashed" type="checkbox" name="prehashed" class="switch is-rounded is-success is-small" checked=prehashed }}
            <label for="prehashed">Prehashed</label>
          </div>
        </div>
      </div>
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            name="hash_algorithm"
            id="hash_algorithm"
            onchange={{action (mut hash_algorithm) value="target.value"}}
            >
            {{#each (sha2-digest-sizes) as |algo|}}
              <option selected={{if hash_algorithm (eq hash_algorithm algo) (eq algo 'sha2-256')}} value={{algo}}>
                {{algo}}
              </option>
            {{/each}}
          </select>
        </div>
      </div>
    </div>
    {{#if (or (eq key.type 'rsa-2048') (eq key.type 'rsa-3072') (eq key.type 'rsa-4096'))}}
      <div class="field">
        <label for="signature_algorithm" class="is-label">Signature Algorithm</label>
        <div class="control is-expanded">
          <div class="select is-fullwidth">
            <select
              name="signature_algorithm"
              id="signature_algorithm"
              data-test-signature-algorithm="true"
              onchange={{action (mut signature_algorithm) value="target.value"}}
              >
              {{#each (array 'pss' 'pkcs1v15') as |sigAlgo|}}
                <option selected={{if signature_algorithm (eq signature_algorithm sigAlgo) (eq sigAlgo 'pss')}} value={{sigAlgo}}>
                  {{sigAlgo}}
                </option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>
    {{/if}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button type="submit" disabled={{loading}} class="button is-primary {{if loading 'is-loading'}}">
        Sign
      </button>
    </div>
  </div>
</form>
<Modal
  @title="Copy your signature"
  @onClose={{action (mut isModalActive) false}}
  @isActive={{isModalActive}}
  data-test-sign-modal>
  <section class="modal-card-body">
    <div class="box is-shadowless is-fullwidth is-sideless">
      <h2 class="title is-6">Signature</h2>
      <div class="copy-text level">
        <code class="level-left" data-test-encrypted-value="signature">{{signature}}</code>
        <CopyButton
          class="button is-compact is-transparent level-right"
          data-test-button="modal-copy"
          @clipboardText={{signature}}
          @buttonType="button"
          @success={{action (set-flash-message 'Signature copied!')}}>
          <Icon @glyph="copy-action" aria-label="Copy" />
        </CopyButton>
      </div>
    </div>
  </section>
  <footer class="modal-card-foot">
    <CopyButton
      class="button is-primary copy-close"
      data-test-button="modal-copy-close"
      @clipboardText={{signature}}
      @buttonType="button"
      @success={{action "toggleModal" "Signature copied!"}}>
      Copy &amp; Close
    </CopyButton>
  </footer>
</Modal>