[UI] - Glimmerize b64-toggle component

ui/app/components/b64-toggle.hbs

@@ -3,8 +3,15 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-{{#if this.isBase64}}
-  Decode from base64
-{{else}}
-  Encode to base64
-{{/if}}
+<button
+  type="button"
+  class="button b64-toggle {{if @isInput 'is-input' 'is-textarea'}}"
+  {{on "click" this.handleClick}}
+  ...attributes
+>
+  {{#if this.isBase64}}
+    Decode from base64
+  {{else}}
+    Encode to base64
+  {{/if}}
+</button>

ui/app/components/b64-toggle.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { encodeString, decodeString } from 'core/utils/b64';
+
+const B64 = 'base64';
+const UTF8 = 'utf-8';
+
+type EncodingType = 'base64' | 'utf-8';
+
+interface B64ToggleSignature {
+  Args: {
+    /**
+     * The value that will be mutated when the encoding is toggled
+     */
+    value: string;
+    /**
+     * The encoding of `value` when the component is initialized.
+     * Defaults to 'utf-8'.
+     * Possible values: 'utf-8' and 'base64'
+     */
+    initialEncoding?: EncodingType;
+    /**
+     * Whether or not the toggle is associated with an input.
+     * Also bound to `is-input` and `is-textarea` classes
+     * Defaults to true
+     */
+    isInput?: boolean;
+    /**
+     * Callback to update the value when encoding is toggled
+     */
+    onUpdate?: (newValue: string) => void;
+  };
+  Element: HTMLButtonElement;
+}
+
+/**
+ * @module B64Toggle
+ * B64Toggle component provides base64 encoding/decoding functionality.
+ * It toggles between UTF-8 and base64 encoding of a value.
+ *
+ * @example
+ * <B64Toggle @value={{this.data}} @initialEncoding="utf-8" @isInput={{true}} />
+ */
+export default class B64Toggle extends Component<B64ToggleSignature> {
+  @tracked _value = '';
+  @tracked _b64Value = '';
+
+  get valuesMatch(): boolean {
+    if (isBlank(this.args.value) || isBlank(this._b64Value)) {
+      return false;
+    }
+    return this.args.value === this._b64Value;
+  }
+
+  get currentEncoding(): EncodingType {
+    return isBlank(this.args.value) ? UTF8 : this.valuesMatch ? B64 : UTF8;
+  }
+
+  constructor(owner: unknown, args: B64ToggleSignature['Args']) {
+    super(owner, args);
+
+    if (this.initialEncoding) {
+      if (this.initialEncoding === B64) {
+        this._b64Value = this.args.value;
+      }
+    }
+  }
+
+  get initialEncoding(): EncodingType {
+    return this.args.initialEncoding || UTF8;
+  }
+
+  /**
+   * Is the value known to be base64-encoded.
+   */
+  get isBase64(): boolean {
+    return this.currentEncoding === B64;
+  }
+
+  @action
+  handleClick(): void {
+    const val = this.args.value;
+    const isUTF8 = this.currentEncoding === UTF8;
+    if (!val) {
+      return;
+    }
+    const newVal = isUTF8 ? encodeString(val) : decodeString(val);
+
+    // if the current value is UTF-8, store the base64 for the newVal which is base64
+    if (isUTF8) {
+      this._b64Value = newVal;
+    }
+    // Update internal state
+    this._value = newVal;
+
+    // Call the update callback if provided
+    if (this.args.onUpdate) {
+      this.args.onUpdate(newVal);
+    }
+  }
+}

ui/app/components/tools/hash.hbs

@@ -43,7 +43,12 @@
             class="textarea"
             data-test-tools-input="hash-input"
           ></textarea>
-          <B64Toggle @value={{this.hashData}} @isInput={{false}} data-test-tools-input="b64-toggle" />
+          <B64Toggle
+            @value={{this.hashData}}
+            @isInput={{false}}
+            @onUpdate={{fn (mut this.hashData)}}
+            data-test-tools-input="b64-toggle"
+          />
         </div>
       </div>
       <div class="field is-horizontal">

ui/app/components/transit-key-action/datakey.hbs

@@ -36,7 +36,7 @@
             <Input @type="text" id="context" @value={{@context}} class="input" data-test-transit-input="context" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
+            <B64Toggle @value={{@context}} @onUpdate={{@updateContext}} data-test-transit-b64-toggle="context" />
           </div>
         </div>
       </div>
@@ -49,7 +49,7 @@
             <Input @type="text" id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
+            <B64Toggle @value={{@nonce}} @onUpdate={{@updateNonce}} data-test-transit-b64-toggle="nonce" />
           </div>
         </div>
       </div>

ui/app/components/transit-key-action/decrypt.hbs

@@ -31,7 +31,7 @@
             <Input @type="text" id="context" @value={{@context}} class="input" data-test-transit-input="context" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
+            <B64Toggle @value={{@context}} @onUpdate={{@updateContext}} data-test-transit-b64-toggle="context" />
           </div>
         </div>
       </div>
@@ -65,7 +65,7 @@
             <Input @type="text" id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
+            <B64Toggle @value={{@nonce}} @onUpdate={{@updateNonce}} data-test-transit-b64-toggle="nonce" />
           </div>
         </div>
       </div>

ui/app/components/transit-key-action/encrypt.hbs

@@ -50,7 +50,7 @@
             <Input @type="text" id="context" @value={{@context}} class="input" data-test-transit-input="context" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
+            <B64Toggle @value={{@context}} @onUpdate={{@updateContext}} data-test-transit-b64-toggle="context" />
           </div>
         </div>
       </div>
@@ -83,7 +83,7 @@
             <label for="nonce" class="is-label">Nonce</label>
           </div>
           <div class="level-right">
-            <B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
+            <B64Toggle @value={{@nonce}} @onUpdate={{@updateNonce}} data-test-transit-b64-toggle="nonce" />
           </div>
         </div>
         <div class="control">

ui/app/components/transit-key-action/rewrap.hbs

@@ -45,7 +45,7 @@
             <Input @type="text" id="context" @value={{@context}} class="input" data-test-transit-input="context" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
+            <B64Toggle @value={{@context}} @onUpdate={{@updateContext}} data-test-transit-b64-toggle="context" />
           </div>
         </div>
       </div>
@@ -94,7 +94,7 @@
             <Input @type="text" id="nonce" @value={{@nonce}} class="input" data-test-transit-input="nonce" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@nonce}} @data-test-transit-b64-toggle="nonce" />
+            <B64Toggle @value={{@nonce}} @onUpdate={{@updateNonce}} data-test-transit-b64-toggle="nonce" />
           </div>
         </div>
       </div>

ui/app/components/transit-key-action/sign.hbs

@@ -62,7 +62,7 @@
             <Input @type="text" id="context" @value={{@context}} class="input" data-test-transit-input="context" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
+            <B64Toggle @value={{@context}} @onUpdate={{@updateContext}} data-test-transit-b64-toggle="context" />
           </div>
         </div>
       </div>

ui/app/components/transit-key-action/verify.hbs

@@ -57,7 +57,7 @@
             <Input @type="text" id="context" @value={{@context}} class="input" data-test-transit-input="context" />
           </div>
           <div class="control">
-            <B64Toggle @value={{@context}} @data-test-transit-b64-toggle="context" />
+            <B64Toggle @value={{@context}} @onUpdate={{@updateContext}} data-test-transit-b64-toggle="context" />
           </div>
         </div>
       </div>