open-vault/ui/app/templates/components/configure-aws-secret.hbs

<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
  <nav class="tabs">
    <ul>
      <LinkTo
        @route="vault.cluster.settings.configure-secret-backend"
        @model={{@model.id}}
        @query={{hash tab=""}}
        data-test-aws-link="root-creds"
      >
        Dynamic IAM root credentials
      </LinkTo>
      <LinkTo
        @route="vault.cluster.settings.configure-secret-backend"
        @model={{@model.id}}
        @query={{hash tab="leases"}}
        data-test-aws-link="leases"
      >
        Leases
      </LinkTo>
    </ul>
  </nav>
</div>

{{#if (eq @tab "leases")}}
  <form onsubmit={{action "saveLease" (hash lease=@model.lease lease_max=@model.leaseMax)}} data-test-aws-leases-form="true">
    <div class="box is-fullwidth is-shadowless is-marginless">
      <NamespaceReminder @mode="saved" @noun="configuration" />
      <MessageError @model={{@model}} />
      <p class="has-text-grey-dark">
        If you do not supply lease settings, we will use the default values in AWS.
      </p>
    </div>
    <TtlPicker @labelText="Lease" @initialValue={{@model.lease}} @onChange={{action (mut @model.lease)}} />
    <TtlPicker @labelText="Maximum Lease" @initialValue={{@model.leaseMax}} @onChange={{action (mut @model.leaseMax)}} />
    <div class="box is-bottomless is-fullwidth">
      <button data-test-aws-input="lease-save" type="submit" class="button is-primary">
        Save
      </button>
    </div>
  </form>
{{else}}
  <form
    onsubmit={{action
      "saveRootCreds"
      (hash access_key=@accessKey iam_endpoint=@iamEndpoint sts_endpoint=@stsEndpoint secret_key=@secretKey region=@region)
    }}
    data-test-aws-root-creds-form="true"
    aria-label="save root creds form"
  >
    <div class="box is-fullwidth is-shadowless is-marginless">
      <NamespaceReminder @mode="save" @noun="configuration" />
      <p class="has-text-grey-dark">
        Note: the client uses the official AWS SDK and will use the specified credentials, environment credentials, shared
        file credentials, or IAM role/ECS task credentials in that order.
      </p>
    </div>

    <div class="field">
      <label for="access" class="is-label">
        Access key
      </label>
      <div class="control">
        <Input
          @type="text"
          id="access"
          name="access"
          class="input"
          autocomplete="off"
          spellcheck="false"
          @value={{@accessKey}}
          data-test-aws-input="accessKey"
        />
      </div>
    </div>

    <div class="field">
      <label for="secret" class="is-label">
        Secret key
      </label>
      <div class="control">
        <Input
          @type="password"
          id="secret"
          name="secret"
          class="input"
          @value={{@secretKey}}
          data-test-aws-input="secretKey"
        />
      </div>
    </div>

    <ToggleButton @toggleAttr="showOptions" @toggleTarget={{this}} @openLabel="Hide options" @closedLabel="More options" />
    {{#if this.showOptions}}
      <div class="box is-marginless">
        <div class="field">
          <label for="region" class="is-label">
            Region
          </label>
          <div class="control is-expanded">
            <div class="select is-fullwidth">
              <select
                name="region"
                id="region"
                onchange={{action (mut @region) value="target.value"}}
                data-test-input="region"
              >
                <option value=""></option>
                {{#each (aws-regions) as |val|}}
                  <option>{{val}}</option>
                {{/each}}
              </select>
            </div>
          </div>
        </div>
        <div class="field">
          <label for="iam" class="is-label">
            IAM endpoint
          </label>
          <div class="control">
            <Input @type="text" id="iam" name="iam" class="input" @value={{@iamEndpoint}} />
          </div>
        </div>
        <div class="field">
          <label for="sts" class="is-label">
            STS endpoint
          </label>
          <div class="control">
            <Input @type="text" id="sts" name="sts" class="input" @value={{@stsEndpoint}} />
          </div>
        </div>
      </div>
    {{/if}}

    <div class="box is-bottomless is-fullwidth">
      <button data-test-aws-input="root-save" type="submit" class="button is-primary">
        Save
      </button>
    </div>
  </form>
{{/if}}