mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-10-31 18:48:08 +00:00
bfe50eee84
* fixes masked-input component throwing error when there is no value * removes copy button assertions from masked input test * reverts masked input assertion removal and updates test selectors
83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import { debug } from '@ember/debug';
|
|
import { action } from '@ember/object';
|
|
import { guidFor } from '@ember/object/internals';
|
|
import Component from '@glimmer/component';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import autosize from 'autosize';
|
|
|
|
/**
|
|
* @module MaskedInput
|
|
* `MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
|
|
*
|
|
* @example
|
|
* <MaskedInput
|
|
* @value={{get @model attr.name}}
|
|
* @allowCopy={{true}}
|
|
* @allowDownload={{true}}
|
|
* @onChange={{this.handleChange}}
|
|
* @onKeyUp={{this.handleKeyUp}}
|
|
* />
|
|
*
|
|
* @param value {String} - The value to display in the input.
|
|
* @param name {String} - The key correlated to the value. Used for the download file name.
|
|
* @param [onChange=Callback] {Function|action} - Callback triggered on change, sends new value. Must set the value of @value
|
|
* @param [allowCopy=false] {bool} - Whether or not the input should render with a copy button.
|
|
* @param [allowDownload=false] {bool} - Renders a download button that prompts a confirmation modal to download the secret value
|
|
* @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
|
|
*
|
|
*/
|
|
export default class MaskedInputComponent extends Component {
|
|
textareaId = 'textarea-' + guidFor(this);
|
|
@tracked showValue = false;
|
|
@tracked modalOpen = false;
|
|
@tracked stringifyDownload = false;
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
if (!this.args.onChange && !this.args.displayOnly) {
|
|
debug('onChange is required for editable Masked Input!');
|
|
}
|
|
this.updateSize();
|
|
}
|
|
|
|
updateSize() {
|
|
autosize(document.getElementById(this.textareaId));
|
|
}
|
|
|
|
@action onChange(evt) {
|
|
const value = evt.target.value;
|
|
if (this.args.onChange) {
|
|
this.args.onChange(value);
|
|
}
|
|
}
|
|
|
|
@action handleKeyUp(name, evt) {
|
|
this.updateSize();
|
|
const { value } = evt.target;
|
|
if (this.args.onKeyUp) {
|
|
this.args.onKeyUp(name, value);
|
|
}
|
|
}
|
|
|
|
@action toggleMask() {
|
|
this.showValue = !this.showValue;
|
|
}
|
|
|
|
@action toggleStringifyDownload(event) {
|
|
this.stringifyDownload = event.target.checked;
|
|
}
|
|
|
|
get copyValue() {
|
|
// Value must be a string to be copied
|
|
const { value } = this.args;
|
|
if (!value || typeof value === 'string') return value;
|
|
if (typeof value === 'object') return JSON.stringify(value);
|
|
return value.toString();
|
|
}
|
|
}
|