reveal API key with user password

app/controllers/reveal_access_token_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class RevealAccessTokenController < ApplicationController
+  def show
+    authorize!(:manage, current_user.access_token)
+  end
+
+  def create
+    authorize!(:manage, current_user.access_token)
+
+    if current_user.valid_password?(params[:password])
+      render turbo_stream: turbo_stream.replace(:access_token_container,
+                                                partial: 'reveal_access_token/access_token',
+                                                locals: { token: current_user.access_token.token })
+    else
+      render turbo_stream: turbo_stream.replace(:modal, template: 'reveal_access_token/show',
+                                                        locals: { error_message: I18n.t('wrong_password') }),
+             status: :unprocessable_content
+    end
+  end
+end

app/views/api_settings/index.html.erb

@@ -11,10 +11,21 @@
         <div class="flex flex-col md:flex-row gap-4">
           <div class="flex w-full space-x-4">
             <% token = current_user.access_token.token %>
-            <masked-input class="block w-full" data-token="<%= token %>">
+            <% obscured_token = current_user.access_token.token.sub(token[5..], '*' * token[5..].size) %>
-              <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>
+            <% if current_account.testing? %>
-            </masked-input>
+              <masked-input class="block w-full" data-token="<%= token %>">
-            <%= 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') %>
+                <input id="api_key" type="text" value="<%= obscured_token %>" 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') %>
+            <% else %>
+              <a id="access_token_container" href="<%= settings_reveal_access_token_path %>" data-turbo-frame="modal" class="flex w-full space-x-4">
+                <input id="api_key" type="text" value="<%= obscured_token %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
+                <div class="base-button">
+                  <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+                  <span class="hidden md:inline"><%= t('copy') %></span>
+                </div>
+              </a>
+            <% end %>
           </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>

app/views/reveal_access_token/_access_token.html.erb

@@ -0,0 +1,2 @@
+<input id="api_key" type="text" value="<%= token %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
+<%= 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') %>

app/views/reveal_access_token/show.html.erb

