open-vault/ui/app/components/b64-toggle.js

137 lines
3.2 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import { equal } from '@ember/object/computed';
import { isBlank } from '@ember/utils';
import Component from '@ember/component';
import { set, computed } from '@ember/object';
import { encodeString, decodeString } from 'vault/utils/b64';
const B64 = 'base64';
const UTF8 = 'utf-8';
export default Component.extend({
tagName: 'button',
attributeBindings: ['type', 'data-test-transit-b64-toggle'],
type: 'button',
classNames: ['button', 'b64-toggle'],
classNameBindings: ['isInput:is-input:is-textarea'],
/*
* Whether or not the toggle is associated with an input.
* Also bound to `is-input` and `is-textarea` classes
* Defaults to true
*
* @public
* @type boolean
*/
isInput: true,
/*
* The value that will be mutated when the encoding is toggled
*
* @public
* @type string
*/
value: null,
/*
* The encoding of `value` when the component is initialized.
* Defaults to 'utf-8'.
* Possible values: 'utf-8' and 'base64'
*
* @public
* @type string
*/
initialEncoding: UTF8,
/*
* A cached version of value - used to determine if the input has changed since encoding.
*
* @private
* @type string
*/
_value: '',
/*
* The current encoding of `value`.
* Possible values: 'utf-8' and 'base64'
*
* @private
* @type string
*/
currentEncoding: '',
/*
* The encoding when we last mutated `value`.
* Possible values: 'utf-8' and 'base64'
*
* @private
* @type string
*/
lastEncoding: '',
/*
* Is the value known to be base64-encoded.
*
* @private
* @type boolean
*/
isBase64: equal('currentEncoding', B64),
/*
* Does the current value match the cached _value, i.e. has the input been mutated since we encoded.
*
* @private
* @type boolean
*/
valuesMatch: computed('value', '_value', function () {
const { value, _value } = this;
const anyBlank = isBlank(value) || isBlank(_value);
return !anyBlank && value === _value;
}),
init() {
this._super(...arguments);
const initial = this.initialEncoding;
set(this, 'currentEncoding', initial);
if (initial === B64) {
set(this, '_value', this.value);
set(this, 'lastEncoding', B64);
}
},
didReceiveAttrs() {
this._super();
// if there's no value, reset encoding
if (this.value === '') {
set(this, 'currentEncoding', UTF8);
return;
}
// the value has changed after we transformed it so we reset currentEncoding
if (this.isBase64 && !this.valuesMatch) {
set(this, 'currentEncoding', UTF8);
}
// the value changed back to one we previously had transformed
if (this.lastEncoding === B64 && this.valuesMatch) {
set(this, 'currentEncoding', B64);
}
},
click() {
const val = this.value;
const isUTF8 = this.currentEncoding === UTF8;
if (!val) {
return;
}
const newVal = isUTF8 ? encodeString(val) : decodeString(val);
const encoding = isUTF8 ? B64 : UTF8;
set(this, 'value', newVal);
set(this, '_value', newVal);
set(this, 'lastEncoding', encoding);
set(this, 'currentEncoding', encoding);
},
});