open-vault/ui/app/components/regex-validator.hbs

<div class="field">
  <div class="regex-label-wrapper">
    <div class="regex-label">
      <label for="{{@attr.name}}" class="is-label">
        {{@labelString}}
        {{#if @attr.options.helpText}}
          {{#info-tooltip}}
            <span data-test-help-text>
              {{@attr.options.helpText}}
            </span>
          {{/info-tooltip}}
        {{/if}}
      </label>
      {{#if @attr.options.subText}}
        <p class="sub-text">{{@attr.options.subText}} {{#if @attr.options.docLink}}<a href="{{@attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
      {{/if}}
    </div>
    <div>
      <Toggle
        @name={{concat @attr.name "-validation-toggle"}}
        @status="success"
        @size="small"
        @checked={{this.showTestValue}}
        @onChange={{this.toggleTestValue}}
        >
        <span class="has-text-grey">Validation</span>
      </Toggle>
    </div>
  </div>
  <input
    id={{@attr.name}}
    data-test-input={{@attr.name}}
    autocomplete="off"
    spellcheck="false"
    {{on 'change' @onChange}}
    value={{@value}}
    class="input"
  />
</div>
{{#if this.showTestValue}}
<div data-test-regex-validator-test-string>
  <label for="{{@attr.name}}" class="is-label">
    Test string
  </label>
  <input
    data-test-input={{concat @attr.name "-testval"}}
    id={{concat @attr.name "-testval"}}
    autocomplete="off"
    spellcheck="false"
    value={{this.testValue}}
    {{on 'change' this.updateTestValue}}
    class="input {{if this.regexError 'has-error'}}" />

  {{#if (and this.testValue @value)}}
    <div data-test-regex-validation-message>
      {{#if this.regexError}}
        <AlertInline @type="danger" @message="Your regex doesn't match the subject string" />
      {{else}}
        <div class="message-inline">
          <Icon @name="check-circle-fill" class="has-text-success" />
          <p data-test-inline-success-message>Your regex matches the subject string</p>
        </div>
      {{/if}}
    </div>
  {{/if}}
</div>
{{/if}}