open-vault/ui/app/templates/components/mount-backend-form.hbs

<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3" data-test-mount-form-header="true">
      {{#if this.showEnable}}
        {{#with (find-by "type" this.mountModel.type this.mountTypes) as |typeInfo|}}
          <Icon @name={{or typeInfo.glyph typeInfo.type}} class="has-text-grey-light" />

          {{#if (eq this.mountType "auth")}}
            {{concat "Enable " typeInfo.displayName " Authentication Method"}}
          {{else}}
            {{concat "Enable " typeInfo.displayName " Secrets Engine"}}
          {{/if}}
        {{/with}}
      {{else if (eq this.mountType "auth")}}
        Enable an Authentication Method
      {{else}}
        Enable a Secrets Engine
      {{/if}}
    </h1>
  </p.levelLeft>
</PageHeader>
<form {{action (perform this.mountBackend) on="submit"}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode="enable" @noun={{if (eq this.mountType "auth") "Auth Method" "Secret Engine"}} />
    <MessageError @model={{this.model}} @errorMessage={{this.errorMessage}} />
    {{#if this.showEnable}}
      <FormFieldGroups
        @model={{this.mountModel}}
        @onChange={{action "onTypeChange"}}
        @renderGroup="default"
        @validationMessages={{this.validationMessages}}
        @onKeyUp={{action "onKeyUp"}}
      />
      <FormFieldGroups @model={{this.mountModel}} @onChange={{action "onTypeChange"}} @renderGroup="Method Options" />
    {{else}}
      {{#each (array "generic" "cloud" "infra") as |category|}}
        <h3 class="title box-radio-header">
          {{capitalize category}}
        </h3>
        <div class="box-radio-container">
          {{#each (filter-by "category" category this.mountTypes) as |type|}}
            <BoxRadio
              @displayName={{type.displayName}}
              @type={{type.type}}
              @glyph={{or type.glyph type.type}}
              @groupValue={{this.mountModel.type}}
              @groupName="mount-type"
              @onRadioChange={{queue (action (mut this.mountModel.type)) (action "onTypeChange" "type")}}
              @disabled={{if type.requiredFeature (not (has-feature type.requiredFeature)) false}}
              @tooltipMessage={{if
                (or (eq type.type "transform") (eq type.type "kmip"))
                (concat
                  type.displayName
                  " is part of the Advanced Data Protection module, which is not included in your enterprise license."
                )
                "This secret engine is not included in your license."
              }}
            />
          {{/each}}
        </div>
      {{/each}}
    {{/if}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    {{#if this.showEnable}}
      <div class="control">
        <button
          type="submit"
          data-test-mount-submit="true"
          class="button is-primary {{if this.mountBackend.isRunning "loading"}}"
          disabled={{or this.mountBackend.isRunning this.isFormInvalid}}
        >
          {{#if (eq this.mountType "auth")}}
            Enable Method
          {{else}}
            Enable Engine
          {{/if}}
        </button>
      </div>
      <div class="control">
        <button data-test-mount-back type="button" class="button" onclick={{action "toggleShowEnable" false}}>
          Back
        </button>
      </div>
    {{else}}
      <button
        data-test-mount-next
        type="button"
        class="button is-primary"
        onclick={{action "toggleShowEnable" true}}
        disabled={{not this.mountModel.type}}
      >
        Next
      </button>
    {{/if}}
  </div>
</form>