vault/ui/app/components/regex-validator.hbs
claire bontempo 7f03393630
UI: Increase base font size (#23994)
* fix button padding

* rename spacing variables using numerical values

* fix toggle aligment

* remove unused toggle classes

* replace margin and padding with spacing vars

* increase base font size

* remove switch css, use toggle consistently

* remaining margin/padding size vars to spacing pixels

* add deprecated note, rever changes to size vars

* decrease console size

* remove function

* adjust card size for small selectable cards

* fix select to fit to content width

* fix toolbar-scroller height

* add changelog;

* fix checkbox styling
2023-11-13 21:29:39 +00:00

116 lines
3.4 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
{{#if @attr}}
<div class="field" data-test-regex-validator-pattern>
<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}}
<DocLink @path={{@attr.options.docLink}}>
See our documentation
</DocLink>
for help.
{{/if}}
</p>
{{/if}}
</div>
<div>
<Toggle
@name={{concat @attr.name "-validation-toggle"}}
@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}}
{{#if this.showTestValue}}
<div data-test-regex-validator-test-string>
<label for="regex-test-val" class="is-label">
{{this.testInputLabel}}
</label>
{{#if @testInputSubText}}
<p class="sub-text">{{@testInputSubText}}</p>
{{/if}}
<input
data-test-input="regex-test-val"
id="regex-test-val"
autocomplete="off"
spellcheck="false"
value={{this.testValue}}
{{on "change" this.updateTestValue}}
class="input {{if this.regexError 'has-error'}}"
/>
{{#if this.testValue}}
<div data-test-regex-validation-message>
{{#if (not @value)}}
<AlertInline
@type="warning"
@message={{concat
"A pattern has not been entered. Enter a pattern to check this "
(lowercase this.testInputLabel)
" against it."
}}
/>
{{else if this.regexError}}
<AlertInline @type="danger" @message="This test string does not match the pattern regex." />
{{else}}
<AlertInline
data-test-inline-success-message
@type="success"
@message="This test string matches the pattern regex."
/>
{{/if}}
</div>
{{/if}}
</div>
{{/if}}
{{#if @showGroups}}
<div class="has-top-margin-l">
<label class="is-label">Groups</label>
{{! check with design but should likely show a placeholder if testValue is blank }}
{{#if (and @value this.testValue (not this.regexError))}}
<div class="regex-group">
{{#each this.captureGroups as |group|}}
<span class="regex-group-position" data-test-regex-group-position={{group.position}}>
<span>{{group.position}}</span>
</span>
<span class="regex-group-value" data-test-regex-group-value={{group.position}}>
{{group.value}}
</span>
{{/each}}
</div>
{{else}}
<p class="sub-text" data-test-regex-validator-groups-placeholder>
Enter pattern and test string to show groupings.
</p>
{{/if}}
</div>
{{/if}}