@@ -0,0 +1,14 @@
+<%= render 'shared/turbo_modal', title: t('reveal_api_key') do %>
+  <%= form_tag settings_reveal_access_token_path, enctype: 'multipart/form-data', data: { turbo_frame: :_top } do %>
+    <div class="form-control">
+      <%= label_tag :password, t('enter_your_password_to_reveal_the_api_key'), class: 'label' %>
+      <%= password_field_tag :password, nil, class: 'base-input', autocomplete: 'current-password', required: true, autofocus: true, placeholder: t('password') %>
+      <% if local_assigns[:error_message].present? %>
+        <span class="label-text-alt text-red-400 mt-1"><%= local_assigns[:error_message] %></span>
+      <% end %>
+    </div>
+    <div class="form-control mt-4">
+      <%= submit_tag t('submit'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>

config/locales/i18n.yml

@@ -798,6 +798,9 @@ en: &en
   template_name_has_been_completed_by_submitters_html: '"<strong>{template.name}</strong>" has been completed by <strong>{submission.submitters}</strong>'
   please_check_the_copy_of_your_template_name_in_the_email_attachments_html: 'Please check the copy of your "<strong>{template.name}</strong>" in the email attachments.'
   you_have_been_invited_to_sign_the_template_name_html: 'You have been invited to sign the "<strong>{template.name}</strong>".'
+  reveal_api_key: Reveal API Key
+  enter_your_password_to_reveal_the_api_key: Enter your password to reveal the API key
+  wrong_password: Wrong password.
   submission_sources:
     api: API
     bulk: Bulk Send
@@ -1682,6 +1685,9 @@ es: &es
   template_name_has_been_completed_by_submitters_html: '"<strong>{template.name}</strong>" ha sido completado por <strong>{submission.submitters}</strong>'
   please_check_the_copy_of_your_template_name_in_the_email_attachments_html: 'Por favor, revisa la copia de tu "<strong>{template.name}</strong>" en los archivos adjuntos del correo electrónico.'
   you_have_been_invited_to_sign_the_template_name_html: 'Has sido invitado a firmar el "<strong>{template.name}</strong>".'
+  reveal_api_key: Revelar clave API
+  enter_your_password_to_reveal_the_api_key: Introduce tu contraseña para revelar la clave API
+  wrong_password: Contraseña incorrecta.
   submission_sources:
     api: API
     bulk: Envío masivo
@@ -2566,6 +2572,9 @@ it: &it
   template_name_has_been_completed_by_submitters_html: '"<strong>{template.name}</strong>" è stato completato da <strong>{submission.submitters}</strong>'
   please_check_the_copy_of_your_template_name_in_the_email_attachments_html: 'Per favore, controlla la copia del tuo "<strong>{template.name}</strong>" negli allegati dell''email.'
   you_have_been_invited_to_sign_the_template_name_html: 'Sei stato invitato a firmare il "<strong>{template.name}</strong>".'
+  reveal_api_key: Mostra chiave API
+  enter_your_password_to_reveal_the_api_key: Inserisci la tua password per mostrare la chiave API
+  wrong_password: Password errata.
   submission_sources:
     api: API
     bulk: Invio massivo
@@ -3453,6 +3462,9 @@ fr: &fr
   template_name_has_been_completed_by_submitters_html: '"<strong>{template.name}</strong>" a été complété par <strong>{submission.submitters}</strong>'
   please_check_the_copy_of_your_template_name_in_the_email_attachments_html: 'Veuillez vérifier la copie de votre "<strong>{template.name}</strong>" dans les pièces jointes de l’e-mail.'
   you_have_been_invited_to_sign_the_template_name_html: 'Vous avez été invité à signer le "<strong>{template.name}</strong>".'
+  reveal_api_key: Révéler la clé API
+  enter_your_password_to_reveal_the_api_key: Entrez votre mot de passe pour révéler la clé API
+  wrong_password: Mot de passe incorrect.
   submission_sources:
     api: API
     bulk: Envoi en masse
@@ -4338,6 +4350,9 @@ pt: &pt
   template_name_has_been_completed_by_submitters_html: '"<strong>{template.name}</strong>" foi concluído por <strong>{submission.submitters}</strong>'
   please_check_the_copy_of_your_template_name_in_the_email_attachments_html: 'Por favor, verifique a cópia do seu "<strong>{template.name}</strong>" nos anexos do e-mail.'
   you_have_been_invited_to_sign_the_template_name_html: 'Você foi convidado a assinar o "<strong>{template.name}</strong>".'
+  reveal_api_key: Revelar chave API
+  enter_your_password_to_reveal_the_api_key: Insira sua senha para revelar a chave API
+  wrong_password: Senha incorreta.
   submission_sources:
     api: API
     bulk: Envio em massa
@@ -5223,6 +5238,9 @@ de: &de
   template_name_has_been_completed_by_submitters_html: '"<strong>{template.name}</strong>" wurde von <strong>{submission.submitters}</strong> abgeschlossen'
   please_check_the_copy_of_your_template_name_in_the_email_attachments_html: 'Bitte prüfen Sie die Kopie Ihres "<strong>{template.name}</strong>" in den E-Mail-Anhängen.'
   you_have_been_invited_to_sign_the_template_name_html: 'Du wurdest eingeladen, "<strong>{template.name}</strong>" zu unterschreiben.'
+  reveal_api_key: API-Schlüssel anzeigen
+  enter_your_password_to_reveal_the_api_key: Gib dein Passwort ein, um den API-Schlüssel anzuzeigen
+  wrong_password: Falsches Passwort.
   submission_sources:
     api: API
     bulk: Massenversand

config/routes.rb

@@ -179,6 +179,7 @@ Rails.application.routes.draw do
                                   defaults: { status: :integration }
     resource :personalization, only: %i[show create], controller: 'personalization_settings'
     resources :api, only: %i[index create], controller: 'api_settings'
+    resource :reveal_access_token, only: %i[show create], controller: 'reveal_access_token'
     resources :webhooks, only: %i[index show new create update destroy], controller: 'webhook_settings' do
       post :resend
 

spec/system/api_settings_spec.rb

@@ -14,4 +14,26 @@ RSpec.describe 'API Settings' do
     token = user.access_token.token
     expect(page).to have_field('X-Auth-Token', with: token.sub(token[5..], '*' * token[5..].size))
   end
+
+  it 'reveals API key with correct password' do
+    find('#api_key').click
+
+    within('.modal') do
+      fill_in 'password', with: user.password
+      click_button 'Submit'
+    end
+
+    expect(page).to have_field('X-Auth-Token', with: user.access_token.token)
+  end
+
+  it 'shows error with incorrect password' do
+    find('#api_key').click
+
+    within('.modal') do
+      fill_in 'password', with: 'wrong_password'
+      click_button 'Submit'
+    end
+
+    expect(page).to have_content('Wrong password')
+  end
 end