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')
+  }
+}

app/views/api_settings/index.html.erb

@@ -10,8 +10,11 @@
         <label for="api_key" class="text-sm font-semibold">X-Auth-Token</label>
         <div class="flex flex-col md:flex-row gap-4">
           <div class="flex w-full space-x-4">
-            <input id="api_key" type="text" value="<%= current_user.access_token.token %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
-            <%= render 'shared/clipboard_copy', icon: 'copy', text: current_user.access_token.token, class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
+            <% token = current_user.access_token.token %>
+            <masked-input class="block w-full" data-token="<%= token %>">
+              <input id="api_key" type="text" value="<%= token.sub(token[5..], '*' * token[5..].size) %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
+            </masked-input>
+            <%= render 'shared/clipboard_copy', icon: 'copy', text: token, class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
           </div>
           <%= button_to button_title(title: t('rotate'), disabled_with: t('rotate'), icon: svg_icon('reload', class: 'w-6 h-6')), settings_api_index_path, class: 'white-button w-full', data: { turbo_confirm: t('remove_existing_api_token_and_generated_a_new_one_are_you_sure_') } %>
         </div>

spec/system/api_settings_spec.rb

@@ -13,6 +13,7 @@ RSpec.describe 'API Settings' do
 
   it 'shows verify signed PDF page' do
     expect(page).to have_content('API')
-    expect(page).to have_field('X-Auth-Token', with: user.access_token.token)
+    token = user.access_token.token
+    expect(page).to have_field('X-Auth-Token', with: token.sub(token[5..], '*' * token[5..].size))
   end
 end