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

UI/obscure secret on input (#11284)

Browse Source 
* new font and add as font-family to be used in masked-input

* clean up logic

* refactor for displayOnly

* start cert masking

* work on certificates

* upload cert work

* fix global styling

* fix styling for class no longer used

* make mask by default and remove option

* glimmerize start and certificate on LDAP a file field

* glimmerize actions

* first part of glimmerizing text-file still need to do some clean up

* not doing awesome over here

* getting ready to un-glimmer

* unglimmerize

* remove placeholder based on conversations with design

* clean up text-file

* cleanup

* fix class bindings

* handle class binding

* set up for test

* fix elementId

* track down index

* update masked-input test

* add more to the masked-input test

* test-file test

* fix broken test

* clear old style

* clean up

* remove pgp key masked font, this really needs to be refactored to text-file component

* changelog

* cover other certificate view

* add allowCopy

* address some pr styling comments

* improve test coverage

* fix some issues

* add attr.options.masked
This commit is contained in:
Angel Garbarino
2021-04-22 08:58:37 -06:00
committed by GitHub
parent cba7abc64e
commit bcdff2e1a8
33 changed files with 333 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { render, focus } from '@ember/test-helpers';
import { create } from 'ember-cli-page-object';
import hbs from 'htmlbars-inline-precompile';
import maskedInput from 'vault/tests/pages/components/masked-input';
@@ -10,14 +10,9 @@ const component = create(maskedInput);
module('Integration | Component | masked input', function(hooks) {
setupRenderingTest(hooks);
const hasClass = (classString = '', classToFind) => {
return classString.split(' ').includes(classToFind);
};
test('it renders', async function(assert) {
await render(hbs`{{masked-input}}`);
assert.ok(hasClass(component.wrapperClass, 'masked'));
assert.dom('[data-test-masked-input]').exists('shows expiration beacon');
});
test('it renders a textarea', async function(assert) {
@@ -26,14 +21,17 @@ module('Integration | Component | masked input', function(hooks) {
assert.ok(component.textareaIsPresent);
});
test('it renders an input with type password when maskWhileTyping is true', async function(assert) {
await render(hbs`{{masked-input maskWhileTyping=true}}`);
assert.ok(component.inputIsPresent);
assert.equal(
this.element.querySelector('input').getAttribute('type'),
'password',
'default type equals password'
);
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) {
this.set('value', 'value');
await render(hbs`{{masked-input displayOnly=true value=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) {
@@ -54,36 +52,12 @@ module('Integration | Component | masked input', function(hooks) {
assert.notOk(component.copyButtonIsPresent);
});
test('it unmasks text on focus', async function(assert) {
this.set('value', 'value');
await render(hbs`{{masked-input value=value}}`);
assert.ok(hasClass(component.wrapperClass, 'masked'));
await component.focusField();
assert.notOk(hasClass(component.wrapperClass, 'masked'));
});
test('it remasks text on blur', async function(assert) {
this.set('value', 'value');
await render(hbs`{{masked-input value=value}}`);
assert.ok(hasClass(component.wrapperClass, 'masked'));
await component.focusField();
await component.blurField();
assert.ok(hasClass(component.wrapperClass, 'masked'));
});
test('it unmasks text when button is clicked', async function(assert) {
this.set('value', 'value');
await render(hbs`{{masked-input value=value}}`);
assert.ok(hasClass(component.wrapperClass, 'masked'));
await component.toggleMasked();
assert.notOk(hasClass(component.wrapperClass, 'masked'));
assert.dom('.masked-value').doesNotHaveClass('masked-font');
});
test('it remasks text when button is clicked', async function(assert) {
@@ -93,18 +67,25 @@ module('Integration | Component | masked input', function(hooks) {
await component.toggleMasked();
await component.toggleMasked();
assert.ok(hasClass(component.wrapperClass, 'masked'));
assert.dom('.masked-value').hasClass('masked-font');
});
test('it changes type to text when unmasked button is clicked', async function(assert) {
this.set('value', 'value');
await render(hbs`{{masked-input value=value maskWhileTyping=true}}`);
await component.toggleMasked();
test('it shortens long outputs when displayOnly and masked', async function(assert) {
this.set('value', '123456789-123456789-123456789');
await render(hbs`{{masked-input value=value displayOnly=true}}`);
let maskedValue = document.querySelector('.masked-value').innerText;
assert.equal(maskedValue.length, 20);
assert.equal(
this.element.querySelector('input').getAttribute('type'),
'text',
'when unmasked type changes to text'
);
await component.toggleMasked();
let unMaskedValue = document.querySelector('.masked-value').innerText;
assert.equal(unMaskedValue.length, this.value.length);
});
test('it does not unmask text on focus', async function(assert) {
this.set('value', '123456789-123456789-123456789');
await render(hbs`{{masked-input value=value}}`);
assert.dom('.masked-value').hasClass('masked-font');
await focus('.masked-value');
assert.dom('.masked-value').hasClass('masked-font');
});
});