mask key

app/javascript/application.js

@@ -29,6 +29,7 @@ import SearchInput from './elements/search_input'
 import ToggleAttribute from './elements/toggle_attribute'
 import LinkedInput from './elements/linked_input'
 import CheckboxGroup from './elements/checkbox_group'
+import MaskedInput from './elements/masked_input'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -95,6 +96,7 @@ safeRegisterElement('search-input', SearchInput)
 safeRegisterElement('toggle-attribute', ToggleAttribute)
 safeRegisterElement('linked-input', LinkedInput)
 safeRegisterElement('checkbox-group', CheckboxGroup)
+safeRegisterElement('masked-input', MaskedInput)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/masked_input.js

@@ -0,0 +1,18 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const maskedToken = this.input.value
+
+    this.input.addEventListener('focus', () => {
+      this.input.value = this.dataset.token
+      this.input.select()
+    })
+
+    this.input.addEventListener('focusout', () => {
+      this.input.value = maskedToken
+    })
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+}