mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-11-01 02:57:59 +00:00
bcdff2e1a8
* 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
53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
import Component from '@ember/component';
|
|
import autosize from 'autosize';
|
|
import layout from '../templates/components/masked-input';
|
|
|
|
/**
|
|
* @module MaskedInput
|
|
* `MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
|
|
*
|
|
* @example
|
|
* <MaskedInput
|
|
* @value={{attr.options.defaultValue}}
|
|
* @allowCopy={{true}}
|
|
* @onChange={{action "someAction"}}
|
|
* />
|
|
*
|
|
* @param [value] {String} - The value to display in the input.
|
|
* @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button.
|
|
* @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
|
|
* @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes.
|
|
* @param [isCertificate=false] {bool} - If certificate display the label and icons differently.
|
|
*
|
|
*/
|
|
export default Component.extend({
|
|
layout,
|
|
value: null,
|
|
showValue: false,
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
autosize(this.element.querySelector('textarea'));
|
|
},
|
|
didUpdate() {
|
|
this._super(...arguments);
|
|
autosize.update(this.element.querySelector('textarea'));
|
|
},
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
autosize.destroy(this.element.querySelector('textarea'));
|
|
},
|
|
displayOnly: false,
|
|
onKeyDown() {},
|
|
onChange() {},
|
|
actions: {
|
|
toggleMask() {
|
|
this.toggleProperty('showValue');
|
|
},
|
|
updateValue(e) {
|
|
let value = e.target.value;
|
|
this.set('value', value);
|
|
this.onChange(value);
|
|
},
|
|
},
|
|
});
|