/
b64-toggle.js
131 lines (118 loc) · 3.1 KB
/
b64-toggle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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() {
let val = this.value;
const isUTF8 = this.currentEncoding === UTF8;
if (!val) {
return;
}
let 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);
},
});