vault/ui/lib/config-ui/addon/components/messages/page/create-and-edit.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}
<Messages::TabPageHeader
  @authenticated={{@message.authenticated}}
  @pageTitle="{{if @message.isNew 'Create' 'Edit'}} message"
  @breadcrumbs={{@breadcrumbs}}
/>

<form id="message-create-edit-form" {{on "submit" (perform this.save)}} data-test-form="create-and-edit">
  <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode={{if @message.isNew "create" "edit"}} @noun="message" />
    <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />

    {{#each @message.formFields as |attr|}}
      <FormField @attr={{attr}} @model={{@message}} @modelValidations={{this.modelValidations}} class="has-bottom-margin-m">
        <Messages::MessageExpirationDateForm
          @message={{@message}}
          @attr={{attr}}
          @modelValidations={{this.modelValidations}}
        />
      </FormField>
      {{#if (and (eq attr.name "message") (not @message.authenticated))}}
        <Hds::Alert class="has-top-margin-negative-m has-bottom-margin-l" @type="compact" @color="highlight" as |A|>
          <A.Description data-test-unauth-info>Note: Do not include sensitive information in this message since users are
            unauthenticated at this stage.</A.Description>
        </Hds::Alert>
      {{/if}}
    {{/each}}

    <Hds::ButtonSet class="has-top-margin-s has-bottom-margin-m has-top-margin-xl">
      <Hds::Button
        @text="Preview"
        @color="tertiary"
        @icon="eye"
        {{on "click" this.displayPreviewModal}}
        data-test-button="preview"
      />

      <Hds::Button @text="{{if @message.isNew 'Create message' 'Save'}}" data-test-button="create-message" type="submit" />

      <Hds::Button @text="Cancel" @color="secondary" {{on "click" this.cancel}} />
    </Hds::ButtonSet>
  </div>
  {{#if this.showMultipleModalsMessage}}
    <Hds::Modal
      id="multiple-message-modal"
      @size="large"
      @color="warning"
      @onClose={{fn (mut this.showMultipleModalsMessage) false}}
      data-test-modal="multiple modal messages"
      as |M|
    >
      <M.Header data-test-modal-title="Warning: more than one modal">
        Warning: more than one modal
        {{if @message.authenticated "after the user logs in" "on the login page"}}
      </M.Header>
      <M.Body data-test-modal-body="Warning: more than one modal">
        You have an active modal configured
        {{if @message.authenticated "after the user logs in" "on the login page"}}
        and are trying to create another one. It is recommended to
        <b>avoid having more than one modal</b>
        at once as it can be intrusive for users. Would you like to continue creating your message? Click “Confirm” to
        continue.
      </M.Body>
      <M.Footer>
        <Hds::Button
          @text="Confirm"
          {{on "click" (fn this.updateUserConfirmation "confirmed")}}
          data-test-modal-button="confirm"
        />
        <Hds::Button
          @text="Cancel"
          @color="secondary"
          {{on "click" (fn this.updateUserConfirmation "cancel")}}
          data-test-modal-button="cancel"
        />
      </M.Footer>
    </Hds::Modal>
  {{/if}}
</form>

{{#if this.showMessagePreviewModal}}
  {{#if (eq @message.type "modal")}}
    <Hds::Modal
      id="message-modal-preview"
      @size="large"
      @color="warning"
      @onClose={{fn (mut this.showMessagePreviewModal) false}}
      data-test-modal="preview modal"
      as |M|
    >
      <M.Header data-test-modal-title={{@message.title}}>
        {{@message.title}}
      </M.Header>
      <M.Body data-test-modal-body={{@message.title}}>
        {{#each (new-line-split @message.message) as |msg|}}
          {{#if (eq msg "")}}
            <br />
          {{else}}
            <div>
              {{msg}}
            </div>
          {{/if}}
        {{/each}}
        {{#unless (is-empty-value @message.link)}}
          {{#each-in @message.link as |title href|}}
            <Hds::Link::Inline @icon="external-link" @isHrefExternal={{true}} @href={{href}}>{{title}}</Hds::Link::Inline>
          {{/each-in}}
        {{/unless}}
      </M.Body>
      <M.Footer as |F|>
        <Hds::Button @text="Confirm" {{on "click" F.close}} data-test-modal-button="Close" />
      </M.Footer>
    </Hds::Modal>
  {{else}}
    <Messages::PreviewImage @message={{@message}} @showMessagePreviewModal={{this.showMessagePreviewModal}} />
  {{/if}}
{{/if}}