scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-11-02 03:27:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: glimmerize masked input (#20431)

Browse Source 
* Glimmerize masked-input

* Update secret-create-or-update to change masked-input value

* Use maskedInput for ssh configure privateKey

* Add download button to masked input and v2 secrets. Resolves #6364

* Add changelog
This commit is contained in:
Chelsea Shaw
2023-05-01 11:43:05 -05:00
committed by GitHub
parent a7071ae14f
commit b5e82f5ad1
13 changed files with 158 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
ui/tests/integration/components/masked-input-test.js
View File

@@ -16,68 +16,40 @@ module('Integration | Component | masked input', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`{{masked-input}}`);
assert.dom('[data-test-masked-input]').exists('shows expiration beacon');
});
test('it renders a textarea', async function (assert) {
await render(hbs`{{masked-input}}`);
await render(hbs`<MaskedInput />`);
assert.dom('[data-test-masked-input]').exists('shows masked input');
assert.ok(component.textareaIsPresent);
assert.dom('[data-test-textarea]').hasClass('masked-font', 'it renders an input with obscure font');
assert.notOk(component.copyButtonIsPresent, 'does not render copy button by default');
assert.notOk(component.downloadButtonIsPresent, 'does not render download button by default');
await component.toggleMasked();
assert.dom('.masked-value').doesNotHaveClass('masked-font', 'it unmasks when show button is clicked');
await component.toggleMasked();
assert.dom('.masked-value').hasClass('masked-font', 'it remasks text when button is clicked');
});
test('it renders an input with obscure font', async function (assert) {
await render(hbs`{{masked-input}}`);
assert.dom('[data-test-textarea]').hasClass('masked-font', 'loading class with correct font');
});
test('it renders obscure font when displayOnly', async function (assert) {
test('it renders correctly when displayOnly', async function (assert) {
this.set('value', 'value');
await render(hbs`{{masked-input displayOnly=true value=this.value}}`);
await render(hbs`<MaskedInput @displayOnly={{true}} @value={{this.value}} />`);
assert.dom('.masked-value').hasClass('masked-font', 'loading class with correct font');
});
test('it does not render a textarea when displayOnly is true', async function (assert) {
await render(hbs`{{masked-input displayOnly=true}}`);
assert.notOk(component.textareaIsPresent);
assert.dom('.masked-value').hasClass('masked-font', 'value has obscured font');
assert.notOk(component.textareaIsPresent, 'it does not render a textarea when displayOnly is true');
});
test('it renders a copy button when allowCopy is true', async function (assert) {
await render(hbs`{{masked-input allowCopy=true}}`);
await render(hbs`<MaskedInput @allowCopy={{true}} />`);
assert.ok(component.copyButtonIsPresent);
});
test('it does not render a copy button when allowCopy is false', async function (assert) {
await render(hbs`{{masked-input allowCopy=false}}`);
assert.notOk(component.copyButtonIsPresent);
});
test('it unmasks text when button is clicked', async function (assert) {
this.set('value', 'value');
await render(hbs`{{masked-input value=this.value}}`);
await component.toggleMasked();
assert.dom('.masked-value').doesNotHaveClass('masked-font');
});
test('it remasks text when button is clicked', async function (assert) {
this.set('value', 'value');
await render(hbs`{{masked-input value=this.value}}`);
await component.toggleMasked();
await component.toggleMasked();
assert.dom('.masked-value').hasClass('masked-font');
test('it renders a download button when allowDownload is true', async function (assert) {
await render(hbs`<MaskedInput @allowDownload={{true}} />`);
assert.ok(component.downloadButtonIsPresent);
});
test('it shortens all outputs when displayOnly and masked', async function (assert) {
this.set('value', '123456789-123456789-123456789');
await render(hbs`{{masked-input value=this.value displayOnly=true}}`);
await render(hbs`<MaskedInput @value={{this.value}} @displayOnly={{true}} />`);
const maskedValue = document.querySelector('.masked-value').innerText;
assert.strictEqual(maskedValue.length, 11);
@@ -88,7 +60,7 @@ module('Integration | Component | masked input', function (hooks) {
test('it does not unmask text on focus', async function (assert) {
this.set('value', '123456789-123456789-123456789');
await render(hbs`{{masked-input value=this.value}}`);
await render(hbs`<MaskedInput @value={{this.value}} />`);
assert.dom('.masked-value').hasClass('masked-font');
await focus('.masked-value');
assert.dom('.masked-value').hasClass('masked-font');
@@ -96,7 +68,7 @@ module('Integration | Component | masked input', function (hooks) {
test('it does not remove value on tab', async function (assert) {
this.set('value', 'hello');
await render(hbs`{{masked-input value=this.value}}`);
await render(hbs`<MaskedInput @value={{this.value}} />`);
await triggerKeyEvent('[data-test-textarea]', 'keydown', 9);
await component.toggleMasked();
const unMaskedValue = document.querySelector('.masked-value').value;