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}}
          <InfoTooltip>
            <span data-test-help-text>
              {{@attr.options.helpText}}
            </span>
          </InfoTooltip>
        {{/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}}