secret-create-or-update.hbs

{{#if (eq @mode "create")}}
  <form class="{{if @showAdvancedMode 'advanced-edit' 'simple-edit'}}" onsubmit={{action "createOrUpdateKey" @mode}}>
    <div class="field box is-fullwidth is-sideless is-marginless">
      <NamespaceReminder @mode="create" @noun="secret" />
      <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
      <label class="is-label" for="kv-key">Path for this secret</label>
      <p class="control is-expanded">
        <Input 
          @autocomplete="off" 
          @spellcheck="false" 
          data-test-secret-path="true"
          @id="kv-key" 
          class="input {{if (get this.validationMessages 'path') "has-error-border"}}"
          @value={{get @modelForData @modelForData.pathAttr}}
          {{on "keyup" (perform this.waitForKeyUp "path" value="target.value")}}
        />
      </p>
      {{#if (get this.validationMessages 'path')}}
        <AlertInline 
          @type="danger" 
          @message={{get this.validationMessages 'path'}} 
          @paddingTop=true
          @isMarginless=true
        />
      {{/if}}
      {{#if @modelForData.isFolder}}
        <p class="help is-danger">
        The secret path may not end in <code>/</code>
        </p>
      {{/if}}
    </div>
    {{#if @showAdvancedMode}}
      <div class="form-section">
        <JsonEditor
          @title={{if @isV2 "Version Data" "Secret Data"}}
          @value={{this.codemirrorString}}
          @valueUpdated={{action "codemirrorUpdated"}}
          @onFocusOut={{action "formatJSON"}}>
        </JsonEditor> 
      </div>
    {{else}}
      <div class="form-section">
        <label class="title is-5">
          Secret data
        </label>
      {{#each @secretData as |secret index|}}
        <div class="info-table-row">
          <div class="column is-one-quarter info-table-row-edit">
            <Input 
              data-test-secret-key={{true}}
              @value={{secret.name}}
              placeholder="key"
              @change={{action "handleChange"}}
              class="input"
              @autocomplete="off"
              @spellcheck="false"
            />
          </div>
          <div class="column info-table-row-edit">
            <MaskedInput
              @name={{secret.name}}
              @onKeyDown={{action "handleKeyDown"}}
              @onChange={{action "handleChange"}}
              @value={{secret.value}}
              data-test-secret-value="true"
            />
          </div>
          <div class="column is-narrow info-table-row-edit">
            {{#if (eq @secretData.length (inc index))}}
              <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
                Add
              </button>
            {{else}}
              <button
                class="button has-text-grey is-expanded is-icon"
                type="button"
                {{on "click" (fn this.deleteRow secret.name)}}
                aria-label="Delete row"
              >
                <Icon
                  @glyph="trash"
                  @size="l"
                  class="has-text-grey-light"
                />
              </button>
            {{/if}}
          </div>
        </div>
        {{#if this.validationMessages.key}}
          <AlertInline 
            @type="danger" 
            @message={{this.validationMessages.key}} 
            @paddingTop=true
            @isMarginless=true
          />
        {{/if}}
      {{/each}}
      </div>
    {{/if}}
  {{#if (and @isV2 @canCreateSecretMetadata) }}
    <ToggleButton 
      @class="is-block"
      @toggleAttr={{"showMetadata"}}
      @toggleTarget={{this}}
      @openLabel="Hide secret metadata"
      @closedLabel="Show secret metadata"
      data-test-show-metadata-toggle
    />
      {{#if this.showMetadata}}
        <SecretEditMetadata
          @model={{@model}}
          @mode="create"
          @updateValidationErrorCount={{action "updateValidationErrorCount"}}
        />
      {{/if}}
  {{/if}}
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
        type="submit"
        disabled={{or @buttonDisabled this.validationErrorCount this.error}}
        class="button is-primary"
        data-test-secret-save=true
        >
          Save
        </button>
      </div>
      <div class="control">
        <SecretLink @mode="list" @secret={{@model.parentKey}} @class="button">
          Cancel
        </SecretLink>
      </div>
    </div>
  </form>
{{/if}}

{{#if (eq @mode "edit")}}
  <form onsubmit={{action "createOrUpdateKey" "edit"}}>
    <div class="box is-sideless is-fullwidth is-marginless padding-top">
      {{#if @model.canReadSecretData}}
        <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
      {{else}}
        <AlertBanner
          @type="warning"
          @message="You do not have read permissions. If a secret exists here creating a new secret will overwrite it."
          data-test-warning-no-read-permissions
        />
      {{/if}}
      <NamespaceReminder @mode="edit" @noun="secret" />
      {{#if this.isCreateNewVersionFromOldVersion}}
        <div class="form-section">
          <AlertBanner
            @type="warning"
            @class="is-marginless"
            @message="You are creating a new version based on data from Version {{@model.selectedVersion.version}}. The current version for {{@model.id}} is Version {{@model.currentVersion}}."
          />
        </div>
      {{/if}}
      {{#if @showAdvancedMode}}
        <div class="form-section">
          <JsonEditor
            @title={{if @isV2 "Version Data" "Secret Data"}}
            @value={{this.codemirrorString}}
            @valueUpdated={{action "codemirrorUpdated"}}
            @onFocusOut={{action "formatJSON"}}>
          </JsonEditor> 
        </div>
      {{else}}
        <div class="form-section">
          <label class="title is-5">
            {{#if @isV2}}
              Version data
            {{else}}
              Secret data
            {{/if}}
          </label>
        {{#each @secretData as |secret index|}}
          <div class="columns is-variable has-no-shadow">
            <div class="column is-one-quarter ">
              <Input 
                data-test-secret-key={{true}}
                @value={{secret.name}}
                placeholder="key"
                @change={{action "handleChange"}}
                class="input"
                @autocomplete="off"
                @spellcheck="false"
              />
            </div>
            <div class="column">
              <MaskedInput
                @name={{secret.name}}
                @onKeyDown={{action "handleKeyDown"}}
                @onChange={{action "handleChange"}}
                @value={{secret.value}}
                data-test-secret-value="true"
              />
            </div>
            <div class="column is-narrow ">
              {{#if (eq @secretData.length (inc index))}}
                <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-secret-add-row="true">
                  Add
                </button>
              {{else}}
                <button
                  class="button has-text-grey is-expanded is-icon"
                  type="button"
                  {{action "deleteRow" secret.name}}
                  aria-label="Delete row"
                >
                  <Icon
                    @glyph="trash"
                    @size="l"
                    class="has-text-grey-light"
                  />
                </button>
              {{/if}}
            </div>
          </div>
        {{/each}}
        </div>
      {{/if}}
      </div>
    <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
      <div class="field is-grouped">
        <div class="control">
          <button
            data-test-secret-save
            type="submit"
            disabled={{or @buttonDisabled this.validationErrorCount}}
            class="button is-primary"
          >
            Save
          </button>
        </div>
        <div class="control">
          <SecretLink @mode="show" @secret={{@model.id}} @class="button" @queryParams={{query-params version=@modelForData.version}}>
            Cancel
          </SecretLink>
        </div>
      </div>
    </div>
  </form>
{{/if}}