vault/ui/app/templates/components/tool-random.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Random Bytes
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if @random_bytes}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <label for="rand" class="is-label">Random bytes</label>
    <textarea readonly class="textarea" id="rand" data-test-tools-input="random-bytes">{{@random_bytes}}</textarea>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <Hds::Copy::Button @text="Copy" @textToCopy={{@random_bytes}} class="primary" />
    </div>
    <div class="control">
      <Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />
    </div>
  </div>
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <MessageError @errors={{@errors}} />
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
          <label for="bytes" class="is-label">
            Number of bytes
          </label>
          <div class="control">
            <Input id="bytes" class="input" @value={{@bytes}} data-test-tools-input="bytes" />
          </div>
        </div>
        <div class="field">
          <label for="format" class="is-label">
            Output format
          </label>
          <div class="control is-expanded">
            <div class="select is-fullwidth">
              <select name="format" id="format" onchange={{action (mut @format) value="target.value"}}>
                {{#each (array "base64" "hex") as |formatOption|}}
                  <option selected={{if @format (eq @format formatOption)}} value={{formatOption}}>
                    {{formatOption}}
                  </option>
                {{/each}}
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <Hds::Button @text="Generate" type="submit" data-test-tools-submit="true" />
    </div>
  </div>
{{/if}}